/* ═══════════════════════════════════════════════════════════════ PORTFOLIO — styles.css ───────────────────────────────────────────────────────────── TABLE OF CONTENTS (Ctrl/Cmd+F the section number to jump there) 1. Tokens — colours, fonts, sidebar width 2. Reset & base — box-sizing, body, scrollbar 3. Custom cursor — dot + lagging ring 4. Sidebar — fixed left panel 5. Sidebar nav — track line, dots, labels 6. Scroll layout — container + strip 7. Panels — base, dark, accent, per-bg colours 8. Hero panel — opening screen 9. Project panels — image + info columns, flip variant 10. Process rows — Challenge / Approach / Outcome 11. About panel — bio + photo 12. Contact panel — headline + link list 13. Reveal classes — scroll-triggered entry animations 14. Panel counter — "01 / 06" bottom-right 15. Responsive — mobile vertical layout (≤ 900px) ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. TOKENS ───────────────────────────────────────────────────────────── All colours and fonts are defined here as CSS variables. Changing a value here updates it everywhere on the site. TO CHANGE A COLOUR: update the hex value on the right. TO CHANGE A FONT: update both the variable here AND the Google Fonts URL in the of index.html. ACCENT COLOURS: panels cycle through these. Each project panel is assigned one via data-bg="N" in index.html. Reassign which panel gets which colour there, not here. ───────────────────────────────────────────────────────────────── */ :root { /* Layout */ --sidebar-w: 260px; /* sidebar width */ --panel-w: calc(100vw - var(--sidebar-w)); /* content area width */ /* Dark theme (used by most panels) */ --dark-bg: #0c0c0c; /* page/panel background */ --dark-surface: #161616; /* slightly lighter surface (about-right col) */ --dark-border: #252525; /* subtle dividers */ --dark-text: #f0ece3; /* primary text */ --dark-muted: #555; /* secondary/label text */ /* Accent backgrounds — one per project panel To reorder: change data-bg="N" on the panel in index.html */ --accent-1: #ff4f1f; /* burnt orange → panel 1 */ --accent-2: #c6f135; /* electric lime → contact panel */ --accent-3: #7b5cff; /* deep violet → panel 3 */ --accent-4: #00d4b4; /* teal → spare */ --accent-5: #ff3fa4; /* hot pink → spare */ /* Typography */ --font-serif: 'Instrument Serif', serif; /* headings */ --font-sans: 'DM Sans', sans-serif; /* body text */ } /* ───────────────────────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Body never scrolls — JS intercepts wheel events instead */ html, body { height: 100%; overflow: hidden; } body { background: var(--dark-bg); color: var(--dark-text); font-family: var(--font-sans); font-size: 16px; cursor: none; /* hides default cursor — replaced by .cursor elements */ display: flex; } /* Hide the native scrollbar (not needed in this layout) */ ::-webkit-scrollbar { width: 0; } /* ───────────────────────────────────────────────────────────── 3. CUSTOM CURSOR ───────────────────────────────────────────────────────────── .cursor → small filled dot, follows mouse exactly .cursor-ring → larger ring, chases the dot with lag (lerp in JS) TO CHANGE SIZE: update width/height on .cursor or .cursor-ring TO CHANGE COLOUR: update background on .cursor and border on .cursor-ring TO REMOVE CURSOR: delete these rules and remove cursor:none from body, then delete the cursor JS section in script.js ───────────────────────────────────────────────────────────────── */ .cursor { width: 10px; height: 10px; background: var(--accent-2); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease, background 0.3s ease; mix-blend-mode: difference; /* inverts colour against whatever's beneath it */ } .cursor-ring { width: 36px; height: 36px; border: 1.5px solid var(--accent-2); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); opacity: 0.5; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; } /* Hover state — JS adds .cursor-hover to on interactive elements */ body.cursor-hover .cursor { transform: translate(-50%, -50%) scale(2.8); } body.cursor-hover .cursor-ring { width: 64px; height: 64px; opacity: 0.2; } /* ───────────────────────────────────────────────────────────── 4. SIDEBAR ───────────────────────────────────────────────────────────── Fixed to the left. Always visible. Never scrolls. .sidebar.light → applied by JS when an accent panel is active inverts text/borders to dark so they read on bright backgrounds (orange, lime, teal, pink) .sidebar.light is NOT applied on the violet panel (data-theme="dark") because violet is too dark for black text. TO CHANGE SIDEBAR WIDTH: update --sidebar-w in Tokens above. ───────────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); height: 100vh; position: fixed; top: 0; left: 0; border-right: 1px solid var(--dark-border); display: flex; flex-direction: column; padding: 48px 36px; z-index: 500; background: var(--dark-bg); transition: background 0.6s ease, border-color 0.6s ease; } /* Light mode overrides (bright accent panel is active) */ .sidebar.light { background: transparent; border-right-color: rgba(0,0,0,0.12); } .sidebar.light .sidebar-logo { color: #111; } .sidebar.light .sidebar-title { color: rgba(0,0,0,0.4); } .sidebar.light .sidebar-footer { color: #111; } .sidebar.light .sidebar-footer a { color: #111; } .sidebar.light .sidebar-photo { border-color: rgba(0,0,0,0.2); } .sidebar.light .nav-track { background: rgba(0,0,0,0.1); } .sidebar.light .nav-track-fill { background: #111; } .sidebar.light .nav-dot { border-color: rgba(0,0,0,0.2); background: transparent; } .sidebar.light .nav-item.active .nav-dot { background: #111; border-color: #111; } .sidebar.light .nav-item:hover .nav-dot { background: #111; border-color: #111; } .sidebar.light .nav-label { color: rgba(0,0,0,0.4); } .sidebar.light .nav-item.active .nav-label { color: #111; } .sidebar.light .nav-item:hover .nav-label { color: #111; } /* Sidebar content */ .sidebar-logo { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--dark-text); margin-bottom: 5px; transition: color 0.4s ease; } .sidebar-title { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: 24px; transition: color 0.4s ease; } /* Photo box — square, clips to fill */ .sidebar-photo { width: 100%; aspect-ratio: 1 / 1; background: var(--dark-surface); border: 1px dashed var(--dark-border); margin-bottom: 32px; overflow: hidden; position: relative; flex-shrink: 0; transition: border-color 0.4s ease; } .sidebar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-photo-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--dark-muted); font-size: 0.65rem; letter-spacing: 0.08em; text-align: center; } .sidebar-photo-label span { font-size: 1.5rem; opacity: 0.25; } .sidebar-footer { font-size: 0.68rem; color: var(--dark-muted); line-height: 1.9; transition: color 0.4s ease; margin-top: 24px; } .sidebar-footer a { color: var(--dark-muted); text-decoration: none; transition: color 0.2s; } .sidebar-footer a:hover { color: var(--dark-text); } /* ───────────────────────────────────────────────────────────── 5. SIDEBAR NAV (Lightweight-style progress track) ───────────────────────────────────────────────────────────── Items are spread top-to-bottom with justify-content:space-between. A 1px line runs behind all of them. A second element (.nav-track-fill) grows from 0% → 100% as you scroll, driven by script.js → animLoop() → step (g). Each .nav-dot sits directly on the line. TO ADD A NAV ITEM: copy a .nav-item line in index.html. TO REMOVE: delete the .nav-item line in index.html. (The fill and spacing update automatically — no CSS changes needed.) TO CHANGE THE FILL COLOUR: update .nav-track-fill background below. (It currently inherits --accent-2 / lime.) ───────────────────────────────────────────────────────────────── */ .nav { position: relative; display: flex; flex-direction: column; justify-content: space-between; /* evenly distributes items top–bottom */ flex: 1; padding: 6px 0 6px 22px; /* left gap = room for dot + line */ } /* Static full-height track */ .nav-track { position: absolute; left: 3px; /* aligns with dot centre: dot is 7px wide, padding is 22px, 22-7/2=18.5 → adjusted to 3 for visual alignment */ top: 0; bottom: 0; width: 1px; background: var(--dark-border); transition: background 0.4s ease; } /* Filled portion — height set each frame by JS */ .nav-track-fill { position: absolute; top: 0; left: 0; right: 0; height: 0%; background: var(--accent-2); /* TO CHANGE: update this colour */ transition: background 0.4s ease; /* No height transition here — JS lerps smoothly on its own */ } /* Each nav item */ .nav-item { display: flex; align-items: center; gap: 13px; text-decoration: none; position: relative; z-index: 1; margin-left: -22px; /* pulls the dot back onto the track line */ padding: 3px 0 3px 22px; } /* Dot on the track */ .nav-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dark-border); background: var(--dark-bg); flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease, border-color 0.3s ease; } .nav-item.active .nav-dot { background: var(--accent-2); /* active dot fill colour */ border-color: var(--accent-2); transform: scale(1.6); /* active dot is slightly larger */ } .nav-item:hover .nav-dot { border-color: var(--dark-text); transform: scale(1.3); } /* Label text (only shown on named items: Intro, About, Contact) */ .nav-label { font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dark-muted); line-height: 1; transition: color 0.2s ease; white-space: nowrap; } .nav-item.active .nav-label, .nav-item:hover .nav-label { color: var(--dark-text); } /* Project items (.is-project) have slightly smaller dots (same size, kept for override hook) */ .nav-item.is-project .nav-label { font-size: 0.62rem; letter-spacing: 0.09em; } .nav-item.is-project.active .nav-label { color: var(--dark-text); } /* ───────────────────────────────────────────────────────────── 6. SCROLL LAYOUT ───────────────────────────────────────────────────────────── .scroll-container clips to one panel at a time (overflow:hidden) .h-strip the wide flex row; JS slides it with translateX ───────────────────────────────────────────────────────────────── */ .scroll-container { margin-left: var(--sidebar-w); width: var(--panel-w); height: 100vh; overflow: hidden; position: relative; } .h-strip { display: flex; height: 100vh; will-change: transform; /* hints to browser to GPU-accelerate this element */ } /* ───────────────────────────────────────────────────────────── 7. PANELS ───────────────────────────────────────────────────────────── Each panel is exactly one viewport wide + tall. Two themes: .dark (charcoal) and .accent (bright background). Per-panel foreground colours are set as --fg, --fg-muted, --border-c on each panel. Child elements reference these variables so they automatically flip with the panel theme. TO CHANGE A PANEL'S BACKGROUND COLOUR: In index.html, change data-bg="N" on the panel. N maps to --accent-N in Tokens above. Also update data-theme="light" or "dark" to match. ───────────────────────────────────────────────────────────────── */ .panel { width: var(--panel-w); height: 100vh; flex-shrink: 0; position: relative; overflow: hidden; display: flex; align-items: stretch; } /* Dark panel tokens */ .panel.dark { background: var(--dark-bg); color: var(--dark-text); --fg: var(--dark-text); --fg-muted: var(--dark-muted); --border-c: var(--dark-border); } /* Accent panel base tokens (overridden per data-bg below) */ .panel.accent { --fg: #0c0c0c; --fg-muted: rgba(0, 0, 0, 0.45); --border-c: rgba(0, 0, 0, 0.12); color: #0c0c0c; } /* Specific background colours */ .panel[data-bg="1"] { background: var(--accent-1); } .panel[data-bg="2"] { background: var(--accent-2); } .panel[data-bg="3"] { /* Violet is dark enough to need light text — override the accent defaults */ background: var(--accent-3); --fg: #f0ece3; --fg-muted: rgba(240, 236, 227, 0.5); --border-c: rgba(255, 255, 255, 0.12); color: #f0ece3; } .panel[data-bg="4"] { background: var(--accent-4); } .panel[data-bg="5"] { background: var(--accent-5); } .panel-inner { width: 100%; height: 100%; display: flex; position: relative; } /* ───────────────────────────────────────────────────────────── 8. HERO PANEL ───────────────────────────────────────────────────────────── Content sits bottom-left. The giant "UX" is a decorative background element (no semantic meaning). TO CHANGE THE BG WORD: update the text inside .hero-bg-word in index.html, or remove it entirely if you don't want it. TO CHANGE HEADLINE SIZE: update font-size on .hero-title. clamp(min, preferred, max) — three values: min = size on narrow viewports preferred = scales with viewport width (vw unit) max = caps out on wide viewports ───────────────────────────────────────────────────────────────── */ .hero-panel .panel-inner { flex-direction: column; justify-content: flex-end; padding: 0 80px 72px; } .hero-tag { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-1); /* TO CHANGE: swap for any colour or variable */ margin-bottom: 20px; } .hero-title { font-family: var(--font-serif); font-size: clamp(4rem, 9vw, 9rem); line-height: 0.9; letter-spacing: -0.04em; max-width: 850px; margin-bottom: 32px; } .hero-title em { font-style: italic; color: var(--accent-2); /* TO CHANGE: swap for any colour */ } .hero-sub { font-size: 1rem; color: var(--dark-muted); max-width: 380px; line-height: 1.75; margin-bottom: 48px; } .hero-cta { display: inline-flex; align-items: center; gap: 14px; background: var(--accent-2); color: #0c0c0c; text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 28px; transition: gap 0.3s ease, box-shadow 0.3s ease; } .hero-cta:hover { gap: 22px; box-shadow: 0 0 60px rgba(198, 241, 53, 0.25); } /* Giant decorative word in the background */ .hero-bg-word { position: absolute; top: 0; right: -30px; font-family: var(--font-serif); font-size: 38vw; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--dark-border); pointer-events: none; user-select: none; opacity: 0.6; } /* Animated scroll hint bottom-right */ .scroll-cue { position: absolute; bottom: 72px; right: 80px; display: flex; align-items: center; gap: 12px; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-muted); } .scroll-cue-arrow { animation: nudge 2s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } } /* ───────────────────────────────────────────────────────────── 9. PROJECT PANELS ───────────────────────────────────────────────────────────── Layout: two columns — image (flex:1.1) and info (flex:0.9). The image column is slightly wider than the info column. .flip variant swaps which side image/info appear on. To flip a panel: add class="flip" to the .project-panel div. TO CHANGE COLUMN SPLIT: Increase/decrease the flex values on .proj-image-col and .proj-info-col. They don't need to add up to 2 — flex just distributes available space proportionally. .proj-img-wrap is taller than its container (inset: -10% 0) so the parallax offset in script.js never reveals a gap. ───────────────────────────────────────────────────────────────── */ .project-panel .panel-inner { flex-direction: row; } /* Image column */ .proj-image-col { flex: 1.1; position: relative; overflow: hidden; } .proj-img-wrap { position: absolute; inset: -10% 0; /* 10% taller than container — room for parallax shift */ display: flex; align-items: center; justify-content: center; will-change: transform; } .proj-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder geometric shape (shown before real image is added) */ .proj-placeholder { width: 52%; aspect-ratio: 1 / 1; border: 1px solid var(--border-c, rgba(255, 255, 255, 0.15)); position: relative; opacity: 0.25; } .proj-placeholder::before { content: ''; position: absolute; inset: 18%; background: var(--fg, #f0ece3); opacity: 0.15; } .proj-placeholder::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28%; height: 28%; border-radius: 50%; background: var(--fg, #f0ece3); opacity: 0.3; } /* Info column */ .proj-info-col { flex: 0.9; display: flex; flex-direction: column; justify-content: center; padding: 72px 72px 72px 56px; border-left: 1px solid var(--border-c, rgba(255, 255, 255, 0.1)); position: relative; } .panel.accent .proj-info-col { border-left-color: var(--border-c); } /* Flipped layout — image right, info left */ .project-panel.flip .proj-image-col { order: 2; } .project-panel.flip .proj-info-col { order: 1; border-left: none; border-right: 1px solid var(--border-c, rgba(255, 255, 255, 0.1)); padding: 72px 56px 72px 72px; } /* Project text elements */ .proj-num { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 40px; font-family: var(--font-serif); } .proj-category { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 12px; } .proj-title { font-family: var(--font-serif); font-size: clamp(2.6rem, 5vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--fg, #f0ece3); margin-bottom: 24px; } .proj-title em { font-style: italic; } /* "View case study →" link */ .proj-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg, #f0ece3); border-bottom: 1px solid var(--fg, #f0ece3); padding-bottom: 5px; width: fit-content; transition: gap 0.25s ease, opacity 0.2s ease; } .proj-link:hover { gap: 22px; opacity: 0.7; } /* Large decorative number in panel background */ .proj-bg-num { position: absolute; bottom: -20px; right: 40px; font-family: var(--font-serif); font-size: 28vw; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--border-c, rgba(255, 255, 255, 0.07)); pointer-events: none; user-select: none; } /* ───────────────────────────────────────────────────────────── 10. PROCESS BREAKDOWN (Challenge / Approach / Outcome) ───────────────────────────────────────────────────────────── Three rows in a definition-list style grid. Each row fades up with a staggered delay when the panel receives the .active class from script.js. TO ADD A ROW: copy a .proc-row block in index.html. Add a matching nth-child delay rule here. TO REMOVE A ROW: delete the .proc-row block in index.html. TO CHANGE LABEL WIDTH: update the first value in grid-template-columns. ───────────────────────────────────────────────────────────────── */ .proj-process { display: flex; flex-direction: column; margin-bottom: 40px; border-top: 1px solid var(--border-c, rgba(255, 255, 255, 0.12)); } .proc-row { display: grid; grid-template-columns: 90px 1fr; /* label width | value */ gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-c, rgba(255, 255, 255, 0.08)); opacity: 0; transform: translateY(8px); transition: transform 0.35s ease, opacity 0.35s ease; } /* Rows animate in when the panel becomes active */ .panel.active .proc-row { opacity: 1; transform: translateY(0); } .proc-row:nth-child(1) { transition-delay: 0.25s; } .proc-row:nth-child(2) { transition-delay: 0.35s; } .proc-row:nth-child(3) { transition-delay: 0.45s; } /* If you add a 4th row, add: .proc-row:nth-child(4) { transition-delay: 0.55s; } */ .proc-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); padding-top: 2px; line-height: 1.5; } .proc-value { font-size: 0.85rem; line-height: 1.6; color: var(--fg, #f0ece3); } /* ───────────────────────────────────────────────────────────── 11. ABOUT PANEL ───────────────────────────────────────────────────────────── Two-column grid: bio text (left) and photo (right). TO CHANGE THE SPLIT: update grid-template-columns. "1fr 1fr" → equal columns (current) "3fr 2fr" → wider text column "1fr" → single column (also set in responsive below) ───────────────────────────────────────────────────────────────── */ .about-panel .panel-inner { display: grid; grid-template-columns: 1fr 1fr; } .about-left { display: flex; flex-direction: column; justify-content: center; padding: 80px 64px 80px 80px; border-right: 1px solid var(--dark-border); } .about-tag { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: 40px; } .about-headline { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 4.5rem); line-height: 0.97; letter-spacing: -0.03em; margin-bottom: 32px; } .about-headline em { font-style: italic; color: var(--accent-3); /* TO CHANGE: swap for any accent variable */ } .about-body { font-size: 0.92rem; color: var(--dark-muted); line-height: 1.8; margin-bottom: 20px; max-width: 420px; } /* Skill tags container */ .skills-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 36px; } /* Individual skill tag */ .skill-tag { font-size: 0.7rem; letter-spacing: 0.07em; border: 1px solid var(--dark-border); padding: 6px 13px; color: var(--dark-muted); transition: border-color 0.2s, color 0.2s; } .skill-tag:hover { border-color: var(--accent-2); color: var(--accent-2); } /* Right column — photo */ .about-right { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 64px; background: var(--dark-surface); } .about-photo-wrap { width: min(320px, 60%); aspect-ratio: 3 / 4; /* portrait crop — TO CHANGE: e.g. "1/1" for square */ background: var(--dark-bg); border: 1px dashed var(--dark-border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--dark-muted); font-size: 0.72rem; letter-spacing: 0.06em; } .about-photo-wrap span { font-size: 2rem; opacity: 0.2; } .about-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ───────────────────────────────────────────────────────────── 12. CONTACT PANEL ───────────────────────────────────────────────────────────── Full-screen lime background. Headline + vertical link list. The large "Hi" word is a decorative background element. TO ADD A LINK: copy one block in HTML. TO REMOVE: delete one block. TO CHANGE LINK HOVER BG: update background on .contact-link::before. ───────────────────────────────────────────────────────────────── */ .contact-panel .panel-inner { flex-direction: column; justify-content: center; padding: 0 80px; } .contact-tag { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); margin-bottom: 36px; } .contact-headline { font-family: var(--font-serif); font-size: clamp(3.5rem, 8.5vw, 8.5rem); line-height: 0.9; letter-spacing: -0.04em; color: #0c0c0c; margin-bottom: 56px; } .contact-links { display: flex; flex-direction: column; } .contact-link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: rgba(0, 0, 0, 0.6); font-size: 1.05rem; font-weight: 300; padding: 22px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; transition: color 0.25s ease, padding-left 0.3s ease; max-width: 520px; } /* Hover fill that sweeps in from the left */ .contact-link::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: rgba(0, 0, 0, 0.06); transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; } .contact-link:hover { color: #0c0c0c; padding-left: 14px; } .contact-link:hover::before { width: 100%; } .contact-arrow { transition: transform 0.3s ease; } .contact-link:hover .contact-arrow { transform: translateX(5px) rotate(-45deg); } /* Decorative large word in background */ .contact-bg-word { position: absolute; bottom: -40px; right: -20px; font-family: var(--font-serif); font-size: 36vw; line-height: 0.85; letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.06); pointer-events: none; user-select: none; } /* ───────────────────────────────────────────────────────────── 13. REVEAL ANIMATIONS ───────────────────────────────────────────────────────────── Elements start invisible and slightly offset. When their panel gets the .active class (added by script.js), the transition runs and they slide into their final position. data-delay="N" staggers elements within the same panel so they cascade in one after another rather than all at once. TO ADD A DELAY VALUE: add a new [data-delay="N"] rule below and use data-delay="N" on the element in index.html. TO CHANGE ANIMATION SPEED: update the 0.8s duration values. TO CHANGE EASING: update cubic-bezier(...) — or swap for ease, ease-out, etc. NOTE: .hero-panel overrides these with a CSS @keyframes animation (see below) because the hero loads immediately, not on scroll. ───────────────────────────────────────────────────────────────── */ /* Starting states */ .reveal-up { opacity: 0; transform: translateY(50px); } .reveal-left { opacity: 0; transform: translateX(-40px); } .reveal-right { opacity: 0; transform: translateX(40px); } /* Shared transition */ .reveal-up, .reveal-left, .reveal-right { transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); } /* End state — applied when parent panel gets .active */ .panel.active .reveal-up, .panel.active .reveal-left, .panel.active .reveal-right { opacity: 1; transform: translate(0, 0); } /* Stagger delays */ [data-delay="1"] { transition-delay: 0.10s; } [data-delay="2"] { transition-delay: 0.20s; } [data-delay="3"] { transition-delay: 0.30s; } [data-delay="4"] { transition-delay: 0.45s; } [data-delay="5"] { transition-delay: 0.60s; } /* Add more if needed: [data-delay="6"] { transition-delay: 0.75s; } */ /* Hero uses a CSS keyframe animation on load (not scroll-triggered) */ .hero-panel .reveal-up { animation: fadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards; opacity: 0; } .hero-panel .reveal-up:nth-child(1) { animation-delay: 0.20s; } .hero-panel .reveal-up:nth-child(2) { animation-delay: 0.35s; } .hero-panel .reveal-up:nth-child(3) { animation-delay: 0.50s; } .hero-panel .reveal-up:nth-child(4) { animation-delay: 0.65s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────── 14. PANEL COUNTER ───────────────────────────────────────────────────────────── Fixed to the bottom-right. Shows "01 / 06". JS updates the text every animation frame. .light class flips it dark when an accent panel is active. TO HIDE IT: add display:none below (or remove the element from HTML). ───────────────────────────────────────────────────────────────── */ .panel-counter { position: fixed; bottom: 32px; right: 40px; font-size: 0.65rem; letter-spacing: 0.14em; color: var(--dark-muted); z-index: 300; font-family: var(--font-serif); transition: color 0.4s ease; } .panel-counter.light { color: rgba(0, 0, 0, 0.35); } /* ───────────────────────────────────────────────────────────── 15. RESPONSIVE (breakpoint: ≤ 900px) ───────────────────────────────────────────────────────────── Below 900px the horizontal scroll layout is disabled. Panels stack vertically and the browser's native scroll is used. The sidebar collapses into a top nav bar. WHY 900px? The two-column project layout needs at least ~800px to breathe. 900px gives a small buffer. TO CHANGE: update the max-width below. THINGS THAT CHANGE AT THIS BREAKPOINT: • html/body overflow → auto (re-enables native scroll) • --sidebar-w → 0 (removes sidebar offset from layout) • .sidebar → sticky top bar (horizontal row) • .h-strip → vertical flex column, transform locked off • .panel → full width, auto height (stacks naturally) • .project-panel → single column (image on top, text below) • .about-panel → single column • Reveal animations → all visible by default (no JS scroll needed) ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Re-enable native scroll */ html, body { height: auto; overflow: auto; } /* Reset layout variables for full-width panels */ :root { --sidebar-w: 0px; --panel-w: 100vw; } body { flex-direction: column; } /* Sidebar → sticky top bar */ .sidebar { width: 100%; height: auto; position: sticky; top: 0; flex-direction: row; padding: 16px 20px; border-right: none; border-bottom: 1px solid var(--dark-border); } /* Hide elements that don't fit in a top bar */ .sidebar-title, .sidebar-photo, .sidebar-footer { display: none; } /* Nav → horizontal row, right-aligned */ .nav { flex-direction: row; flex: 0; gap: 16px; margin-left: auto; padding: 0; justify-content: flex-end; } .nav-track { display: none; } /* hide progress track */ .nav-item { margin-left: 0; padding: 0; gap: 6px; } .nav-dot { display: none; } /* hide dots — labels only */ .nav-label { font-size: 0.75rem; letter-spacing: 0.05em; } /* Scroll container → normal flow */ .scroll-container { margin-left: 0; width: 100vw; height: auto; overflow: visible; } /* Strip → vertical stack, no translateX */ .h-strip { flex-direction: column; height: auto; transform: none !important; /* override any JS-set transform */ } /* Panels → full width, auto height */ .panel { width: 100vw; height: auto; min-height: 100svh; /* svh = small viewport height — handles mobile browser chrome */ } /* Project panels → stack image on top, text below */ .project-panel .panel-inner { flex-direction: column; } .proj-image-col { flex: none; height: 55vw; } .proj-img-wrap { inset: 0; } /* no parallax overflow on mobile */ /* Info column — same padding regardless of flip */ .proj-info-col, .project-panel.flip .proj-info-col { border: none; border-top: 1px solid var(--border-c, rgba(255,255,255,0.1)); padding: 40px 24px; order: 2; } .project-panel.flip .proj-image-col { order: 1; } /* About panel → single column */ .about-panel .panel-inner { grid-template-columns: 1fr; } .about-left { padding: 60px 24px; border-right: none; border-bottom: 1px solid var(--dark-border); } .about-right { padding: 40px 24px; } /* Hero + Contact panels → tighter side padding */ .hero-panel .panel-inner { padding: 0 24px 60px; } .contact-panel .panel-inner { padding: 60px 24px; } /* Hide decorative elements that cause overflow issues on mobile */ .panel-counter { display: none; } .proj-bg-num { display: none; } /* All animated elements → visible immediately on mobile (no horizontal scroll means the JS reveal trigger doesn't fire) */ .reveal-up, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; } } /* ─── end @media (max-width: 900px) ─────────────────────────── */