:root {
--color-bg: #f8f6f2;
--color-text: #4a4a4a;
--color-heading: #3c4d37;
--color-primary: #8b9d83;
--color-accent: #c97b63;
--font-main: 'Nunito', sans-serif;
}
body,
html {
margin: 0;
padding: 0;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-main);
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Parallax Background */
.parallax-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
pointer-events: none;
}
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
transition: transform 0.8s ease-out;
}
#leaf1 {
background-image: url('https://undang-doi.com/assets/img/leaf1.png');
width: 200px;
height: 200px;
top: 10%;
left: -50px;
opacity: 0.1;
}
#leaf2 {
background-image: url('https://undang-doi.com/assets/img/leaf2.png');
width: 150px;
height: 150px;
top: 70%;
right: -50px;
opacity: 0.1;
transform: scaleX(-1);
}
/* === Cover Splash Screen === */
#cover-splash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
transition: opacity 1s ease-out;
}
#cover-splash.hidden {
opacity: 0;
pointer-events: none;
}
#growth-animation {
width: 300px;
height: 300px;
}
.cover-content h1 {
font-size: clamp(2.5rem, 8vw, 4rem);
font-weight: 800;
margin: 0;
color: var(--color-heading);
}
.btn {
background-color: var(--color-accent);
color: white;
padding: 15px 35px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #d48a74;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* === Main Content Styling === */
main {
padding-bottom: 80px;
display: none;
/* Hidden by default */
}
.top-header {
text-align: center;
padding: 60px 20px 40px;
color: var(--color-heading);
}
.top-header h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.top-header p {
font-size: 1.1rem;
color: var(--color-text);
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
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-size: 2.8rem;
font-weight: 800;
text-align: center;
margin-bottom: 60px;
color: var(--color-heading);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background-color: var(--color-primary);
margin: 15px auto 0;
border-radius: 2px;
}
/* Countdown */
#countdown {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
}
.time-box {
background-color: white;
padding: 10px;
border-radius: 8px;
width: 70px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
text-align: center;
}
.time-box span {
display: block;
font-weight: 700;
font-size: 2rem;
color: var(--color-heading);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
text-align: center;
}
.benefit-item .icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: 15px;
}
.benefit-item h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 10px;
}
#sessions {
background-color: #ffffff;
}
.sessions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.session-card {
background-color: var(--color-bg);
border-radius: 15px;
padding: 30px;
border-left: 5px solid var(--color-accent);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.session-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.session-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-heading);
margin-top: 0;
}
/* Modal for Agenda */
.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;
animation: fadeIn 0.3s;
}
.modal-content {
background-color: var(--color-bg);
padding: 30px;
width: 90%;
max-width: 600px;
position: relative;
border-radius: 10px;
}
.close-button {
position: absolute;
top: 10px;
right: 20px;
font-size: 2rem;
cursor: pointer;
}
/* Bottom Nav */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
display: none;
justify-content: space-around;
padding: 8px 0;
z-index: 100;
}
.bottom-nav.visible {
display: flex;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: var(--color-text);
text-decoration: none;
transition: color 0.3s;
}
.nav-item.active,
.nav-item:hover {
color: var(--color-accent);
}
.nav-icon {
font-size: 1.5rem;
}
.nav-label {
font-size: 0.7rem;
font-family: 'Nunito', sans-serif;
}
footer {
text-align: center;
padding: 40px 20px;
background-color: var(--color-heading);
color: var(--color-bg);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#growth-animation path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 3s ease-out forwards;
}
Undangan: Seminar Teknologi - Keluarga Besar Rahman
Seminar Teknologi
Meningkatkan Inovasi di Era Digital
Sunday, 2026-04-30
19:00 - 23:00
Restaurant The Terrace
Enter Event
Event Overview
Meningkatkan kemampuan dan pengetahuan karyawan
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
Featured Speakers
Dr. Budi Santoso
CEO PT Digital Solutions
Pakar teknologi dengan pengalaman 15 tahun
Ir. Sari Indah
CTO PT Innovation Hub
Expert dalam artificial intelligence dan machine learning
Prof. Ahmad Rahman
Direktur PT Future Tech
Pemimpin dalam transformasi digital enterprise
Event Agenda
09:00-10:30 - Pembukaan
Deskripsi Pembukaan
Click for details...
10:45-12:00 - Sesi 1: Transformasi Digital
Deskripsi Sesi 1: Transformasi Digital
Click for details...
13:00-14:30 - Sesi 2: Inovasi Berkelanjutan
Deskripsi Sesi 2: Inovasi Berkelanjutan
Click for details...
14:45-16:00 - Penutupan
Deskripsi Penutupan
Click for details...
Event Information
What to Bring
Laptop, Notebook, Pen
Certificate
Ya, tersedia sertifikat
Materials
Softcopy tersedia
Cost
Gratis
Tidak diperlukan
Facilities
AC, Proyektor, Sound System, Wifi
Join Our Growth Journey
Ready to cultivate a stronger, more resilient, and collaborative self? Register now and be part
of this transformative experience.
ONLINE REGISTRATION
Click the link below to register:
Register Online
Registration Deadline: 2026-05-30
Contact Information
For inquiries, please contact:
HR Team (021-5555666)
081234567890
Human Resources
Personal Invitation
You have been personally invited to this exclusive growth summit.
INVITATION DETAILS
Dear Keluarga Besar Rahman
Yang Terhormat
Your Invitation Code:
WED2025001
QR Code for Easy Check-in:
Please present this invitation code or QR code at the event registration desk.
Contact Information
For any questions regarding your invitation, please contact:
HR Team (021-5555666)
081234567890
Human Resources
×
Pembukaan
Detail Pembukaan
×
Sesi 1: Transformasi Digital
Detail Sesi 1: Transformasi Digital
×
Sesi 2: Inovasi Berkelanjutan
Detail Sesi 2: Inovasi Berkelanjutan
×
Penutupan
Detail Penutupan