/* ============================================================ HERO — EDITORIAL COVER ============================================================ */ /* Font baru yang dipakai (tambahkan di HTML kamu): */ main { position: relative; z-index: 1; } /* ── The section is a fixed-height stage ── */ .hero { position: relative; width: 100%; /* Full viewport minus navbar, keep 10px gap from navbar */ height: calc(100svh - var(--nav-h) - 10px); margin-top: calc(var(--nav-h) + 10px); overflow: visible; /* jangan hidden — search bar harus bisa muncul */ clip-path: none; background: linear-gradient(160deg, #fce4f0 0%, #f5c6de 40%, #eeb5d0 100%); } /* ── LAYER 1 — Giant "Portfolio" outline text (behind photo) ── */ .hero-bg-text { position: absolute; top: 35px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; white-space: nowrap; font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(80px, 18vw, 220px); letter-spacing: 0px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(196,88,128,.25); user-select: none; pointer-events: none; z-index: 2; /* above photo */ } /* ── LAYER 2 — Photo (floats over bg text) ── */ .hero-photo-wrap { position: absolute; top: 180px; bottom: auto; left: 50%; transform: translateX(-50%); width: clamp(200px, 30vw, 420px); z-index: 0; /* behind bg text and side labels */ pointer-events: none; } .hero-photo { display: block; width: 100%; height: auto; object-fit: cover; object-position: top center; border-radius: 50% 50% 0 0 / 28% 28% 0 0; filter: drop-shadow(-16px 0 32px rgba(196,88,128,.2)) drop-shadow( 16px 0 32px rgba(196,88,128,.2)) drop-shadow(0 -8px 24px rgba(196,88,128,.1)); } /* ── LAYER 3 — Left column (vertical "programmer" + FULL STACK) ── */ .hero-left { position: absolute; left: 0; top: 60px; bottom: 56px; /* 56px = bar height */ width: calc(50% - clamp(100px, 15vw, 210px)); z-index: 4; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; padding-left: clamp(16px, 5vw, 64px); padding-top: 100px; } .vertical-text { display: block; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: 'DM Sans', sans-serif; font-size: clamp(10px, 1.4vw, 18px); font-weight: 300; letter-spacing: clamp(4px, .8vw, 10px); color: var(--text-mid); text-transform: uppercase; } .role-pills { display: flex; flex-direction: column; gap: 4px; } .rpill { /* ── UPDATED: Bebas Neue — bold, solid, sangat mudah dibaca ── */ font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 4.5vw, 60px); font-weight: 400; font-style: normal; color: var(--pink-deep); -webkit-text-stroke: 0; line-height: 1; letter-spacing: 2px; } /* ── LAYER 3 — Right column (INAS / WAFIYAH) ── */ .hero-right { position: absolute; right: 0; top: 318px; bottom: 56px; width: calc(50% - clamp(100px, 15vw, 210px)); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 8px; padding-right: clamp(16px, 5vw, 64px); padding-top: 10px; } .hero-handle { font-family: 'DM Sans', sans-serif; font-size: clamp(8px, .9vw, 12px); font-weight: 400; letter-spacing: 4px; color: var(--pink-mid); text-transform: uppercase; } .name-block { display: flex; flex-direction: column; align-items: flex-end; line-height: .92; margin-top: 5px; } .name-top { /* ── UPDATED: Cinzel — serif elegan, kapitalisasi tegas ── */ display: block; font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(10px, 7.5vw, 60px); letter-spacing: 3px; color: var(--pink-cream); -webkit-text-stroke: 1px rgba(196,88,128,.22); text-shadow: 0 2px 20px rgba(196,88,128,.18); margin-right: -7px; } .name-bot { /* ── UPDATED: Syne ExtraBold — geometric modern, kontras kuat saat outline ── */ display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: clamp(6px, 7.5vw, 60px); letter-spacing: 4px; color: transparent; -webkit-text-stroke: 2px var(--pink-deep); margin-right: -7px; } /* ── LAYER 2b — Sticker strawberry matcha ── */ .hero-sticker-wrap { position: absolute; left: clamp(12px, 4vw, 48px); bottom: clamp(70px, 12vh, 120px); z-index: 3; pointer-events: none; width: clamp(90px, 12vw, 150px); } .hero-sticker { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 12px rgba(196,88,128,.25)); transform: rotate(-4deg); } @keyframes sticker-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(-4deg); } } /* Stiker — mobile ≤768px: naik 10px + geser kiri 3px */ @media (max-width: 768px) { .hero-sticker-wrap { left: 3px; /* geser kiri 3px (8px → 5px) */ bottom: clamp(165px, 22vw, 190px); /* naik 10px (130px → 140px) */ width: clamp(115px, 24vw, 150px); } } /* Stiker — very small ≤380px */ @media (max-width: 380px) { .hero-sticker-wrap { width: 115px; left: 3px; /* geser kiri 3px */ bottom: 150px; /* naik 10px (140px → 150px) */ } } /* ── Bottom info bar ── */ .hero-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 clamp(16px, 5vw, 64px); border-top: 1px solid rgba(196,88,128,.18); background: rgba(255,240,245,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 5; } .bar-item { display: flex; align-items: center; gap: 5px; } .bar-label { font-size: 11px; color: var(--text-soft); letter-spacing: .5px; } .bar-link { font-size: 12px; font-weight: 500; color: var(--text-mid); text-decoration: none; transition: color .2s; } .bar-link:hover { color: var(--pink-deep); } .bar-divider { width: 1px; height: 16px; background: rgba(196,88,128,.28); } .bar-scroll { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-soft); letter-spacing: 1.5px; text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ============================================================ DESKTOP ONLY (> 768px) — override spesifik ============================================================ */ @media (min-width: 769px) { .hero-photo-wrap { top: -35px; /* naik 50px dari 180px */ } .rpill { font-size: clamp(8px, 4.5vw, 40px); /* kecil 20px dari max 60px → 40px */ } .name-top { font-size: clamp(10px, 7.5vw, 40px); /* kecil 20px dari max 60px → 40px */ } /* vertical-text desktop: satu baris lurus rotate, bukan writing-mode */ .vertical-text { writing-mode: horizontal-tb; text-orientation: mixed; transform: rotate(-90deg); transform-origin: left center; white-space: nowrap; font-size: clamp(8px, 1.1vw, 14px); /* kecil 20px dari max 18px → ±14px */ margin-top: 200px; } /* Sticker — desktop: geser kanan 100px, turun 50px */ .hero-sticker-wrap { left: calc(clamp(12px, 4vw, 48px) + 300px); bottom: calc(clamp(70px, 12vh, 120px) - 75px); } } /* ============================================================ RESPONSIVE — TABLET (≤ 860px) ============================================================ */ @media (max-width: 860px) { .nav-links .nav-link { padding: 8px 10px; font-size: 13px; } .btn-hire { padding: 9px 16px; font-size: 13px; } .rpill { font-size: clamp(18px, 3vw, 34px); } } /* ============================================================ RESPONSIVE — SEMUA HP (≤ 768px) Infinix 720px, iPhone XR 375px, semua masuk sini ============================================================ */ @media (max-width: 768px) { :root { --nav-h: 58px; --nav-mt: 12px; --nav-gap: 14px; --nav-r: 18px; } /* Navbar — sembunyikan links, tampilkan hamburger */ .navbar { padding: 0 14px; } .nav-links { display: none; } .nav-actions .btn-hire:not(.btn-hire--full) { display: none; } .hamburger { display: flex; } .mobile-menu { display: flex; } /* Hero — ikuti tinggi konten, bukan viewport */ .hero { margin-top: calc(var(--nav-h) + 10px); height: auto; min-height: 0; padding-bottom: clamp(80px, 18vw, 140px); } /* "Portofolio" bg text */ .hero-bg-text { font-size: clamp(70px, 17vw, 140px); top: 40px; letter-spacing: 2px; } /* Foto — jadi relative agar hero ikuti tingginya */ .hero-photo-wrap { position: relative; top: auto; left: auto; transform: none; width: 68vw; max-width: 340px; margin: 0 auto; padding-top: 200px; } /* Left — FULL STACK & Software Engineering */ .hero-left { top: 100px; bottom: auto; padding-left: clamp(12px, 4vw, 36px); } .rpill { font-size: clamp(20px, 5vw, 44px); letter-spacing: 2px; } .vertical-text { font-size: clamp(10px, 1.8vw, 15px); letter-spacing: clamp(4px, 1vw, 8px); margin-top: -30px; } /* Right — INAS / WAFIYAH */ .hero-right { top: 150px; bottom: auto; padding-right: clamp(12px, 4vw, 36px); } .hero-handle { font-size: 8px; letter-spacing: 3px; } .name-block { margin-top: 0; } .name-top { font-size: clamp(32px, 8vw, 72px); letter-spacing: 2px; margin-right: 0; } .name-bot { font-size: clamp(32px, 8vw, 72px); letter-spacing: 1px; -webkit-text-stroke: 1.5px var(--pink-deep); margin-right: 0; } /* Bar */ .hero-bar { bottom: 0; } .bar-scroll { display: none; } } /* ── Very small phones (≤ 380px) ── */ @media (max-width: 380px) { :root { --nav-gap: 10px; --nav-r: 14px; } .logo-text { font-size: 16px; } .hero-bg-text { font-size: clamp(50px, 15vw, 80px); } .name-top { font-size: clamp(28px, 8vw, 40px); } .name-bot { font-size: clamp(18px, 5vw, 28px); } .rpill { font-size: 18px; } .hero-left { top: 50px; } .hero-right { top: 110px; } } /* ============================================================ HERO SEARCH BAR ============================================================ */ .hero-search-wrap { position: absolute; left: 50%; top: 0; /* JS akan override ini */ transform: translateX(-50%); width: calc(100% - clamp(32px, 8vw, 96px)); z-index: 6; pointer-events: auto; margin-top: -51px; } .hero-search { display: flex; align-items: center; width: 100%; height: clamp(50px, 6.5vh, 64px); background: rgba(255, 248, 251, 0.92); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border: 1.5px solid rgba(255, 255, 255, 0.94); border-radius: 999px; padding: 5px 5px 5px clamp(16px, 2.5vw, 26px); box-shadow: 0 8px 40px rgba(196, 88, 128, 0.22), 0 2px 10px rgba(196, 88, 128, 0.10), inset 0 1.5px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(232, 145, 176, 0.14); transition: box-shadow 0.35s var(--smooth), transform 0.35s var(--smooth); } .hero-search:hover { box-shadow: 0 16px 56px rgba(196, 88, 128, 0.30), 0 4px 16px rgba(196, 88, 128, 0.14), inset 0 1.5px 0 rgba(255, 255, 255, 0.98); transform: translateY(-2px); } .hero-search-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--pink-deep); margin-right: clamp(8px, 1.2vw, 16px); opacity: 0.72; } .hero-search-icon svg { width: clamp(14px, 1.5vw, 18px); height: clamp(14px, 1.5vw, 18px); } .hero-search-text { flex: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; } .hero-search-label { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400; color: var(--text-mid); white-space: nowrap; flex-shrink: 0; } .hero-search-highlight { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 900; font-style: italic; background: linear-gradient(135deg, var(--pink-mid) 0%, var(--pink-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; letter-spacing: -0.3px; flex-shrink: 0; } .hero-search-amp { font-family: 'Playfair Display', serif; font-size: 13px; font-style: italic; color: var(--text-soft); white-space: nowrap; flex-shrink: 0; } .hero-search-tag { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--pink-deep); background: linear-gradient(135deg, rgba(232,145,176,.16), rgba(196,88,128,.10)); border: 1px solid rgba(196, 88, 128, 0.22); border-radius: 999px; padding: 3px 11px; white-space: nowrap; letter-spacing: 0.4px; flex-shrink: 0; } .hero-search-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: stretch; padding: 0 clamp(14px, 2.2vw, 26px); background: linear-gradient(135deg, var(--pink-mid), var(--pink-deep)); border-radius: 999px; text-decoration: none; margin-left: auto; box-shadow: 0 4px 18px rgba(196, 88, 128, 0.42), inset 0 1px 0 rgba(255,255,255,.22); transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring); } .hero-search-btn:hover { transform: scale(1.05); box-shadow: 0 8px 28px rgba(196, 88, 128, 0.56); } .hero-search-btn:active { transform: scale(0.97); } .hero-search-btn-inner { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.5px; white-space: nowrap; } /* Search bar — HP (≤ 768px) */ @media (max-width: 768px) { .hero-search-wrap { width: calc(100% - 28px); position: absolute; margin-top: 28px; } /* turun 3px */ .hero-search { height: 50px; padding: 4px 4px 4px 14px; } .hero-search-icon { margin-right: 8px; } .hero-search-text { gap: 5px; } .hero-search-label { font-size: 13px; } .hero-search-highlight { font-size: 15px; } .hero-search-amp, .hero-search-tag { display: none; } .hero-search-btn { padding: 0 16px; } .hero-search-btn-inner { font-size: 13px; } } /* Search bar — Very small (≤ 380px) */ @media (max-width: 380px) { .hero-search-wrap { width: calc(100% - 20px); } .hero-search { height: 44px; padding: 4px 4px 4px 12px; } .hero-search-label { display: none; } .hero-search-btn { padding: 0 12px; } }