/* =========================== ARTREVOLT – SHARED DESIGN SYSTEM VR Dev / XR Artist Aesthetic =========================== */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Share+Tech+Mono&display=swap'); :root { --bg-void: #050810; --bg-deep: #080d1a; --bg-panel: #0d1526; --bg-card: #111c33; --accent-cyan: #00e5ff; --accent-magenta:#ff2d78; --accent-gold: #f0c040; --accent-green: #39ff8a; --text-primary: #e8eeff; --text-muted: #7a8cb0; --border-glow: rgba(0,229,255,0.25); --border-dim: rgba(255,255,255,0.07); --font-display: 'Rajdhani', sans-serif; --font-body: 'Exo 2', sans-serif; --font-mono: 'Share Tech Mono', monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background-color: var(--bg-void); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; } /* === GRID NOISE BACKGROUND === */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .ar-logo { font-family: 'Rajdhani', var(--font-display), sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; color: var(--text-primary); display: flex; align-items: center; gap: 0; /* Prevent the fixed nav from inheriting any body font override */ -webkit-font-smoothing: antialiased; } .ar-logo .accent { background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan), var(--accent-magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(0,229,255,0.5)); } /* ── AUTOHIDE NAV ─────────────────────────── */ /* Invisible hover trigger strip — always on top */ .ar-nav-trigger { position: fixed; top: 0; left: 0; right: 0; height: 4vh; z-index: 300; cursor: default; } /* The nav bar itself — slides in from above */ .ar-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2rem; background: rgba(5, 8, 16, 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-glow); /* Hidden above the viewport by default */ transform: translateY(-110%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; opacity: 0; pointer-events: none; } /* Revealed state */ .ar-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: all; } /* Push page content down so the nav doesn't cover it when open. Add this class to if you want the page to shift — leave it out for a true overlay effect (recommended for full-bleed hero). */ .nav-pushes-content .ar-nav.is-open ~ * { padding-top: 64px; } /* ── HAMBURGER MENU ───────────────────────── */ .ar-hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; background: none; border: none; z-index: 200; flex-shrink: 0; } .ar-hamburger .stripe { width: 28px; height: 3px; transition: width 0.2s ease, opacity 0.2s ease; } .ar-hamburger .stripe-1 { background: #ffffff; } .ar-hamburger .stripe-2 { background: var(--accent-green); } .ar-hamburger .stripe-3 { background: #e03030; } /* Subtle animation on hover — stripes stagger */ .ar-hamburger:hover .stripe-1 { width: 22px; } .ar-hamburger:hover .stripe-3 { width: 22px; } /* Dropdown panel */ .ar-dropdown { position: absolute; top: 100%; right: 0; min-width: 220px; background: rgba(5, 8, 16, 0.97); border: 1px solid var(--border-glow); border-top: none; backdrop-filter: blur(16px); z-index: 150; overflow: hidden; } /* Nav links inside dropdown */ .ar-dropdown .ar-nav-links { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0; list-style: none; margin: 0; } .ar-dropdown .ar-nav-links a { display: block; padding: 0.7rem 1.5rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--text-muted); border: none; border-left: 3px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; } .ar-dropdown .ar-nav-links a:hover, .ar-dropdown .ar-nav-links a.active { color: var(--accent-cyan); border-left-color: var(--accent-cyan); background: rgba(0, 229, 255, 0.04); } /* Divider between nav links and social links */ .ar-dropdown-divider { height: 1px; background: var(--border-dim); margin: 0.4rem 1.5rem; } /* Social links inside dropdown */ .ar-dropdown-social { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0 0.5rem; } .ar-dropdown-social a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-decoration: none; color: var(--text-muted); transition: color 0.15s, background 0.15s; } .ar-dropdown-social a:hover { color: var(--accent-gold); background: rgba(240, 192, 64, 0.04); } .ar-dropdown-social svg { width: 15px; height: 15px; flex-shrink: 0; } /* === HERO SLIDESHOW === */ .ar-hero { position: relative; width: 100%; overflow: hidden; background: var(--bg-deep); } .ar-hero-slides { display: flex; transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1); } .ar-hero-slide { min-width: 100%; position: relative; } .ar-hero-slide img { width: 100%; height: 70vh; object-fit: cover; display: block; } .ar-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,16,0.85) 0%, transparent 50%); pointer-events: none; } .ar-hero-text { position: absolute; bottom: 2.5rem; left: 2.5rem; } .ar-hero-text h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; letter-spacing: 0.05em; margin: 0 0 0.25rem; line-height: 1.1; } .ar-hero-text h1 .glow-text { background: linear-gradient(90deg, var(--accent-gold), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(0,229,255,0.5)); } .ar-hero-text p { font-family: var(--font-mono); font-size: 1rem; color: var(--text-muted); margin: 0; letter-spacing: 0.05em; } .ar-hero-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .ar-hero-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--accent-cyan); background: transparent; cursor: pointer; padding: 0; transition: all 0.2s; } .ar-hero-dots button.active { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); } /* === PAGE WRAPPER === */ .ar-page { max-width: 1280px; margin: 0 auto; padding: 0 2rem 4rem; position: relative; z-index: 1; } /* ── LIGHTBOX ─────────────────────────────── */ .lightbox-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 16, 0.92); backdrop-filter: blur(8px); z-index: 999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border: 1px solid var(--border-glow); box-shadow: 0 0 60px rgba(0, 229, 255, 0.15); cursor: default; } .lightbox-close { position: fixed; top: 1.25rem; right: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); background: none; border: 1px solid var(--border-dim); padding: 0.35rem 0.75rem; cursor: pointer; z-index: 1000; transition: color 0.2s, border-color 0.2s; } .lightbox-close:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); } .lightbox-caption { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } /* === SECTION HEADING === */ .ar-section-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); margin: 3rem 0 0.25rem; display: flex; align-items: center; gap: 0.75rem; } .ar-section-title::before { content: ''; display: inline-block; width: 4px; height: 1.2em; background: linear-gradient(180deg, var(--accent-cyan), var(--accent-magenta)); flex-shrink: 0; } .ar-section-sub { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.08em; margin: 0 0 2rem 1.5rem; } /* === PROJECT SUMMARY CARD === */ .ar-summary-card { background: var(--bg-card); border: 1px solid var(--border-glow); border-left: 3px solid var(--accent-cyan); border-radius: 4px; padding: 1.5rem 2rem; margin: 2rem 0; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; box-shadow: 0 0 30px rgba(0,229,255,0.06), inset 0 0 30px rgba(0,229,255,0.02); } .ar-summary-card h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-cyan); margin: 0 0 0.5rem; } .ar-summary-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; line-height: 1.7; } .ar-tech-stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .ar-tech-tag { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border: 1px solid var(--border-glow); color: var(--accent-cyan); background: rgba(0,229,255,0.04); white-space: nowrap; } .ar-tech-tag.engine { border-color: rgba(57,255,138,0.3); color: var(--accent-green); background: rgba(57,255,138,0.04); } .ar-tech-tag.tool { border-color: rgba(240,192,64,0.3); color: var(--accent-gold); background: rgba(240,192,64,0.04); } .ar-tech-tag.render { border-color: rgba(255,45,120,0.3); color: var(--accent-magenta); background: rgba(255,45,120,0.04); } /* === MEDIA INPUT BLOCK (editable) === */ .ar-media-input { border: 1px dashed rgba(0,229,255,0.2); border-radius: 4px; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; background: rgba(0,229,255,0.02); margin: 1.5rem 0; } .ar-media-input-icon { width: 64px; height: 64px; object-fit: contain; border-radius: 4px; border: 1px solid var(--border-glow); flex-shrink: 0; } .ar-media-input-icon-placeholder { width: 64px; height: 64px; background: var(--bg-panel); border: 1px dashed var(--border-glow); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; flex-shrink: 0; border-radius: 4px; } .ar-media-input textarea, .ar-media-input-text { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; resize: vertical; outline: none; min-height: 80px; } /* === MOSAIC GRID === */ .ar-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; margin: 1.5rem 0; border: 1px solid var(--border-dim); } .ar-mosaic-item { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--bg-deep); } .ar-mosaic-item img, .ar-mosaic-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ar-mosaic-item:hover img, .ar-mosaic-item:hover video { transform: scale(1.05); } .ar-mosaic-item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem 0.75rem; background: rgba(5,8,16,0.8); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; transform: translateY(100%); transition: transform 0.3s ease; } .ar-mosaic-item:hover .caption { transform: translateY(0); } /* === MOSAIC LARGE (2-col) === */ .ar-mosaic-lg { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } /* === TEXT CONTENT === */ .ar-text { color: var(--text-muted); font-size: 1rem; line-height: 1.8; margin: 1.25rem 0; } .ar-text strong { color: var(--text-primary); } /* === DIVIDER === */ .ar-divider { border: none; border-top: 1px solid var(--border-dim); margin: 3rem 0; position: relative; } .ar-divider::before { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg-void); padding: 0 0.75rem; color: var(--accent-cyan); font-size: 0.7rem; opacity: 0.5; } /* === FOOTER PREV/NEXT NAV === */ .ar-footer-nav { position: fixed; bottom: 1.5rem; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 1.5rem; pointer-events: none; z-index: 50; } .ar-footer-nav-btn { pointer-events: auto; display: flex; align-items: center; gap: 0; overflow: hidden; background: rgba(5,8,16,0.9); border: 1px solid var(--border-glow); border-radius: 4px; text-decoration: none; color: var(--text-primary); transition: all 0.3s ease; max-width: 52px; } .ar-footer-nav-btn:hover { max-width: 200px; border-color: var(--accent-cyan); } .ar-footer-nav-btn .thumb { width: 52px; height: 52px; object-fit: cover; flex-shrink: 0; } .ar-footer-nav-btn .label { font-family: var(--font-mono); font-size: 0.7rem; white-space: nowrap; padding: 0 0.75rem; color: var(--text-muted); overflow: hidden; max-width: 0; transition: max-width 0.3s ease; } .ar-footer-nav-btn:hover .label { max-width: 140px; color: var(--accent-cyan); } .ar-footer-nav-btn .arrow { font-size: 1.2rem; color: var(--accent-cyan); padding: 0 0.5rem; flex-shrink: 0; display: none; } /* For small screens collapse the nav */ @media (max-width: 640px) { .ar-nav { padding: 0.5rem 1rem; } .ar-nav-links { gap: 0; } .ar-nav-links a { padding: 0.3rem 0.5rem; font-size: 0.8rem; } .ar-page { padding: 0 1rem 4rem; } .ar-summary-card { grid-template-columns: 1fr; } } /* === FOOTER === */ .ar-footer { border-top: 1px solid var(--border-dim); text-align: center; padding: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.08em; position: relative; z-index: 1; } /* === SCROLL REVEAL ANIMATION === */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .ar-reveal { opacity: 0; animation: fadeInUp 0.6s ease forwards; } .ar-reveal:nth-child(1) { animation-delay: 0.1s; } .ar-reveal:nth-child(2) { animation-delay: 0.2s; } .ar-reveal:nth-child(3) { animation-delay: 0.3s; } .ar-reveal:nth-child(4) { animation-delay: 0.4s; } .ar-reveal:nth-child(5) { animation-delay: 0.5s; } /* === SCANLINE EFFECT ON HERO === */ .ar-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px ); pointer-events: none; z-index: 2; }