*/
h1 em, h2 em, h3 em, h4 em, .text-display em {
font-family: var(--ff-serif);
font-weight: 400;
font-style: italic;
letter-spacing: -0.01em;
}
p {
font-family: var(--ff-body);
font-weight: 400;
line-height: 1.7;
margin: 0;
font-size: 15px;
color: var(--muted-foreground);
/* Teks body rata kiri-kanan (justify) — rapi. hyphens:auto cegah celah lebar.
text-align-last:left agar baris terakhir tidak ikut diregangkan. */
text-align: justify;
text-align-last: left;
-webkit-hyphens: auto;
hyphens: auto;
}
/* ============================================================================
EYEBROW / BADGE / LABEL — JetBrains Mono, uppercase, spasi lebar
============================================================================ */
/* Kontrak label master: SEMUA eyebrow/label kecil uppercase = JetBrains Mono */
.eyebrow {
font-family: var(--ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brand);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 3px var(--space-3);
background: rgba(123, 63, 160, 0.08);
color: var(--brand);
border-radius: var(--radius-full);
font-family: var(--ff-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Eyebrow dengan garis aksen di kiri */
.eyebrow-line {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--ff-body);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand);
}
.eyebrow-line::before {
content: '';
width: 24px;
height: 1px;
background: var(--brand);
flex-shrink: 0;
}
/* Aplikasikan mono ke semua varian eyebrow dan label struktural */
[class*="eyebrow"], .badge {
font-family: var(--ff-mono) !important;
letter-spacing: 0.12em;
}
/* ============================================================================
AURORA LINE — garis aksen signature 3px (DNA logo sebagai aksen presisi)
Contoh: sebagai topline seksi
============================================================================ */
.aurora-line {
height: 3px;
border-radius: 2px;
background: var(--sig-gradient);
}
/* ============================================================================
AURORA HERO — latar aurora TER-RENDER untuk hero TERANG
============================================================================
Latar menggunakan plate webp ter-render (anti-banding di monitor 8-bit)
sebagai ganti gradasi CSS radial yang banding.
PATH ASET — sesuaikan ke lokasi di proyek konsumen, mis.:
/images/aurora/aurora-porcelain.webp (Next.js / Vite public/)
/assets/aurora/aurora-porcelain.webp (Astro public/)
../assets/aurora/aurora-porcelain.webp (SvelteKit)
Ganti URL di .aurora-hero::before background ketiga line.
Intensitas per-halaman: set --aurora-opacity (default 0.85).
Foolproof: plate dipasang di ::before z-index:-1 + isolation:isolate,
jadi KONTEN mengalir di atasnya otomatis TANPA perlu z-index manual.
============================================================================ */
.aurora-hero {
position: relative;
isolation: isolate;
background-color: var(--background);
}
.aurora-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(90deg, var(--background) 0%, rgba(244,242,247,0) 34%),
linear-gradient(0deg, var(--background) 0%, rgba(244,242,247,0) 22%),
url('/images/aurora/aurora-porcelain.webp') right top / cover no-repeat var(--background);
opacity: var(--aurora-opacity, 0.85);
}
@media (max-width: 768px) {
.aurora-hero::before {
opacity: 0.5;
background-position: 82% 0;
}
}
/* LEGIBILITAS teks di atas zona aurora — PENTING:
Teks (terutama caption/label muted) yang duduk di area aurora-dominan
(mis. sisi kanan hero) kontrasnya rendah jika pakai --muted-foreground.
Gunakan .on-aurora: warna gelap + halo putih lembut mengangkat teks dari
latar aurora yang ramai. Untuk body panjang di zona aurora, pakai
--foreground (bukan --muted-foreground). */
.on-aurora,
.aurora-hero .caption,
.aurora-hero figcaption {
color: var(--foreground);
text-shadow: 0 0 10px rgba(244, 242, 247, 0.9), 0 1px 2px rgba(244, 242, 247, 0.75);
}
/* ============================================================================
DEEP WASH — wash aurora soft-light di atas orb (elemen anak dalam .deep-field)
Taruh sebagai div anak langsung dalam seksi gelap:
…konten…
============================================================================ */
.deep-wash {
position: absolute;
inset: 0;
background: var(--sig-gradient);
mix-blend-mode: soft-light;
opacity: 0.3;
pointer-events: none;
}
/* ============================================================================
DEEP FIELD — SEKSI DEEP SPACE PREMIUM reusable (resep 5-lapis)
============================================================================
Cukup pasang kelas .deep-field ke elemen seksi gelap:
base gradasi + vignette (background)
+ orb aurora (::before, z-index:-1)
+ wash soft-light (::after, z-index:-1)
Semua self-contained — konten mengalir di atas tanpa perlu z-index manual.
Tambah
di awal seksi untuk garis pemisah 3px.
Varian .deep-field--alt = luminance lebih terang (tangga antar seksi gelap).
WAJIB: elemen .deep-field harus punya position (sudah di-set),
dan isolation:isolate agar ::before/::after tidak escape ke parent.
============================================================================ */
.deep-field {
position: relative;
isolation: isolate;
color: var(--deepspace-foreground);
background:
radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.45)),
linear-gradient(180deg, #141130 0%, #0d0b1f 60%);
/* glass tokens — re-deklarasi agar kartu/tombol di .deep-field pakai nilai gelap */
--glass-bg: rgba(20,16,35,0.78);
--glass-border: rgba(255,255,255,0.16);
--glass-blur: 14px;
}
/* Lapisan orb aurora — 3 radial ellipse bertumpuk (z-index:-1 agar di bawah konten) */
.deep-field::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 64% 52% at 12% 42%, rgba(107,91,196,0.30) 0%, transparent 62%),
radial-gradient(ellipse 60% 56% at 88% 14%, rgba(142,165,211,0.22) 0%, transparent 58%),
radial-gradient(ellipse 52% 46% at 60% 92%, rgba(123,63,160,0.18) 0%, transparent 56%);
}
/* Lapisan wash soft-light — sig-gradient di-blend soft-light */
.deep-field::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--sig-gradient);
mix-blend-mode: soft-light;
opacity: 0.30;
}
/* Varian --alt: luminance lebih terang, untuk tangga antar seksi gelap */
.deep-field--alt {
background:
radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.45)),
linear-gradient(180deg, #171331 0%, #12102a 55%);
}
.deep-field--alt::before {
background:
radial-gradient(ellipse 62% 58% at 84% 30%, rgba(123,63,160,0.30) 0%, transparent 60%),
radial-gradient(ellipse 56% 48% at 8% 78%, rgba(142,165,211,0.22) 0%, transparent 56%),
radial-gradient(ellipse 46% 42% at 32% 6%, rgba(123,47,214,0.18) 0%, transparent 54%);
}
/* ============================================================================
BUTTONS — pil CTA premium
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.8rem 1.65rem;
min-height: 44px;
border-radius: var(--radius-pill);
font-family: var(--ff-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
cursor: pointer;
transition:
background-color var(--duration-normal) var(--ease-hover),
transform var(--duration-fast) var(--ease-hover),
box-shadow var(--duration-normal) var(--ease-hover),
border-color var(--duration-normal) var(--ease-hover);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
}
/* ── Solid escape hatch — nilai lama .btn--primary sebelum glass.
Pakai untuk form, email, UI datar yang backdrop-filter tidak cocok. */
.btn--solid {
background: var(--cta);
color: var(--cta-foreground);
border-color: var(--cta);
box-shadow: 0 4px 16px rgba(123,63,160,0.24);
}
.btn--solid:hover {
background: var(--cta-hover);
border-color: var(--cta-hover);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(123,63,160,0.32);
}
.btn--solid:active { transform: translateY(0); box-shadow: none; }
/* Primary = glass violet tebal (DEFAULT baru).
.btn--glass / .btn--glass-brand = alias identik — ketiganya menulis efek yang sama. */
.btn--primary,
.btn--glass,
.btn--glass-brand {
background: linear-gradient(135deg, rgba(123,47,214,0.96), rgba(107,51,144,0.94));
-webkit-backdrop-filter: blur(8px) saturate(185%);
backdrop-filter: blur(8px) saturate(185%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.80),
inset 0 -1px 1px rgba(255,255,255,0.28),
inset 0 0 16px rgba(255,255,255,0.12),
0 8px 28px -8px rgba(123,63,160,0.55),
0 2px 6px rgba(31,22,50,0.14);
text-shadow: 0 1px 6px rgba(31,22,50,0.35);
color: #fff;
position: relative;
isolation: isolate;
}
/* specular top-sheen — cahaya jatuh di tepi atas pil, tidak menutup teks */
.btn--primary::after,
.btn--glass::after,
.btn--glass-brand::after {
content: '';
position: absolute;
left: 7%; right: 7%; top: 1px;
height: 46%;
border-radius: inherit;
background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
opacity: 0.55;
pointer-events: none;
}
.btn--primary:hover,
.btn--glass:hover,
.btn--glass-brand:hover {
background: linear-gradient(135deg, rgba(123,47,214,1), rgba(107,51,144,0.98));
transform: translateY(-2px);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.95),
inset 0 0 20px rgba(255,255,255,0.20),
0 14px 36px -8px rgba(123,63,160,0.65),
0 2px 8px rgba(31,22,50,0.16);
}
.btn--primary:active,
.btn--glass:active,
.btn--glass-brand:active { transform: translateY(0); box-shadow: none; }
/* Di latar gelap: primary glass lebih translusen (violet dingin) */
.dark .btn--primary, .dark .btn--glass, .dark .btn--glass-brand,
.deep-field .btn--primary, .deep-field .btn--glass, .deep-field .btn--glass-brand {
background: linear-gradient(135deg, rgba(123,47,214,0.42), rgba(123,63,160,0.34));
}
.dark .btn--primary:hover, .dark .btn--glass:hover, .dark .btn--glass-brand:hover,
.deep-field .btn--primary:hover, .deep-field .btn--glass:hover, .deep-field .btn--glass-brand:hover {
background: linear-gradient(135deg, rgba(123,47,214,0.52), rgba(123,63,160,0.44));
}
/* Ghost = clear glass (DEFAULT baru) — terang */
.btn--ghost {
background: rgba(255,255,255,0.40);
-webkit-backdrop-filter: blur(8px) saturate(185%);
backdrop-filter: blur(8px) saturate(185%);
border: 1px solid rgba(123,63,160,0.22);
color: var(--ink, var(--foreground));
position: relative;
isolation: isolate;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.80),
inset 0 -1px 1px rgba(255,255,255,0.25),
0 4px 12px -4px rgba(26,22,38,0.08);
}
.btn--ghost::after {
content: '';
position: absolute;
left: 7%; right: 7%; top: 1px;
height: 46%;
border-radius: inherit;
background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
opacity: 0.55;
pointer-events: none;
}
.btn--ghost:hover {
background: rgba(255,255,255,0.58);
border-color: rgba(123,63,160,0.38);
transform: translateY(-1px);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.95),
inset 0 0 16px rgba(255,255,255,0.18),
0 8px 20px -6px rgba(26,22,38,0.12);
}
/* Ghost gelap — clear glass putih translusen */
.dark .btn--ghost,
.deep-field .btn--ghost {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.38);
color: var(--deepspace-foreground);
}
.dark .btn--ghost:hover,
.deep-field .btn--ghost:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.55);
}
/* White — surface terang (untuk tombol di atas plat gelap) */
.btn--white {
background: var(--card);
color: var(--foreground);
border-color: var(--card);
}
.btn--white:hover { background: var(--secondary); }
/* Active state semua tombol */
.btn:active { transform: scale(0.98); }
/* Size modifiers */
.btn--size-sm { font-size: 13px; padding: 0.5rem 1rem; min-height: 36px; }
.btn--size-md { font-size: 13px; padding: 0.75rem 1.5rem; min-height: 44px; }
.btn--size-lg { font-size: 13px; padding: 1rem 2rem; min-height: 52px; }
/* ============================================================================
CARDS — kartu mengambang (radius 18px + elevasi kontekstual)
============================================================================ */
/* ATURAN KANONIK GLASS CONTRAST (Fable art-director, 2026-07-30):
Kartu glass di atas latar VARIATIF (aurora/foto): alpha material ≥0.78 gelap / ≥0.85 terang,
ATAU wajib scrim gradient internal di belakang teks. Tint kartu SELALU ikut register;
kartu lawan-register = objek produk opaque (≥0.95, tanpa backdrop-filter).
Kesan glass di TEPI (rim+sheen≤0.2+hairline), bukan transparansi bodi.
QC: teks terkecil vs titik paling terang latar ≥ 4.5:1 (AA). */
/* Card = GLASS by default. Escape hatch: .card--solid. Opt-in refraksi: .card--refract. */
.card {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
backdrop-filter: blur(var(--glass-blur)) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-card);
padding: var(--space-6);
isolation: isolate;
position: relative;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.90),
inset 0 -1px 1px rgba(255,255,255,0.25),
0 1px 3px rgba(26,22,38,0.08),
0 12px 32px -16px rgba(26,22,38,0.16);
transition:
box-shadow var(--duration-normal) var(--ease-hover),
transform var(--duration-normal) var(--ease-hover),
border-color var(--duration-normal) var(--ease-hover);
}
/* specular sheen di tepi atas kartu — tidak animasikan backdrop-filter */
.card::after {
content: '';
position: absolute;
top: 1px;
left: 0; right: 0;
height: 38%;
border-radius: inherit;
background: linear-gradient(to bottom, rgba(255,255,255,0.50), rgba(255,255,255,0));
opacity: 0.45;
pointer-events: none;
}
/* Dark register — shadow lebih dalam, sheen lebih redup */
.dark .card,
.deep-field .card {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 24px 60px -24px rgba(0,0,0,0.85);
}
.dark .card::after,
.deep-field .card::after { opacity: 0.25; }
/* Dense modifier — alpha lokal lebih tinggi untuk kartu di atas orb terang */
.card--dense { background: rgba(255,255,255,0.82); }
.dark .card--dense,
.deep-field .card--dense { background: rgba(20,16,35,0.85); }
/* Hover interaktif — angkat + border violet */
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
border-color: var(--brand);
}
/* Opt-in refraksi — backdrop-filter url(#wtb-glass).
Jangan jadikan default: berat GPU, hanya efektif di atas aurora/deep-space. */
.card--refract {
-webkit-backdrop-filter: url("#wtb-glass") blur(var(--glass-blur)) saturate(160%);
backdrop-filter: url("#wtb-glass") blur(var(--glass-blur)) saturate(160%);
}
/* ── Solid escape hatch (P3) — untuk form / tabel data / teks panjang
dimana backdrop-filter tidak cocok atau latar tidak berwarna. */
.card--solid {
background: var(--card);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
/* Mobile: kurangi blur agar lebih ringan di perangkat lambat */
@media (max-width: 768px) {
.card { --glass-blur: 8px; }
}
/* Fallback: browser tanpa backdrop-filter — alpha tinggi supaya tetap terbaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.card { background: rgba(255,255,255,0.92); }
.dark .card,
.deep-field .card { background: rgba(34,28,52,0.92); }
}
/* ============================================================================
SECTION RHYTHM — padding blok seragam per level
============================================================================ */
.section { padding-block: var(--space-20); }
.section--lg { padding-block: var(--space-32); }
.section--sm { padding-block: var(--space-12); }
.section--subtle { background: var(--secondary); }
@media (min-width: 768px) {
.section { padding-block: var(--space-24); }
.section--lg { padding-block: var(--space-32); }
}
/* ============================================================================
NAV LINK — underline sweep dari kiri
============================================================================ */
.nav-link {
position: relative;
text-decoration: none;
font-family: var(--ff-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted-foreground);
transition: color var(--duration-normal) var(--ease-out);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: var(--brand);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-normal) var(--ease-snap);
}
.nav-link:hover { color: var(--foreground); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--foreground); }
.nav-link.is-active::after { transform: scaleX(1); }
/* ============================================================================
KEYFRAMES — CSS-only auto-play
============================================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes drawLine {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes pulseDot {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; box-shadow: 0 0 0 4px rgba(46,204,113,0.20); }
}
/* ============================================================================
REVEAL — CSS-only, fail-open (konten visible by default tanpa JS)
Animasi hanya bila user tidak prefer reduced-motion.
============================================================================ */
@media (prefers-reduced-motion: no-preference) {
.reveal { animation: fadeUp 0.7s var(--ease-silk) both; }
.reveal-1 { animation: fadeUp 0.7s var(--ease-silk) 0.08s both; }
.reveal-2 { animation: fadeUp 0.7s var(--ease-silk) 0.16s both; }
.reveal-3 { animation: fadeUp 0.7s var(--ease-silk) 0.24s both; }
}
/* ============================================================================
REVEAL ON-SCROLL — IntersectionObserver + fail-open
============================================================================
Tanpa JS: elemen [data-reveal] tampil penuh (tidak ada state tersembunyi di CSS).
JS meng-arm elemen yang masih di bawah viewport (.io-armed),
lalu IntersectionObserver tambahkan .io-in saat masuk.
Reduced-motion: JS tidak jalan (tidak perlu guard di sini).
============================================================================ */
@media (prefers-reduced-motion: no-preference) {
.io-armed {
opacity: 0;
transform: translateY(16px);
}
.io-in {
opacity: 1;
transform: none;
transition:
opacity 0.65s var(--ease-enter),
transform 0.65s var(--ease-enter);
}
}
/* ============================================================================
AKSESIBILITAS — reduced motion + keterbacaan mobile
============================================================================ */
/* Keterbacaan mobile: teks isi tidak boleh di bawah 16px di layar kecil */
@media (max-width: 480px) {
p, li, dd, dt {
font-size: max(16px, 1em);
}
}
/* Hard stop semua animasi dan transisi */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================================
LIQUID GLASS — refraksi SVG (Chromium-only, progressive enhancement).
Base kaca (blur + bevel + sheen) sudah di .btn--primary / .btn--ghost di atas —
jalan di semua browser. Blok ini menambah displacement refraksi untuk Chromium.
Konsumen WAJIB menaruh