/* ============================================================================ RAGHEB ALKASER — PORTFOLIO STYLESHEET ---------------------------------------------------------------------------- Structure of this file, top to bottom: 1. Theme Variables & Global Reset 2. Site Navigation (desktop + mobile drawer) 3. Language Dropdown 4. Hero / Profile Card 5. Skills Section (+ its entrance animation) 6. Timeline (wave, date pills, "Future" tooltip) 7. Story Card (the expanded year detail view) 8. Shared Entrance Animations & Keyframes 9. Contact Section 10. Footer 11. Mobile Responsive Overrides (drawer nav + fluid timeline) 12. General Responsive Overrides (everything else) ============================================================================ */ /* ============================================================================ 1. THEME VARIABLES & GLOBAL RESET ---------------------------------------------------------------------------- Every color in this file is a CSS variable. That's what makes the dark/ light theme toggle work: script.js only ever adds or removes data-theme="light" on — it never touches any color directly. The two blocks below define the same variable names twice, once for the default (dark) theme, once for light mode. ============================================================================ */ :root { /* Base palette — dark theme (this is the default look) */ --bg: #0B0D12; --card: #151922; --text: #F5F5F5; --muted: #8A94A6; --accent: #3B82F6; --border: rgba(255, 255, 255, 0.08); --header-bg: rgba(11, 13, 18, 0.1); /* Background decoration */ --bg-dot: rgba(59, 130, 246, 0.25); /* the dotted grid pattern */ --bg-radial-start: #17223b; /* center of the page glow */ --bg-radial-end: #0B0D12; /* edges of the page glow */ /* Subtle diagonal texture used inside .profile-card and .story-card */ --card-pattern: rgba(59, 130, 246, 0.02); --card-pattern-2: rgba(59, 130, 246, 0.01); /* Timeline date-pill background (semi-transparent so the dotted background shows through slightly) */ --point-bg: rgba(21, 25, 34, 0.55); --point-bg-hover: rgba(59, 130, 246, 0.7); } :root[data-theme="light"] { /* Same variable names, light-theme values. Deliberately NOT plain white/gray — uses a muted blue-slate palette so it still feels like "this site", not a generic default light mode. */ --bg: #D8E0EE; --card: #C7D3EA; --text: #1A2233; --muted: #556077; --accent: #2F6FED; --border: rgba(26, 34, 51, 0.15); --header-bg: rgba(216, 224, 238, 0.1); /* Background glow is intentionally reversed vs. dark mode: light mode glows brighter at the EDGES and slightly darker in the center, which was a deliberate stylistic choice (see --bg-radial-start vs --bg-radial-end below — the center is the darker of the two). */ --bg-dot: rgba(47, 111, 237, 0.4); --bg-radial-start: #A9B8D6; --bg-radial-end: #F1F4FA; --card-pattern: rgba(47, 111, 237, 0.04); --card-pattern-2: rgba(47, 111, 237, 0.03); --point-bg: rgba(199, 211, 234, 0.55); --point-bg-hover: rgba(47, 111, 237, 0.7); } html { scroll-behavior: smooth; /* smooth-scrolls for #anchor links and .scrollIntoView() calls */ scrollbar-gutter: stable; /* reserves scrollbar space so content doesn't shift width when a scrollbar appears/disappears (e.g. after a language switch changes the page's total height) */ overflow-y: scroll; /* forces the vertical scrollbar to always be present, for the same reason as scrollbar-gutter above — belt and suspenders */ overflow-x: hidden; /* prevents a horizontal scrollbar from appearing while elements are still mid-animation (several entrance animations start from off-screen positions like translateX(200px)) */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg); background-image: /* Layer 1: the dotted grid pattern */ radial-gradient(var(--bg-dot) 2px, transparent 2px), /* Layer 2: soft ambient glow behind everything */ radial-gradient(circle at 50% 50%, var(--bg-radial-start) 0%, var(--bg-radial-end) 100%); background-size: 36px 36px, 100% 100%; background-position: center; background-attachment: fixed; /* keeps the background static while the page content scrolls */ padding-top: 68px; /* reserves space equal to the fixed nav's height, so page content doesn't start underneath it */ color: var(--text); font-family: "Inter", sans-serif; min-height: 100vh; overflow-x: hidden; /* belt-and-suspenders with the html rule above */ } .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4vh 0 0 0; width: 100%; } /* ============================================================================ 2. SITE NAVIGATION ---------------------------------------------------------------------------- Desktop shows .nav-links directly in the bar. Below 900px, .nav-links is hidden and replaced by the hamburger + slide-out drawer defined in Section 11. ============================================================================ */ .site-nav { position: fixed; /* fixed (not sticky) so it stays pinned even while the mobile drawer locks body scrolling */ top: 0; left: 0; z-index: 1000; width: 100%; background: var(--header-bg); backdrop-filter: blur(8px); /* frosted-glass effect over whatever scrolls beneath it */ border-bottom: 1px solid var(--border); } .nav-inner { width: 94%; max-width: 1500px; margin: 0 auto; height: 68px; /* NOTE: this value must match body's padding-top above, and the scroll-margin-top values used throughout this file, so that anchor-linked sections don't end up hidden behind the nav. */ display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-weight: 700; font-size: 1.1rem; color: var(--text); } .nav-links { display: flex; gap: 2rem; margin-left: auto; margin-right: 2rem; } .nav-links a { color: var(--muted); font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: color 0.2s ease; } .nav-links a:hover { color: var(--accent); } .nav-controls { display: flex; align-items: center; gap: 0.6rem; } /* Shared square icon-button style used by both the language toggle and theme toggle buttons in the nav. */ .nav-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 1rem; cursor: pointer; transition: all 0.2s ease; box-shadow: none; /* overrides the global button glow/shadow (see Section 4) which would otherwise look too heavy on these small icon buttons */ padding: 0; } .nav-icon-btn:hover { background: rgba(59, 130, 246, 0.12); border-color: var(--accent); color: var(--text); transform: none; /* also overrides the global button's hover scale-up */ box-shadow: none; } /* Hides the desktop nav links below 900px — the mobile drawer (Section 11) takes over navigation at that breakpoint instead. */ @media (max-width: 900px) { .nav-links { display: none; } } /* Sun/moon icon swap: only one icon is visible at a time, depending on which theme is currently active. */ .nav-icon-btn .fa-sun { display: none; } :root[data-theme="light"] .nav-icon-btn .fa-sun { display: block; } :root[data-theme="light"] .nav-icon-btn .fa-moon { display: none; } /* Entrance animation for the desktop nav links: each one slides in from the right with a slightly increasing delay, so they appear to cascade in left-to-right rather than all at once. */ .nav-links a { animation: slideRight 0.7s ease forwards; } .nav-links a:nth-child(1) { animation-delay: 0.1s; } .nav-links a:nth-child(2) { animation-delay: 0.2s; } .nav-links a:nth-child(3) { animation-delay: 0.3s; } /* ============================================================================ 3. LANGUAGE DROPDOWN ============================================================================ */ .lang-dropdown { position: relative; /* anchors the absolutely-positioned .lang-menu below it */ } .lang-flag { font-size: 1.1rem; line-height: 1; } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 170px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); padding: 0.4rem; /* Hidden by default — JS toggles the .is-open class to reveal it */ opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 300; } .lang-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-option { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.6rem 0.75rem; border: none; border-radius: 8px; background: transparent; color: var(--text); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease; box-shadow: none; /* overrides global button shadow, same reasoning as .nav-icon-btn */ } .lang-option:hover { background: rgba(59, 130, 246, 0.12); transform: none; box-shadow: none; } /* Highlights whichever language is currently active, set via JS (aria-current="true") */ .lang-option[aria-current="true"] { color: var(--accent); font-weight: 700; } /* ============================================================================ 4. HERO / PROFILE CARD ============================================================================ */ .profile-card { width: 94%; max-width: 1500px; min-height: 520px; background: var(--card); /* Six overlapping diagonal gradients create a subtle repeating diamond texture across the card. --card-pattern controls the 4 "outer" diagonal lines; --card-pattern-2 controls the 2 finer crosshatch lines layered on top. Both are theme-aware variables. */ background-image: linear-gradient(30deg, var(--card-pattern) 12%, transparent 12.5%, transparent 87%, var(--card-pattern) 87.5%, var(--card-pattern)), linear-gradient(150deg, var(--card-pattern) 12%, transparent 12.5%, transparent 87%, var(--card-pattern) 87.5%, var(--card-pattern)), linear-gradient(30deg, var(--card-pattern) 12%, transparent 12.5%, transparent 87%, var(--card-pattern) 87.5%, var(--card-pattern)), linear-gradient(150deg, var(--card-pattern) 12%, transparent 12.5%, transparent 87%, var(--card-pattern) 87.5%, var(--card-pattern)), linear-gradient(60deg, var(--card-pattern-2) 25%, transparent 25.5%, transparent 75%, var(--card-pattern-2) 75.5%, var(--card-pattern-2)), linear-gradient(60deg, var(--card-pattern-2) 25%, transparent 25.5%, transparent 75%, var(--card-pattern-2) 75.5%, var(--card-pattern-2)); background-size: 40px 70px; /* IMPORTANT: this position list must have exactly one entry per gradient layer above (6 layers → 6 positions), or the pattern will misalign. */ background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px; padding: 4rem; overflow: hidden; border-radius: 30px; border-top: 2px solid var(--accent); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); margin-bottom: 2rem; } .profile-content { display: flex; justify-content: space-between; align-items: center; gap: 5rem; } .profile-text { flex: 1; } h1 { font-size: 4rem; margin-bottom: 1rem; font-weight: 700; } .subtitle { color: var(--accent); font-size: 1.2rem; margin-bottom: 1.2rem; font-weight: 500; } .description { color: var(--muted); max-width: 650px; line-height: 1.8; font-size: 1.15rem; margin-bottom: 2rem; } .social-links { display: flex; gap: 1rem; margin-bottom: 2rem; } .social-links a { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; font-size: 1.2rem; transition: all 0.3s ease; } .social-links a:hover { background: rgba(59, 130, 246, 0.12); border-color: var(--accent); color: var(--text); transform: translateY(-4px) scale(1.08); } /* -------------------------------------------------------------------------- Global button style. This applies to EVERY