34 lines
2.3 KiB
Vue
34 lines
2.3 KiB
Vue
<!-- Signature 3 · the instrument comes apart: four physical layers = the shared platform. -->
|
|
<script setup lang="ts">
|
|
const story = useStory();
|
|
const layers = [
|
|
{ term: "اُم", title: "زیرساخت مشترک", text: "هویت، پرداخت، پایش و استقرار؛ یک بار ساخته شده، پانزده بار به کار رفته." },
|
|
{ term: "صفیحه", title: "یک زبان داده", text: "همهٔ محصولات روی یک مدل داده و یک تقویم شمسی با هم حرف می‌زنند." },
|
|
{ term: "عنکبوت", title: "پانزده محصول", text: "هر محصول جای ثابت خودش را دارد. چرخ می‌چرخد، نظم نمی‌شکند." },
|
|
{ term: "عضاده", title: "یک تیم", text: "چهل‌ودو مهندس و طراح که هر بار فقط یک چیز را نشانه می‌گیرند." },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<section id="anatomy" aria-labelledby="anat-h" class="relative" style="height: 340svh">
|
|
<div class="sticky top-0 flex h-[100svh] items-end px-[6vw] pb-[9vh] md:items-center md:pb-0">
|
|
<div class="md:w-[38vw]">
|
|
<h2 id="anat-h" class="text-[clamp(2.4rem,4.6vw,4.8rem)] font-black leading-[1.08]">یک سامانه،<br><span class="font-extralight">چهار لایه.</span></h2>
|
|
<ol class="mt-8 space-y-4 md:mt-12 md:space-y-6">
|
|
<li v-for="(l, i) in layers" :key="l.term" class="transition-all duration-700"
|
|
:class="[story.focus === -1 ? 'opacity-70' : story.focus === i ? 'opacity-100' : 'opacity-25',
|
|
story.mobile && story.focus !== -1 && story.focus !== i ? 'hidden' : '']">
|
|
<p class="flex items-baseline gap-3 text-[20px] font-bold md:text-[22px]">
|
|
<span :class="story.focus === i ? 'text-lapis' : ''">{{ l.title }}</span>
|
|
<span class="text-[15px] font-normal text-mute">«{{ l.term }}»</span>
|
|
</p>
|
|
<!-- Text is always in the DOM for screen readers; only its visual height animates. -->
|
|
<p class="max-w-[34ch] overflow-hidden text-[16px] leading-7 text-ink/80 transition-all duration-700 md:text-[17px]"
|
|
:class="story.focus === i ? 'mt-2 max-h-24' : 'max-h-0'">{{ l.text }}</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|