/* ══════════════════════════════════════════════════════════════ MOBILE.CSS — Responsive overrides for points-sprites portfolio Breakpoint: max-width 767px (mobile) style.css is untouched — all mobile rules live here. ══════════════════════════════════════════════════════════════ */ /* ── Desktop: hide mobile-only elements ─────────────────────── */ #jn-mobile-timeline { display: none; } #nav-hamburger { display: none; } #mobile-nav-overlay { display: none; } #mobile-nav-close { display: none; } #nav-section-label { display: none; } @media (max-width: 767px) { /* ══════════════════════════════════════════════════════════════ GLOBAL ══════════════════════════════════════════════════════════════ */ * { -webkit-tap-highlight-color: transparent; } /* ══════════════════════════════════════════════════════════════ LOADING SCREEN ══════════════════════════════════════════════════════════════ */ #loading-stage { transform: scale(0.7); transform-origin: center center; } /* ══════════════════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════════════════ */ #main-nav { top: 12px; width: calc(100% - 32px); left: 16px; transform: none; border-radius: 16px; } .nav-inner { height: auto; min-height: 54px; justify-content: space-between; padding: 0 12px 0 16px; gap: 0; position: relative; /* anchor for absolutely-centred #nav-section-label */ } .nav-logo img { height: 56px; } /* Current section label — fills the gap between logo and hamburger */ #nav-section-label { display: block; position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Dosis', system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(34, 211, 238, 0.65); white-space: nowrap; pointer-events: none; transition: opacity 0.3s ease; } .nav-links { display: none !important; } /* ── Hamburger button ───────────────────────────────────────── */ /* position:fixed escapes #main-nav's backdrop-filter stacking context. z-index 400 → above overlay (300), below loading screen (500). */ #nav-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; padding: 0; border-radius: 8px; position: fixed; top: 10px; right: 15px; z-index: 400; transition: background 0.22s ease, border-color 0.22s ease; } #nav-hamburger span { display: block; width: 15px; height: 1.5px; background: rgba(255, 255, 255, 0.75); border-radius: 2px; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, width 0.3s ease; } /* Middle bar shortens slightly at rest for visual interest */ #nav-hamburger span:nth-child(2) { width: 11px; } #nav-hamburger:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); } /* X state — bars: height 1.5px, gap 4px → center-to-outer = 0.75+4+0.75 = 5.5px */ #nav-hamburger.open { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.22); } #nav-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); width: 15px; } #nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } #nav-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); width: 15px; } /* ── Mobile nav overlay ─────────────────────────────────────── */ /* Direct child — no stacking-context ancestor. Hidden state uses opacity+visibility so CSS transitions work. On open: overlaid above everything except loading screen. */ #mobile-nav-overlay { display: flex; /* always flex on mobile — visibility controls hide/show */ position: fixed; inset: 0; z-index: 300; flex-direction: column; align-items: center; justify-content: center; background: rgba(2, 9, 22, 0.96); backdrop-filter: blur(32px) saturate(140%); -webkit-backdrop-filter: blur(32px) saturate(140%); /* Closed state */ opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.32s; /* delay visibility removal until fade is done */ } #mobile-nav-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s; /* show visibility instantly on open */ } /* ── Overlay close button (top-right corner) ────────────────── */ #mobile-nav-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(180, 210, 240, 0.6); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; /* Fade in slightly after overlay itself */ opacity: 0; transform: rotate(-45deg) scale(0.7); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.28s ease 0.18s, transform 0.28s cubic-bezier(0.2, 0, 0, 1) 0.18s; } #mobile-nav-overlay.open #mobile-nav-close { opacity: 1; transform: rotate(0deg) scale(1); } #mobile-nav-close:active { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.3); color: #22d3ee; } /* ── Nav link list ──────────────────────────────────────────── */ .mobile-nav-links { list-style: none; margin: 0; padding: 0 24px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 340px; } /* Each item slides up and fades in with a stagger delay */ .mobile-nav-links li { opacity: 0; transform: translateY(18px); transition: opacity 0.36s ease calc(var(--i, 0) * 52ms + 60ms), transform 0.36s cubic-bezier(0.2, 0, 0, 1) calc(var(--i, 0) * 52ms + 60ms); } #mobile-nav-overlay.open .mobile-nav-links li { opacity: 1; transform: translateY(0); } /* Snap items back to hidden instantly on close so next open feels fresh */ #mobile-nav-overlay:not(.open) .mobile-nav-links li { transition: none; } .mobile-nav-links li a { display: flex; align-items: center; justify-content: space-between; font-family: 'Dosis', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(180, 220, 240, 0.7); text-decoration: none; padding: 14px 20px; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mobile-nav-links li a::after { content: '→'; font-size: 13px; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } .mobile-nav-links li a:active, .mobile-nav-links li a:hover { background: rgba(34, 211, 238, 0.07); border-color: rgba(34, 211, 238, 0.14); color: rgba(200, 240, 255, 0.95); } .mobile-nav-links li a:active::after, .mobile-nav-links li a:hover::after { opacity: 0.5; transform: translateX(0); } .mobile-nav-links li a.active { color: #b8e8ff; background: rgba(34, 211, 238, 0.06); border-color: rgba(34, 211, 238, 0.16); } .mobile-nav-links li a.active::after { content: '●'; font-size: 6px; opacity: 0.6; transform: none; } /* ══════════════════════════════════════════════════════════════ HOME SECTION ══════════════════════════════════════════════════════════════ */ #home-section { gap: 20px; padding: 0 20px; overflow-x: hidden; overflow-y: auto; } #home-radar-rings { transform: scale(0.6); transform-origin: center center; } #home-name { font-size: clamp(28px, 8vw, 42px) !important; letter-spacing: 0.1em; } #home-identity { margin-top: 48px; } #home-role, #home-oneliner { font-size: clamp(11px, 3vw, 13px) !important; letter-spacing: 0.18em; } #home-cards { flex-direction: column; width: auto; align-items: center; gap: 10px; } .home-card { min-width: unset; width: min(280px, calc(100vw - 48px)); padding: 14px 18px; justify-content: flex-start; } #home-cards { margin-top: 48px; } .home-card-body { flex: unset; } /* ══════════════════════════════════════════════════════════════ STACK SECTION ══════════════════════════════════════════════════════════════ */ #stack-section { padding: 10px 0 0; display: flex; flex-direction: column; } .stack-tabs-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 20px; padding: 0 16px 8px; flex-shrink: 0; } .stack-tabs-nav::-webkit-scrollbar { display: none; } .stack-tab-btn { flex-shrink: 0; font-size: 10px; letter-spacing: 0.08em; padding: 5px 0 6px; } .badge { font-size: 10px; padding: 3px 10px; gap: 5px; } .stack-panels-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; } /* Keep panels absolute-stacked so GSAP transitions work — add overflow-y: auto so active panel content scrolls */ .stack-panel { flex-direction: column; gap: 16px; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 48px; -webkit-overflow-scrolling: touch; } .stack-panel-right { display: none; } .stack-panel-left { flex: unset; width: 100%; } .stack-slogan { font-size: clamp(17px, 4.5vw, 24px) !important; line-height: 1.3; } .stack-label { font-size: 11px; } .stack-desc { font-size: 12px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ WORK SECTION ══════════════════════════════════════════════════════════════ */ #work-section { flex-direction: column; padding: 0; gap: 0; align-items: stretch; } /* Category list → horizontal pill strip */ #work-list-wrap { width: 100%; height: auto; max-height: unset; flex-direction: row; flex-shrink: 0; align-items: stretch; position: relative; } #work-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: auto; padding: 8px 16px; gap: 8px; flex: 1; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #work-list::-webkit-scrollbar { display: none; } .work-list-item { flex-direction: row; align-items: center; gap: 6px; padding: 7px 14px; flex-shrink: 0; border-radius: 40px; min-width: unset; height: auto; white-space: nowrap; } .work-item-sub { display: none; } .work-item-name { font-size: 12px; } .work-item-icon { font-size: 13px; } #work-scrollbar-track { display: none; } /* Card wrap: fills remaining section height */ #work-card-wrap { flex: none; width: 100%; height: 360px; overflow: hidden; padding: 0; margin: 0; position: relative; } /* Cards stay absolute (GSAP controls y + opacity) but scroll internally */ .work-card { overflow-y: auto; -webkit-overflow-scrolling: touch; left: 16px; right: 16px; width: calc(100% - 32px); } /* Floating image → in-card normal flow */ .work-card-img-wrap { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; height: 120px !important; pointer-events: none; z-index: auto; animation: none !important; } .work-card-img { object-fit: cover !important; border-radius: 14px 14px 0 0 !important; animation: none !important; filter: none !important; } .work-card-body { margin-top: 0 !important; padding: 14px 18px 24px; } /* Skills ticker strip at bottom — horizontal scroll on mobile */ #work-skills-wrap { flex-shrink: 0; width: 100%; height: 44px; max-height: 44px; /* Fade left/right edges instead of top/bottom */ mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .work-skill-badge { font-size: 11px; padding: 5px 12px; gap: 6px; } .work-skill-badge i { font-size: 13px; } /* ══════════════════════════════════════════════════════════════ JOURNEY SECTION ══════════════════════════════════════════════════════════════ */ #journey-section { flex-direction: column; /* Reset desktop justify-content:center — centering a scrollable flex column makes overflow content inaccessible at the top (browser can't scroll above 0) */ justify-content: flex-start; padding: 10px 16px 40px; gap: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: stretch; } #journey-left { flex: none; /* prevent flex grow/shrink from stretching it to fill column height */ height: auto; /* size to content only (header, stage hidden) */ max-width: unset; width: 100%; gap: 12px; } #journey-header { padding: 14px 16px; } #journey-name { font-size: 20px !important; } #journey-slogan { font-size: 13px; } #journey-desc { font-size: 12px; line-height: 1.6; } /* Hide the complex SVG path + actor animation on mobile */ #jn-stage-outer { display: none !important; } /* Show mobile-friendly vertical timeline */ #jn-mobile-timeline { display: block; } #journey-right { flex: unset; width: 100%; gap: 12px; padding-top: 0; } #journey-card, #journey-resume-card, #journey-hire-card { width: 100%; } #journey-avatar-wrap { width: 80px; height: 80px; } #journey-avatar { width: 100%; height: 100%; } /* ── Mobile vertical timeline styles ────────────────────────── */ #jn-mobile-timeline { position: relative; padding-left: 20px; border-left: 1px solid rgba(78, 159, 173, 0.28); margin-top: 4px; } .jnm-entry { position: relative; padding: 0 0 24px 16px; } /* Timeline dot */ .jnm-entry::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: rgba(34, 211, 238, 0.75); box-shadow: 0 0 8px rgba(34, 211, 238, 0.38); } /* Milestone entries (graduation etc) get a slightly different dot */ .jnm-entry.jnm-milestone::before { background: rgba(34, 211, 238, 0.35); border: 1px solid rgba(34, 211, 238, 0.75); width: 10px; height: 10px; left: -6px; } .jnm-company { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin-bottom: 3px; letter-spacing: 0.02em; } .jnm-role { font-size: 12px; font-weight: 600; color: rgba(34, 211, 238, 0.85); margin-bottom: 2px; } .jnm-period { font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.38); letter-spacing: 0.05em; margin-bottom: 7px; } .jnm-desc { font-size: 11px; color: rgba(255, 255, 255, 0.52); line-height: 1.55; margin-bottom: 9px; } .jnm-badges { display: flex; flex-wrap: wrap; gap: 5px; } .jnm-badges span { font-size: 10px; padding: 2px 9px; border-radius: 20px; background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.18); color: rgba(34, 211, 238, 0.7); } /* ══════════════════════════════════════════════════════════════ CALL SECTION ══════════════════════════════════════════════════════════════ */ #call-section { padding: 10px 16px 40px; justify-content: flex-start; /* prevent centering from hiding top content */ overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: stretch; } #call-header { flex-shrink: 0; text-align: center; } #call-heading { font-size: clamp(22px, 6vw, 32px); } #call-body { flex-direction: column; flex: none; /* prevent desktop flex:1 from stretching and overlapping header */ height: auto; gap: 20px; align-items: stretch; overflow-y: visible; } /* Replace "THE CALL" label with a pulsing availability badge */ #call-label { font-size: 0; /* hide original text */ letter-spacing: 0; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 10px; } #call-label::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; position: relative; animation: call-ping 2s ease-out infinite; flex-shrink: 0; } #call-label::after { content: 'AVAILABLE NOW'; font-size: 9px; font-weight: 700; letter-spacing: 0.25em; color: rgba(74, 222, 128, 0.75); } #call-header { flex-shrink: 0; text-align: center; } #call-heading { font-size: clamp(22px, 6vw, 32px); } #call-body { flex-direction: column; flex: none; /* prevent desktop flex:1 from stretching and overlapping header */ height: auto; gap: 20px; align-items: stretch; overflow-y: visible; } /* Beacon: column layout on mobile, centered */ #call-beacon { width: 100%; flex-direction: column; gap: 16px; align-items: center; padding: 20px 16px; background: rgba(255, 255, 255, 0.025); border-radius: 16px; border: 1px solid rgba(78, 159, 173, 0.1); } #call-rings-wrap { width: 160px; height: 160px; flex-shrink: 0; overflow: hidden; /* prevent oversized rings from escaping */ } /* Scale rings to match larger rings-wrap */ .call-ring { width: 144px; height: 144px; } #call-avatar-wrap { width: 96px; height: 96px; } #call-avatar { width: 96px; height: 96px; } #call-beacon-info { flex: unset; width: 100%; min-width: 0; align-items: center; /* centered in column layout */ text-align: center; } #call-name { font-size: 16px; } #call-title { font-size: 12px; } #call-available { font-size: 11px; } #call-meta { font-size: 10px; } /* Portal grid: full width, keep 2 columns */ #call-portals-grid { width: 100%; } .call-portal-handle { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Freelance column: full width */ #call-freelance { width: 100%; } .call-frl-logo { right: -10px !important; } /* ══════════════════════════════════════════════════════════════ GALLERY MODAL ══════════════════════════════════════════════════════════════ */ #gallery-container { width: min(95vw, 820px); padding: 20px 16px 16px; } #gallery-header { /*min-width: unset;*/ max-width: 100%; width: auto; padding-right: 28px; /* clear the close button */ } #gallery-stage { padding: 0; } /* Wrap hugs the image — centered by stage flexbox */ #gallery-img-wrap { width: fit-content; margin: 0 auto; } #gallery-img { /* max-width relative to the container (not the wrap) so wide images fill the space */ max-width: calc(min(95vw, 820px) - 32px); max-height: 50vh; } #gallery-title { font-size: 13px; } /* Buttons are static inside #gallery-dots on mobile */ .gallery-nav-btn { position: static; transform: none; top: auto; width: 28px; height: 28px; font-size: 16px; border-radius: 7px; flex-shrink: 0; } /* Dots row becomes: [prev] [• • •] [next] */ #gallery-dots #gallery-prev { margin-right: auto; } #gallery-dots #gallery-next { margin-left: auto; } } /* end @media (max-width: 767px) */