diff --git a/landing/app.js b/landing/app.js index 9a8130596..94e3e6a79 100644 --- a/landing/app.js +++ b/landing/app.js @@ -56,6 +56,38 @@ node.textContent = String(new Date().getFullYear()); }); + const header = document.querySelector('.site-header'); + if (header) { + let scrollFrame = 0; + const syncHeaderState = () => { + scrollFrame = 0; + header.classList.toggle('is-scrolled', window.scrollY > 12); + }; + window.addEventListener('scroll', () => { + if (scrollFrame) return; + scrollFrame = window.requestAnimationFrame(syncHeaderState); + }, { passive: true }); + syncHeaderState(); + } + + const revealNodes = [...document.querySelectorAll('[data-reveal]')]; + if (revealNodes.length) { + const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (reducedMotion || !('IntersectionObserver' in window)) { + revealNodes.forEach(node => node.classList.add('visible')); + } else { + revealNodes.forEach(node => node.classList.add('reveal')); + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (!entry.isIntersecting) return; + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + }); + }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' }); + revealNodes.forEach(node => observer.observe(node)); + } + } + document.querySelectorAll('[data-copy-value]').forEach(button => { if (!(button instanceof HTMLButtonElement)) return; const original = button.textContent || ''; diff --git a/landing/design-system.css b/landing/design-system.css index 52a4ca9d0..2499cd04f 100644 --- a/landing/design-system.css +++ b/landing/design-system.css @@ -3,9 +3,9 @@ Homepage composition belongs in home.css. */ :root { - --site-section-space: clamp(4.8rem, 6.2vw, 6rem); - --site-section-space-tight: clamp(3.3rem, 4.5vw, 4.25rem); - --site-card-radius: 20px; + --site-section-space: clamp(3.9rem, 5vw, 4.8rem); + --site-section-space-tight: clamp(2.7rem, 3.6vw, 3.45rem); + --site-card-radius: 16px; --site-surface-border: rgba(190, 221, 255, .135); --site-surface-border-hover: rgba(117, 207, 255, .25); --site-divider: rgba(177, 214, 255, .09); @@ -36,7 +36,7 @@ .section-head { max-width: 800px; - margin-bottom: clamp(2rem, 3vw, 2.6rem); + margin-bottom: clamp(1.65rem, 2.5vw, 2.1rem); } .section-head h2 { @@ -73,7 +73,7 @@ } .card { - padding: clamp(1.45rem, 2vw, 1.7rem); + padding: clamp(1.25rem, 1.7vw, 1.5rem); border-radius: var(--site-card-radius); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } @@ -136,7 +136,7 @@ .callout { border-color: rgba(105, 203, 255, .21); - border-radius: 24px; + border-radius: 15px; background: radial-gradient(circle at 10% 0%, rgba(56,189,248,.145), transparent 21rem), radial-gradient(circle at 92% 92%, rgba(139,92,246,.09), transparent 22rem), @@ -165,8 +165,8 @@ @media (max-width: 980px) { :root { - --site-section-space: clamp(4.2rem, 8vw, 5.2rem); - --site-section-space-tight: clamp(3rem, 6vw, 3.8rem); + --site-section-space: clamp(3.6rem, 7vw, 4.5rem); + --site-section-space-tight: clamp(2.55rem, 5vw, 3.2rem); } .section-head h2 { @@ -176,8 +176,8 @@ @media (max-width: 760px) { :root { - --site-section-space: 4.15rem; - --site-section-space-tight: 3.15rem; + --site-section-space: 3.6rem; + --site-section-space-tight: 2.7rem; } .section + .section::before, @@ -204,7 +204,7 @@ } .callout { - border-radius: 20px; + border-radius: 16px; } .site-footer { diff --git a/landing/home.css b/landing/home.css index ca34737b0..b9ec0f5e2 100644 --- a/landing/home.css +++ b/landing/home.css @@ -1,282 +1,407 @@ /* ARSAS overview-page composition. - Every selector is scoped to body[data-page="overview"] so homepage layout cannot - leak into Learning, Capabilities, IO FAT, Solutions, Guides or Download pages. */ + Deliberately compact: decision-first IA, curated product evidence and bounded + motion. Every selector is scoped to the overview page. */ body[data-page="overview"] { --home-hero-max: 1280px; } -body[data-page="overview"] .hero + .section, -body[data-page="overview"] .hero + .section-tight { - padding-top: clamp(3.9rem, 5vw, 4.8rem); +body[data-page="overview"] .hero { + padding: clamp(4.25rem, 6vw, 5.25rem) 0 clamp(2.7rem, 4vw, 3.6rem); } -body[data-page="overview"] .substation-scene { - border-radius: 26px; - border-color: rgba(126, 208, 252, .2); - box-shadow: - 0 26px 68px rgba(0, 8, 25, .26), - 0 0 0 1px rgba(255,255,255,.018), - inset 0 1px 0 rgba(255,255,255,.032); +body[data-page="overview"] .hero > .container { + width: min(calc(100% - 2rem), var(--home-hero-max)); } -body[data-page="overview"] .substation-copy { - max-width: 46rem; +body[data-page="overview"] .hero-grid { + grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); + gap: clamp(2rem, 4vw, 3.7rem); } -body[data-page="overview"] .substation-copy h2 { - text-wrap: balance; +body[data-page="overview"] .hero-message { + min-width: 0; } -body[data-page="overview"] .substation-copy p { - max-width: 62ch; - text-wrap: pretty; +body[data-page="overview"] .hero h1 { + max-width: 12ch; + margin-top: 1.05rem; + font-size: clamp(3rem, 4.25vw, 3.85rem); + line-height: 1.01; + letter-spacing: -.044em; } -@media (min-width: 981px) { - body[data-page="overview"] .hero { - padding: 5.25rem 0 3.35rem; - } +body[data-page="overview"] .hero h1 .gradient-text { + white-space: normal; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} - body[data-page="overview"] .hero > .container { - width: min(calc(100% - 2rem), var(--home-hero-max)); - } +body[data-page="overview"] .hero:lang(id) .hero-grid { + grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); +} - body[data-page="overview"] .hero-grid { - grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); - gap: clamp(2rem, 3vw, 2.75rem); - } +body[data-page="overview"] .hero:lang(id) h1 { + max-width: 13.5ch; + font-size: clamp(2.85rem, 4vw, 3.7rem); +} - body[data-page="overview"] .hero-grid > div:first-child { - min-width: 0; - } +body[data-page="overview"] .hero:lang(id) .eyebrow { + white-space: normal; +} - body[data-page="overview"] .eyebrow { - max-width: none; - white-space: nowrap; - font-size: .72rem; - letter-spacing: .048em; - } +body[data-page="overview"] .hero:lang(id) .hero-actions { + flex-wrap: wrap; +} - body[data-page="overview"] .hero h1 { - max-width: min(38.5rem, 100%); - margin-top: 1.18rem; - font-size: clamp(3.58rem, 4.1vw, 4.02rem); - line-height: 1.025; - letter-spacing: -.046em; - } +body[data-page="overview"] .hero-copy { + max-width: 39rem; + margin-top: 1.2rem; + font-size: 1.04rem; + line-height: 1.62; +} - /* Localized copy length is never part of the layout contract. */ - body[data-page="overview"] .hero h1 .gradient-text { - display: block; - max-inline-size: 100%; - white-space: normal; - text-wrap: balance; - } +body[data-page="overview"] .hero-actions { + gap: .6rem; + margin-top: 1.35rem; +} - body[data-page="overview"] .hero-copy { - max-width: 35.5rem; - margin-top: 1.3rem; - font-size: 1.06rem; - line-height: 1.6; - } +body[data-page="overview"] .hero-actions .btn { + min-height: 46px; + padding: .68rem .92rem; + font-size: .87rem; +} - body[data-page="overview"] .hero-actions { - align-items: center; - flex-wrap: nowrap; - gap: .62rem .78rem; - margin-top: 1.45rem; - } +body[data-page="overview"] .hero-actions .btn-quiet { + min-height: auto; + padding: .45rem .18rem; + border: 0; + background: transparent; + box-shadow: none; + color: #9cb0c6; + font-weight: 600; +} - body[data-page="overview"] .hero-actions .btn { - min-height: 48px; - padding: .72rem .94rem; - white-space: nowrap; - font-size: .88rem; - } +body[data-page="overview"] .hero-actions .btn-quiet::after { + content: " →"; + color: #67d5ff; +} - /* The first two actions are decisions; the remaining quiet actions are navigation. */ - body[data-page="overview"] .hero-actions .btn-quiet { - min-height: auto; - padding: .42rem .1rem; - color: #9fb2c8; - border: 0; - border-radius: 0; - background: transparent; - box-shadow: none; - font-size: .84rem; - font-weight: 610; - text-decoration: none; - } +body[data-page="overview"] .hero-actions .btn-quiet:hover, +body[data-page="overview"] .hero-actions .btn-quiet:focus-visible { + transform: none; + color: #f1f9ff; + background: transparent; + box-shadow: none; +} - body[data-page="overview"] .hero-actions .btn-quiet::after { - content: " →"; - color: #6ed6ff; - } +body[data-page="overview"] .hero-proof { + gap: .55rem 1rem; + margin-top: 1.05rem; + font-size: .78rem; +} - body[data-page="overview"] .hero-actions .btn-quiet:hover, - body[data-page="overview"] .hero-actions .btn-quiet:focus-visible { - color: #ecf8ff; - background: transparent; - box-shadow: none; - transform: none; - } +body[data-page="overview"] .hero-window { + border-radius: 18px; + transform: perspective(1500px) rotateY(-1.4deg) rotateX(.5deg); + transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; +} - body[data-page="overview"] .hero:lang(id) .hero-actions .btn-quiet:last-child { - margin-left: .1rem; - color: #7f93aa; - font-size: .78rem; - } +body[data-page="overview"] .hero-window img { + display: block; + filter: brightness(.92) saturate(.96) contrast(.985); +} - body[data-page="overview"] .hero:lang(id) .hero-actions .btn-quiet:last-child::after { - content: ""; - } +body[data-page="overview"] .hero-visual::before { + inset: 7% 4% 0; + opacity: .6; + filter: blur(70px); +} - body[data-page="overview"] .hero-proof { - flex-wrap: nowrap; - gap: .8rem 1rem; - margin-top: 1.22rem; - font-size: .79rem; - } +body[data-page="overview"] .floating-chip { + padding: .52rem .66rem; + border-radius: 10px; + font-size: .71rem; + font-weight: 620; +} - body[data-page="overview"] .hero-proof span { - white-space: nowrap; - } +body[data-page="overview"] .floating-chip.one { + left: -.65rem; + top: 13%; +} - body[data-page="overview"] .hero-visual { - width: 103%; - justify-self: end; - } +body[data-page="overview"] .floating-chip.two { + right: -.35rem; + bottom: 10%; + opacity: .78; +} - body[data-page="overview"] .hero-window { - position: relative; - overflow: hidden; - transform: perspective(1500px) rotateY(-2deg) rotateX(.8deg); - } +body[data-page="overview"] .home-paths-section { + padding-top: clamp(3rem, 4.5vw, 3.9rem); +} - /* Keep the real product readable while preventing its white workspace from - overpowering the message column on dark landing-page backgrounds. */ - body[data-page="overview"] .hero-window img { - display: block; - filter: brightness(.92) saturate(.96) contrast(.985); - } +body[data-page="overview"] .home-path-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: .8rem; +} - body[data-page="overview"] .hero-window::after { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - background: - linear-gradient(90deg, rgba(5, 15, 29, .045), transparent 28%, transparent 74%, rgba(5, 15, 29, .055)), - linear-gradient(180deg, rgba(7, 17, 31, .025), transparent 58%, rgba(7, 17, 31, .04)); - } +body[data-page="overview"] .home-path-grid .card { + display: flex; + min-height: 100%; + flex-direction: column; + padding: 1.2rem; +} + +body[data-page="overview"] .home-path-grid .card h3 { + margin-top: .65rem; +} + +body[data-page="overview"] .home-path-grid .section-actions { + margin-top: auto; + padding-top: .9rem; +} + +body[data-page="overview"] .metrics { + padding: .2rem 0 0; +} + +body[data-page="overview"] .metric-grid { + border-radius: 14px; +} + +body[data-page="overview"] .metric { + padding: 1rem 1.15rem; +} + +body[data-page="overview"] .metric strong { + font-size: 1rem; +} + +body[data-page="overview"] .metric span { + font-size: .79rem; +} + +body[data-page="overview"] .home-workflows .comparison-grid { + gap: .9rem; +} + +body[data-page="overview"] .home-workflows .comparison-panel { + border-radius: 16px; + padding: clamp(1.3rem, 2vw, 1.65rem); +} - body[data-page="overview"] .hero-visual::before { - opacity: .74; +body[data-page="overview"] .home-workflows .comparison-panel h3 { + margin-top: .65rem; + max-width: 26ch; + font-size: 1.18rem; +} + +body[data-page="overview"] .home-workflows .comparison-panel ul { + margin-top: 1rem; +} + +body[data-page="overview"] .home-evidence .product-tour-grid { + gap: .85rem; +} + +body[data-page="overview"] .gallery-footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: .8rem 1.1rem; + margin-top: 1.2rem; +} + +body[data-page="overview"] .home-next-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: .8rem; +} + +body[data-page="overview"] .home-next-grid .card { + padding: 1.25rem; +} + +body[data-page="overview"] .home-next-grid .card h3 { + margin-top: 0; +} + +body[data-page="overview"] .release-strip { + display: grid; + grid-template-columns: minmax(0, 1.25fr) auto auto; + align-items: center; + gap: 1.4rem; + padding: clamp(1.25rem, 2vw, 1.65rem); + border: 1px solid rgba(102, 202, 255, .2); + border-radius: 16px; + background: + radial-gradient(circle at 4% 0%, rgba(56, 189, 248, .12), transparent 18rem), + linear-gradient(135deg, rgba(17, 48, 82, .68), rgba(12, 27, 50, .68)); + box-shadow: 0 18px 48px rgba(0, 8, 24, .16), inset 0 1px 0 rgba(255,255,255,.035); +} + +body[data-page="overview"] .release-strip h2 { + margin-top: .38rem; + font-size: clamp(1.45rem, 2.2vw, 1.85rem); + letter-spacing: -.03em; +} + +body[data-page="overview"] .release-strip p { + max-width: 62ch; + margin: .55rem 0 0; + color: #aebfd2; + font-size: .86rem; + line-height: 1.55; +} + +body[data-page="overview"] .release-facts { + display: flex; + gap: .55rem; +} + +body[data-page="overview"] .release-facts span { + min-width: 5.6rem; + padding: .72rem .8rem; + border: 1px solid rgba(190, 221, 255, .1); + border-radius: 12px; + background: rgba(255,255,255,.035); +} + +body[data-page="overview"] .release-facts strong, +body[data-page="overview"] .release-facts small { + display: block; +} + +body[data-page="overview"] .release-facts strong { + font-size: .85rem; + font-weight: 660; +} + +body[data-page="overview"] .release-facts small { + margin-top: .1rem; + color: #8198b1; + font-size: .67rem; +} + +body[data-page="overview"] .release-actions { + display: flex; + align-items: center; + gap: .75rem; + white-space: nowrap; +} + +body[data-page="overview"] .home-faq .section-head { + margin-bottom: 1.4rem; +} + +body[data-page="overview"] [data-reveal].reveal { + transform: translateY(10px); + transition-duration: .45s; +} + +@media (hover: hover) and (pointer: fine) { + body[data-page="overview"] .hero-visual:hover .hero-window { + border-color: rgba(122, 210, 255, .24); + box-shadow: 0 34px 84px rgba(0, 8, 26, .42), 0 0 0 1px rgba(255,255,255,.035); + transform: perspective(1500px) rotateY(-.6deg) rotateX(.2deg) translateY(-2px); } +} - body[data-page="overview"] .floating-chip.one { - left: -.85rem; - top: 16%; - padding: .58rem .74rem; - border-color: rgba(172, 222, 255, .2); - background: rgba(7, 20, 39, .9); - box-shadow: 0 14px 32px rgba(0, 5, 18, .31); +@media (max-width: 1080px) { + body[data-page="overview"] .home-path-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } - body[data-page="overview"] .floating-chip.two { - right: -.35rem; - bottom: 11%; - padding: .52rem .68rem; - color: #adc0d4; - border-color: rgba(191, 220, 246, .11); - background: rgba(7, 20, 39, .77); - box-shadow: 0 10px 26px rgba(0, 5, 18, .24); - opacity: .78; - font-size: .72rem; + body[data-page="overview"] .release-strip { + grid-template-columns: 1fr auto; } - /* Indonesian copy needs slightly more message authority than English. */ - body[data-page="overview"] .hero:lang(id) .hero-grid { - grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); - gap: clamp(1.75rem, 2.6vw, 2.4rem); + body[data-page="overview"] .release-actions { + grid-column: 1 / -1; } +} - body[data-page="overview"] .hero:lang(id) h1 { - max-width: min(39rem, 100%); - font-size: clamp(3.38rem, 3.85vw, 3.82rem); +@media (max-width: 980px) { + body[data-page="overview"] .hero-grid { + grid-template-columns: 1fr; + gap: 2.2rem; } - body[data-page="overview"] .hero:lang(id) .hero-copy { - max-width: 36.5rem; + body[data-page="overview"] .hero h1 { + max-width: 15ch; } - body[data-page="overview"] .hero:lang(id) .eyebrow { - max-width: 100%; - white-space: normal; - line-height: 1.35; + body[data-page="overview"] .hero-visual { + width: min(100%, 780px); + margin-inline: auto; } - body[data-page="overview"] .hero:lang(id) .hero-visual { - width: 101%; + body[data-page="overview"] .home-next-grid { + grid-template-columns: 1fr; } } -@media (min-width: 981px) and (max-width: 1180px) { - body[data-page="overview"] .hero h1 { - font-size: clamp(3.25rem, 5vw, 3.68rem); +@media (max-width: 760px) { + body[data-page="overview"] .hero { + padding-top: 3.8rem; } - body[data-page="overview"] .eyebrow { - font-size: .68rem; + body[data-page="overview"] .hero h1 { + font-size: clamp(2.55rem, 12vw, 3.25rem); } - body[data-page="overview"] .hero-actions { - flex-wrap: wrap; + body[data-page="overview"] .hero-actions .btn, + body[data-page="overview"] .hero-actions .btn-quiet { + width: 100%; } - body[data-page="overview"] .hero-actions .btn { - padding-inline: .8rem; - font-size: .84rem; + body[data-page="overview"] .hero-actions .btn-quiet { + justify-content: flex-start; } - body[data-page="overview"] .hero-proof { - flex-wrap: wrap; - font-size: .75rem; - gap: .7rem; + body[data-page="overview"] .home-path-grid { + grid-template-columns: 1fr; } - body[data-page="overview"] .hero-visual { - width: 101%; + body[data-page="overview"] .release-strip { + grid-template-columns: 1fr; } - body[data-page="overview"] .hero:lang(id) h1 { - font-size: clamp(3.18rem, 4.55vw, 3.5rem); + body[data-page="overview"] .release-facts { + overflow-x: auto; + padding-bottom: .1rem; } - body[data-page="overview"] .hero:lang(id) .hero-visual { - width: 100%; + body[data-page="overview"] .release-actions { + grid-column: auto; + flex-wrap: wrap; } } -@media (max-width: 980px) { - body[data-page="overview"] .hero + .section, - body[data-page="overview"] .hero + .section-tight { - padding-top: 3.7rem; +@media (max-width: 520px) { + body[data-page="overview"] .hero { + padding-top: 3.35rem; } - body[data-page="overview"] .substation-copy h2 { - max-width: 22ch; + body[data-page="overview"] .hero-proof { + display: grid; + gap: .42rem; + } + + body[data-page="overview"] .release-actions .btn { + width: 100%; } } -@media (max-width: 760px) { - body[data-page="overview"] .hero + .section, - body[data-page="overview"] .hero + .section-tight { - padding-top: 3.35rem; +@media (prefers-reduced-motion: reduce) { + body[data-page="overview"] .hero-window { + transition: none; + transform: none; } - body[data-page="overview"] .substation-copy h2 { - max-width: none; + body[data-page="overview"] .hero-visual:hover .hero-window { + transform: none; } } diff --git a/landing/partials/download-cta-id.html b/landing/partials/download-cta-id.html index 6558a3621..a29df7dbf 100644 --- a/landing/partials/download-cta-id.html +++ b/landing/partials/download-cta-id.html @@ -1 +1,13 @@ -
Release stabil terverifikasi

