| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{{ page.title | default: site.title }}</title> |
| <meta name="description" content="{{ site.description }}"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/base.css"> |
| {% if page.page_css %}<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/{{ page.page_css }}.css">{% endif %} |
| <style> |
| /* ===== NAV ===== */ |
| #main-nav { |
| position: fixed; |
| top: 0; left: 0; right: 0; |
| z-index: 200; |
| height: var(--nav-h); |
| display: flex; |
| align-items: center; |
| padding: 0 32px; |
| transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; |
| border-bottom: 1px solid transparent; |
| } |
| #main-nav.scrolled { |
| background: rgba(7, 9, 15, 0.88); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| border-color: var(--border); |
| } |
| /* ===== HERO ===== */ |
| .hero { |
| position: relative; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: calc(var(--nav-h) + 60px) 24px 100px; |
| overflow: hidden; |
| } |
| |
| /* Animated perspective grid */ |
| .hero-grid { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(249,115,22,0.06) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(249,115,22,0.06) 1px, transparent 1px); |
| background-size: 56px 56px; |
| mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%); |
| -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%); |
| animation: grid-drift 25s linear infinite; |
| } |
| @keyframes grid-drift { |
| from { background-position: 0 0; } |
| to { background-position: 56px 56px; } |
| } |
| |
| /* Ambient glow */ |
| .hero-glow { |
| position: absolute; |
| top: 42%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 700px; |
| height: 350px; |
| background: radial-gradient(ellipse, rgba(249,115,22,0.08) 0%, rgba(249,115,22,0.06) 50%, transparent 70%); |
| pointer-events: none; |
| animation: glow-pulse 4s ease-in-out infinite alternate; |
| } |
| @keyframes glow-pulse { |
| from { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } |
| to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } |
| } |
| |
| .hero-inner { |
| position: relative; |
| z-index: 1; |
| max-width: 820px; |
| } |
| |
| .hero-logo { |
| width: min(700px, 92vw); |
| height: auto; |
| margin-bottom: 24px; |
| opacity: 0; |
| animation: fade-up 0.65s ease forwards 0.15s; |
| } |
| |
| .hero-sub { |
| font-size: 17px; |
| color: var(--text-muted); |
| font-weight: 500; |
| margin-bottom: 52px; |
| letter-spacing: 0.2px; |
| opacity: 0; |
| animation: fade-up 0.55s ease forwards 0.55s; |
| } |
| .hero-sub .dot { margin: 0 10px; color: var(--text-dim); } |
| |
| /* Countdown */ |
| #countdown { |
| display: flex; |
| align-items: flex-end; |
| justify-content: center; |
| gap: 6px; |
| margin-bottom: 52px; |
| opacity: 0; |
| animation: fade-up 0.55s ease forwards 0.75s; |
| } |
| .count-block { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 6px; |
| min-width: 80px; |
| } |
| .count-num { |
| font-family: "DM Sans", sans-serif; |
| font-weight: 800; |
| font-size: clamp(40px, 7vw, 72px); |
| color: var(--text); |
| letter-spacing: -3px; |
| line-height: 1; |
| display: block; |
| transition: transform 0.12s cubic-bezier(.34,1.56,.64,1); |
| will-change: transform; |
| } |
| .count-num.tick { transform: scale(1.12); } |
| .count-label { |
| font-family: "DM Mono", monospace; |
| font-size: 10px; |
| letter-spacing: 2.5px; |
| text-transform: uppercase; |
| color: var(--text-dim); |
| } |
| .count-sep { |
| font-family: "DM Sans", sans-serif; |
| font-weight: 800; |
| font-size: clamp(36px, 6vw, 60px); |
| color: var(--accent); |
| opacity: 0.7; |
| line-height: 1; |
| padding-bottom: 22px; |
| user-select: none; |
| } |
| |
| /* CTA buttons */ |
| .hero-ctas { |
| display: flex; |
| gap: 14px; |
| justify-content: center; |
| flex-wrap: wrap; |
| opacity: 0; |
| animation: fade-up 0.55s ease forwards 0.95s; |
| } |
| .btn-primary { |
| background: var(--accent); |
| color: #fff; |
| text-decoration: none; |
| padding: 14px 34px; |
| border-radius: 8px; |
| font-weight: 600; |
| font-size: 15px; |
| transition: transform 0.15s, box-shadow 0.2s; |
| box-shadow: 0 2px 0 rgba(0,0,0,0.4); |
| } |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 36px var(--accent-glow); |
| } |
| .btn-outline { |
| background: transparent; |
| color: var(--text); |
| text-decoration: none; |
| padding: 14px 34px; |
| border-radius: 8px; |
| font-weight: 600; |
| font-size: 15px; |
| border: 1px solid var(--border); |
| transition: border-color 0.2s, background 0.2s, color 0.2s; |
| } |
| .btn-outline:hover { |
| border-color: rgba(249,115,22,0.4); |
| background: var(--accent-dim); |
| color: var(--text); |
| } |
| |
| /* Scroll hint */ |
| .hero-scroll-hint { |
| position: absolute; |
| bottom: 36px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 1; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| color: var(--text-dim); |
| font-family: "DM Mono", monospace; |
| font-size: 10px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| opacity: 0; |
| animation: fade-up 0.5s ease forwards 1.4s; |
| } |
| .scroll-line { |
| width: 1px; |
| height: 40px; |
| background: linear-gradient(to bottom, rgba(249,115,22,0.6), transparent); |
| animation: scroll-line 2s ease-in-out infinite 2s; |
| } |
| @keyframes scroll-line { |
| 0% { transform: scaleY(1) translateY(0); opacity: 1; } |
| 100% { transform: scaleY(0.3) translateY(10px); opacity: 0; } |
| } |
| |
| @keyframes fade-up { |
| from { opacity: 0; transform: translateY(22px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| /* ===== HOME CONTENT ===== */ |
| .home-main { |
| max-width: 900px; |
| margin: 0 auto; |
| padding: 80px 32px 120px; |
| } |
| |
| /* hide the redundant H1 from markdown (shown in hero already) */ |
| .home-main > h1:first-child { display: none; } |
| |
| .home-main h2 { |
| font-family: "DM Sans", sans-serif; |
| font-weight: 800; |
| font-size: 26px; |
| color: var(--text); |
| margin: 72px 0 18px; |
| letter-spacing: -0.5px; |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| } |
| .home-main h2::before { |
| content: ''; |
| display: block; |
| width: 4px; |
| height: 24px; |
| background: var(--accent); |
| border-radius: 2px; |
| flex-shrink: 0; |
| } |
| |
| .home-main p { |
| color: var(--text-muted); |
| margin: 0 0 16px; |
| line-height: 1.8; |
| } |
| .home-main strong { color: var(--text); font-weight: 600; } |
| .home-main a { color: var(--accent); text-decoration: none; } |
| .home-main a:hover { text-decoration: underline; } |
| |
| .home-main ul, .home-main ol { |
| margin: 0 0 16px 0; |
| padding: 0; |
| list-style: none; |
| } |
| .home-main li { |
| color: var(--text-muted); |
| padding: 4px 0 4px 22px; |
| position: relative; |
| } |
| .home-main li::before { |
| content: '→'; |
| position: absolute; |
| left: 0; |
| color: var(--accent); |
| font-size: 13px; |
| font-family: "DM Mono", monospace; |
| } |
| |
| /* Scroll reveal */ |
| .reveal-wrap { |
| opacity: 0; |
| transform: translateY(28px); |
| transition: opacity 0.65s ease, transform 0.65s ease; |
| } |
| .reveal-wrap.visible { |
| opacity: 1; |
| transform: none; |
| } |
| |
| /* ===== RESPONSIVE ===== */ |
| @media (max-width: 680px) { |
| .hero { padding-top: 120px; padding-bottom: 80px; } |
| .count-block { min-width: 60px; } |
| .home-main { padding: 48px 20px 80px; } |
| footer { gap: 10px; } |
| } |
| </style> |
| </head> |
| <body> |
| |
| {% include nav.html %} |
| |
| <section class="hero"> |
| <div class="hero-grid"></div> |
| <div class="hero-glow"></div> |
| <div class="hero-inner"> |
| <h1><img src="{{ site.baseurl }}/assets/img/gus-logo.png" alt="Gerrit User Summit 2026" class="hero-logo"></h1> |
| <p class="hero-sub"> |
| November 9–10<span class="dot">·</span>Google Sunnyvale, CA |
| </p> |
| <div id="countdown"> |
| <div class="count-block"> |
| <span class="count-num" id="cd-days">--</span> |
| <span class="count-label">days</span> |
| </div> |
| <div class="count-sep">:</div> |
| <div class="count-block"> |
| <span class="count-num" id="cd-hours">--</span> |
| <span class="count-label">hours</span> |
| </div> |
| <div class="count-sep">:</div> |
| <div class="count-block"> |
| <span class="count-num" id="cd-mins">--</span> |
| <span class="count-label">mins</span> |
| </div> |
| <div class="count-sep">:</div> |
| <div class="count-block"> |
| <span class="count-num" id="cd-secs">--</span> |
| <span class="count-label">secs</span> |
| </div> |
| </div> |
| <div class="hero-ctas"> |
| <a href="{{ site.luma_url }}" target="_blank" rel="noopener" class="btn-primary">Register — it’s free</a> |
| <a href="{{ site.sessionize_url }}" target="_blank" rel="noopener" class="btn-outline">Call for Papers</a> |
| </div> |
| </div> |
| <div class="hero-scroll-hint"> |
| scroll |
| <div class="scroll-line"></div> |
| </div> |
| </section> |
| |
| <main class="home-main"> |
| {{ content }} |
| </main> |
| |
| <footer> |
| <div class="footer-brand">Gerrit User Summit <span>2026</span></div> |
| <div class="footer-links"> |
| <a href="https://www.gerritcodereview.com">gerritcodereview.com</a> |
| <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy</a> |
| <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Terms</a> |
| </div> |
| </footer> |
| |
| <script> |
| // ── Nav scroll glass effect ────────────────────────────── |
| const nav = document.getElementById('main-nav'); |
| window.addEventListener('scroll', () => { |
| nav.classList.toggle('scrolled', window.scrollY > 40); |
| }, { passive: true }); |
| |
| // ── Mobile hamburger ───────────────────────────────────── |
| const hamburger = document.getElementById('nav-hamburger'); |
| const mobileMenu = document.getElementById('nav-mobile-menu'); |
| if (hamburger) { |
| hamburger.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| }); |
| } |
| |
| // ── Countdown timer ────────────────────────────────────── |
| function pad(n) { return String(n).padStart(2, '0'); } |
| |
| function updateCountdown() { |
| const target = new Date('2026-11-09T09:00:00-08:00').getTime(); |
| const diff = target - Date.now(); |
| if (diff <= 0) { |
| document.getElementById('countdown').innerHTML = |
| '<p style="font-family:DM Sans,sans-serif;font-size:28px;color:var(--accent);letter-spacing:-1px">Happening now!</p>'; |
| return; |
| } |
| const vals = { |
| 'cd-days': pad(Math.floor(diff / 86400000)), |
| 'cd-hours': pad(Math.floor((diff % 86400000) / 3600000)), |
| 'cd-mins': pad(Math.floor((diff % 3600000) / 60000)), |
| 'cd-secs': pad(Math.floor((diff % 60000) / 1000)) |
| }; |
| for (const [id, val] of Object.entries(vals)) { |
| const el = document.getElementById(id); |
| if (!el) continue; |
| if (el.textContent !== val) { |
| el.textContent = val; |
| el.classList.remove('tick'); |
| void el.offsetWidth; // reflow |
| el.classList.add('tick'); |
| setTimeout(() => el.classList.remove('tick'), 150); |
| } |
| } |
| } |
| updateCountdown(); |
| setInterval(updateCountdown, 1000); |
| |
| // ── Scroll reveal ──────────────────────────────────────── |
| const revealObserver = new IntersectionObserver((entries) => { |
| entries.forEach(e => { |
| if (e.isIntersecting) { |
| e.target.classList.add('visible'); |
| revealObserver.unobserve(e.target); |
| } |
| }); |
| }, { threshold: 0.06, rootMargin: '0px 0px -40px 0px' }); |
| |
| // Wrap each h2 + its following siblings (until next h2) into a reveal block |
| const homeMain = document.querySelector('.home-main'); |
| if (homeMain) { |
| const children = Array.from(homeMain.childNodes); |
| let wrap = null; |
| children.forEach(node => { |
| if (node.nodeType === 1 && node.tagName === 'H2') { |
| wrap = document.createElement('div'); |
| wrap.className = 'reveal-wrap'; |
| node.parentNode.insertBefore(wrap, node); |
| } |
| if (wrap) wrap.appendChild(node); |
| }); |
| document.querySelectorAll('.reveal-wrap').forEach(el => revealObserver.observe(el)); |
| } |
| </script> |
| |
| </body> |
| </html> |
