:root { --color-bg: #0d2c4f; --color-line: #ffffff; --color-accent: #87ceeb; --font-heading: 'Roboto Mono', monospace; --font-body: 'Montserrat', sans-serif; } body, html { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-line); font-family: var(--font-body); scroll-behavior: smooth; overflow-x: hidden; } #blueprint-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(135, 206, 235, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(135, 206, 235, 0.1) 1px, transparent 1px); animation: pan-grid 60s linear infinite; } /* [UPDATE] Perubahan posisi Navbar ke bawah dengan Ikon */ .navbar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(13, 44, 79, 0.9); backdrop-filter: blur(10px); z-index: 99; transform: translateY(100%); transition: transform 0.4s ease-out; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); } .navbar.visible { transform: translateY(0); } .nav-container { display: flex; justify-content: space-around; align-items: center; padding: 10px 0; } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--color-line); text-decoration: none; transition: color 0.3s, transform 0.3s; } .nav-item:hover, .nav-item.active { color: var(--color-accent); transform: translateY(-3px); } .nav-icon { font-size: 1.5rem; margin-bottom: 5px; } .nav-label { font-size: 0.7rem; font-family: var(--font-body); font-weight: 600; } .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; } header { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100vh; padding: 20px; } header h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 5rem); text-transform: uppercase; letter-spacing: 4px; border-right: 3px solid var(--color-accent); padding-right: 10px; margin: 0; white-space: nowrap; overflow: hidden; animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite; } header .subtitle { font-size: 1.3rem; margin: 20px 0 30px 0; font-weight: 400; letter-spacing: 1px; } .title-block { border: 1px solid var(--color-accent); padding: 15px; margin-top: 30px; display: inline-block; text-align: left; } .title-block p { margin: 5px 0; font-family: var(--font-heading); } .btn { background-color: transparent; color: var(--color-line); border: 1px solid var(--color-line); padding: 15px 35px; font-family: var(--font-heading); font-size: 1.1rem; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; margin-top: 30px; display: inline-block; } .btn:hover { background-color: var(--color-line); color: var(--color-bg); } section { padding: 100px 0; } .animated { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } .animated.delay-1 { transition-delay: 0.2s; } .section-title { font-family: var(--font-heading); font-size: 2.8rem; text-align: center; margin-bottom: 60px; text-transform: uppercase; } .architects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .architect-card { text-align: center; border: 1px solid var(--color-accent); padding: 20px; transition: background-color 0.3s, transform 0.3s; } .architect-card:hover { background-color: rgba(135, 206, 235, 0.1); transform: translateY(-10px); } .architect-card img { width: 180px; height: 180px; object-fit: cover; margin-bottom: 20px; filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%) hue-rotate(180deg); } .architect-card h3 { font-family: var(--font-heading); font-size: 1.5rem; margin: 10px 0 5px 0; color: var(--color-line); } .architect-card p { font-size: 1rem; } .phases-list { max-width: 800px; margin: 0 auto; position: relative; } .phases-list::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background-color: var(--color-accent); animation: draw-line 3s ease-out forwards; } .phase-item { position: relative; padding-left: 50px; margin-bottom: 40px; cursor: pointer; } .phase-item::before { content: ''; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-bg); border: 2px solid var(--color-accent); transition: background-color 0.3s; } .phase-item:hover::before { background-color: var(--color-accent); } .phase-item h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-accent); margin: 0 0 10px 0; } .modal { position: fixed; z-index: 101; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { background-color: var(--color-bg); border: 1px solid var(--color-accent); padding: 30px; width: 90%; max-width: 600px; position: relative; } .close-button { position: absolute; top: 10px; right: 20px; font-size: 2rem; cursor: pointer; } #register { text-align: center; border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent); } #register p { max-width: 600px; margin: 0 auto 30px auto; font-size: 1.2rem; } .styled-form input { width: 100%; padding: 15px; margin-bottom: 15px; border-radius: 5px; border: 1px solid var(--color-accent); background-color: var(--color-bg); color: var(--color-line); font-family: var(--font-body); font-size: 1rem; box-sizing: border-box; } footer { text-align: center; padding: 40px 20px; padding-bottom: 80px; /* Space for bottom nav */ } @keyframes pan-grid { from { background-position: 0 0; } to { background-position: -40px -40px; } } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--color-accent); } } @keyframes draw-line { from { height: 0; } to { height: 100%; } } /* Responsive Design for New Sections */ @media (max-width: 768px) { .title-block { font-size: 0.8rem; padding: 10px; } .nav-container { padding: 8px 0; } .nav-icon { font-size: 1.2rem; } .nav-label { font-size: 0.6rem; } .section-title { font-size: 2rem; } } /* Additional Styles for New Elements */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .info-card { border: 1px solid var(--color-accent); padding: 20px; text-align: center; transition: background-color 0.3s; } .info-card:hover { background-color: rgba(135, 206, 235, 0.1); } /* Fallback visibility for critical sections */ #architects, #phases, #requirements { opacity: 1 !important; transform: none !important; } /* Enhanced hover effects for interactive elements */ .phase-item:hover { background-color: rgba(135, 206, 235, 0.05); transform: translateX(10px); transition: all 0.3s ease; } .architect-card, .phase-item { opacity: 1; transform: none; } /* ===== COVER UNDANGAN STYLES ===== */ .cover-invitation { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg) 0%, #1e4a6b 100%); overflow: hidden; } .cover-invitation::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 75%, rgba(135, 206, 235, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 25%, rgba(135, 206, 235, 0.08) 0%, transparent 50%); pointer-events: none; } .cover-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 40px 20px; } .cover-header { margin-bottom: 40px; } .cover-company-logo { max-height: 80px; margin-bottom: 30px; filter: brightness(0) invert(1); } .cover-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--color-accent); text-transform: uppercase; letter-spacing: 3px; margin: 0 0 20px 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .cover-subtitle { font-size: clamp(1.1rem, 2.5vw, 1.8rem); color: var(--color-line); font-weight: 300; letter-spacing: 1px; margin-bottom: 40px; } .invitation-card { background: rgba(13, 44, 79, 0.8); border: 2px solid var(--color-accent); border-radius: 10px; padding: 40px 30px; backdrop-filter: blur(10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); margin: 30px 0; } .invitation-to { font-size: 1.1rem; color: var(--color-accent); font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .guest-name { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--color-line); margin: 10px 0 20px 0; text-transform: uppercase; letter-spacing: 2px; } .guest-title { font-size: 1.2rem; color: var(--color-accent); font-style: italic; margin-bottom: 30px; } .event-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; } .detail-item { text-align: center; padding: 15px; border: 1px solid rgba(135, 206, 235, 0.3); border-radius: 5px; background: rgba(135, 206, 235, 0.05); } .detail-label { font-size: 0.9rem; color: var(--color-accent); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { font-size: 1.1rem; color: var(--color-line); font-weight: 400; } .cover-message { margin-top: 30px; padding: 25px; border-top: 1px solid rgba(135, 206, 235, 0.3); font-size: 1rem; line-height: 1.6; color: var(--color-line); font-style: italic; } .cover-cta { margin-top: 40px; } .cover-btn { background: linear-gradient(45deg, var(--color-accent), #5fb3d4); color: var(--color-bg); border: none; padding: 15px 40px; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border-radius: 5px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(135, 206, 235, 0.3); display: inline-block; } .cover-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(135, 206, 235, 0.4); background: linear-gradient(45deg, #5fb3d4, var(--color-accent)); } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--color-accent); font-size: 2rem; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } /* Responsive Design untuk Cover */ @media (max-width: 768px) { .invitation-card { padding: 30px 20px; margin: 20px 10px; } .event-details-grid { grid-template-columns: 1fr; gap: 15px; } .cover-content { padding: 20px 15px; } }
🎨 Preview Template: Bluprint 2026 | Kategori: Corporate
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
Undangan: Seminar Teknologi - Keluarga Besar Rahman

Seminar Teknologi

Meningkatkan Inovasi di Era Digital

Undangan Khusus
Keluarga Besar Rahman
Yang Terhormat
Tanggal
2026-04-30
Waktu
19:00 - 23:00
Venue
Restaurant The Terrace
Kategori
Seminar

Kehadiran Anda sangat kami nantikan dalam acara ini.

- HR Team (021-5555666)

Human Resources

Lihat Detail Acara

Project Mission

Meningkatkan kemampuan dan pengetahuan karyawan

Venue & Facilities

VENUE

Restaurant The Terrace

Jl. Senopati No. 88, Jakarta Selatan

FACILITIES

AC, Proyektor, Sound System, Wifi

TARGET

Seluruh karyawan

Level: Intermediate

ORGANIZER

PT Teknologi Maju Indonesia

Human Resources

Contact: HR Team (021-5555666) - 081234567890

Lead Architects

Dr. Budi Santoso

Dr. Budi Santoso

CEO PT Digital Solutions

Pakar teknologi dengan pengalaman 15 tahun

Ir. Sari Indah

Ir. Sari Indah

CTO PT Innovation Hub

Expert dalam artificial intelligence dan machine learning

Prof. Ahmad Rahman

Prof. Ahmad Rahman

Direktur PT Future Tech

Pemimpin dalam transformasi digital enterprise

Construction Phases

09:00-10:30 - Phase 01: Pembukaan

Deskripsi Pembukaan

10:45-12:00 - Phase 02: Sesi 1: Transformasi Digital

Deskripsi Sesi 1: Transformasi Digital

13:00-14:30 - Phase 03: Sesi 2: Inovasi Berkelanjutan

Deskripsi Sesi 2: Inovasi Berkelanjutan

14:45-16:00 - Phase 04: Penutupan

Deskripsi Penutupan

Event Requirements & Benefits

DRESS CODE

Smart Casual

BRING

Laptop, Notebook, Pen

CERTIFICATE

Ya, tersedia sertifikat

MATERIALS

Softcopy tersedia

COST

Gratis

Tidak diperlukan

DEADLINE

2026-05-30

Join The Project Team

Partisipasi Anda sangat penting. Mohon konfirmasi kehadiran Anda untuk dimasukkan dalam daftar proyek resmi.

Fill the form below to register:

Registration Deadline: 2026-05-30

CONTACT INFORMATION

For inquiries, please contact:

HR Team (021-5555666)

081234567890

Human Resources

For inquiries, please contact:

HR Team (021-5555666)

081234567890

Human Resources