/* ========================================================================== Jelujur — versi HTML + CSS murni (tanpa JavaScript) Warna, font, tata letak, dan ukuran dipertahankan sama seperti aslinya. ========================================================================== */ /* ========================================================================== Scroll reveal — opacity + properti `translate` (tidak menggeser layout, independen dari `transform` sehingga tak bentrok dengan hover/carousel). Hanya aktif saat (di-set skrip guard di ). ========================================================================== */ html.sr-on :is( .home-hero__title, .home-hero__subtitle, .home-intro__title, .home-intro__copy, .home-intro__model-desktop, .home-intro__model-mobile, .value, .home-preview__title, .home-preview__side, .home-preview__model, .home-preview__thumb, .profile-hero__title, .profile-hero__subtitle, .profile-about__grid p, .awards__title, .award, .vision__title, .vision__copy, .mission__title, .mission__list li, .profile-history__title, .profile-history__grid p, .best-seller__title, .best-seller__item, .thumbnails__item, .batik-story__title, .icon-link, .address__map, .address__text > *, .home-hero img, .profile-hero__wrap img, .product-hero img, .contact-hero img, .store-image img ) { opacity: 0; translate: 0 24px; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), translate 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, translate; } html.sr-on :is( .home-hero__title, .home-hero__subtitle, .home-intro__title, .home-intro__copy, .home-intro__model-desktop, .home-intro__model-mobile, .value, .home-preview__title, .home-preview__side, .home-preview__model, .home-preview__thumb, .profile-hero__title, .profile-hero__subtitle, .profile-about__grid p, .awards__title, .award, .vision__title, .vision__copy, .mission__title, .mission__list li, .profile-history__title, .profile-history__grid p, .best-seller__title, .best-seller__item, .thumbnails__item, .batik-story__title, .icon-link, .address__map, .address__text > *, .home-hero img, .profile-hero__wrap img, .product-hero img, .contact-hero img, .store-image img ).sr-in { opacity: 1; translate: 0 0; } /* Fail-safe: bila skrip observer gagal, tampilkan semua */ html.sr-fallback :is( .home-hero__title, .home-hero__subtitle, .home-intro__title, .home-intro__copy, .home-intro__model-desktop, .home-intro__model-mobile, .value, .home-preview__title, .home-preview__side, .home-preview__model, .home-preview__thumb, .profile-hero__title, .profile-hero__subtitle, .profile-about__grid p, .awards__title, .award, .vision__title, .vision__copy, .mission__title, .mission__list li, .profile-history__title, .profile-history__grid p, .best-seller__title, .best-seller__item, .thumbnails__item, .batik-story__title, .icon-link, .address__map, .address__text > *, .home-hero img, .profile-hero__wrap img, .product-hero img, .contact-hero img, .store-image img ) { opacity: 1 !important; translate: none !important; transition: none !important; } /* ---------- Fonts ---------- */ @font-face { font-family: "Berkshire Swash"; src: url("fonts/berkshire-swash.regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---------- Variabel warna & font ---------- */ :root { --page: #d9dfe9; --panel: #bdc9d5; --ink: #626b70; --muted: #747d82; --deep: #626b70; --active: #65b5d1; --white: #f8fbff; --font-logo: "Berkshire Swash", Georgia, serif; --font-heading: "Playfair Display", Georgia, serif; --font-body: "Montserrat", "Trebuchet MS", Arial, sans-serif; --shadow-soft: 0 12px 30px rgba(69, 80, 85, 0.16); } /* ---------- Reset & dasar ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--page); color: var(--ink); font-family: var(--font-body); min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1 1 auto; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: rgba(101, 112, 117, 0.2); } a:focus-visible, button:focus-visible, label:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } /* ---------- Helper tipografi ---------- */ .section-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; color: var(--ink); margin: 0; } .brand-title { font-family: var(--font-logo); font-weight: 400; letter-spacing: 0; margin: 0; } .editorial-copy { line-height: 1.2; letter-spacing: 0.01em; margin: 0; } .block-line { display: block; } /* ---------- Gambar penuh ---------- */ .img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .img-contain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* ========================================================================== NAVBAR ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(217, 223, 233, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .nav { margin: 0 auto; display: flex; height: 92px; max-width: 1920px; align-items: center; justify-content: space-between; padding: 0 1.5rem; } .brand { font-family: var(--font-logo); font-size: 2.25rem; color: var(--ink); transition: color 0.2s; } .brand:hover { color: var(--active); } .nav-burger { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--ink); cursor: pointer; border-radius: 0.375rem; transition: color 0.2s; } .nav-burger:hover { color: var(--active); } .nav-burger svg { width: 30px; height: 30px; } .nav-burger .icon-close { display: none; } .nav-toggle:checked ~ .nav .nav-burger .icon-menu { display: none; } .nav-toggle:checked ~ .nav .nav-burger .icon-close { display: inline; } .nav-links { display: none; } .nav-mobile { display: none; } .nav-toggle:checked ~ .nav-mobile { display: block; } .nav-mobile-inner { display: grid; gap: 0.75rem; border-top: 1px solid rgba(100, 116, 139, 0.1); background: var(--page); padding: 1rem 1.5rem; } .nav-mobile-inner a { border-radius: 0.375rem; padding: 0.75rem; font-family: var(--font-heading); font-size: 1.5rem; color: var(--ink); transition: background 0.2s, color 0.2s; } .nav-mobile-inner a:hover { background: rgba(255, 255, 255, 0.25); color: var(--active); } .nav-mobile-inner a.active { color: var(--active); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; z-index: 20; display: flex; min-height: 128px; width: 100%; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; background: var(--deep); padding: 2.5rem 1.5rem; text-align: center; font-size: 0.875rem; font-weight: 500; color: var(--white); } .site-footer p { margin: 0; } .site-footer .footer-copy { margin: 0 auto; max-width: 56rem; line-height: 1.625; } .site-footer .footer-year { margin-top: min(1.46vw, 28px); } /* ========================================================================== HOME — HERO ========================================================================== */ .home-hero { position: relative; height: clamp(220px, 50vw, 960px); overflow: hidden; background: var(--deep); } .home-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(2, 6, 23, 0.2), rgba(15, 23, 42, 0.05), transparent); } .home-hero__text { position: absolute; left: clamp(2rem, 6.4vw, 6rem); bottom: clamp(1.35rem, 5.8vw, 6.9rem); color: #fff; } .home-hero__inner { max-width: 720px; } .home-hero__title { font-size: clamp(1.75rem, 5.1vw, 5rem); line-height: 1.02; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .home-hero__subtitle { margin: clamp(0.35rem, 1.1vw, 1.5rem) 0 0; font-size: clamp(0.65rem, 1.42vw, 1.7rem); font-weight: 600; letter-spacing: 0.025em; } /* ========================================================================== HOME — INTRO ========================================================================== */ .home-intro { background: var(--page); } .home-intro__wrap { position: relative; margin: 0 auto; max-width: 1920px; } .home-intro__top { display: grid; gap: 2rem; padding: 3rem 1.5rem; } .home-intro__model-mobile { position: relative; margin: 0 auto; height: 520px; width: 100%; max-width: 520px; } .home-intro__model-mobile img { object-position: center bottom; } .home-intro__text { margin: 0 auto; max-width: 720px; } .home-intro__title { font-size: 2.25rem; line-height: 1; } .home-intro__copy { margin-top: min(1.46vw, 28px); font-size: 1.125rem; font-weight: 500; color: var(--muted); } .home-intro__values { position: relative; background: var(--panel); padding: 3rem 1.5rem; } .home-intro__values-grid { margin: 0 auto; display: grid; max-width: 1160px; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .value { text-align: center; color: var(--ink); } .value__icon { position: relative; margin: 0 auto; width: 5rem; height: 5rem; } .value__label { margin: min(0.42vw, 8px) 0 0; font-size: 0.75rem; font-weight: 500; } .home-intro__model-desktop { display: none; } /* ========================================================================== HOME — PRODUCT PREVIEW (komposisi absolut) ========================================================================== */ .home-preview { background: var(--page); } .home-preview__wrap { position: relative; margin: 0 auto; min-height: 1120px; width: 100%; max-width: 1920px; overflow: hidden; } .home-preview__panel { display: none; } .home-preview__thumbs { position: absolute; left: 5%; top: 5%; z-index: 20; display: grid; width: 28%; grid-template-columns: 1fr; gap: 1.75rem; } .home-preview__thumb { position: relative; cursor: pointer; line-height: 0; } .home-preview__thumb img { display: block; width: 100%; height: auto; } .home-preview__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12%; background: rgba(60, 70, 78, 0.74); color: #fff; font-family: var(--font-heading); font-weight: 700; line-height: 1.18; font-size: clamp(15px, 1.9vw, 32px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; /* Overlay dicetak mengikuti bentuk gambar kartu (sudut membulat persis, tanpa sisa putih) */ -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .home-preview__thumb:nth-child(1) .home-preview__label { -webkit-mask-image: url("images/home/story-thumb-1.png"); mask-image: url("images/home/story-thumb-1.png"); } .home-preview__thumb:nth-child(2) .home-preview__label { -webkit-mask-image: url("images/home/story-thumb-2.png"); mask-image: url("images/home/story-thumb-2.png"); } .home-preview__thumb:nth-child(3) .home-preview__label { -webkit-mask-image: url("images/home/story-thumb-3.png"); mask-image: url("images/home/story-thumb-3.png"); } .home-preview__thumb:hover .home-preview__label, .home-preview__thumb:focus-visible .home-preview__label { opacity: 1; } .home-preview__thumb:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .home-preview__label { transition: opacity 0.15s ease; } } .home-preview__title { position: absolute; left: 37%; top: 9%; z-index: 30; font-size: 20px; line-height: 1.04; } .home-preview__model { position: absolute; left: 63%; top: 5%; z-index: 20; height: 88%; width: auto; transform: translateX(-50%); object-fit: contain; } .home-preview__side { position: absolute; right: 3%; top: 48%; z-index: 30; max-width: 20%; white-space: pre-line; font-size: 20px; line-height: 1.04; } /* ========================================================================== PROFILE ========================================================================== */ .profile-hero { background: var(--page); } .profile-hero__wrap { position: relative; margin: 0 auto; height: 520px; width: 100%; max-width: 1920px; overflow: hidden; } .profile-hero__text { position: absolute; left: 8%; top: 34%; z-index: 10; } .profile-hero__title { font-size: 36px; line-height: 1.25; } .profile-hero__subtitle { margin: 1.5rem 0 0; white-space: pre-line; font-size: 18px; line-height: 1.12; } .profile-about { background: var(--page); } .profile-about__grid { margin: 0 auto; display: grid; min-height: 500px; width: 100%; max-width: 1920px; gap: 3rem; padding: 5rem 8%; } .profile-about__grid p { font-size: 20px; line-height: 1.17; } /* PENGHARGAAN — Hover Expand Card */ .awards { position: relative; background: var(--page); padding: 2.5rem 0 3rem; } .awards__band { display: none; position: absolute; top: 0; left: 2%; right: 2%; bottom: 40%; background: #becad7; border-radius: 26px; z-index: 0; } .awards__title { position: relative; z-index: 1; text-align: center; font-size: clamp(34px, 3.4vw, 60px); margin: 0.4rem auto 1.8rem; } .awards__grid { position: relative; z-index: 1; margin: 0 auto; max-width: 1520px; padding: 0 4%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; } .award { position: relative; aspect-ratio: 1 / 1; outline: none; } .award__card { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; background: #636c71; border-radius: 18px; padding: 5.5%; overflow: hidden; box-shadow: 0 12px 26px rgba(48, 58, 66, 0.22); transition: box-shadow 0.3s ease; } .award__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; } .award__desc { margin: 7% 2% 3%; color: #e3e8ec; font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 1.3vw, 22px); line-height: 1.3; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .award:hover .award__card, .award:focus-within .award__card { z-index: 40; box-shadow: 0 26px 52px rgba(30, 38, 45, 0.42); } .award:hover .award__desc, .award:focus-within .award__desc { max-height: 460px; opacity: 1; } @media (prefers-reduced-motion: reduce) { .award__desc { transition: opacity 0.2s ease; } } @media (min-width: 768px) { .awards__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .awards { padding: 3rem 0 3.5rem; } .awards__band { display: block; } .awards__grid { grid-template-columns: repeat(5, 1fr); gap: min(1.5vw, 26px); max-width: 1560px; padding: 0 3%; } } .vision-mission { margin: 0 auto; display: grid; min-height: 620px; width: 100%; max-width: 1920px; background: var(--panel); } .vision { padding: 4rem 10%; } .vision__title { font-size: 42px; } .vision__copy { margin: 2rem 0 0; max-width: 560px; font-size: 20px; line-height: 1.15; } .mission { background: var(--deep); padding: 4rem 10%; color: var(--white); } .mission__title { font-family: var(--font-heading); font-size: 42px; font-weight: 700; margin: 0; } .mission__list { margin: 2rem 0 0; padding: 0; list-style: none; font-size: 20px; line-height: 1.15; } .mission__list li { margin: 0; } .mission__list li + li { margin-top: 0.25rem; } .profile-history { background: var(--page); } .profile-history__wrap { margin: 0 auto; min-height: 850px; width: 100%; max-width: 1920px; padding: 5rem 9%; text-align: center; } .profile-history__title { font-size: 42px; } .profile-history__grid { margin-top: 3.5rem; display: grid; gap: 3.5rem; text-align: left; } .profile-history__grid p { text-align: justify; font-size: 19px; line-height: 1.16; } /* ========================================================================== PRODUK ========================================================================== */ .product-hero { position: relative; height: clamp(220px, 50vw, 960px); overflow: hidden; background: var(--page); } .best-seller { background: var(--page); padding: 5rem 1.5rem; } .best-seller__inner { margin: 0 auto; max-width: 1540px; } .best-seller__title { text-align: center; font-size: 3.75rem; } .best-seller__grid { margin-top: 3rem; display: grid; gap: 3.5rem; } .best-seller__item { position: relative; display: flex; flex-direction: column; align-items: center; } .best-seller__item:focus-visible { outline: none; } /* Item yang di-hover tampil di atas tetangganya */ .best-seller__item:hover, .best-seller__item:focus-within { z-index: 60; } /* Dua lapis gambar: versi manekin (default) & versi cutout (saat hover) */ .best-seller__frame .bs-stand, .best-seller__frame .bs-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .best-seller__frame .bs-stand { opacity: 1; transition: opacity 0.3s ease; } .best-seller__frame .bs-hover { opacity: 0; transform-origin: center bottom; transform: scale(1); pointer-events: none; filter: drop-shadow(0 22px 38px rgba(30, 38, 45, 0.32)); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .best-seller__item:hover .bs-stand, .best-seller__item:focus-within .bs-stand { opacity: 0; } .best-seller__item:hover .bs-hover, .best-seller__item:focus-within .bs-hover { opacity: 1; transform: scale(1.26) translateY(-6%); } @media (prefers-reduced-motion: reduce) { .best-seller__frame .bs-hover { transition: opacity 0.2s ease; } .best-seller__item:hover .bs-hover, .best-seller__item:focus-within .bs-hover { transform: scale(1.1); } } .best-seller__frame { position: relative; aspect-ratio: 5 / 6; width: 100%; max-width: 420px; } .best-seller__frame::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: 68%; border-radius: 1rem 1rem 0 0; background: var(--deep); } .best-seller__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .best-seller__name { margin: 1rem 0 0; text-align: center; font-size: 1.5rem; line-height: 1.25; color: var(--ink); font-weight: 400; } .thumbnails { background: var(--panel); padding: 2.25rem 1.5rem; } .thumbnails__grid { margin: 0 auto; display: grid; max-width: 1740px; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .thumbnails__item { position: relative; cursor: pointer; line-height: 0; transition: transform 0.3s; } .thumbnails__item img { display: block; width: 100%; height: auto; } .thumbnails__item:hover { transform: translateY(-0.25rem); } .thumbnails__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } /* Image hover crossfade: base ⟶ versi berteks */ .thumbnails__item .tn-hover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .thumbnails__item:hover .tn-hover, .thumbnails__item:focus-within .tn-hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .thumbnails__item .tn-hover { transition: opacity 0.2s ease; } } /* Popup Batik Story */ .story-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .story-modal.is-open { display: flex; } .story-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 38, 45, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: story-fade 200ms ease; } .story-modal__dialog { position: relative; z-index: 1; width: min(92vw, 560px); max-height: 92vh; animation: story-pop 260ms cubic-bezier(0.22, 1, 0.36, 1); } .story-modal__img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; border-radius: 14px; box-shadow: 0 24px 60px rgba(30, 38, 45, 0.4); display: block; } .story-modal__close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 9999px; background: var(--white); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-soft); transition: color 0.2s, transform 0.2s; } .story-modal__close:hover { color: var(--active); transform: scale(1.05); } .story-modal__close svg { width: 22px; height: 22px; } @keyframes story-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes story-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .story-modal__backdrop, .story-modal__dialog { animation: none; } } .batik-story { background: var(--panel); padding: 0 1.5rem 2.5rem; } .batik-story__row { margin: 0 auto; display: flex; max-width: 1540px; align-items: center; gap: 1rem; } .batik-story__line { height: 0.5rem; flex: 1; background: #aabfce; } .batik-story__title { text-align: center; font-size: 2.25rem; } /* Carousel — scroll-snap (geser/swipe) */ .carousel { background: var(--page); padding: 5rem 1rem 6rem; } .carousel__grid { margin: 0 auto; display: grid; max-width: 1740px; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 0.5rem; } .carousel__arrow { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 0; background: transparent; border-radius: 9999px; color: #8aa6b8; cursor: pointer; transition: background 0.2s, color 0.2s; } .carousel__arrow:hover { background: rgba(255, 255, 255, 0.35); color: var(--ink); } .carousel__arrow svg { width: 3rem; height: 3rem; } .carousel__view { position: relative; aspect-ratio: 1 / 1.76; min-width: 0; overflow: hidden; touch-action: pan-y; } .carousel__track { display: flex; height: 100%; will-change: transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } .carousel__slide { position: relative; flex: 0 0 auto; height: 100%; } .carousel__slide img { width: 100%; height: 100%; object-fit: contain; } .carousel__slide img.scale-945 { transform: scale(0.945); } /* ========================================================================== KONTAK ========================================================================== */ .contact-hero { position: relative; height: clamp(360px, 75vw, 1086px); width: 100%; overflow: hidden; background: var(--page); } .contact-info { background: var(--page); padding: 5rem 2rem; } .contact-info__grid { margin: 0 auto; display: grid; height: 100%; max-width: 1500px; align-items: center; gap: 4rem min(13vw, 250px); } .icon-link { display: flex; align-items: center; gap: 2rem; color: var(--ink); } .icon-link__label { transition: color 0.2s; } .icon-link:hover .icon-link__label, .icon-link:focus-visible .icon-link__label { color: var(--active); } .icon-link__icon { display: grid; flex-shrink: 0; place-items: center; width: 4rem; height: 4rem; } .icon-link__icon svg, .icon-link__icon img { width: 3.5rem; height: 3.5rem; } .icon-link__icon img { object-fit: contain; } .icon-link__label { font-family: var(--font-heading); font-size: 1.5rem; } .wa-icon { position: relative; display: block; width: 100%; height: 100%; } .wa-icon .wa-base { width: 100%; height: 100%; } .wa-icon .wa-phone { position: absolute; left: 28%; top: 25%; width: 43%; height: 43%; } .store-image { position: relative; height: clamp(280px, 23.96vw, 460px); overflow: hidden; background: var(--panel); } .address { background: var(--deep); padding: 4rem 1.5rem; color: var(--white); } .address__grid { margin: 0 auto; display: grid; height: 100%; max-width: 1570px; align-items: center; gap: 3rem; } .address__map { position: relative; display: block; margin: 0 auto; aspect-ratio: 610 / 500; width: 100%; max-width: 610px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; transition: box-shadow 0.25s ease, transform 0.25s ease; } .address__map:hover, .address__map:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(30, 38, 45, 0.28); outline: none; } .address__text { font-size: 1.125rem; line-height: 1.2; } .address__text h2 { font-weight: 600; margin: 0; } .address__text .address__line { margin: 1.5rem 0 0; max-width: 920px; } .address__link { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.2s ease; } .address__link:hover, .address__link:focus-visible { color: var(--active); text-decoration: underline; text-underline-offset: 0.18em; outline: none; } .address__text .address__hours-title { margin-top: 2.5rem; } .address__hours { margin-top: 1.5rem; } .address__hours p { margin: 0; } .address__hours p + p { margin-top: 0.25rem; } .page-end-spacer { height: clamp(64px, 8.3vw, 160px); background: var(--page); } /* ========================================================================== BREAKPOINT: sm (>= 640px) ========================================================================== */ @media (min-width: 640px) { .nav { padding: 0 2.5rem; } .brand { font-size: 3rem; } .site-footer { min-height: 150px; } .home-intro__top { padding: 3rem 2.5rem; } .home-intro__title { font-size: 3rem; } .home-intro__copy { font-size: 1.5rem; } .home-intro__values { padding: 3rem 2.5rem; } .home-intro__values-grid { grid-template-columns: repeat(3, 1fr); } .value__icon { width: 6rem; height: 6rem; } .value__label { font-size: 0.875rem; } .home-preview__wrap { min-height: 1380px; } .home-preview__thumbs { left: 7%; gap: 3rem; } .home-preview__title { font-size: 30px; } .home-preview__side { right: 5%; font-size: 30px; } .profile-hero__title { font-size: 44px; } .profile-hero__subtitle { font-size: 24px; } .profile-about__grid p { font-size: 26px; } .vision__title { font-size: 50px; } .vision__copy { font-size: 26px; } .mission__title { font-size: 50px; } .mission__list { font-size: 26px; } .profile-history__title { font-size: 52px; } .profile-history__grid p { font-size: 25px; } .best-seller { padding: 5rem 2.5rem; } .best-seller__title { font-size: 4.5rem; } .best-seller__name { font-size: 1.875rem; } .thumbnails { padding: 2.25rem 2.5rem; } .batik-story__title { font-size: 3rem; } .carousel { padding: 5rem 2.5rem 6rem; } .carousel__grid { grid-template-columns: 90px 1fr 90px; } .carousel__arrow { width: 5rem; height: 5rem; } .carousel__arrow svg { width: 5rem; height: 5rem; } .contact-info { padding: 6rem 3rem; } .icon-link { gap: 2.5rem; } .icon-link__icon { width: 5rem; height: 5rem; } .icon-link__icon svg, .icon-link__icon img { width: 4rem; height: 4rem; } .icon-link__label { font-size: 1.875rem; } .address { padding: 5rem 2.5rem; } .address__text { font-size: 1.25rem; } } /* ========================================================================== BREAKPOINT: md (>= 768px) ========================================================================== */ @media (min-width: 768px) { .best-seller__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .thumbnails__grid { grid-template-columns: repeat(4, 1fr); } .contact-info__grid { grid-template-columns: repeat(2, 1fr); } .carousel__view { aspect-ratio: 3 / 1.76; } } /* ========================================================================== BREAKPOINT: lg (>= 1024px) ========================================================================== */ @media (min-width: 1024px) { /* Navbar */ .nav { height: min(9.375vw, 180px); padding: 0 min(4.79vw, 92px); } .brand { font-size: min(3.96vw, 76px); } .nav-burger { display: none; } .nav-mobile { display: none !important; } .nav-links { display: flex; align-items: center; gap: min(6.875vw, 132px); } .nav-links a { font-family: var(--font-heading); font-size: min(2.3vw, 44px); font-weight: 400; color: var(--ink); transition: color 0.2s; } .nav-links a:hover { color: var(--active); } .nav-links a.active { color: var(--active); } /* Footer */ .site-footer { min-height: min(12.9vw, 248px); padding-top: 0; padding-bottom: 0; font-size: min(1.04vw, 20px); } /* Home intro */ .home-intro__wrap { height: min(49.6vw, 952px); } .home-intro__top { display: block; height: min(28.75vw, 552px); padding: 0; } .home-intro__model-mobile { display: none; } .home-intro__text { position: absolute; left: 50.8%; top: min(5.31vw, 102px); margin: 0; width: 43%; max-width: none; } .home-intro__title { font-size: min(2.5vw, 48px); } .home-intro__copy { max-width: none; font-size: min(1.3vw, 25px); } .home-intro__values { position: absolute; left: 0; right: 0; bottom: 0; height: min(20.83vw, 400px); padding: min(4.27vw, 82px) 4% 0 35%; } .home-intro__values-grid { max-width: none; grid-template-columns: repeat(5, 1fr); gap: min(2.92vw, 56px); } .value__icon { width: min(5.83vw, 112px); height: min(5.83vw, 112px); } .value__label { font-size: min(0.89vw, 17px); } .home-intro__model-desktop { display: block; pointer-events: none; position: absolute; bottom: 0; left: 2.4%; z-index: 10; height: min(42.7vw, 820px); width: auto; object-fit: contain; } /* Home preview */ .home-preview__wrap { height: min(98.6vw, 1893px); min-height: 0; } .home-preview__panel { position: absolute; z-index: 0; display: block; background: var(--panel); } .home-preview__panel--1 { right: 0; top: 7%; height: 17.7%; width: 35%; } .home-preview__panel--2 { left: 36.7%; top: 33%; height: 24.5%; width: 25%; } .home-preview__panel--3 { right: 0; top: 57.5%; height: 26%; width: 35%; } .home-preview__thumbs { left: 8.1%; top: 13%; width: 21.35%; gap: min(5.47vw, 105px); } .home-preview__title { left: 39.1%; top: 15.9%; font-size: min(2.71vw, 52px); } .home-preview__model { left: 63.4%; top: 13.6%; height: 74%; } .home-preview__side { right: 7.2%; top: 39.2%; width: 13%; max-width: none; font-size: min(2.71vw, 52px); } /* Profile */ .profile-hero__wrap { height: min(51.25vw, 984px); } .profile-hero__text { left: 13.8%; top: 34.5%; } .profile-hero__title { font-size: min(3.1vw, 60px); } .profile-hero__subtitle { margin-top: min(2.2vw, 42px); font-size: min(1.78vw, 34px); } .profile-about__grid { height: min(32.1vw, 616px); min-height: 0; grid-template-columns: repeat(2, 1fr); gap: 11%; padding: min(8.1vw, 156px) 10% 5rem; } .profile-about__grid p { font-size: min(1.78vw, 34px); } .profile-gallery__wrap { height: min(36.3vw, 697px); min-height: 0; } .profile-gallery__img { left: 3.5%; width: 93%; } .vision-mission { height: min(25.6vw, 492px); min-height: 0; grid-template-columns: repeat(2, 1fr); } .vision { padding: min(5.3vw, 102px) 12% 4rem 21.5%; } .vision__title { font-size: min(3.1vw, 60px); } .vision__copy { margin-top: min(2.4vw, 46px); font-size: min(1.78vw, 34px); } .mission { padding: min(5.3vw, 102px) 8% 4rem 19.5%; } .mission__title { font-size: min(3.1vw, 60px); } .mission__list { margin-top: min(2.4vw, 46px); font-size: min(1.78vw, 34px); } .profile-history__wrap { height: min(53vw, 1018px); min-height: 0; padding: min(6.4vw, 123px) 10.5% 5rem; } .profile-history__title { font-size: min(3.35vw, 64px); } .profile-history__grid { margin-top: min(4.7vw, 90px); grid-template-columns: repeat(2, 1fr); gap: 12%; } .profile-history__grid p { font-size: min(1.68vw, 32px); } /* Produk */ .best-seller { padding-top: 7rem; padding-bottom: 7rem; } .best-seller__title { font-size: 82px; } .best-seller__grid { margin-top: 3.5rem; gap: 6rem; } .thumbnails__grid { gap: 4rem; } .batik-story__title { font-size: 52px; } .carousel { padding-bottom: 8rem; } .carousel__grid { gap: 2rem; } /* Kontak */ .contact-info { height: min(39.2vw, 752px); padding: min(8.3vw, 159px) 11.2vw; } .contact-info__grid { gap: min(7vw, 134px) min(13vw, 250px); } .icon-link { gap: min(4vw, 76px); } .icon-link__icon { width: min(5.5vw, 92px); height: min(5.5vw, 92px); } .icon-link__icon svg, .icon-link__icon img { width: min(4.7vw, 82px); height: min(4.7vw, 82px); } .icon-link__label { font-size: min(2.1vw, 36px); } .address { height: min(32.4vw, 622px); padding: 0 9.1vw; } .address__grid { grid-template-columns: 38% 1fr; gap: min(5.2vw, 100px); } .address__text { font-size: min(1.75vw, 28px); } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .carousel__view { scroll-behavior: auto; } }