/* ══════════════════════════════════════════════════════ layout.css Header, hero, portfolio grid, footer, and page layout ══════════════════════════════════════════════════════ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } /* === HEADER & NAV === */ .header { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: rgba(26, 26, 28, 0.85); backdrop-filter: blur(12px); z-index: 4000; border-bottom: 1px solid var(--graphite-600); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); transform: translateZ(0); will-change: transform; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 20px; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); text-decoration: none; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.03em; } .nav { display: flex; gap: 2rem; } .nav-link { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.75rem; transition: color 0.3s ease; /* explicit, not 'all' */ position: relative; cursor: pointer; } .nav-link:hover, .nav-link.active { color: var(--text-primary); } .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--oxblood); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* Language switcher */ .language-switcher { display: flex; gap: 0.5rem; margin-left: 2rem; } .lang-btn { background: rgba(42, 42, 46, 0.5); border: 1px solid var(--graphite-600); color: var(--text-secondary); padding: 0.5rem 1rem; min-height: 44px; /* touch target minimum */ border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; } .lang-btn:hover { background: rgba(58, 58, 64, 0.8); border-color: var(--graphite-500); color: var(--text-primary); } .lang-btn.active { background: var(--graphite-500); border-color: var(--graphite-500); color: var(--text-primary); } /* Nav separator (between Contact and Tools) */ .nav-sep { color: var(--text-tertiary); font-size: 0.75rem; user-select: none; pointer-events: none; } /* Main content */ .main { margin-top: 80px; } /* ═══════════════════════════════════════════════════════ HERO — Phase 2 rebuild ═══════════════════════════════════════════════════════ */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 6rem 0 4rem; margin-bottom: 0; /* Custom prop for grid parallax only (cursor vars now on :root) */ --grid-offset-y: 0px; } /* Rest grid — left-fading, graphite, static at low opacity */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--graphite-600) 1px, transparent 1px), linear-gradient(90deg, var(--graphite-600) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.55; -webkit-mask-image: linear-gradient(to right, black 0%, black 20%, transparent 55%); mask-image: linear-gradient(to right, black 0%, black 20%, transparent 55%); transform: translateY(var(--grid-offset-y)); will-change: transform; } /* ── FULL-PAGE GRID LAYERS (fixed, behind all content) ── .page-grid-static : graphite grid with left-fade mask .page-grid-warm : oxblood cursor-glow, full viewport Both live as direct children of . */ .page-grid-static { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--graphite-600) 1px, transparent 1px), linear-gradient(90deg, var(--graphite-600) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.55; -webkit-mask-image: linear-gradient(to right, black 0%, black 20%, transparent 55%); mask-image: linear-gradient(to right, black 0%, black 20%, transparent 55%); } .page-grid-warm { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--oxblood) 1px, transparent 1px), linear-gradient(90deg, var(--oxblood) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.45; -webkit-mask-image: radial-gradient(circle 220px at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%); mask-image: radial-gradient(circle 220px at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%); display: none; /* activated by @media (hover:hover) in responsive.css */ } /* Single-column hero — text block only */ .hero-content { position: relative; z-index: 3; max-width: 760px; width: 100%; padding: 0 2rem; } .hero-left { display: flex; flex-direction: column; gap: 0; will-change: opacity, transform; } /* ── HERO TEXT ELEMENTS ── */ .hero-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; margin-bottom: 0.75rem; color: var(--text-primary); line-height: 1.0; letter-spacing: -0.03em; } .hero-tagline { font-family: 'Work Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; margin-bottom: 1.5rem; line-height: 1.5; } .hero-tagline-merged { line-height: 1.5; } .hero-tagline-merged .hero-tagline-meta { color: var(--text-secondary); font-weight: 400; } .hero-text { font-size: clamp(1rem, 1.1vw, 1.125rem); color: var(--text-primary); line-height: 1.6; margin-bottom: 2rem; font-weight: 300; max-width: 38ch; } .hero-features { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .feature-item { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-left: 2px solid var(--graphite-600); padding-left: 1rem; transition: border-left-color 0.3s ease, padding-left 0.3s ease; } .feature-item:hover { border-left-color: var(--graphite-500); padding-left: 1.5rem; } .feature-icon { display: flex; align-items: center; opacity: 0.7; flex-shrink: 0; } .feature-text { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; letter-spacing: 0.02em; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ── HERO BUTTONS ── */ .hero-btn { padding: 0.75rem 1.75rem; min-height: 44px; /* touch target minimum */ font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; } /* Primary: oxblood-bright wipes in from left on hover */ .hero-btn.primary { background: var(--oxblood); border: 2px solid var(--oxblood); color: var(--text-primary); transition: border-color 0.25s ease; } .hero-btn.primary::before { content: ''; position: absolute; inset: 0; background: var(--oxblood-bright); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .hero-btn.primary:hover { border-color: var(--oxblood-bright); } .hero-btn.primary:hover::before { transform: scaleX(1); } /* Secondary: graphite fill wipes in from left on hover */ .hero-btn.secondary { background: transparent; border: 1px solid var(--graphite-500); color: var(--text-primary); transition: border-color 0.25s ease; } .hero-btn.secondary::before { content: ''; position: absolute; inset: 0; background: rgba(58, 58, 64, 0.5); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .hero-btn.secondary:hover { border-color: var(--text-secondary); } .hero-btn.secondary:hover::before { transform: scaleX(1); } /* TODO: phase 4 — hero visual asset (photo/drawing) goes here */ /* ═══════════════════════════════════════════════════════ PORTFOLIO SECTION ═══════════════════════════════════════════════════════ */ .portfolio-section { margin-top: 0; position: relative; /* anchors Fig.01 marker */ } /* ── Task 3: Section header ── */ .portfolio-section-header { padding: clamp(2rem, 4vw, 3rem) 0 1.5rem; border-top: 1px solid var(--graphite-600); } .portfolio-section-header-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; } .portfolio-section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(0.85rem, 1.2vw, 1.1rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.4rem; } .portfolio-section-desc { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.01em; } /* Oxblood discipline: "VIEW ALL" link underline only */ .portfolio-view-all { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--oxblood); padding-bottom: 2px; transition: color 0.2s ease; white-space: nowrap; flex-shrink: 0; } .portfolio-view-all:hover { color: var(--text-secondary); } /* Oxblood discipline: "Fig. 01" marker */ .portfolio-fig-marker { position: absolute; bottom: 1rem; right: 1.5rem; font-size: 0.7rem; font-style: italic; color: var(--oxblood); letter-spacing: 0.05em; font-family: 'Work Sans', sans-serif; pointer-events: none; user-select: none; z-index: 5; } /* ── Task 1: Grid ── */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 2px; padding: 2px; } /* Brick/masonry span pattern — preserve as brand metaphor */ /* First item is the featured hero card — double width, same height */ .portfolio-item:nth-child(1) { grid-column: span 6; grid-row: span 1; } .portfolio-item:nth-child(2) { grid-column: span 3; grid-row: span 1; } .portfolio-item:nth-child(3) { grid-column: span 3; grid-row: span 1; } .portfolio-item:nth-child(4) { grid-column: span 6; grid-row: span 1; } .portfolio-item:nth-child(5) { grid-column: span 3; grid-row: span 1; } .portfolio-item:nth-child(6) { grid-column: span 3; grid-row: span 1; } .portfolio-item:nth-child(n+7){ grid-column: span 4; grid-row: span 1; } .portfolio-item { position: relative; overflow: hidden; cursor: pointer; background: var(--graphite-700); /* Reveal animation start state (Task 4) */ opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .portfolio-item.revealed { opacity: 1; transform: translateY(0); } /* Task 1: gentle image scale on hover (not the old 1.1) */ .portfolio-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; min-height: 100%; display: block; } .portfolio-item:hover .portfolio-image { transform: scale(1.04); } /* Task 5: oxblood border via inset ::after — no layout shift */ .portfolio-item::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; z-index: 3; pointer-events: none; transition: border-color 0.2s ease; } .portfolio-item:hover::after { border-color: var(--oxblood); } /* WIP status badge */ .portfolio-wip-badge { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; align-items: center; gap: 6px; background: rgba(20, 20, 22, 0.85); border: 1px solid var(--graphite-500); color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; pointer-events: none; } .portfolio-wip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oxblood-bright); flex-shrink: 0; animation: wip-pulse 1.8s ease-in-out infinite; } @keyframes wip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ── Task 2: Always-visible captions ── */ .portfolio-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 0.85rem 0.75rem; background: linear-gradient(transparent, rgba(20,20,22,0.78)); z-index: 2; pointer-events: none; } .portfolio-caption-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; line-height: 1.3; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portfolio-caption-meta { font-size: 0.62rem; font-weight: 400; color: var(--text-tertiary); letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portfolio-item:hover .portfolio-caption-meta { color: var(--text-secondary); } /* TODO: phase 4 — cross-fade: .portfolio-image-draw goes here */ /* TODO: phase 4 — lightbox redesign */ /* ═══════════════════════════════════════════════════════ GUIDES SECTION ═══════════════════════════════════════════════════════ */ .guides-section { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 10vw, 7rem); position: relative; border-top: 1px solid var(--graphite-600); } .guides-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .guides-header { margin-bottom: 2.5rem; } .guides-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 0.5rem; } .guides-subtitle { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; max-width: 520px; } .guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5px; } .guide-card { display: block; background: var(--bg-card); text-decoration: none; color: inherit; position: relative; overflow: hidden; /* Reveal start state */ opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease, transform 0.45s ease, background 0.2s ease; } .guide-card.revealed { opacity: 1; transform: translateY(0); } /* Inset border — no layout shift */ .guide-card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--border); pointer-events: none; transition: border-color 0.2s ease; z-index: 1; } /* Oxblood left accent wipes down on hover */ .guide-card::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--oxblood); transform: scaleY(0); transform-origin: top center; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); z-index: 2; } .guide-card:hover { background: var(--graphite-600); } .guide-card:hover::after { border-color: var(--graphite-500); } .guide-card:hover::before { transform: scaleY(1); } .guide-card-inner { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; } /* Card number — top-right corner */ .guide-card-num { position: absolute; top: 1rem; right: 1.25rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-tertiary); line-height: 1; pointer-events: none; user-select: none; z-index: 3; } .guide-tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); opacity: 0.9; } .guide-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.3; margin: 0; } .guide-card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; flex: 1; } /* Read more — oxblood underline wipes in from left on card hover */ .guide-read-more { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-top: 0.5rem; display: inline-block; background-image: linear-gradient(var(--oxblood), var(--oxblood)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color 0.2s ease, background-size 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .guide-card:hover .guide-read-more { color: var(--text-primary); background-size: 100% 1px; } @media (max-width: 768px) { .guides-section { padding: 3rem 0 4rem; } .guides-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ PAGE SECTIONS (About / Skills / Contact) ═══════════════════════════════════════════════════════ */ #about, #skills, #contact { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 10vw, 7rem); border-top: 1px solid var(--graphite-600); } /* ── SECTION ENTRY SYSTEM ───────────────────────────── num ─── LABEL architectural annotation device */ .section-entry { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; } .section-entry-num { font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.14em; flex-shrink: 0; line-height: 1; } .section-entry-rule { width: 32px; height: 1px; background: var(--graphite-500); flex-shrink: 0; transform-origin: left center; transform: scaleX(0); transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); } .section-entry.in-view .section-entry-rule { transform: scaleX(1); } .section-entry-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; } /* ── ABOUT — two-column editorial ── */ .about-layout { display: grid; grid-template-columns: 4fr 6fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; } .about-heading h2 { position: sticky; top: 5.5rem; line-height: 1.1; } .about-copy p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.75rem; font-size: clamp(1rem, 1.1vw, 1.125rem); font-weight: 300; max-width: 58ch; } .about-copy p:last-child { margin-bottom: 0; } /* ── SKILLS — left-aligned header ── */ .skills-section-head { margin-bottom: 3rem; } .skills-section-head h2 { margin-bottom: 0.6rem; } .section-intro { font-size: 0.9rem; color: var(--text-secondary); font-weight: 300; line-height: 1.6; max-width: 52ch; } /* ── CONTACT — two-column split ── */ .contact-layout { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; } .contact-info-col h2 { margin-bottom: 1.25rem; } .contact-items-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } /* ═══════════════════════════════════════════════════════ FOOTER / UTILITIES ═══════════════════════════════════════════════════════ */ .site-footer { text-align: center; padding: 1.5rem 1rem; margin-top: 2rem; } .site-footer .footer-add-project { font-size: 0.85rem; color: rgba(184, 181, 174, 0.5); text-decoration: none; transition: color 0.2s ease; } .site-footer .footer-add-project:hover { color: rgba(184, 181, 174, 0.85); } .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: rgba(26, 26, 28, 0.9); backdrop-filter: blur(15px); border: 1px solid var(--graphite-600); border-radius: 50%; color: var(--text-primary); font-size: 20px; font-weight: bold; cursor: pointer; z-index: 1000; display: none; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .scroll-to-top:hover { background: rgba(42, 42, 46, 0.95); transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5); } .scroll-to-top:active { transform: translateY(0); } .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; } .mobile-menu-toggle span { width: 25px; height: 3px; background: var(--text-primary); border-radius: 3px; transition: all 0.3s ease; transform-origin: 1px; } .mobile-menu-toggle.active span:first-child { transform: rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:last-child { transform: rotate(-45deg); } .header-right { display: flex; align-items: center; gap: 1rem; }