/* ═══════════════════════════════════════════════════════════════ PORTFOLIO — KARISHMA NAGESHWARAN Main stylesheet. Used by all pages. TABLE OF CONTENTS 1. Design Tokens (colors, fonts) 2. Base / Reset 3. Typography helpers 4. Navigation 5. Hero (heading, bio, social icons, portrait photo) 6. Work / Case study cards 7. Footer (dark / inverted) 8. Utilities 9. Responsive overrides ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 1. DESIGN TOKENS Edit the variables below to restyle the whole site at once. Colors are hex; fonts are names that must be loaded in the via Google Fonts. ───────────────────────────────────────────── */ :root { /* ── Core palette ── */ --bg: #FAFAF9; /* warm near-white page background */ --text: #001F54; /* deep navy — all primary text */ --muted: #4A5E7B; /* medium slate — secondary text */ /* ── Accent colors ── */ /* Teal: interactive elements, links, hover states, CTA buttons */ --teal: #1A7A82; --teal-light: rgba(26, 122, 130, 0.11); /* Terracotta: category labels, decorative tags */ --terra: #C4704A; --terra-light: rgba(196, 112, 74, 0.13); /* ── Surfaces / borders ── */ --border: #E4DFD8; /* warm divider line */ --card-bg: #EDE8E0; /* card image placeholder */ --photo-bg: #E5E1DA; /* hero photo placeholder */ /* ── Footer (dark / inverted) ── */ --footer-bg: #001233; /* richer deep blue — darker and more luxurious */ --footer-text: #FAFAF9; --footer-muted: rgba(250, 250, 249, 0.52); /* ── Typography ── --logo-serif : Cormorant Garamond — refined serif wordmark --serif : DM Serif Display — display serif for headings, high character --sans : Space Grotesk — modern sans with personality for body/UI */ --logo-serif: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif; --serif: 'DM Serif Display', Georgia, serif; --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; } /* ───────────────────────────────────────────── 2. BASE / RESET ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Content protection: disable text selection and mobile long-press */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; } /* Disable image drag and mobile save-image gesture */ img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } /* Image protection overlay — transparent cover sits over the hero portrait so right-click / long-press targets the overlay, not the raw image. Card thumbnails use their existing ::after overlay for the same effect. */ .hero-photo::after { content: ''; position: absolute; inset: 0; z-index: 2; /* above the img (z-index: auto) inside the container */ background: transparent; pointer-events: auto; /* intercepts touch/mouse events on the photo */ } /* Print protection — blank the page entirely when printed or saved as PDF */ @media print { body { display: none !important; } html::after { content: "This content is protected."; display: block; text-align: center; padding: 2rem; font-family: Arial, sans-serif; } } img { display: block; max-width: 100%; } a { color: inherit; } /* ───────────────────────────────────────────── 3. TYPOGRAPHY HELPERS .label — uppercase tracking label used as a section marker (e.g. "Selected Work") ───────────────────────────────────────────── */ .label { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ───────────────────────────────────────────── 4. NAVIGATION Sticky bar: refined serif wordmark left, uppercase links right. Hamburger below 640px. ───────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background-color: rgba(250, 250, 249, 0.90); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; } /* Wordmark — Cormorant Garamond at light weight so the name reads as refined and thin, not bold. DM Serif Display only has one weight so it always looks heavy; Cormorant Garamond is already imported. */ .nav-logo { font-family: var(--logo-serif); font-size: 1.5rem; font-weight: 300; font-style: normal; letter-spacing: 0.01em; color: var(--text); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color 0.2s ease; } .nav-logo:hover { color: var(--muted); } /* The teal period at the end of the wordmark — the accent detail */ .logo-dot { color: var(--teal); } /* Nav links: WORK · ABOUT · CONTACT */ .nav-list { list-style: none; display: flex; align-items: center; gap: 2.5rem; } .nav-list a { font-family: var(--serif); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .nav-list a:hover { color: var(--text); } /* Hamburger button — hidden on desktop, shown on mobile */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 4px; line-height: 0; } /* ───────────────────────────────────────────── 5. HERO Full-width heading, then a two-column row: bio text + social icons (left) | portrait photo (right). ───────────────────────────────────────────── */ .hero { max-width: 1200px; margin: 0 auto; padding: 6rem 2.5rem 120px; /* space below both columns before the overlay section */ /* Two-column grid: text column left, photo column right. stretch lets the photo column grow to match the text column height. */ display: grid; grid-template-columns: 1fr 400px; column-gap: 4rem; align-items: stretch; /* Sticky: hero stays in place while the Work section scrolls over it */ position: sticky; top: 68px; /* offset by nav height so it tucks just below the nav */ z-index: 1; min-height: calc(100vh - 68px); /* hero fills the viewport below the nav */ } /* ───────────────────────────────────────────── HERO ANIMATIONS All hero elements animate in on page load. "Hi," slides DOWN · "I'm Karishma." slides UP (split-reveal: each line is an overflow:hidden stage; the clip inside slides in from outside). Accent, bio, and photo fade in after the title lands. ───────────────────────────────────────────── */ @keyframes heroSlideDown { from { transform: translateY(-105%); } to { transform: translateY(0); } } @keyframes heroSlideUp { from { transform: translateY(105%); } to { transform: translateY(0); } } /* Used by accent bar, bio column, and photo */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Photo slides in from ABOVE as it enters position */ @keyframes heroPhotoIn { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: translateY(0); } } /* ─ Heading: split "Hi," and "I'm Karishma." ─ */ .hero-title { font-family: var(--serif); font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 400; /* regular weight — elegant and light, not heavy */ font-style: normal; line-height: 1.0; letter-spacing: -0.025em; color: var(--text); margin-bottom: 2.5rem; } /* Only "Karishma." is italic — a personal, calligraphic accent */ .hero-title em { font-style: italic; } /* Each line is an overflow:hidden clip stage. The .hero-line-clip inside slides in from outside the container, making it appear to emerge from behind an invisible mask. */ .hero-line { display: block; overflow: hidden; /* Extra padding so descenders (g, y, p) aren't cut off */ padding-bottom: 0.06em; } .hero-line-clip { display: block; } /* "Hi," — descends from above */ .hero-line-hi .hero-line-clip { animation: heroSlideDown 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; } /* "I'm Karishma." — rises from below; meets "Hi," in the center */ .hero-line-name .hero-line-clip { animation: heroSlideUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both; } /* Short teal bar — fades in just after the title lands */ .hero-accent { width: 44px; height: 2px; background-color: var(--teal); border-radius: 1px; margin-bottom: 2.75rem; animation: heroFadeUp 0.5s ease 0.9s both; } /* Left text column — contains title, accent bar, bio. No special layout needed; it's one column of the parent .hero grid. */ .hero-text-col { min-width: 0; /* prevents grid blowout on narrow viewports */ } /* Bio + social icons wrapper — fades up after title animation */ .hero-left { display: flex; flex-direction: column; animation: heroFadeUp 0.65s ease 1.05s both; } /* Bio paragraph */ .hero-bio { font-family: var(--sans); font-size: 1.1rem; line-height: 1.82; color: var(--text); margin-bottom: 2.25rem; } /* ─ Social icons ─ Circular bordered icons with teal hover effect. Powered by Font Awesome — loaded in . */ .social-icons { display: flex; gap: 0.875rem; align-items: center; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 50%; font-size: 0.875rem; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .social-icon:hover { color: var(--teal); border-color: var(--teal); background-color: var(--teal-light); } /* ─ Portrait photo placeholder ─ min-height keeps it tall and prominent even when bio text is short. Set align-items: start on .hero-content so the photo doesn't shrink. TO SWAP IN YOUR REAL PHOTO: replace the inside .hero-photo with: Karishma Nageshwaran */ /* Portrait photo — a dominant visual, not a small sidebar box. margin-top pushes it down to align its top edge with the "I'm Karishma." line (approximate height of the "Hi," line above). Photo slides in from above on page load. */ .hero-photo { width: 100%; /* Align top with "I'm Karishma." — clamp mirrors the title font-size */ margin-top: clamp(2.25rem, 5.5vw, 4.5rem); margin-bottom: 48px; /* gap below photo before hero bottom padding */ /* No fixed min-height — the grid's align-items: stretch makes the photo column grow to match the text column height automatically */ min-height: 320px; /* floor so the photo never collapses on very short viewports */ background-color: var(--photo-bg); border-radius: 3px; /* position: relative + overflow: hidden lets the absolutely-positioned img fill the container's actual rendered height, not just min-height */ position: relative; overflow: hidden; animation: heroPhotoIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both; } /* Image fills the full rendered bounds of the container */ .hero-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 3px; display: block; } .hero-photo-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 31, 84, 0.28); } /* ───────────────────────────────────────────── 6. WORK / CASE STUDY CARDS Card layout modelled on "title cards ref": large image thumbnail, bold title below, then tags + year in lighter gray — all inline. The entire card is clickable (no separate button). ───────────────────────────────────────────── */ /* Container for work.html — intentionally minimal. The sliding-sheet visual (background, border-radius, shadow) is handled by .edu-exp on the homepage. */ .work { /* no special visual — content layout lives in .work-inner */ } /* Inner container — max-width and padding for work.html */ .work-inner { max-width: 1200px; margin: 0 auto; padding: 4rem 2.5rem 7rem; } /* ───────────────────────────────────────────── EDUCATION & EXPERIENCE (homepage) Sliding sheet layer — rises up over the sticky hero and covers it, exactly like the work section used to. Same warm-gray background, rounded top corners, and upward shadow. ───────────────────────────────────────────── */ .edu-exp { background-color: #EDEAE5; /* soft warm gray — not beige, not yellow */ position: relative; z-index: 10; border-radius: 20px 20px 0 0; box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.18); } .edu-exp-inner { max-width: 960px; /* narrower than site max — better proportions for timeline */ margin: 0 auto; padding: 7rem 2.5rem 6rem; } /* ───────────────────────────────────────────── TIMELINE — STACKED (index.html) Single centered column. Education section first, Experience section below. Each section has its own vertical line, ring-style dots, and card items. ───────────────────────────────────────────── */ /* Outer wrapper — centers the whole thing, Education above Experience */ .edu-exp-timeline { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 4.5rem; margin-bottom: 5rem; } /* ─ Section (education / experience) ─────── */ .tet-section { display: flex; flex-direction: column; align-items: center; } /* Section header: centered label + short horizontal accent line */ .tet-section-header { text-align: center; margin-bottom: 2.25rem; } .tet-section-label { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.75rem; } .tet-section-label--edu { color: #F07167; } /* coral */ .tet-section-label--exp { color: #0081A7; } /* ocean blue */ /* Short horizontal accent bar below the label */ .tet-section-accent { height: 2px; width: 2.5rem; border-radius: 1px; margin: 0 auto; } .tet-section-accent--edu { background-color: #F07167; } .tet-section-accent--exp { background-color: #0081A7; } /* ─ Items container — holds the vertical line + all item rows ─ */ .tet-items { position: relative; /* line is absolute inside this */ width: 100%; display: flex; flex-direction: column; align-items: center; } /* ───────────────────────────────────────────── GAP LINE SEGMENTS Instead of one continuous line (which bleeds through transparent cards), each dot draws two short segments using pseudo-elements: ::after → dot bottom to card top (height = dot margin-bottom: 1rem) ::before → previous card bottom to dot top (height = item margin-bottom: 2.25rem) The first dot in each section has no ::before (nothing above it). No line ever passes behind a card. "Beads on a string" — line only exists in the empty gaps between cards. ───────────────────────────────────────────── */ /* Shared structure for both segments */ .tet-dot::before, .tet-dot::after { content: ''; position: absolute; left: 50%; width: 1.5px; transform: translateX(-50%); } /* Segment going DOWN: from dot bottom to the card just below it. Height matches .tet-dot margin-bottom exactly. */ .tet-dot::after { top: 100%; /* starts at dot's bottom edge */ height: 1rem; /* = .tet-dot margin-bottom */ } /* Segment going UP: from previous card's bottom to this dot's top. Height matches .tet-item margin-bottom exactly. */ .tet-dot::before { bottom: 100%; /* starts at dot's top edge, extends upward */ height: 2.25rem; /* = .tet-item margin-bottom */ } /* First item in each section — no card above it, so no upward segment */ .tet-item:first-child .tet-dot::before { display: none; } /* Colors — match each section's accent */ .tet-dot--edu::before, .tet-dot--edu::after { background: rgba(240, 113, 103, 0.55); } .tet-dot--exp::before, .tet-dot--exp::after { background: rgba(0, 129, 167, 0.55); } /* ─ Each item row: dot centered, then card below it ─ */ .tet-item { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 2.25rem; /* z-index: 2 puts this item's stacking context above the line (z-index: 1). Because .tet-item has a transform, it creates its own stacking context — so this z-index is what positions the entire item (card + dot) relative to the line in the .tet-items stacking context. */ z-index: 2; /* Scroll reveal: card starts "folded" — top edge tilted toward viewer. transform-origin: top center means the pivot is the top edge, so the bottom of the card swings toward flat as rotateX goes to 0. perspective() is included in the transform so each item has its own 3D context (no shared distortion between items). */ opacity: 0; transform: perspective(900px) rotateX(-28deg); transform-origin: top center; transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .tet-item:last-child { margin-bottom: 0; } /* Second card in each section unfolds slightly after the first — "flipping through a stack" stagger effect. */ .tet-items > .tet-item:nth-child(2) { transition-delay: 0.15s; } /* Activated by JS IntersectionObserver — unfolds flat */ .tet-item.is-visible { opacity: 1; transform: perspective(900px) rotateX(0deg); } /* Ring-style dot — colored border, section-color fill. z-index: 3 within the item's stacking context keeps it on top of the card (z-index: 2 in item context) so the ring is always visible. */ .tet-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; background: #EDEAE5; /* matches section bg */ position: relative; z-index: 3; margin-bottom: 1rem; flex-shrink: 0; } .tet-dot--edu { border-color: #F07167; } .tet-dot--exp { border-color: #0081A7; } /* Dot springs in when item becomes visible — springy cubic-bezier for a subtle bounce that reads as a "pulse" without being distracting. */ .tet-item.is-visible .tet-dot { animation: tet-dot-spring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; } @keyframes tet-dot-spring { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Card — full width within the container. z-index: 2 within the item's stacking context — sits above anything at default z-index but below the dot (z-index: 3). */ .tet-card { width: 100%; position: relative; z-index: 2; border-radius: 8px; padding: 1.5rem 1.75rem 1.625rem; text-align: center; /* No box-shadow — would make frosted-glass cards look heavy */ transition: transform 0.25s ease; } .tet-card--edu { background: rgba(240, 113, 103, 0.06); /* 6% coral — faint blush tint */ color: #7A2019; } .tet-card--exp { background: rgba(0, 129, 167, 0.06); /* 6% ocean blue — faint blue tint */ color: #004E6A; } .tet-card:hover { transform: translateY(-4px); } /* Institution / company name */ .tet-institution { font-family: 'DM Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: inherit; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.35rem; } /* Degree / job title — slightly muted via opacity */ .tet-degree { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 400; color: inherit; opacity: 0.75; line-height: 1.45; margin-bottom: 0.3rem; } /* Year — pill badge with tinted background per section type */ .tet-badge { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.275em 0.8em; border-radius: 100px; } .tet-badge--edu { background-color: rgba(240, 113, 103, 0.22); /* slightly more opaque than card */ color: #7A2019; } .tet-badge--exp { background-color: rgba(0, 129, 167, 0.22); color: #004E6A; } /* Resume CTA — centered, fades in when section enters viewport */ .resume-cta { display: flex; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s ease; } .edu-exp.is-visible .resume-cta { opacity: 1; transform: translateY(0); transition-delay: 0.5s; /* fades in after section is well into view */ } /* Solid navy button — inverts to ghost on hover */ .resume-btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.9rem 2.25rem; border: 1.5px solid var(--text); border-radius: 2px; color: var(--bg); /* white-ish text on navy */ background-color: var(--text); /* solid navy fill */ font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; } .resume-btn:hover { background-color: transparent; /* ghost on hover */ color: var(--text); /* navy text on hover */ } /* ───────────────────────────────────────────── WORK PAGE (work.html) Simple page header — no sliding-sheet effect. ───────────────────────────────────────────── */ .work-page-header { padding: 5rem 0 0; } .work-page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem 3rem; border-bottom: 1px solid var(--border); } .work-page-title { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; font-style: normal; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; } /* Section header — just the title, no label or right-side link */ .section-head { margin-bottom: 3rem; } /* Section title — bold serif, not italic. Starts faded and shifted down; "activates" (full dark, in place) when the work section scrolls into the viewport. Mirrors the "Building the next" text-activation effect from the reference. */ .section-title { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; font-style: normal; letter-spacing: -0.01em; line-height: 1.1; color: var(--text); opacity: 0.2; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s ease; } /* Activates when JS adds .is-visible to .work */ .work.is-visible .section-title { opacity: 1; transform: translateY(0); } /* Two-column card grid */ .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.75rem 3rem; } /* ── Individual card — the entire card is the link ── */ /* Starts faded and shifted; activates with the work section. Each card staggers in slightly after the one before it. */ .card { display: block; text-decoration: none; color: inherit; cursor: pointer; opacity: 0; transform: translateY(22px); background-color: #fff; /* white panel so padded text area is contained */ border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: opacity 0.7s ease, transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; /* clips image corners to card border-radius */ } /* Lift card and deepen shadow on hover */ .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } /* Staggered reveal — cards appear one after another on page load */ .work.is-visible .card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } .work.is-visible .card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .work.is-visible .card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } .work.is-visible .card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } .work.is-visible .card:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; } .work.is-visible .card:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; } .work.is-visible .card:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 1.05s; } /* Hover lift — must come after the nth-child reveal rules above so it wins when both the reveal class and :hover are active at the same time */ .work.is-visible .card:hover { transform: translateY(-4px); transition-delay: 0s; /* cancel any stagger delay so hover is instant */ } /* Thumbnail — 4:3 aspect ratio, subtle scale on hover */ .card-thumb { position: relative; /* needed for the ::after overlay to position against */ width: 100%; aspect-ratio: 4 / 3; background-color: var(--card-bg); overflow: hidden; margin-bottom: 0.375rem; /* tight gap between image bottom and text top */ } /* Grey overlay — sits on top of the image, mutes it at rest */ .card-thumb::after { content: ''; position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 */ background: rgba(0, 0, 0, 0.15); transition: background 0.3s ease; pointer-events: none; /* don't block clicks through the overlay */ } /* On hover, lift the overlay so the image looks more vivid */ .card:hover .card-thumb::after { background: rgba(0, 0, 0, 0.05); } .card-thumb-inner { width: 100%; height: 100%; background: linear-gradient(140deg, #DDD5C8 0%, #C9BFB2 45%, #B5A99A 100%); display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); } .card:hover .card-thumb-inner { transform: scale(1.03); } .card-thumb-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 31, 84, 0.28); } /* Card info: bold title + lighter meta, all inline on one line */ .card-info { font-family: var(--sans); font-size: 0.975rem; line-height: 1.45; padding: 1.25rem 1.5rem 1.5rem; /* top 20px / sides + bottom 24px */ } /* Bold project name */ .card-title { font-weight: 600; color: var(--text); transition: color 0.2s ease; } .card:hover .card-title { color: var(--teal); } /* Comma + tags + year — lighter gray, same line */ .card-meta { font-weight: 400; color: var(--muted); } /* ── "Coming soon" card — grayed out, not clickable ── */ .card--soon { cursor: default; pointer-events: none; } .card--soon .card-thumb-inner { background: none; } .card--soon .card-thumb { background-color: transparent; border: 2px dashed var(--border); } .card--soon .card-title, .card--soon .card-meta { color: var(--border); } /* ───────────────────────────────────────────── 7. FOOTER — dark / inverted Deep navy background, off-white text. Teal top border connects it to the accent palette. ───────────────────────────────────────────── */ .footer { background-color: var(--footer-bg); border-top: 2px solid var(--teal); /* z-index ensures footer paints above the sticky hero as you scroll to the bottom */ position: relative; z-index: 20; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 3rem 2.5rem 3.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } /* Social icons row — centered */ .footer-social { display: flex; gap: 0.75rem; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgba(250, 250, 249, 0.55); border: 1px solid rgba(250, 250, 249, 0.16); border-radius: 50%; font-size: 0.82rem; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .footer-social-icon:hover { color: var(--footer-text); border-color: rgba(250, 250, 249, 0.6); } /* Copyright line */ .footer-copy { font-size: 0.72rem; letter-spacing: 0.05em; color: rgba(250, 250, 249, 0.45); } /* Website URL — slightly smaller and lighter */ .footer-url { font-size: 0.65rem; letter-spacing: 0.08em; color: rgba(250, 250, 249, 0.25); } /* ───────────────────────────────────────────── 8. UTILITIES ───────────────────────────────────────────── */ /* Screen-reader-only — visually hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ───────────────────────────────────────────── 9. RESPONSIVE OVERRIDES Breakpoints: 768px — tablet portrait 640px — large phone (hamburger nav + stacked hero) 480px — small phone ───────────────────────────────────────────── */ /* ── Tablet portrait ── */ @media (max-width: 768px) { /* Hero: stack text col above photo; disable sticky (not useful when stacked) */ .hero { grid-template-columns: 1fr; padding: 4.5rem 1.75rem 5rem; row-gap: 2.5rem; position: relative; top: auto; min-height: auto; } /* Photo: no margin-top offset when stacked — just full-width below */ .hero-photo { margin-top: 0; max-width: 400px; min-height: 400px; } .edu-exp-inner { padding: 5rem 1.75rem 4.5rem; } /* Narrow the timeline column on tablet — it's already single-column */ .edu-exp-timeline { max-width: 480px; } .work-inner { padding: 3rem 1.75rem 5rem; } .work-page-header-inner { padding: 0 1.75rem 2.5rem; } .card-grid { grid-template-columns: 1fr; gap: 3rem; } .footer-inner { padding: 2.75rem 1.75rem 3rem; } } /* ── Large phones — hamburger nav ── */ @media (max-width: 640px) { /* Nav */ .nav-inner { padding: 1rem 1.5rem; } /* Slightly smaller wordmark on small screens */ .nav-logo { font-size: 1.2rem; } /* Show hamburger, hide desktop links */ .nav-toggle { display: flex; } .nav-list { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; background-color: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; padding: 1.5rem 1.75rem; gap: 1.25rem; box-shadow: 0 8px 28px rgba(0, 31, 84, 0.08); } .nav-list.is-open { display: flex; } /* Hero */ .hero { padding: 3.5rem 1.25rem 4rem; } .hero-bio { font-size: 1rem; } /* Edu-exp: tighten padding on small screens */ .edu-exp-inner { padding: 4rem 1.25rem 4rem; } /* Timeline: full width on mobile — no max-width restriction */ .edu-exp-timeline { max-width: 100%; gap: 3.5rem; } /* Cards: reduce horizontal padding slightly */ .tet-card { padding: 1.25rem 1.25rem 1.375rem; } .work-inner { padding: 2.5rem 1.25rem 4rem; } .work-page-header { padding: 3.5rem 0 0; } .work-page-header-inner { padding: 0 1.25rem 2rem; } /* Footer */ .footer-inner { padding: 2.25rem 1.25rem 2.75rem; } } /* ── Small phones ── */ @media (max-width: 480px) { .section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hero-photo { margin-top: 0; min-height: 320px; max-width: 300px; } } /* ───────────────────────────────────────────── REDUCED MOTION Respects the OS "reduce motion" preference. Disables all page-load and scroll animations, snapping everything to its final visible state. ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Hero load-in animations — skip to final state */ .hero-line-clip, .hero-accent, .hero-left, .hero-photo { animation: none !important; opacity: 1 !important; transform: none !important; } /* Scroll-activated elements — snap to final state */ .section-title, .card, .resume-cta { opacity: 1 !important; transform: none !important; transition: none !important; } /* Cards: skip the rotateX unfold — appear flat immediately */ .tet-item { opacity: 1 !important; transform: none !important; transition: none !important; } .tet-items > .tet-item:nth-child(2) { transition-delay: 0s !important; } .work.is-visible .card:nth-child(1), .work.is-visible .card:nth-child(2) { transition-delay: 0s !important; } /* Skip dot spring animation — just show dot immediately */ .tet-item.is-visible .tet-dot { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ═══════════════════════════════════════════════════════════════ PHOTO STRIP — continuous auto-scrolling portrait photo strip Sits between the edu/exp section and the footer, full-bleed. Gray placeholder boxes are visible before real photos are added. Drop photos into /images/gallery/ as photo1.jpg–photo10.jpg. Hover pauses the scroll. ═══════════════════════════════════════════════════════════════ */ .photo-strip { width: 100%; overflow: hidden; padding: 0; background-color: #FAFAF9; /* matches page background — prevents bleed-through */ position: relative; z-index: 1; } .photo-strip-track { display: flex; gap: 8px; width: max-content; animation: photoScroll 30s linear infinite; } .photo-strip-track:hover { animation-play-state: paused; } /* Portrait-ratio boxes — visible as gray placeholders before real photos load. Fixed width + height ensures they have size even with a missing/broken src. background-color shows through until the image paints over it. */ .photo-strip-track img { width: 280px; height: 380px; object-fit: cover; flex-shrink: 0; display: block; background-color: #e0ddd8; /* matches the site's muted off-white palette */ border: none; outline: none; box-shadow: none; } /* Continuous scroll: translate exactly one full set width (-50% of doubled track) */ @keyframes photoScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 1024px) { .photo-strip-track img { width: 220px; height: 300px; } } @media (max-width: 768px) { .photo-strip-track img { width: 160px; height: 220px; } }