.
Lebih baik tetap gunakan wrapper .invitation-nav-fixed di Blade. */
#invitation-content > nav:last-child,
#invitation-content > .invitation-nav:last-child,
#invitation-content > .bottom-nav:last-child,
#invitation-content > .floating-nav:last-child {
position: fixed !important;
left: 50% !important;
right: auto !important;
bottom: max(16px, env(safe-area-inset-bottom)) !important;
top: auto !important;
transform: translate3d(-50%, 0, 0) !important;
z-index: 150 !important;
width: min(calc(100vw - 24px), 720px) !important;
max-width: calc(100vw - 24px) !important;
pointer-events: auto;
}
/* Kalau root component nav ternyata elemen tanpa class, selector ini membantu.
Aman untuk file Blade saat ini karena memang child terakhir . */
#invitation-content.is-open > :last-child:not(section):not(footer):not(script) {
position: fixed !important;
left: 50% !important;
right: auto !important;
bottom: max(16px, env(safe-area-inset-bottom)) !important;
top: auto !important;
transform: translate3d(-50%, 0, 0) !important;
z-index: 150 !important;
width: min(calc(100vw - 24px), 720px) !important;
max-width: calc(100vw - 24px) !important;
pointer-events: auto;
}
/* Pastikan konten bawah tidak tertutup nav fixed. */
.invitation-content.is-open {
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
/* =========================================================
Hero / editorial components
========================================================= */
.hero-editorial {
min-height: 100vh;
background:
radial-gradient(circle at 20% 18%, rgba(0, 0, 0, 0.035), transparent 26%),
linear-gradient(135deg, #ffffff, #fbfbfa 55%, #ffffff);
position: relative;
overflow: hidden;
}
.hero-editorial::before {
content: "";
position: absolute;
inset: -20%;
background:
radial-gradient(circle at 18% 20%, rgba(0, 0, 0, 0.045), transparent 24%),
radial-gradient(circle at 82% 70%, rgba(0, 0, 0, 0.035), transparent 26%);
opacity: 0.7;
pointer-events: none;
animation: ambientFloat 14s ease-in-out infinite alternate;
}
.hero-editorial > * {
position: relative;
z-index: 1;
}
.hero-name {
font-family: 'Libre Baskerville', serif;
font-size: clamp(4.5rem, 14vw, 12rem);
line-height: 0.82;
letter-spacing: -0.08em;
font-weight: 400;
animation: titleReveal 1100ms var(--motion-soft) both;
}
.date-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.76);
backdrop-filter: blur(10px);
animation: fadeSlideUp 900ms var(--motion-ease) 180ms both;
}
.name-chip {
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 18px 50px -45px rgba(0, 0, 0, 0.38);
animation: fadeSlideUp 900ms var(--motion-ease) 280ms both;
}
.floating-number {
font-family: 'Libre Baskerville', serif;
color: rgba(0, 0, 0, 0.045);
letter-spacing: -0.08em;
line-height: 0.8;
pointer-events: none;
animation: softFloat 7s ease-in-out infinite;
}
.image-slab {
background: var(--soft);
border: 1px solid var(--line);
overflow: hidden;
position: relative;
transform: translateZ(0);
}
.image-slab::after {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(255, 255, 255, 0.82);
pointer-events: none;
}
.image-slab img {
transition:
transform 900ms var(--motion-soft),
filter 900ms ease;
will-change: transform;
}
.image-slab::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.28) 45%,
transparent 65%
);
transform: translateX(-120%);
transition: transform 900ms var(--motion-ease);
pointer-events: none;
}
.couple-panel {
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, 0.9);
animation: fadeSlideUp 900ms var(--motion-ease) 340ms both;
}
/* =========================================================
Cards / sections
========================================================= */
.event-block {
border: 1px solid var(--line);
background: #fff;
position: relative;
min-height: 430px;
}
.event-block::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--ink);
opacity: 0.88;
transition:
width var(--motion-fast) var(--motion-ease),
opacity var(--motion-fast) ease;
}
.small-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ink);
background: var(--ink);
color: #fff;
border-radius: 999px;
transition: 0.25s ease;
}
.small-button:hover {
background: #333;
transform: translateY(-2px);
}
.outline-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
background: #fff;
color: var(--ink);
border-radius: 999px;
transition: 0.25s ease;
}
.outline-button:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.map-window {
border: 1px solid var(--line);
background: #fff;
position: relative;
box-shadow: 0 26px 80px -68px rgba(0, 0, 0, 0.46);
}
.story-index {
font-family: 'Libre Baskerville', serif;
font-size: clamp(3rem, 7vw, 5.6rem);
color: rgba(0, 0, 0, 0.075);
line-height: 0.75;
animation: softFloat 7s ease-in-out 700ms infinite;
}
.gallery-tile {
background: #fff;
border: 1px solid var(--line);
padding: 12px;
box-shadow: 0 22px 70px -64px rgba(0, 0, 0, 0.45);
}
.gallery-tile:nth-child(odd) {
animation: fadeSlideUp 850ms var(--motion-ease) both;
}
.gallery-tile:nth-child(even) {
animation: fadeSlideUp 850ms var(--motion-ease) 120ms both;
}
.gift-slip {
border: 1px solid var(--line);
background: #fff;
position: relative;
overflow: hidden;
}
.gift-slip::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--line-strong) 0 10px,
transparent 10px 18px
);
animation: dashMove 8s linear infinite;
}
.event-block,
.map-window,
.gallery-tile,
.gift-slip,
.name-chip {
transition:
transform var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) ease,
background-color var(--motion-fast) ease;
will-change: transform;
}
/* =========================================================
Cover pembuka undangan
========================================================= */
.invitation-content {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 800ms ease;
}
.invitation-content.is-open {
opacity: 1;
visibility: visible;
height: auto;
overflow: visible;
}
#invitation-cover {
transition:
opacity 800ms ease,
visibility 800ms ease,
transform 800ms ease;
}
#invitation-cover.cover-hidden {
opacity: 0;
visibility: hidden;
transform: scale(1.04);
pointer-events: none;
}
.cover-card {
animation: coverFadeUp 1000ms ease both;
}
.minimal-cover-frame {
background:
radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.035), transparent 28%),
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 251, 250, 0.94));
border: 1px solid var(--line);
box-shadow: 0 30px 100px -80px rgba(0, 0, 0, 0.45);
}
.minimal-cover-frame::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid var(--line);
pointer-events: none;
animation: frameBreath 5.5s ease-in-out infinite;
}
.minimal-cover-frame::after {
content: "";
position: absolute;
inset: 34px;
border: 1px solid rgba(0, 0, 0, 0.035);
pointer-events: none;
animation: frameBreath 5.5s ease-in-out 800ms infinite;
}
.cover-number {
font-family: 'Libre Baskerville', serif;
color: rgba(0, 0, 0, 0.045);
letter-spacing: -0.08em;
line-height: 0.8;
pointer-events: none;
animation: softFloat 7s ease-in-out 1200ms infinite;
}
.opener-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
pointer-events: none;
user-select: none;
opacity: 0.9;
}
/* =========================================================
Interactions
========================================================= */
.small-button,
.outline-button {
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform 260ms var(--motion-ease),
box-shadow 260ms var(--motion-ease),
background-color 260ms ease,
border-color 260ms ease,
color 260ms ease;
}
.small-button::before,
.outline-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.34),
transparent
);
transform: translateX(-130%);
transition: transform 620ms var(--motion-ease);
}
.small-button:active,
.outline-button:active {
transform: translateY(-1px) scale(0.98);
}
.small-button:focus-visible,
.outline-button:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
}
/* Optional scroll reveal
Tambahkan class="reveal" pada elemen yang ingin muncul saat discroll,
lalu tambahkan class "is-visible" via JS.
*/
.reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(8px);
transition:
opacity 850ms var(--motion-ease),
transform 850ms var(--motion-ease),
filter 850ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.reveal:nth-child(2) {
transition-delay: 90ms;
}
.reveal:nth-child(3) {
transition-delay: 160ms;
}
.reveal:nth-child(4) {
transition-delay: 230ms;
}
.reveal:nth-child(5) {
transition-delay: 300ms;
}
/* =========================================================
Hover polish
========================================================= */
@media (hover: hover) {
.event-block:hover,
.map-window:hover,
.gallery-tile:hover,
.gift-slip:hover,
.name-chip:hover {
transform: translateY(-6px);
border-color: var(--line-strong);
box-shadow: 0 34px 90px -70px rgba(0, 0, 0, 0.55);
}
.event-block:hover::before {
width: 10px;
opacity: 1;
}
.image-slab:hover img {
transform: scale(1.045);
filter: contrast(1.03) saturate(1.04);
}
.image-slab:hover::before {
transform: translateX(120%);
}
.small-button:hover,
.outline-button:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px -28px rgba(0, 0, 0, 0.55);
}
.small-button:hover::before,
.outline-button:hover::before {
transform: translateX(130%);
}
}
/* =========================================================
Keyframes
Catatan: pageFadeIn sengaja tidak memakai filter/transform di body,
supaya position: fixed milik ornament/nav tidak rusak.
========================================================= */
@keyframes pageFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes gridDrift {
from {
background-position: 0 0;
}
to {
background-position: 72px 72px;
}
}
@keyframes coverFadeUp {
from {
opacity: 0;
transform: translateY(28px) scale(0.98);
filter: blur(10px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes ambientFloat {
from {
transform: translate3d(-12px, -8px, 0) scale(1);
}
to {
transform: translate3d(16px, 12px, 0) scale(1.04);
}
}
@keyframes titleReveal {
from {
opacity: 0;
transform: translateY(36px);
filter: blur(10px);
letter-spacing: -0.12em;
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(22px);
filter: blur(8px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes lineGrow {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
@keyframes softFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes dashMove {
from {
background-position: 0 0;
}
to {
background-position: 56px 0;
}
}
@keyframes frameBreath {
0%, 100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1024px) {
:root {
--ornament-cover-width: 220px;
--ornament-cover-tl-top: -68px;
--ornament-cover-tl-left: -18px;
--ornament-cover-br-right: -18px;
--ornament-cover-br-bottom: -22px;
--ornament-main-width: 210px;
--ornament-main-tl-top: -68px;
--ornament-main-tl-left: -18px;
--ornament-main-br-right: -18px;
--ornament-main-br-bottom: -20px;
}
}
@media (max-width: 768px) {
:root {
--ornament-cover-width: 180px;
--ornament-cover-tl-top: -60px;
--ornament-cover-tl-left: -16px;
--ornament-cover-br-right: -16px;
--ornament-cover-br-bottom: -20px;
--ornament-main-width: 170px;
--ornament-main-z: 70;
--ornament-main-tl-top: -60px;
--ornament-main-tl-left: -16px;
--ornament-main-br-right: -16px;
--ornament-main-br-bottom: -20px;
}
.vertical-word {
writing-mode: horizontal-tb;
letter-spacing: 0.28em;
}
.minimal-line {
height: 1px;
width: 90px;
}
.hero-name {
letter-spacing: -0.06em;
}
.minimal-cover-frame::before {
inset: 12px;
}
.minimal-cover-frame::after {
inset: 24px;
}
.hero-name,
.section-title {
animation-duration: 900ms;
}
.event-block,
.map-window,
.gallery-tile,
.gift-slip,
.name-chip {
transition-duration: 220ms;
}
.floating-number,
.story-index,
.cover-number {
animation-duration: 8s;
}
.invitation-nav-fixed,
[data-invitation-nav],
#invitation-content > nav:last-child,
#invitation-content > .invitation-nav:last-child,
#invitation-content > .bottom-nav:last-child,
#invitation-content > .floating-nav:last-child,
#invitation-content.is-open > :last-child:not(section):not(footer):not(script) {
bottom: max(12px, env(safe-area-inset-bottom)) !important;
width: min(calc(100vw - 20px), 640px) !important;
max-width: calc(100vw - 20px) !important;
}
}
@media (max-width: 480px) {
:root {
--ornament-cover-width: 200px;
--ornament-cover-tl-top: -48px;
--ornament-cover-tl-left: -16px;
--ornament-cover-br-right: -16px;
--ornament-cover-br-bottom: -18px;
--ornament-main-width: 200px;
--ornament-main-z: 70;
--ornament-main-tl-top: 0px;
--ornament-main-tl-left: -16px;
--ornament-main-br-right: -16px;
--ornament-main-br-bottom: 0px;
}
.cover-card {
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.invitation-content.is-open {
padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
}
/* =========================================================
Accessibility / reduced motion
Jangan set transform:none untuk .cover-corner/.corner-art di theme,
karena rotasi ornament berasal dari global variables.
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero-editorial::before {
display: none;
}
#invitation-cover,
.invitation-content {
transition: none !important;
}
}