/* * mobile.css — andresmerino.com * Responsive overrides for all pages. * Applied ONLY via media queries — desktop styles are never touched. * Injection: in */ /* ============================================================ SHARED — applies across all pages at ≤ 768px ============================================================ */ @media (max-width: 768px) { /* ── Viewport height fix for iOS Safari URL bar ── */ :root { --vh-fix: 1px; /* overridden by mobile.js */ } /* ── Nav: shared across all pages ── */ nav { padding: 1.1rem 1.5rem !important; } /* ── Footer: shared ── */ footer { padding: 1.5rem !important; flex-direction: column; gap: 0.5rem; font-size: 0.4rem !important; } /* ── Side contact: already hidden at 1024px on some pages, ensure hidden on all ── */ .side-contact { display: none !important; } /* ── Lightbox: make nav controls bigger for touch ── */ .lb-nav, .lb-controls { gap: 2rem !important; bottom: -3.5rem !important; } .lb-nav span, .lb-controls span { font-size: 0.65rem !important; padding: 0.5rem 0.75rem; cursor: pointer; } /* Lightbox media max dimensions */ .lb-content img, .lb-content video, .lb-img-wrap img { max-width: 98vw !important; max-height: 75vh !important; } } /* ============================================================ INDEX.HTML — The most complex transformation ============================================================ */ @media (max-width: 768px) { /* Unlock body scroll (desktop locks it for the split layout) */ body:has(.index-container) { overflow: auto !important; overflow-x: hidden !important; } /* Fallback for browsers without :has() — mobile.js adds .mobile-index to body */ body.mobile-index { overflow: auto !important; overflow-x: hidden !important; } /* Stack the two-column layout vertically */ .index-container { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100vh; } /* Hero image: show it first, as a tall hero banner */ .index-right { order: -1; height: 55vw !important; /* ≈ landscape ratio */ min-height: 220px; max-height: 340px; width: 100%; position: relative !important; overflow: hidden; } /* Remove left-to-right gradient fade that hides the image on desktop */ .index-right::after { background: linear-gradient(to bottom, rgba(5,5,5,0.2) 0%, rgba(5,5,5,0.7) 100%) !important; } /* Left panel: full width, scrollable */ .index-left { padding: 2rem 1.5rem 4rem !important; border-right: none !important; height: auto !important; } /* Title size */ .artist-title { font-size: clamp(2.5rem, 12vw, 4rem) !important; margin-bottom: 1rem !important; } /* Contact button: full width on mobile */ .contact-btn { width: 100%; justify-content: center; margin-bottom: 2.5rem !important; } /* Hide desktop nav links on mobile — hamburger fully replaces them. The hamburger button is fixed top-right and has its own "Get in Touch" CTA. */ nav .nav-links { display: none !important; } /* Project list: comfortable tap targets */ .project-list { gap: 1.75rem !important; } /* ── Project link colour hierarchy on mobile ── Desktop relies on the adjacent hero image for contrast. On mobile the links sit on a plain dark background so we brighten the text to read as clearly active links, while keeping the NDA entry visually distinct. */ /* Public projects: clearly readable, not muted */ .project-link { color: #c0c0c0 !important; } .project-link .num { color: #888 !important; } .project-link .name { font-size: 1rem !important; color: #d8d8d8 !important; /* brightest — the actual title */ } .project-link .tags { color: #888 !important; /* subordinate descriptor */ } /* NDA / password-protected entry stays white (inline style) but let the tags remain darker to signal it is different in nature */ .project-link.nda-link .tags { color: #555 !important; } .project-link:hover { transform: none !important; /* disable translateX on touch */ } } @media (max-width: 480px) { .index-right { height: 60vw !important; max-height: 280px; } nav .nav-links { gap: 0.75rem !important; } .artist-title { font-size: clamp(2.2rem, 14vw, 3.5rem) !important; } } /* ============================================================ PROJECT PAGES — Gallery Modules (avatar, dads-house, kayara, etc.) ============================================================ */ @media (max-width: 768px) { /* ── Hero ── */ .hero { height: 56vw !important; min-height: 200px; max-height: 400px; } .hero-text, .hero-title-wrap { bottom: 1.5rem !important; left: 1.5rem !important; right: 1.5rem; } .hero-text h1, .hero-title { font-size: clamp(2.2rem, 10vw, 4rem) !important; } .hero-subtitle { font-size: 0.45rem !important; } /* ── Gallery container ── */ .gallery { padding: 3rem 1.25rem 6rem !important; gap: 4rem !important; } /* ── mod-full ── */ .mod-full { width: 100% !important; max-width: 100% !important; } /* ── mod-split: 2-col → 1-col ── */ .mod-split { grid-template-columns: 1fr !important; gap: 2rem !important; } /* ── mod-split-asym: 6fr 4fr → 1-col ── */ .mod-split-asym { grid-template-columns: 1fr !important; gap: 2rem !important; align-items: start !important; } /* ── mod-stack ── */ .mod-stack { gap: 2rem !important; width: 100% !important; } .mod-stack > .tile-wrap { width: 100% !important; } /* ── mod-inset-left: absolute inset image → stacked below ── */ .mod-inset-left { position: relative !important; } .mod-inset-left .bg-layer { width: 100% !important; } .mod-inset-left .front-layer { position: static !important; /* remove absolute positioning */ width: 60% !important; margin: 1.5rem auto 0 !important; box-shadow: none !important; border: none !important; } /* ── mod-overlap-tr: absolute top-right overlay → stacked ── */ .mod-overlap-tr { max-width: 100% !important; } .mod-overlap-tr .main-layer { width: 100% !important; display: block !important; } .mod-overlap-tr .top-right-layer { position: static !important; /* remove absolute positioning */ width: 55% !important; margin: 1.25rem auto 0 !important; border: none !important; box-shadow: none !important; top: auto !important; right: auto !important; } /* ── mod-center-wings: complex 12-col overlapping → linear stack ── */ .mod-center-wings { display: flex !important; flex-direction: column !important; gap: 1.75rem !important; } .mod-center-wings .wing-left, .mod-center-wings .center-vid, .mod-center-wings .wing-right { grid-column: auto !important; grid-row: auto !important; width: 100% !important; margin: 0 !important; /* remove negative margins */ border: none !important; box-shadow: none !important; z-index: auto !important; } /* ── Captions ── */ .caption-simple { font-size: 0.4rem !important; margin-top: 0.6rem !important; } .caption-highlight, .caption-accent { font-size: 0.5rem !important; } /* ── tile-wrap full width ── */ .tile-wrap { width: 100% !important; } /* ── Disable hover scale on touch (avoids stuck states) ── */ .tile:not(.vid):hover img { transform: none !important; } /* ── Section intro ── */ .section-intro { padding: 4rem 1.5rem 1.5rem !important; flex-direction: column !important; gap: 1rem !important; } .section-intro h2 { font-size: 2.5rem !important; } } @media (max-width: 480px) { .hero { height: 65vw !important; } .gallery { padding: 2.5rem 1rem 5rem !important; gap: 3rem !important; } .hero-text h1, .hero-title { font-size: clamp(2rem, 12vw, 3rem) !important; } .mod-inset-left .front-layer { width: 80% !important; } } /* ============================================================ PROJECT-PERSONAL.HTML — arch-block 12-col grid ============================================================ */ @media (max-width: 768px) { /* Remove complex 12-col layout → single full-width column */ .arch-block { display: flex !important; flex-direction: column !important; gap: 2rem !important; width: 100% !important; } /* All positioned items → full width, no offsets */ .a-1, .a-2, .a-3, .a-4, .a-5, .a-6 { grid-column: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; } /* Remove decorative vertical dividers */ .arch-delimiter-v { display: none !important; } /* Captions inside arch-block */ .a-1-cap, .a-2-cap { grid-column: auto !important; text-align: left !important; width: 100% !important; } .arch-label { font-size: 0.4rem !important; } /* Room sections */ .room-illustration { padding: 2rem 1.25rem 5rem !important; gap: 2rem !important; } .room-technical { padding: 4rem 1.25rem !important; } /* Technical grid */ .grid-technical { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* ── PERSONAL WORK: Pencil / Sketch collage section ── Desktop uses position:absolute with % coords inside a 120vh container. On mobile this causes random overlapping. We convert to a clean 2-col grid. ── */ .room-sketches { padding: 3rem 1.25rem 5rem !important; } .collage-wrapper { position: static !important; /* remove relative-positioned container */ height: auto !important; /* remove fixed 120vh height */ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } .sketch-item { position: static !important; /* remove absolute positioning */ width: 100% !important; /* override all desktop %-based widths */ top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; border: none !important; /* remove heavy desktop border */ box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; } .sketch-item [data-lb], .sketch-item > div { width: 100% !important; } .sketch-item img { width: 100% !important; height: auto !important; display: block !important; } } /* ============================================================ PROJECT-KAYARA.HTML — Color key grids ============================================================ */ @media (max-width: 768px) { /* Container: reduce padding and gap */ .color-script-container { padding: 1.5rem 1.25rem 6rem !important; gap: 4rem !important; } /* grid-split-stack (2fr 1fr) → single column */ .grid-split-stack { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* stack-vertical inside grid-split-stack → flat column */ .stack-vertical { flex-direction: column !important; gap: 1.5rem !important; } /* grid-split-equal (1fr 1fr) → single column */ .grid-split-equal { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* Sequence gap */ .sequence { gap: 1.5rem !important; } /* Palette bar: keep it visible, just ensure full width */ .color-palette-bar { height: 5px !important; margin-top: 0.6rem !important; } /* Legacy class names (kept for safety) */ .color-strip, .strip-grid, .kayara-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .kayara-row, .color-row { flex-direction: column !important; gap: 1.5rem !important; } .section-block, .section-full, .scene-block { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } /* ============================================================ PROJECT-DADS-HOUSE.HTML — Blueprint grid + cinematic layout ============================================================ */ @media (max-width: 768px) { /* layout-cinematic 12-col → single column */ .layout-cinematic { display: flex !important; flex-direction: column !important; gap: 1.75rem !important; } .lc-full, .lc-half-1, .lc-half-2, .lc-wide, .lc-narrow { grid-column: auto !important; width: 100% !important; } /* Blueprint grid: auto-fill 400px → single column */ .grid-blueprint { grid-template-columns: 1fr !important; } /* Blueprint feature: 2-col → 1-col */ .blueprint-feature { grid-template-columns: 1fr !important; padding: 1.25rem !important; } .room-color { padding: 0 1.25rem 6rem !important; } .room-line { padding: 4rem 0 8rem !important; } .line-container { padding: 0 1.25rem !important; } /* Blueprint card */ .blueprint-card { padding: 1rem !important; } /* tech-label */ .tech-label { flex-direction: column !important; gap: 0.25rem !important; font-size: 0.4rem !important; } /* Project nav */ .project-nav { padding: 2rem 1.25rem !important; flex-direction: column !important; gap: 1rem !important; } /* Secure badge */ .secure-badge { font-size: 0.4rem !important; padding: 0.3rem 0.75rem !important; } } /* ============================================================ PROJECT-TALES.HTML — Section-based layout ============================================================ */ @media (max-width: 768px) { /* Tales uses simpler column layout, mostly padding fixes */ .tales-section, .tales-grid, .tales-row { padding-left: 1.25rem !important; padding-right: 1.25rem !important; grid-template-columns: 1fr !important; flex-direction: column !important; } /* Any multi-column grid in tales → single column */ [class*="tales-"] > *, .tales-grid > * { grid-column: 1 / -1 !important; width: 100% !important; } } /* ============================================================ NDA-LOGIN.HTML — Auth form ============================================================ */ @media (max-width: 768px) { .auth-container { padding: 1.5rem !important; align-items: flex-start !important; padding-top: 3rem !important; } .auth-title { font-size: 2.2rem !important; } .auth-desc { font-size: 0.75rem !important; } .submit-btn { font-size: 0.55rem !important; } /* Prevent iOS auto-zoom on input focus (must be ≥16px) */ .form-group input { font-size: 16px !important; letter-spacing: 0.15em !important; } } /* ============================================================ NDA-PORTFOLIO.HTML — Vault project rows ============================================================ */ @media (max-width: 768px) { /* project-row: 7fr 5fr → single column */ .project-row { grid-template-columns: 1fr !important; gap: 2rem !important; padding-bottom: 4rem !important; } /* Cancel the reverse order — always: image above, text below */ .project-row.reverse { grid-template-columns: 1fr !important; } .project-row.reverse .card-info { order: 0 !important; } /* vault-grid spacing */ .vault-grid { gap: 3rem !important; padding: 2rem 1.25rem 6rem !important; } /* nda-portfolio intro */ .section-intro h2 { font-size: 3rem !important; } .intro-text { max-width: 100% !important; } /* card info typography */ .card-info h3 { font-size: 2.5rem !important; } .card-info p { font-size: 0.85rem !important; } /* button: full width */ .btn-view { width: 100%; justify-content: center; } /* logout */ .logout-btn { font-size: 0.4rem !important; } } @media (max-width: 480px) { .card-info h3 { font-size: 2rem !important; } .section-intro h2 { font-size: 2.2rem !important; } } /* ============================================================ LIGHTBOX — touch-friendly tap targets ============================================================ */ @media (max-width: 768px) { /* Increase tap area of PREV / NEXT / CLOSE controls */ #lb-prev, #lb-next, #lb-close, .lb-controls span { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* Avatar-style lightbox */ .lb-nav { flex-direction: row !important; justify-content: space-between !important; padding: 0 1rem; } /* Personal-style lightbox */ .lb-controls { display: flex !important; justify-content: space-between !important; padding: 0 1rem; width: 100%; } /* Swipe hint (added by mobile.js) */ .lb-swipe-hint { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); font-family: 'Space Mono', monospace; font-size: 0.4rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.3); text-transform: uppercase; pointer-events: none; animation: fadeHint 3s ease forwards; } @keyframes fadeHint { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } } /* ============================================================ UTILITY — touch interaction improvements ============================================================ */ @media (max-width: 768px) { /* Prevent double-tap zoom on interactive elements */ a, button, [data-lb], .tile, .project-link, .contact-btn, .submit-btn, .btn-view, .nav-back, .nav-logo { touch-action: manipulation; } /* Smooth momentum scrolling on iOS */ body { -webkit-overflow-scrolling: touch; } /* Remove hover-dependent transforms that get stuck on touch */ .project-link:hover, .contact-btn:hover, .btn-view:hover { transform: none !important; } /* Preserve critical hover effects (opacity, color) — only disable translate */ .contact-btn:active { background: rgba(255,255,255,0.1) !important; } .btn-view:active { background: rgba(255,255,255,0.08) !important; } } /* ============================================================ HAMBURGER MENU — Mobile only (hidden on desktop via media query) Injected into DOM by mobile.js — zero impact on HTML files. ============================================================ */ /* ── Hamburger trigger button ── */ @media (max-width: 768px) { #mob-menu-btn { position: fixed; top: 0.85rem; right: 1rem; z-index: 8000; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 8, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; cursor: pointer; touch-action: manipulation; transition: background 0.3s ease, border-color 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #mob-menu-btn:active { background: rgba(20, 20, 20, 0.95); } /* Three-line hamburger icon */ #mob-menu-btn .hmb-bar { display: block; width: 18px; height: 1.5px; background: rgba(255, 255, 255, 0.85); border-radius: 2px; position: absolute; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, top 0.35s cubic-bezier(0.16, 1, 0.3, 1); } #mob-menu-btn .hmb-bar:nth-child(1) { top: calc(50% - 5px); } #mob-menu-btn .hmb-bar:nth-child(2) { top: calc(50% - 0.75px); } #mob-menu-btn .hmb-bar:nth-child(3) { top: calc(50% + 4px); } /* Open state → animate to X */ #mob-menu-btn.is-open .hmb-bar:nth-child(1) { top: calc(50% - 0.75px); transform: rotate(45deg); } #mob-menu-btn.is-open .hmb-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } #mob-menu-btn.is-open .hmb-bar:nth-child(3) { top: calc(50% - 0.75px); transform: rotate(-45deg); } /* ── Overlay ── */ #mob-overlay { position: fixed; inset: 0; z-index: 8500; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.4s ease; } #mob-overlay.is-open { background: rgba(0, 0, 0, 0.65); pointer-events: all; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ── Drawer panel ── */ #mob-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9000; width: min(310px, 88vw); background: rgba(5, 5, 5, 0.97); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-left: 1px solid rgba(255, 255, 255, 0.07); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7); transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } #mob-drawer.is-open { transform: translateX(0); } /* ── Drawer inner layout ── */ .mob-drawer-header { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: center; } .mob-drawer-brand { display: flex; flex-direction: column; gap: 0.2rem; } .mob-drawer-brand .mob-logo { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em; color: #ffffff; } .mob-drawer-brand .mob-tagline { font-family: 'Inter', sans-serif; font-size: 0.45rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } .mob-close-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; touch-action: manipulation; color: rgba(255, 255, 255, 0.5); font-size: 1rem; line-height: 1; transition: background 0.25s ease, color 0.25s ease; } .mob-close-btn:active { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ── Navigation links ── */ .mob-nav-section { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .mob-nav-label { font-family: 'Inter', sans-serif; font-size: 0.4rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); margin-bottom: 0.9rem; } .mob-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; text-decoration: none; color: rgba(255, 255, 255, 0.65); font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.03em; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: color 0.25s ease; touch-action: manipulation; } .mob-nav-link:last-child { border-bottom: none; } .mob-nav-link:active { color: #ffffff; } .mob-nav-link .mob-link-icon { width: 16px; height: 16px; opacity: 0.4; flex-shrink: 0; } .mob-nav-link.mob-back-link { color: rgba(255, 255, 255, 0.4); font-size: 0.7rem; letter-spacing: 0.06em; } /* ── Contact CTA (highlighted) ── */ .mob-contact-section { padding: 1.5rem 1.5rem; margin-top: auto; } .mob-contact-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 1.25rem; background: #ffffff; color: #000000; text-decoration: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; touch-action: manipulation; transition: background 0.25s ease, transform 0.25s ease; box-shadow: 0 8px 30px rgba(255, 255, 255, 0.12); } .mob-contact-btn:active { background: #e8e8e8; transform: scale(0.98); } .mob-contact-btn .mob-contact-icon { width: 20px; height: 20px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mob-contact-email { font-family: 'Inter', sans-serif; font-size: 0.42rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.25); margin-top: 0.9rem; text-align: center; word-break: break-all; } /* ── Prevent body scroll when drawer open ── */ body.mob-drawer-open { overflow: hidden !important; } /* ── Fade-in entrance for drawer items ── */ #mob-drawer.is-open .mob-drawer-header, #mob-drawer.is-open .mob-nav-section, #mob-drawer.is-open .mob-contact-section { animation: mobDrawerFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } #mob-drawer.is-open .mob-drawer-header { animation-delay: 0.05s; } #mob-drawer.is-open .mob-nav-section:nth-child(2) { animation-delay: 0.1s; } #mob-drawer.is-open .mob-nav-section:nth-child(3) { animation-delay: 0.15s; } #mob-drawer.is-open .mob-contact-section { animation-delay: 0.18s; } @keyframes mobDrawerFadeIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } }