` in every page's markup that JS fills with the `

` via innerHTML — so the div's own box is exactly as tall as the header and nothing else. Per the sticky-positioning spec, a sticky element can only stay "stuck" while its containing block is still within the scrollport; once that block's own height has scrolled past, its sticky child scrolls away with it. With a same-height wrapper, that happens the instant the header's own height is scrolled — so it never stayed pinned past the first ~80px. `display: contents` removes the wrapper's box entirely (its child `

` becomes a direct flow child of ``, which is thousands of pixels tall), giving the sticky header its real effective range across the whole page. The DOM node stays put, so `document.getElementById("site-header").innerHTML = ...` is untouched. */ #site-header { display: contents; } #site-header header { background-color: rgba(26, 31, 58, 0.72); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, 0.10); transform: translateY(0); transition: transform var(--duration-base) var(--ease-out); will-change: transform; } /* Toggled by js/main.js while scrolling down past the header's own height; scrolling up, being near the top, or opening the mobile menu all clear it. */ #site-header header.header-hidden { transform: translateY(-100%); } @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { #site-header header { background-color: rgb(26, 31, 58); } body > section.batik-overlay:first-of-type > div.grid > div:first-child, body > section.batik-overlay:first-of-type > div:not(.grid) { background: rgba(26, 31, 58, 0.72); } } /* ============================================================ PHOTO CROPPING Every slot uses object-cover, so a portrait source dropped into a landscape slot gets centre-cropped and loses its subject. These rules re-anchor the crop per photo. Keyed on the filename so no markup changes and the intent stays readable. ============================================================ */ /* Portrait sources in landscape slots — bias upward to keep faces/hands. */ img[src$="workshop-produksi.webp"] { object-position: center 30%; } img[src$="perusahaan-bpr-dharma-naga.jpg"] { object-position: center 52%; } img[src$="produksi-cetak-kain.webp"] { object-position: center 42%; } /* Square studio shots — subjects sit low in frame. */ img[src$="seragam-sekolah.jpg"] { object-position: center 38%; } img[src$="seragam-sekolah-2.jpg"] { object-position: center 34%; } img[src$="seragam-kantor-couple.webp"] { object-position: center 40%; } /* Carries a device watermark + timestamp along the bottom edge; crop upward so it stays out of frame. */ img[src$="komunitas-organisasi.jpg"] { object-position: center 40%; } /* Gallery / portfolio image tiles carry no glass (an opaque photo hides it), but their radius is normalised to match the glass surfaces. */ [class~="rounded-2xl"][class~="overflow-hidden"][class~="group"] { border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); transition: var(--transition-glass); } [class~="rounded-2xl"][class~="overflow-hidden"][class~="group"]:hover { box-shadow: var(--glass-shadow-hover); } /* ============================================================ FEATURE CARDS — the strongest glass on the site ------------------------------------------------------------ `.glass-card--woven` marks exactly the "why choose us" style feature cards. Stronger glass means MORE refraction, not more paint: the fill stays fairly transparent while blur and saturation climb and the rim brightens. Pushing opacity instead would just make them look like plain white boxes. ============================================================ */ .glass-card.glass-card.glass-card--woven { border-radius: 18px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.30) 46%, rgba(255, 255, 255, 0.48) 100%); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); border-color: rgba(255, 255, 255, 0.88); box-shadow: 0 20px 52px rgba(26, 31, 58, 0.14), 0 2px 8px rgba(26, 31, 58, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .glass-card.glass-card.glass-card--woven::before { background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.70) 16%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.34) 70%, rgba(255, 255, 255, 0.95) 100%); } .glass-card.glass-card.glass-card--woven.card-hover:hover { background: linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.40) 46%, rgba(255, 255, 255, 0.58) 100%); -webkit-backdrop-filter: blur(30px) saturate(210%); backdrop-filter: blur(30px) saturate(210%); box-shadow: 0 28px 64px rgba(26, 31, 58, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 1); } /* Let more of the ambient bloom through the band these cards sit on, so the panes have richer colour to refract. */ section.bg-white:has(.glass-card--woven) { background-color: rgba(255, 255, 255, 0.18); } /* ---------- Feature icons ---------- */ [class~="w-12"][class~="h-12"][class~="rounded-xl"][class~="bg-accent/10"] { border-radius: 15px; background-color: transparent; background-image: linear-gradient(145deg, rgb(var(--accent-rgb)) 0%, rgb(212 140 84) 52%, rgb(var(--gold-rgb)) 100%); color: #ffffff; box-shadow: 0 10px 22px rgb(var(--accent-rgb) / 0.34), 0 2px 6px rgb(var(--accent-rgb) / 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -1px 0 rgba(0, 0, 0, 0.06); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } /* Slightly heavier stroke reads better reversed out on a saturated fill. */ [class~="w-12"][class~="h-12"][class~="rounded-xl"][class~="bg-accent/10"] svg { stroke-width: 1.75; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .card-hover:hover [class~="w-12"][class~="h-12"][class~="rounded-xl"][class~="bg-accent/10"] { transform: scale(1.08) translateY(-2px); box-shadow: 0 16px 30px rgb(var(--accent-rgb) / 0.42), 0 3px 8px rgb(var(--accent-rgb) / 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.75); } @media (hover: none) { .card-hover:hover [class~="w-12"][class~="h-12"][class~="rounded-xl"][class~="bg-accent/10"] { transform: none; } } /* Wide translucent bands replacing the old opaque bg-white sections. */ section.bg-white { background-color: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); } /* Browsers without backdrop-filter: fall back to opaque-enough surfaces so body copy never loses contrast. */ @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { .glass-card.glass-card { background: rgba(255, 255, 255, 0.86); } .glass-card.glass-card.card-hover:hover, .glass-card.glass-card.is-interactive:hover { background: rgba(255, 255, 255, 0.94); } .glass-card.glass-card.glass-card--dark { background: rgba(255, 255, 255, 0.14); } section.bg-white { background-color: rgba(255, 255, 255, 0.72); } } /* ============================================================ BUTTONS ============================================================ */ a[class~="bg-accent"], button[class~="bg-accent"], a[class~="border-2"], button[class~="border-2"] { transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; } a[class~="bg-accent"]:hover, button[class~="bg-accent"]:hover { transform: scale(1.02); box-shadow: 0 6px 22px rgb(var(--accent-rgb) / 0.35), 0 0 0 1px rgb(var(--accent-rgb) / 0.25); } a[class~="border-2"]:hover, button[class~="border-2"]:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgb(var(--primary-rgb) / 0.12); } a[class~="bg-accent"]:active, button[class~="bg-accent"]:active, a[class~="border-2"]:active, button[class~="border-2"]:active { transform: scale(0.99); } /* ============================================================ THREAD DIVIDER (injected between sections by js/main.js) ============================================================ */ .thread-divider { display: block; width: 100%; height: 28px; line-height: 0; pointer-events: none; overflow: hidden; } .thread-divider svg { display: block; width: 100%; height: 100%; } /* `non-scaling-stroke` keeps the line exactly 1.25px at every width, but it also makes stroke-dasharray resolve in SCREEN pixels — which defeats the pathLength="1200" normalisation on the path. A fixed dash would therefore cover less and less of the line as the viewport grows (only ~47% at 2560px). js/main.js measures the path in screen space and publishes it as --thread-len, remeasuring on resize; the fallback covers a very wide screen should the script not run. */ .thread-divider path { fill: none; stroke: var(--color-dust); stroke-width: 1.25; stroke-opacity: var(--thread-opacity); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--thread-len, 4000); stroke-dashoffset: var(--thread-len, 4000); animation: thread-draw 1.8s var(--ease-out) 0.15s forwards; } @keyframes thread-draw { to { stroke-dashoffset: 0; } } /* Hold the draw-in until the divider actually scrolls into view, otherwise every line below the fold finishes drawing while still invisible. */ .js-reveal .thread-divider path { animation-play-state: paused; } .js-reveal .thread-divider.is-visible path { animation-play-state: running; } /* ============================================================ SCROLL REVEAL Gated behind .js-reveal on so content stays visible if JavaScript never runs. ============================================================ */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal .reveal { opacity: 1; transform: none; filter: none; transition: none; } .thread-divider path { animation: none; stroke-dashoffset: 0; } a[class~="bg-accent"]:hover, button[class~="bg-accent"]:hover, a[class~="border-2"]:hover, button[class~="border-2"]:hover, .glass-card.glass-card.card-hover:hover { transform: none; } } /* ============================================================ EXISTING COMPONENTS (behaviour unchanged, retokenised) ============================================================ */ .font-heading { font-family: var(--font-heading); } /* Decorative low-opacity batik pattern on the deep-indigo hero / CTA bands */ .batik-overlay { position: relative; isolation: isolate; } .batik-overlay::before { content: ""; position: absolute; inset: 0; background-image: url('../assets/batik-pattern.svg'); background-repeat: repeat; background-size: 120px 120px; opacity: 0.14; z-index: 0; pointer-events: none; } .batik-overlay > * { position: relative; z-index: 1; } /* Accordion content collapse animation */ .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out); } .accordion-item.active .accordion-panel { max-height: 500px; } .accordion-item .accordion-icon { transition: transform var(--duration-fast) var(--ease-out); } .accordion-item.active .accordion-icon { transform: rotate(45deg); } /* Mobile nav panel */ #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); } #mobile-menu.open { max-height: 600px; } /* Card lift for non-glass cards */ .card-hover { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease, border-color var(--duration-fast) ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); } /* Line clamp fallback */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Active nav link indicator */ .nav-link.active { color: var(--color-canvas); font-weight: 700; } .nav-link.active::after { content: ""; display: block; height: 2px; background-color: var(--color-accent); margin-top: 4px; border-radius: 9999px; } .nav-link-mobile.active { background-color: rgba(255, 255, 255, 0.12); color: #ffffff; } .filter-pill { transition: var(--transition-glass); } .filter-pill.active { background-color: var(--color-accent); color: #ffffff; border-color: transparent; } /* ============================================================ RESPONSIVE Blur is expensive on low-power mobile GPUs and the fixed grain layer can tear on scroll — dial both back below the sm breakpoint. ============================================================ */ @media (max-width: 639px) { :root { --glass-blur: blur(10px) saturate(140%); --glass-blur-hover: blur(12px) saturate(150%); } /* The mesh is a fixed layer now, so it needs no mobile fallback — the old `background-attachment: scroll` + `100vh` override here was what killed the gradient below 640px in the first place. */ .thread-divider { height: 20px; } .glass-card.glass-card--woven::after { width: 72px; height: 72px; } } /* Touch devices get no hover lift — it sticks after tap. */ @media (hover: none) { .glass-card.glass-card.card-hover:hover, .card-hover:hover, a[class~="bg-accent"]:hover, a[class~="border-2"]:hover { transform: none; } }