/* ========================================================================== Saim Alshafi — Portfolio style.css — reset, tokens, fluid grid, typography, header, footer ========================================================================== */ /* Satoshi variable font — the site-wide typeface, per direct request (was homepage-only preview, then replaced the six PP Neue Montreal static-weight @font-face rules that used to sit here — those were removed as part of the pre-launch cleanup). Single variable file covers the whole 300–900 weight axis instead of separate static files per weight. */ @font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Variable.woff2") format("woff2"), url("../fonts/Satoshi-Variable.woff") format("woff"); font-weight: 300 900; font-style: normal; font-display: swap; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } img { display: block; max-width: 100%; } /* ---------- fluid scale ---------- Design baseline: MacBook Pro 1728 x 1117 (same mechanism vucko.co uses: root font-size tracks viewport width 1:1, every component is sized in rem, so the whole layout scales as one unit and every element's position stays a constant percentage of the page — nothing reflows independently). Root font-size scales 1:1 with viewport width down to the point where 100vw/1728*16 == 9.5px (~1026px viewport) — that's our mobile-breakpoint floor until the dedicated mobile layout is built. Everything below is authored in rem against a 16px design pixel. NOTE: the multiplier must be unitless (`* 16`, not `* 16px`) — calc() can't multiply two length values together; doing that makes the whole clamp() invalid and silently falls back to the browser default 16px, which is a static, non-scaling number. */ html { font-size: clamp(9.5px, calc(100vw / 1728 * 16), 16px); scroll-behavior: auto; /* Lenis handles smoothing */ /* Fix for mobile: body already had overflow-x:hidden, but mobile browsers govern horizontal rubber-band/bounce overscroll at the /document level, not body's — body-only containment still let a left/right swipe drag the whole viewport past its edge, briefly revealing whatever sits behind the normal page content underneath (the fixed-position footer — see .site-footer below). Both properties matter: overflow-x actually stops any real horizontal scroll capability; overscroll-behavior-x additionally suppresses the gesture-triggered bounce effect itself (Chrome/Android; Safari doesn't support this property but respects the overflow-x fix). */ overflow-x: hidden; overscroll-behavior-x: none; } /* ---------- mobile breakpoint ---------- 768px, a plain max-width media query — being built page by page (see comments on individual mobile rules throughout this file and each page's own CSS for which pages currently have real mobile layouts vs. still just inheriting the floored desktop grid). Freezes the fluid root font-size at its own 16px ceiling instead of letting it keep sliding down to the 9.5px floor documented above: at exactly 16px, every existing rem-based measurement site-wide (paddings, gaps, the whole type scale) renders at its literal "design pixel" value — the same number the comment next to each rule already documents in px — so mobile-specific overrides below can be authored in rem against that same 16px baseline and land exactly on the pixel values quoted for them, no separate mental conversion. */ @media (max-width: 768px) { html { font-size: 16px; } } :root { --black: #0B0A0B; /* was pure #000000 — per direct request */ --white: #ffffff; /* pure white — per direct request */ --gray: #bababa; /* secondary text — was #a0a0a0, consolidated with the other near-identical gray (#ababab) that used to live separately in the footer */ --margin: 2.5rem; /* 40px */ --gutter: 1.5rem; /* 24px */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } body { background: var(--white); color: var(--black); font-family: "Satoshi", Arial, sans-serif; /* site-wide, per direct request — was "PP Neue Montreal" */ font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-x: none; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); } .c-gray { color: var(--gray); } /* ---------- text selection (site-wide) ---------- Custom highlight color, per direct request — otherwise every browser falls back to its own default blue selection, which clashes with the site's own palette. ::-moz-selection kept alongside the standard ::selection since Firefox historically required the prefixed rule (both are cheap to keep in sync). */ ::selection { color: #0B0A0B; background: #FFA16E; } ::-moz-selection { color: #0B0A0B; background: #FFA16E; } /* ---------- dark mode ---------- Scoped narrowly on purpose: only body background/text and the one hardcoded-black element (the struck-through cities) flip. Anything already set in --gray stays --gray in both modes (explicit user requirement), and the footer is untouched entirely — it already hardcodes black/white regardless of theme, so it's naturally excluded just by never being targeted here. */ html.dark-mode body { background: #0B0A0B; color: #ffffff; /* pure white — per direct request */ } html.dark-mode .hero__based s { color: #ffffff; /* pure white — per direct request */ } /* ---------- grid ---------- */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding-inline: var(--margin); } /* ---------- text reveal (shared) ---------- Lines are split by JS into .line-mask (overflow hidden) > .line-inner (the element that actually translates). Only transform is ever animated — no opacity, no blur. */ .line-mask { display: block; overflow: hidden; } .line-inner { display: block; will-change: transform; transform: translateY(110%); } [data-reveal].is-inline { display: inline-block; } /* ---------- scroll highlight (shared) ---------- Grey by default, flips to full contrast while the element is passing through a fixed band in the viewport — toggled by Common.initScrollHighlight() (see common.js) adding/removing .is-active per element via ScrollTrigger's toggleClass, not a scrubbed tween. This is intentionally a CSS transition + class toggle rather than animating color directly with GSAP: color isn't a great scrub target (no easy way to interpolate to "whatever the current theme's full-contrast color is" without duplicating theme logic in JS), and a binary on/off state driven by a normal CSS transition already handles dark mode for free via the existing .is-active dark-mode override below — same pattern already used for .pg-card__title. First used for the About page's Experience/Education rows and Expertise words. */ .scroll-highlight { color: var(--gray); transition: color 0.4s var(--ease-out); } .scroll-highlight.is-active { color: var(--black); } /* --gray (#bababa) is tuned for the light background — on black it's too close to full contrast to read as "not yet highlighted", so dark mode gets its own, much darker pre-highlight grey instead of reusing --gray. */ html.dark-mode .scroll-highlight { color: #1e1e1e; /* was #1a1a1a — consolidated onto the site's other near-black gray */ } html.dark-mode .scroll-highlight.is-active { color: #ffffff; /* pure white — per direct request */ } /* ---------- page transitions ---------- A single black panel (see js/transitions.js) that slides up from the bottom of the viewport to fully cover the screen — a plain curtain, opacity/transform/visibility only so GSAP owns the animation cleanly. The actual content swap (#page-root's innerHTML, plus the header's .logo when the transition enters or leaves the homepage — see that file's top comment) happens hidden behind it once the rise finishes, then the panel is dropped instantly and the destination page's own normal reveal-in timeline populates it — same "arrives empty, then populates" feel as a hard reload, just without an actual navigation. z-index is set dynamically by transitions.js on every navigation, not fixed here — 100 (below .site-header--logo's 300) for an ordinary non-home-involved transition, so the small wordmark logo stays put and visible the whole time since it never actually changes; 400 (between .site-header--logo's 300 and .site-header--nav's 500) only when the transition enters or leaves the homepage, since that's the one case where .logo itself gets swapped and needs to be covered while that happens. .site-header--nav is 500 unconditionally either way — nav is never covered by any transition, full stop. This rule's own z-index (100) is just the resting/pre-JS value; see PANEL_Z_BELOW_LOGO / PANEL_Z_ABOVE_LOGO in transitions.js for the real per-transition logic. */ .page-transition-panel { position: fixed; inset: 0; z-index: 100; background: #0B0A0B; visibility: hidden; pointer-events: none; } /* ---------- header ---------- Two independent position:fixed elements sharing this base class, rather than one
wrapping both .logo and .nav. A single fixed + z-indexed element is its own stacking context — everything inside it (nav included) can only be painted as one unit relative to anything outside it (like .page-transition-panel above), so there was no z-index that could put the panel "over the logo, under the nav" while they were both children of the same element. Splitting them into two real siblings gives each its own independent position in the stacking order — see the z-index comment on each variant below. */ .site-header { position: fixed; top: 0; padding: var(--margin); color: var(--white); mix-blend-mode: difference; pointer-events: none; } .site-header * { pointer-events: auto; } .site-header a, .logo { color: var(--white); } .site-header--logo { left: 0; z-index: 300; /* Sits ABOVE the panel's resting z-index (100) — an ordinary transition between two non-home pages never covers the logo, since it doesn't change and there's nothing to hide. Only when transitions.js bumps the panel to 400 (entering/leaving the homepage, where .logo itself gets swapped) does the panel end up above this and cover it, exactly like ordinary page content, for that one case. */ } .site-header--nav { right: 0; z-index: 500; /* ABOVE the panel at either of its z-indexes (100 or 400) — nav/theme-toggle are never covered or interrupted by any transition, home-involved or not. */ /* Reproduces the vertical centering the old single flex row gave for free (align-items:center centering .nav, the shorter of the two, against .logo's height, the taller). .logo-svg is a fixed 1.5rem tall; .nav's own height is set by .nav a's line-height:1 at its font-size — recalculated to (1.5rem - 0.875rem) / 2 = 0.3125rem when .nav a dropped from 1.125rem to 0.875rem (14px, uppercase), added on top of the shared var(--margin) top inset so .nav still centers on the same baseline instead of drifting off .logo's midline now that it's a shorter line of text. */ padding-top: calc(var(--margin) + 0.3125rem); } .logo { font-size: 1.125rem; /* 18pt */ font-weight: 500; /* medium — was 600 semibold. Inert now that every page's .logo holds an SVG mark instead of text (see the note below), kept in sync anyway in case a text logo is ever reintroduced. */ letter-spacing: -0.01em; } /* SVG logotype mark, used site-wide as of the homepage redesign — every page's .logo now holds this instead of the plain "Saim Alshafi" text. Docked at a static 24px height everywhere; only the default homepage (index.html) additionally wraps its copy of this same SVG in .logo-scale/.logo-glyph for the big scroll-driven hero treatment (see css/home.css) — every other page just shows it at rest, revealed once via the existing shared Common.initHeaderIntro() (see common.js), same as the nav links, since a plain SVG with no text content is treated as one atomic line by TextReveal.splitLines() and needs no special handling here. */ .logo svg { display: block; height: 1.5rem; /* 24px, matches the homepage's docked/rest size exactly */ width: auto; } .nav { display: flex; align-items: center; gap: 1.75rem; position: relative; /* anchors .nav-dot below — flex layout of the links themselves is untouched by this, position only affects how .nav itself would be positioned relative to ITS OWN containing block, never how it lays out its children */ } .nav a { font-size: 0.875rem; /* 14px, uppercase — was 1.125rem/18px sentence case */ font-weight: 500; /* medium — was 400 regular */ text-transform: uppercase; letter-spacing: 0.03em; position: relative; line-height: 1; color: var(--white); transition: color 0.35s var(--ease-in-out); /* Padding + equal negative margin widens the actual hoverable/ clickable box by 8px on every side without moving anything visually or in layout — the negative margin pulls the expanded box back to the exact same footprint the flex item had before, so link spacing/centers (and the nav-dot's centering math, which reads offsetLeft/offsetWidth off this box) are all untouched. Per direct request: the old hit area was flush with the letters. */ padding: 0.5rem; margin: -0.5rem; } /* The vucko.co-style "spotlight" dim-on-hover (every link but the hovered one fading to gray) was removed per direct request — the sliding dot below is now the only hover feedback: hovering ANY link (not just the active one) pulls the dot up to sit above it, in a fresh random color, then sends it back to the active page the moment the cursor leaves the nav entirely. See bindNavDotHover in common.js. */ /* ---------- active-page indicator: sliding dot ---------- Replaces the earlier sliding-underline treatment (a per-link ::after that faded in/out under whichever link was current) with a single 6x6px circle that physically travels between links — to the new active link on every page change, and now also to whichever link is hovered (see the comment above) — instead of a per-link fade. Has to be ONE shared element rather than a pseudo-element per link — a ::after can only ever animate within its own link's box, it can't slide across to a sibling's — so this lives once in the markup (see .nav-dot in every page's