Unduh ARSAS {{STABLE_VERSION}} untuk Windows.

Gunakan installer untuk workstation normal, pilih portable single EXE untuk deployment tanpa instalasi yang disetujui, dan verifikasi SHA-256 sebelum digunakan.

Yang baru, batasan dan status signing →
+
+
+
+
+ Release stabil · ARSAS {{STABLE_VERSION}} +

Siap digunakan pada workstation Windows yang disetujui?

+

Installer dan portable memiliki scope aplikasi yang sama. Verifikasi SHA-256 yang dipublikasikan dan review batas rilis sebelum digunakan di lapangan.

+ Catatan rilis, batasan dan status signing → +
+ +
+
+
diff --git a/landing/partials/download-cta.html b/landing/partials/download-cta.html index 4462bbe6b..ceeb7fc20 100644 --- a/landing/partials/download-cta.html +++ b/landing/partials/download-cta.html @@ -1,14 +1,13 @@
-
+
- Verified stable release · ARSAS {{STABLE_VERSION}} -

Download the release-grade IEC 61850 workstation for Windows.

-

The current stable build includes Rev.3 IO List FAT import, an executive AS TESTED evidence report, a loaded Engineering/FAT workspace session, and direct receive-only GOOSE plus bounded SMV capture from each IED card.

-

Use the installer for a normal workstation, choose the portable single EXE for an approved no-install deployment, and verify the published SHA-256 before use.

- What’s new, engineering boundaries and signing status → + Verified stable · ARSAS {{STABLE_VERSION}} +

Ready for an approved Windows workstation?

+

Installer and portable packages share the same application scope. Verify the published SHA-256 and review the release boundary before field use.

+ Release notes, limitations and signing status →
- +
diff --git a/landing/partials/header.html b/landing/partials/header.html index f147406c0..cbff35b05 100644 --- a/landing/partials/header.html +++ b/landing/partials/header.html @@ -1,8 +1,3 @@ - - - - -