/* ===========================================================
TAPEMATE PH — LANDING PAGE
1. tokens 6. logo bar 11. segments 16. contact + form
2. base 7. intro/stats 12. dealership 17. footer
3. hero (v9) 8. products 13. proof 18. floating ui
4. ui kit 9. calculator 14. process 19. responsive
5. header 10. why 15. faq 20. reduced motion
=========================================================== */
/* ================= 1. TOKENS =================
FROM TAPEMATE'S BRAND GUIDELINE
The four colours below marked ★ are not guesses. They were pulled
straight out of _source/brand/TAPEMATE-BRAND-GUIDELINE.pdf — the swatches
there are vector fills, so the exact values are in the content stream itself.
★ #1F4280 navy — 80 uses in the document, the most frequent
★ #021334 navy-deep — 44 uses
★ #D90429 red — 46 uses
★ #3B9CFF electric — 14 uses
The red and the electric blue were already right. The navy used to be
#14287B — darker and more purple — so it was replaced across the whole
project (73 places, including the raw rgba values in shadows and edges).
The remaining colours (kraft, teal, cream, sand) are not in the
guideline. They are ours, supporting only, so they were left alone. */
:root{
--navy:#1F4280; /* ★ guideline */
--navy-soft:#1E3A8A;
--navy-deep:#021334; /* ★ guideline */
--red:#D90429; /* ★ guideline */
--red-deep:#A80320;
--electric:#3B9CFF; /* ★ guideline */
--kraft:#F2A05D;
--kraft-light:#F9C089;
--kraft-deep:#DF8440;
--teal:#2C6E80;
--teal-deep:#1D4C59;
--cream:#FBF1E3;
--sand:#F1E1C8;
--gray:#D6DAE0;
--gray-soft:#E7EAEE;
/* page */
--paper:#FFFDF9;
--kraft-paper:#F6E7D2;
--ink:#1F4280;
--ink-2:#57618A;
--line:rgba(31,66,128,.14);
--line-2:rgba(31,66,128,.08);
--shadow-s:0 6px 16px -10px rgba(31,66,128,.4);
--shadow-m:0 18px 34px -22px rgba(31,66,128,.45);
--shadow-l:0 34px 60px -34px rgba(31,66,128,.5);
/* ---- THE BRAND'S TWO FONTS ----
The guideline says (embedded in the PDF as UniversLTPro-55Roman and
GlacialIndifference):
headings / logo Univers LT Pro
body Glacial Indifference
The body is already right — we have Glacial Indifference.
⚠ UNIVERS IS A PAID MONOTYPE FONT. It is not on Google Fonts and not
on any free CDN. It is in the PDF, but only as a subset (the
characters used there), and extracting and using the embedded copy
is not allowed either — that is licensed to that document.
WHAT IS NEEDED: ask TapeMate for a licensed web font (.woff2). Put
it in assets/fonts/, uncomment the @font-face below, and the whole
page including the logo follows on its own.
Until then Poppins leads the stack — that is what was seen and
approved in every previous version, so nothing changes suddenly.
Univers is still first in the list, so the moment the file arrives
it takes over with nothing else to adjust. */
--display:'Univers LT Pro','UniversLTPro-55Roman','Univers','Poppins',system-ui,sans-serif;
--body:'Glacial Indifference','Poppins',system-ui,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);
--back:cubic-bezier(.34,1.4,.64,1);
--hdr-h:76px;
}
/* The @font-face for Univers is ready to drop in — it is in
assets/fonts/README.txt, together with the method. */
/* ================= 2. BASE ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
html,body{height:100%}
body{
font-family:var(--body);background:var(--paper);color:var(--navy);
-webkit-font-smoothing:antialiased;
/* prevents the side-scroll caused by the honeypot and by the layers that
break out. clip is what we want — it creates no new scroll container. */
overflow-x:hidden;
overflow-x:clip;
}
img,svg{max-width:100%}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ================= 3. HERO (v9 — hindi ginalaw) ================= */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden;background:#fff}
/* ---- THE TORN PAPER ----
This is an image now, straight from the client. It replaced twelve
stacked SVGs (wash, field, sandband, two bands, weave, gtop, gbot) —
the backup is in the scratchpad if it is ever needed.
`cover`: it clings to all four edges, with no white showing at any
window size. Because the image is 2.7:1 and the usual window is taller,
the width is what gets consumed — the torn blue at the top and bottom
survives whole, and that is what makes the shape. */
/* `inset:-8px` — this has parallax (data-depth="3"), so it drifts slightly
with the cursor. At exactly `inset:0` every movement would open a
hairline white gap at the edge; 1.5px of that is worthless next to the
blue edge. 8px is more than enough. */
.bg{
position:absolute;inset:-8px;z-index:0;pointer-events:none;
opacity:0;animation:soft 1.3s var(--ease) .15s forwards;
}
@keyframes soft{to{opacity:1}}
/* ---- ANG LIMANG LITRATO ----
⚠ `inset:-26px` AT HINDI `inset:0`, AT ANG `blur` ANG DAHILAN. Ang
`filter:blur()` ay hindi tumitigil sa gilid ng kahon — kinakalat niya
ang laman PALABAS, at ang gilid mismo ay nagiging kalahating
malinaw. Sa `inset:0` ay may malabong puting sinturon sa apat na
gilid ng hero. Dahil mas malaki ang `.shots` kaysa sa hero at may
`overflow:hidden` ang hero, ang malabong gilid ay nasa LABAS ng
nakikita — matalim ang apat na gilid, malabo ang laman.
⚠ ANG `blur` AT ANG `.veil` AY IISANG HILING: "hindi masyadong klaro,
background lang". Magkaiba ang trabaho nila — ang `blur` ang
nag-aalis ng DETALYE (hindi mo na binabasa ang mukha o ang sulat sa
karton), ang belo ang nag-aalis ng LAKAS NG KULAY. Kulang ang isa
kung wala ang isa: ang blur lang ay malabo pero madilim pa rin; ang
belo lang ay maliwanag pero mababasa mo pa rin ang lahat. */
/* ⚠ WALA NANG `blur` (itinama Ago 18, 2026 — sunod sa konseptong
ipinadala). May 3px na blur ito dahil ang unang hiling ay "hindi
masyadong klaro". Pagdating ng mismong litrato ay naiba ang larawan
ng problema: MAY PUTING HAZE NA SA GITNA ANG LITRATO NILA — nakaluto
na doon, eksakto sa kinauupuan ng logo. Kaya hindi na kailangang
labuin ng CSS ang kabuuan: ang gilid ay dapat MALINAW (nababasa ang
"STRONGBOND" sa karton sa konsepto nila), ang gitna ang kusang
maputi. Ang blur ay basta-basta lang naglalabo ng lahat, pati ang
dalawang gilid na dapat mismong makita. */
.shots{position:absolute;inset:0;overflow:hidden;filter:saturate(.96)}
.shot{position:absolute;inset:0;opacity:0;transition:opacity 1.25s var(--ease)}
.shot.is-on{opacity:1}
/* ⚠ `transition` ANG ZOOM AT HINDI `animation`. Sa `animation` ay
NAGSISIMULA ULIT ito sa tuwing idinadagdag ang klase — at kapag
tinanggal ang klase ay biglang bumabalik sa 1.05 ang larawan HABANG
naglalaho pa siya, kaya may kitang lundag sa gitna ng crossfade. Sa
`transition` ay dahan-dahang bumabalik ang paalis habang dahan-dahang
lumalaki ang papasok — magkasalungat na galaw na parehong mabagal, at
iyon ang nagpapalambot sa palitan. */
.shot img{
width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.05);transition:transform 6.4s linear;
}
.shot.is-on img{transform:scale(1.15)}
/* Ang belo. Mas makapal sa taas at baba kaysa sa gitna — doon nakaupo
ang wordmark, at doon dapat pinakamalinaw ang litrato.
⚠ PINAHINA AGO 18, 2026: .72/.50/.78 → .46/.26/.5. Sa una ay puting
lupa ang lumalabas sa kaliwa at ang litrato ay parang nasa kanang
kalahati lang — hindi butas iyon (sinukat: umaabot ang `` mula
-176px hanggang 2009px sa isang 1832px na hero, sakop ang lahat),
kundi BELO na masyadong makapal sa ibabaw ng bahaging maliwanag na
ng litrato mismo. Ang maliwanag na bahagi + makapal na belo = puti.
Ang blur ang nag-aalis ng detalye; hindi kailangang ang belo pa ang
mag-alis ng litrato. */
/* ⚠ HALOS WALA NA ANG BELO (Ago 18, 2026). .46/.26/.50 ito; ngayon ay
.14/.06/.20 — sapat lang para pantayin ang lima kung magkakaiba ang
liwanag nila, at para may lumang-papel na init sa dulong taas at
baba. ANG LITRATO MISMO ANG MAY PUTI NGAYON: hindi na trabaho ng
CSS na paputiin ang gitna, trabaho na lang niyang huwag sirain ang
gilid. */
.veil{
position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 30%,
rgba(255,255,255,.06) 64%, rgba(255,255,255,.2) 100%);
}
/* ---- ANG BLADE SA IBABA NG HERO ----
⚠⚠ PUNIT NA PAPEL ang nandito dati at ipinadala ni Kylie ang kapalit
(Set 1, 2026) — ang inspo at ang mismong hugis, PNG na may alpha.
Nasa _parked/hero-torn-paper.txt ang buong lumang CSS at ang
dahilan niya; hindi siya binura.
⚠ HINDI SIYA INIGUHIT ULIT BILANG SVG. Kaya sana — dalawang wedge na
may gradient — pero ang hugis na ito ay IBINIGAY, at ang muling
pagguhit ay paglilipat ng disenyo sa hula ko. Ang larawan mismo
ang ginamit.
⚠ NILINIS ANG LARAWAN BAGO IPASOK: 2172x724 ang ipinadala pero
2167x365 lang ang may laman — 50% niya ay blangko, at ang blangko
ay bytes na dinadala ng bawat bumubukas ng pahina at hindi
kailanman nakikita. Ginupit sa laman at iniliit sa 1920:
365 KB → 86 KB.
⚠⚠ MAY TAAS SIYANG NAKATAKDA AT INUUNAT ANG LARAWAN PARA UMABOT.
Sinasadya, at ito ang tanging paraan. Sa sariling sukat ng
larawan (323/1920 = 16.8% ng lapad) ay 242px siya sa 1440px na
bintana — 27% ng hero. Sa inspo ay mga 11% lang siya: GILID ng
pahina, hindi slab.
AT HINDI SIYA MAAAYOS SA PAGPAPALAKI O PAGPAPALIIT. Tuwid na
wedge siya: sa kahit anong lapad ay KAPAREHONG kapal pa rin siya
sa kaparehong puwesto, dahil magkasabay lumalaki ang `x` at ang
`y`. Sinubukan ko iyon bago ang pag-unat. Ang SLOPE mismo ang
kailangang ibaba.
⚠ WALANG NASISIRA SA PAG-UNAT dahil GRADIENT ang buong laman niya —
walang tuldok, walang titik, walang bilog na magiging itlog. Ang
tanging nagbabago ay ang anggulo, at iyon mismo ang binabago.
⚠ `bottom left` PA RIN ANG PUWESTO at 100% ang lapad: buo pa rin ang
matulis na dulo sa kaliwa — siya ang nagbibigay ng hugis sa blade.
⚠ `clamp` AT HINDI `vw` LANG: 118px ang sahig sa malapad na monitor
(kung hindi ay lumalapad siya nang walang hanggan) at 56px ang
ilalim sa cellphone (kung hindi ay nawawala siya).
⚠ `bottom left` AT HINDI `bottom center`. Nakadikit ang matulis na
dulo sa kaliwang gilid; sa `center` ay lumulutang siya at nagiging
malinaw na larawan siyang nakapatong, hindi gilid ng pahina. */
.blade{
position:absolute;left:0;right:0;bottom:0;z-index:1;
height:clamp(56px,7.2vw,118px);
background:url("../img/hero-blade.png") bottom left/100% 100% no-repeat;
pointer-events:none;
}
/* ---- KAPAG MAS PATAYO ANG BINTANA KAYSA SA LARAWAN ----
2.7:1 ang larawan. Sa cellphone (halos 1:2) ay 5.8 beses ang agwat, kaya
`cover` na lang ang gagamitin ay 17% na lang ng lapad ang makikita —
isang malaking mukha ng karton, hindi na punit na papel.
Kaya sa patayong bintana ay ginagawa itong BANDA sa ibaba: puti sa taas
kung saan nakalapag ang logo, tapos ang punit na papel na may karton sa
baba, at ang asul na punit ay eksaktong nasa dulong-ibaba.
⚠ ANG BUG NA INAYOS DITO (Ago 8, 2026)
Ang buong taas ng larawan ang lumalabas noon sa banda — pati ang NAVY
NA PUNIT SA ITAAS nito. Sa buong hero ay tama iyon: nasa dulong-taas ng
bintana. Pero bilang banda, ang navy na iyon ay naging isang PATAG NA
ASUL NA GUHIT na nakalutang sa gitna ng puti, at doon mismo dumadaan
ang dalawang pindutan at ang mga icon. Iyon ang nakita sa cellphone.
SINUKAT sa larawan (2061×763), bawat walong hanay:
hanay 0–79 navy = itaas na 10.4% ← ITO ANG GUHIT
hanay 80–160 kulay-abo = ang lilim ng punit
hanay 168 pataas halos puti = mula sa 22%
hanay 640–763 navy = ibabang 16.1% ← ito ang gusto natin
Ang ITAAS NA 12% lang ang pinuputol — sapat para mawala ang navy, at
naiiwan ang kulay-abong lilim ng punit. Sinadya iyon: PUNIT NA PAPEL
ang hitsura ng lilim na iyon, at iyon mismo ang disenyo. Ang navy lang
ang nagmumukhang guhit. (Sinubukan ko ring putulin ang buong 22% —
malinis nga, pero nawawala ang punit at nagiging basta larawan na lang
ng karton na may puting tuktok.)
Kailangan ng sariling kahon para maputol iyon: ang `.bg` ay kasinlaki
ng buong hero, at walang pumuputol sa larawan doon. Ang `::before` ay
may sariling `height:var(--banda)`, at doon ito naiipit.
`::before` at hindi `::after`: ang `::before` ay unang anak, kaya
nauuna itong ipinipinta kaysa sa `.pool` — nananatiling nasa ibabaw ang
pampaliwanag ng gitna. Kabaligtaran ang `::after`.
3.069 = 2.701 ÷ 0.88. Ang 2.701 ang ratio ng larawan; ang paghahati sa
0.88 ang nagpapalaki nito nang sapat para ang nakikitang 88% ay eksakto
ang taas ng banda. Ang `100%` ang sahig — kung mas maliit ang bilang,
may puting siwang sa gilid.
⚠ 52svh ANG BANDA, at may kasaysayan ito.
40svh ito noon. Ginawa kong 36svh nang idagdag ang pagputol —
pinipigilan ko ang pagpapalaki, dahil ang pagputol ay
nangangahulugan ng pagpapalaki. Pero MASYADO ITONG BUMABA: 28% ng
hero ang naging blangkong puti sa itaas, at ang larawan ay naging
manipis na guhit sa ilalim.
52svh na ngayon, PLUS ang NAGLALAHONG TUKTOK. Ang mask ang susi:
kung basta lalakihan ang banda nang walang mask, tatawid ang matalim
na gilid ng punit na papel sa gitna ng wordmark. Sa mask ay
naglalaho ito papasok, kaya umaabot na ang larawan hanggang gitna ng
hero nang walang anumang linyang humahati sa laman.
Kapalit: mas malapit ang tingin (29% ng lapad ng larawan, dating
42%), kaya mas malaki ang karton. Sinubukan ko ang 36 at 46 nang
magkatabi — dito lang nawawala ang pakiramdam na may butas sa itaas
ng hero. */
/* ⚠ WALA NANG BANDA SA CELLPHONE, AT NAWALA ANG DAHILAN NIYA (Ago 18,
2026). Ang buong itaas na tala ay tungkol sa isang problema: sa
patayong bintana ay `cover` ang larawan, kaya 17% na lang ng lapad
niya ang nakikita — isang malaking mukha ng KARTON, hindi na punit na
papel. Ang sagot noon ay gawing banda sa ibaba ang larawan.
Wala nang karton sa gitna ngayon — tinanggal siya ng `mask` sa
`.paper`, at LITRATO ang nasa gitna. Ang natitira sa larawan ay ang
dalawang PAHALANG na punit sa dulong-taas at dulong-baba, at ang
pahalang na guhit ay hindi nasisira ng pagputol sa gilid: nananatili
siyang buong lapad kahit gaano kakipot ang bintana. Kaya kusa nang
tama ang `cover` dito, at ang buong banda ay naging patay na code.
Ang natitira na lang na gawin sa patayong bintana ay pahinain ang
belo — mas maliit ang litratong nakikita roon, kaya mas kaunti ang
kailangang takpan. */
/* =========================================================
⚠⚠ KAPAG MAS PATAYO ANG BINTANA KAYSA SA LITRATO (cellphone)
ITO ANG PINAKAMAHIRAP NA SULOK NG HERO, AT SINUKAT KO SIYA BAGO
HUMAWAK. Ang reklamo: "sa phone users hindi visible yung backround".
Totoo — pero HINDI ANG CSS ANG MAY KASALANAN, at iyon ang naiba sa
inakala ko. Ito ang panukat (katamtamang liwanag sa 0–255, at kung
ilang porsyento ng pixel ang halos puti na, sa itaas na 62% ng hero):
kung ano noon 209.6 6.9% halos-puti
tinanggal ang .veil 204.9 8.6%
tinanggal din ang .pool 209.8 29.4%
tinanggal din ang .grain 212.6 46.6%
ANG LITRATO LANG 212.8 46.8% ← ito ang sagot
MAS MAPUTI ANG HUBAD NA LITRATO KAYSA SA BUONG PATONG. Hindi
nagpapaputi ang tatlong patong — nagbabawas nga sila. Halos KALAHATI
ng hero sa cellphone ay mistulang puting pixel na galing mismo sa
file. (Sa desktop ay 176.7 lang ang parehong litrato.)
ANG DAHILAN: 1672×941 ang litrato (pahiga) at 390×800 ang cellphone
(patayo). Sa `cover` ay 27% lang ng lapad ng litrato ang natitira —
at SINUKAT KO KUNG SAAN NASA LITRATO ANG LAMAN:
hero-1 makina 0–33% · HAZE 35–75% · pallet 76–100%
hero-2 makina 0–38% · HAZE 38–68% · tao 70–100%
hero-3 rolyo 0–40% · HAZE 40–62% · karton 63–100%
hero-4 karton 0–30% · HAZE 30–62% · trak 63–100%
Nasa GITNA ang haze sa apat, at nasa DALAWANG GILID ang laman. Ang
dating `object-position:70%` ay lumalapag sa 51–78% ng litrato —
halos purong haze. Kaya blangko ang hero sa cellphone.
========================================================= */
@media (max-aspect-ratio:6/5){
/* ⚠ 4% AT HINDI 70%. Sa KALIWANG gilid ang lahat ng laman, at
sinasadya kung bakit kaliwa at hindi kanan:
· sa kaliwa: makina, rolyo, at ang SARILING KARTONG STRONGBOND ng
TapeMate sa hero-4. Produkto ang nasa likod ng logo.
· sa kanan: may TAO sa hero-2 at hero-4 — at sa hero-2 ay may
TAPEMATE NA LOGO ANG DAMIT NIYA, na lumalapag mismo sa likod ng
wordmark. Dalawang TapeMate na magkapatong.
Hindi 0% kundi 4%: sa 0% ay laging nasa dulong-dulo ang tabas at
nakakaputol ng bagay sa gilid; ang 4% ay isang hakbang papasok. */
.shot img{object-position:4% center}
/* ⚠ CONTRAST AT HINDI PAG-AALIS NG BELO. Ang haze ay nakaluto sa
FILE — puting patong siyang nakadikit na sa pixel, at walang
matatanggal na patong ng CSS na magbabalik niyon. Ang `contrast`
ang eksaktong kabaligtaran ng operasyong iyon: hinihila niyang
paloob ang naipit na hanay ng liwanag.
⚠ MAHINA LANG (1.14 at 1.12): sa 1.3 pataas ay nagiging poster ang
litrato — nawawala ang detalye sa lilim at nagiging tuldok ang
ilaw. Hindi ito pag-aayos ng litrato, pagbabalik lang siya ng
nakitang naitulak palabas. */
.shots{filter:saturate(1.12) contrast(1.14)}
/* ⚠ PINAHINA ANG BELO MULA .42/.24/.24/.46. Naiwan ang mga numerong
iyon noong Ago 18 nang pinahina ang belo ng desktop papuntang
.14/.06/.06/.2 — apat na beses na mas makapal ang cellphone kaysa
sa desktop, at iyon ay dagdag na puti sa ibabaw ng litratong
maputi na. */
.veil{
background:linear-gradient(180deg,
rgba(255,255,255,.2) 0%, rgba(255,255,255,.08) 32%,
rgba(255,255,255,.08) 62%, rgba(255,255,255,.26) 100%);
}
/* ⚠ HINAPIT ANG BILOG NA PUTI: 52%×44% siya, ngayon ay 48%×22%.
Habang blangko ang litrato ay walang nakikitang pagkakaiba — puti
sa ibabaw ng puti. Ngayong may laman na ang likod, siya na ang
nagiging PUTING MANTSA sa gitna ng bodega. Mas maliit pero mas
malakas (.70): sapat lang para sa wordmark at wala nang iba. */
.pool{background:radial-gradient(48% 22% at 50% 37%,rgba(255,255,255,.7),rgba(255,255,255,0) 78%)}
/* ⚠ SA MISMONG TITIK ANG PROTEKSYON AT HINDI SA LIKOD NIYA. Ito ang
naiwang problema pagkatapos maging kitang-kita ang litrato: ang
"At TapeMate, We Give a Pack!" ay nasa 55% ng taas — sa LABAS ng
bilog na puti — at navy siya sa ibabaw ng abalang litrato.
Ang paglaki ng bilog para maabot siya ay pagbabalik sa mismong
puting hero na inirereklamo. Ang halo sa titik ay umaabot lang ng
ilang pixel mula sa gilid ng bawat letra: nababasa ang teksto at
nananatiling nakikita ang litrato sa pagitan ng mga salita.
Tatlong patong: matigas at malapit (3px) para sa gilid, malambot
(16px) para sa kabuuan, at napakalawak (34px) para sa madilim na
likod. */
.tag{
text-shadow:0 1px 3px rgba(255,255,255,.95),
0 0 16px rgba(255,255,255,.9),
0 0 34px rgba(255,255,255,.7);
}
/* ⚠ `drop-shadow` AT HINDI `box-shadow`. Larawan ang wordmark at may
malinaw siyang hugis; sinusundan ng `drop-shadow` ang HUGIS ng
titik, samantalang ang `box-shadow` ay parisukat sa paligid ng
larawan — makikita mo ang gilid ng PNG. */
.logo__img{filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.85))}
}
/* pinapaliwanag ang gitna para malinaw pa rin ang wordmark kahit makulay ang paligid */
/* ⚠ PINALIIT AT PINAHINA AGO 18, 2026: 54%×46% na may .62 → 40%×34% na
may .34. Ito ang PANGALAWANG nagpapaputi sa kaliwa, at mas mapanlinlang
siya kaysa sa belo: bilog siya, kaya ang puti niya ay HINDI PANTAY —
makapal sa gitna-kaliwa kung saan nakaupo ang wordmark, at doon
nagmumukhang may puting lupa ang eksena. Sa maliit at mahinang bilog
ay ang mismong LIKOD LANG NG TITIK ang napapaliwanag, hindi na ang
kalahati ng hero. */
/* ⚠ ITO ANG SAPIN, AT SINADYA NA HINDI SIYA MAKIKITA SA TAMANG LITRATO.
May nakalutong puting haze sa GITNA ang apat na litratong ipinadala ng
kliyente — doon mismo nakaupo ang wordmark, at iyon ang dahilan kung
bakit mababasa siya sa konsepto nila. Pero ang haze ay nasa FILE, at
ang file ay mapapalitan: isang litratong walang haze at nawawala ang
logo sa likod ng makina o ng karton.
Puti sa ibabaw ng puti ay walang nababago — sa litratong may haze ay
hindi mo makikita ang bilog na ito. Sa litratong walang haze ay siya
ang nag-iisang dahilan kung bakit nananatiling nababasa ang pangalan.
Sapin siya, hindi disenyo. */
.pool{position:absolute;inset:0;overflow:hidden;
background:radial-gradient(50% 44% at 50% 44%,rgba(255,255,255,.44),rgba(255,255,255,0) 74%)}
/* ---- ANG KULAY SA GITNA ----
⚠ APAT NA BLOOM NG BRAND, HINDI ISANG BAGONG KULAY. Bughaw
(`--electric`), kraft at teal — pawang nasa palette na, at pawang
nasa litrato na rin: bughaw ang ilaw ng bodega, kraft ang karton,
teal ang pintura ng pader sa dalawa sa apat. Hindi ito bagong wika;
kinukuha lang nito ang nasa litrato at ipinapahid sa puti.
⚠ PULA ANG PANG-APAT, AT SIYA ANG PINAKAMAHINA (.15). Ang pula ay
nasa pindutan at nasa singsing ng logo — malakas siyang kulay at
madali siyang maging “may mali” kapag napansin. Nasa ibabang-kaliwa
siya, malayo sa wordmark at malayo sa pindutan, kaya init lang siya
sa sulok at hindi pangalawang pulang bagay na nakikipag-agawan.
⚠ MAHINA PA RIN SILANG LAHAT (.40 pababa) AT MAY DAHILAN: nakaupo ang
wordmark dito. Ang malakas na kulay sa likod ng navy na titik ay
nagbabawas ng kontraste — ang puti ang nagbabasa sa pangalan, ang
kulay ang nag-aalis lang ng pagka-blangko.
⚠ `transform` ANG PAGGALAW AT HINDI `background-position`. Ang
`background-position` ay muling pagpinta ng buong kahon kada frame;
ang `transform` ay nasa compositor lang. Dalawampu't anim na segundo
ang isang ikot — hindi ito dapat mapansing gumagalaw, dapat lang
hindi mukhang nakapirming larawan. */
.pool::before{
content:"";position:absolute;inset:-12%;pointer-events:none;
background:
radial-gradient(42% 46% at 30% 32%, rgba(59,156,255,.40), rgba(59,156,255,0) 70%),
radial-gradient(38% 42% at 73% 60%, rgba(242,160,93,.34), rgba(242,160,93,0) 68%),
radial-gradient(33% 37% at 64% 25%, rgba(44,110,128,.25), rgba(44,110,128,0) 70%),
radial-gradient(30% 34% at 22% 76%, rgba(214,32,44,.15), rgba(214,32,44,0) 72%);
animation:poolDrift 26s ease-in-out infinite alternate;
}
@keyframes poolDrift{
from{transform:translate3d(-1.6%,-1.2%,0) scale(1)}
to {transform:translate3d(2%,1.6%,0) scale(1.06)}
}
/* ---- ANG SINAG MULA SA BUBUNGAN ----
⚠ NASA LITRATO MISMO ANG PINAGMULAN NITO. May skylight sa bubungan ng
bodega sa tatlo sa apat na litrato, at may bumabagsak na ilaw mula
roon. Ito ang pagpapatuloy niyon sa ibabaw ng puti — hindi imbentong
palamuti kundi ang liwanag na nasa larawan na.
⚠ `screen` ANG BLEND: nagpapaliwanag lang, hindi nagdadagdag ng puting
patong. Sa gitna kung saan puti na ay halos walang nangyayari; sa
madilim na gilid ng litrato doon siya nakikita — kaya sinag siya at
hindi guhit na nakapatong. */
.pool::after{
content:"";position:absolute;inset:-20% -10%;pointer-events:none;
background:
linear-gradient(101deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.52) 37%, rgba(255,255,255,0) 46%),
linear-gradient(97deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.34) 59%, rgba(255,255,255,0) 66%),
linear-gradient(104deg, rgba(255,255,255,0) 69%, rgba(255,255,255,.27) 74%, rgba(255,255,255,0) 80%);
mix-blend-mode:screen;
animation:poolRay 34s ease-in-out infinite alternate;
}
@keyframes poolRay{
from{transform:translate3d(-2%,0,0)}
to {transform:translate3d(2.4%,0,0)}
}
@media (prefers-reduced-motion:reduce){
.pool::before,.pool::after{animation:none}
}
/* ---- ANG BUTIL ----
⚠ ITO ANG PINAKAMALAKING SAGOT SA "TOO PLAIN OR WHITE". Ang puti ng
gitna ay hindi papel — PATAG SIYANG DIGITAL NA PUTI, iisang halaga
sa libo-libong pixel, at iyon ang nagmumukhang butas sa larawan.
Walang tunay na litrato ang ganoon: may butil ang bawat sensor.
Ang manipis na ingay na ito ang nagpapabalik sa puti sa larawan —
hindi mo siya makikitang butil, mararamdaman mo lang na may
TEKSTURA na ang dating blangko.
⚠ NASA SVG ANG INGAY, WALANG FILE. `feTurbulence` ang gumagawa nito sa
loob mismo ng CSS — walang dagdag na request, walang PNG na
ida-download bago pa maipinta ang hero. 160px ang tile at inuulit;
`stitchTiles` ang nag-aalis ng tahi sa gilid ng bawat ulit.
⚠ .075 ANG OPACITY AT MAY DAHILAN: sa .12 pataas ay hindi na butil
kundi DUMI — mukhang maruming screen o sirang litrato. Sa .04
pababa ay wala kang makikitang pinagkaiba. Ang .075 ang pinakamataas
na hindi mo mapapansin nang tahasan pero nararamdaman mo pa rin. */
/* ⚠ MAY MASK ANG BUONG PATONG, AT ITO ANG PINAKAMAHALAGANG LINYA RITO.
Huli ang .grain sa lahat ng anak ng .bg, kaya nakapatong siya PATI sa
punit na papel. Sa unang subok ay ganoon nga: naging kulay-melokoton
ang buong punit at naging lila ang navy — parang na-filter ang buong
ibaba. Ang butil at ang vignette ay para sa LITRATO; ang punit na
papel ay hindi litrato kundi hugis, at malinis siya dapat.
⚠ 62% ANG SIMULA NG PUNIT NOON, at doon nakatono ang 56%/74% dito.
Wala na ang punit (Set 1, 2026 — blade na siya), pero NANATILI ang
mask at may bagong dahilan: nasa dulong-ibaba ang blade, at ang
butil sa ibabaw ng malinis na gradient ay kitang-kita bilang dumi.
Kapag may magbabago ng taas ng blade, ITO ANG TALA. */
.grain{position:absolute;inset:0;pointer-events:none;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 74%);
mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 74%)}
.grain::before{
content:"";position:absolute;inset:0;opacity:.075;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px;
}
/* ---- ANG VIGNETTE AT ANG INIT SA PAANAN ----
⚠ DALAWANG TRABAHO, IISANG PATONG.
1. ANG GILID: bahagyang pinalalalim ang apat na sulok. Kapag pantay
ang liwanag mula gilid hanggang gitna ay walang HUGIS ang eksena
— plat siya. Sa may vignette ay nagiging SINISINAGAN NA LUGAR ang
gitna, at iyon ang dahilan kung bakit maputi siya. Hindi na siya
blangko; siya na ang pinakamaliwanag na bahagi ng isang bodega.
2. ANG PAANAN: mainit na kraft na sinag sa dulong-ibaba. Doon
nagtatagpo ang litrato at ang punit na papel, at magkaibang mundo
ang dalawa — litrato sa itaas, guhit na navy sa ibaba. Ang init
na ito ang tulay: dumidilim ang litrato papuntang kulay-karton
bago pa umabot sa punit, kaya hindi na parang basta pinutol.
⚠ NAVY ANG ILIM AT HINDI ITIM. Ang itim na vignette ay nagiging
kulay-abo ang litrato — mukhang maruming lente. Ang navy ay nasa
palette na (ang mismong punit, ang wordmark), kaya ang paglalim ay
nagmumukhang LILIM NG SARILING KULAY at hindi dagdag na dumi. */
.grain::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(128% 116% at 50% 38%,
rgba(20,44,86,0) 44%, rgba(20,44,86,.06) 72%, rgba(20,44,86,.15) 100%),
linear-gradient(180deg,
rgba(242,160,93,0) 40%, rgba(242,160,93,.15) 62%, rgba(242,160,93,0) 76%);
}
/* ---- ANG ALIKABOK SA SINAG ----
⚠ TOTOO ITO SA LARAWAN, HINDI PALAMUTI. May skylight sa bubungan sa
tatlo sa apat na litrato. Kung saan may sinag na bumabagsak sa
bodega ay may lumulutang na alikabok doon — iyon mismo ang nakikita
mo kapag may tumagos na araw sa isang bintana. Wala nito ang gitna
dahil PINUTI natin siya, hindi dahil walang hangin doon.
⚠ SIYAM LANG SILA AT NASA GILID ANG KARAMIHAN. Nasa 30–70% ng lapad
ang wordmark at ang dalawang pindutan; anumang gumagalaw sa likod
ng binabasa ay nakakaabala gaano man kalabo. Nasa kaliwa, sa kanan,
at sa taas ng badge ang siyam — sa hangin, hindi sa teksto.
⚠ PAAKYAT SILA AT HINDI PABAGSAK. Ang alikabok sa sinag ay tumataas —
init ng bodega ang nagtutulak. Ang pabagsak ay niyebe, at hindi
iyon ang eksena.
⚠ WALANG SIMULA AT WALANG DULO ANG NAKIKITA: naglalaho sila sa
dalawang dulo ng ikot (`opacity:0` sa 0% at 100%). Kung hindi, may
siyam na tuldok na bigla na lang sumusulpot sa ibaba at bigla na
lang nawawala sa taas kada ikot — at iyon ay hindi na hangin kundi
animasyon. Iba-iba ang `--dl` kaya hindi sila sabay-sabay. */
/* ⚠ .specks AT HINDI .dust — MAY .dust NA (linya 575, ang usok ng
trak). Nauna kong tinawag itong .dust at nasira ang usok: mas mataas
ang specificity ng `.dust i` (0,1,1) kaysa sa `.puff` (0,1,0), kaya
ang siyam na usok ay kumuha ng ibang animasyon at ibang hugis.
Kapag magdaragdag ng bagong klase rito, hanapin muna ang pangalan sa
buong file — pitong libong linya siya at hindi mo matatandaan lahat. */
.specks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.specks i{
position:absolute;left:var(--l);top:var(--t);
width:var(--s);aspect-ratio:1;border-radius:50%;
background:radial-gradient(closest-side,
rgba(255,255,255,.95), rgba(222,238,255,.42) 56%, transparent 76%);
opacity:0;
animation:speckRise var(--d) linear var(--dl) infinite;
}
@keyframes speckRise{
0% {transform:translate3d(0,10vh,0) scale(.65);opacity:0}
16% {opacity:var(--o)}
78% {opacity:var(--o)}
100%{transform:translate3d(var(--ax),-13vh,0) scale(1.2);opacity:0}
}
/* Sa reduced-motion ay hindi sila itinatago — pinatitigil lang, at
pinapakita sa kanilang lugar. Ang paggalaw ang hiniling na tanggalin,
hindi ang tekstura. */
@media (prefers-reduced-motion:reduce){
.specks i{animation:none;opacity:var(--o)}
}
/* ---- the truck ---- */
.streaks{position:absolute;right:86%;top:16%;width:190%;height:62%;pointer-events:none;
animation:calmDown 1.1s ease 2.65s forwards}
@keyframes calmDown{to{opacity:.32}}
.streak{position:absolute;right:0;height:var(--h);width:var(--w);border-radius:99px;
background:var(--c);transform-origin:right center;opacity:0;
animation:whoosh var(--dur) cubic-bezier(.35,0,.6,1) infinite;animation-delay:var(--d)}
@keyframes whoosh{
0%{transform:translateX(46%) scaleX(.12);opacity:0}
18%{opacity:var(--o)}
62%{opacity:var(--o)}
100%{transform:translateX(-170%) scaleX(1);opacity:0}
}
/* Ang logo lang ang nasa daloy dito, kaya siya ang nasa gitna. Dumadaan
lang ang trak — wala ito sa daloy at hindi kumakain ng lapad. */
.lockup{position:relative;display:grid;justify-items:center}
/* ---- ANG DAAN NG TRAK ----
Ang wordmark LANG at ang trak ang nasa loob nito. Ito ang saligan ng
`.rig`, kaya ang `top:50%` niyon ay ang gitna mismo ng titik.
⚠ ANG BUG NA INAYOS NITO (Ago 10, 2026): nasa `.lockup` ang trak noon,
at kasama roon ang badge sa itaas. Ibig sabihin, ang gitna ng
sinusukat ay ang gitna ng BADGE+LOGO — sinukat sa 390px: nasa
y 289–352 ang trak samantalang nasa y 302–401 ang logo. Kalahati
lang ng titik ang nadadaanan, 13px itong nakalampas sa itaas ng
logo, at 7px pang pumapasok sa badge. Hindi ito trak na dumadaan sa
pangalan — sticker itong nakadikit sa itaas na gilid.
Walang `overflow` dito: dumadaan ang trak mula labas hanggang labas. */
.lane{position:relative;display:block}
/* ---- ANG PAGDAAN NG TRAK ----
Mula sa labas ng kaliwa, tuloy-tuloy hanggang sa labas ng kanan.
⚠ HINDI NA NIYA BINUBUNYAG ANG LOGO (Set 2, 2026). Siya ang
nagbubukas ng pangalan noon sa pamamagitan ng `mask`; TATAK na
ngayon ang pagdating — tingnan ang `.logo` at ang `stampIn`.
NAIWAN PA RIN SIYA BILANG ORASAN: pagkalampas ng buntot niya sa
kanang gilid ng pangalan ay doon bumabagsak ang tatak (seksyon 1
ng main.js). Dumaan ang trak, tapos tinatakan ang pangalan.
`linear`: sasakyan ito, at walang dahilan para bumagal sa gitna.
`both`, HINDI `forwards`. Ito ang naging bug: sa loob ng .45s na
paghihintay ay wala pang tinutupad na keyframe ang `forwards` — ang
`left:50%; top:50%` lang ang tumatakbo, walang `transform`. Ibig
sabihin, nakaparada ang trak sa gitna mismo ng logo bago pa man
umandar, at sa unang tingin pa lang ay nakabungad na siya sa gitna.
Nakikita rin iyon ng rAF sa main.js, kaya kalahati agad ang bukas ng
logo — tapos biglang lulundag pabalik sa sarado pagsapit ng .45s.
Ang `both` ay humahawak sa UNANG keyframe habang naghihintay (labas ng
kaliwa) at sa HULI pagkatapos (labas ng kanan).
Nasa loob ng keyframe ang -50% na paggitna, kung hindi ay bubura ito ng
`transform` ng animation. */
.rig{
position:absolute;left:50%;top:50%;z-index:6;
width:clamp(126px,20.5vw,296px);pointer-events:none;
/* `--span` para may iisang pihitan sa layo ng biyahe. Hindi ito
ini-animate, kaya nareresolba ito nang maayos sa loob ng keyframe. */
--span:118vw;
animation:driveThru 3.4s linear .45s both;
}
@keyframes driveThru{
from{transform:translate(-50%,-50%) translateX(calc(-1 * var(--span)))}
to {transform:translate(-50%,-50%) translateX(var(--span))}
}
/* ⚠⚠ ITINATAGO ANG TRAK KAPAG NAKALABAS NA SIYA (Set 9, 2026).
Nasa `translateX(118vw)` siya pagkatapos ng 3.85s — nasa labas na
ng screen, pero NAKAILAW PA RIN ANG APAT NIYANG ANIMATION:
roll .62s ang dalawang gulong, walang hanggan
idle 1.25s ang katawan
jig 1.25s ang tatlong karton
puff ang alikabok sa gulong
Habambuhay silang tumatakbo para sa isang bagay na wala nang
nakakakita. SVG sila, kaya bawat ikot ay bagong raster.
⚠ SA LAHAT NG APARATO ITO, hindi lang sa cellphone. Walang
nawawalang nakikita — tapos na ang biyahe bago pa ito tumama.
▶ Nasa seksyon 1 ng main.js ang nagkakabit ng `is-tapos`. */
.rig.is-tapos{display:none}
.rig__svg{width:100%;height:auto;display:block;
filter:drop-shadow(0 18px 22px rgba(31,66,128,.2))}
.truck-body{animation:idle 1.25s ease-in-out infinite;transform-origin:50% 92%}
@keyframes idle{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-3px) rotate(-.22deg)}72%{transform:translateY(2px) rotate(.22deg)}}
.wheel{animation:roll .62s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes roll{to{transform:rotate(360deg)}}
.crate{animation:jig 1.25s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.crate--b{animation-delay:.13s}
.crate--c{animation-delay:.26s}
@keyframes jig{0%,100%{transform:translateY(0)}42%{transform:translateY(-3.5px)}}
/* Dumadaan lang ang trak at `pointer-events:none` na ito, kaya wala nang
hover — palagi nang bukas ang sinag. */
.beam{opacity:.4}
.dust{position:absolute;left:0;bottom:4%;width:60%;height:44%;pointer-events:none;z-index:-1}
.puff{position:absolute;bottom:0;border-radius:50%;background:var(--gray);
animation:puff var(--dur) ease-out infinite;animation-delay:var(--d);opacity:0}
@keyframes puff{
0%{transform:translate3d(0,0,0) scale(.3);opacity:.45}
100%{transform:translate3d(-90px,-42px,0) scale(1.6);opacity:0}
}
/* ---- props ---- */
.props{position:absolute;inset:0;z-index:2;pointer-events:none}
.prop{
position:absolute;left:var(--l);top:var(--t);width:var(--w);opacity:0;pointer-events:auto;cursor:pointer;
animation:propIn .9s var(--ease) forwards, drift var(--dur) ease-in-out infinite;
animation-delay:var(--in), calc(var(--in) + .9s);
filter:drop-shadow(0 12px 16px rgba(31,66,128,.15));transition:filter .35s ease;
}
.prop svg{width:100%;height:auto;display:block;transition:transform .4s var(--back)}
@media (hover:hover){ .prop:hover{filter:drop-shadow(0 20px 26px rgba(31,66,128,.26))} .prop:hover svg{transform:translateY(-7px) scale(1.07)} }
@keyframes propIn{from{opacity:0;transform:translateY(22px) rotate(var(--r)) scale(.9)}to{opacity:1;transform:translateY(0) rotate(var(--r)) scale(1)}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-14px) rotate(calc(var(--r) + 2.5deg))}}
/* ---- centre ---- */
.core{position:relative;z-index:5;display:grid;justify-items:center;text-align:center;padding:0 22px}
/* ---- ANG LOGO SA HERO ----
Larawan na ito, hindi na teksto. Iginuhit ang wordmark ng TapeMate at
walang font na kayang tumularan — tingnan ang assets/logo/README.txt.
⚠⚠ WALA NANG PAWI NG TRAK DITO (Set 2, 2026). Hiling ni Kylie:
"stamp-in logo reveal — this is the transition u need to do."
`mask-image` na sinusundan ang buntot ng trak ito noon: unti-unti
siyang bumubukas mula kaliwa habang dumadaan ang sasakyan. Maganda
siya, pero PAWI iyon at hindi TATAK — lumilitaw ang pangalan mula
sa gilid, hindi bumabagsak mula sa itaas.
Bumabagsak na siya ngayon: 1.3x ang laki, -3.6deg ang pihit,
hindi pa nakikita — at sa loob ng 253ms ay tumatama siya sa
pahina. Tingnan ang `stampIn` sa ibaba.
⚠ NANATILI ANG TRAK AT ANG BUONG PAGSUKAT SA KANIYA. Siya pa rin
ang nagsasabi KUNG KAILAN — pagkalampas ng buntot niya sa kanang
gilid ng pangalan ay doon bumabagsak ang tatak. Kaya buhay pa rin
ang kuwento: dumaan ang trak, tapos tinatakan ang pangalan.
⚠ MGA 0.4s NA LANG ANG DAGDAG NA BLANGKO SA GITNA, at hindi buong
2.5s. Nagsisimulang lumitaw ang pangalan sa PAGBAGSAK — 253ms bago
pa tumama. Ang lumang pawi naman ay nagsisimula kapag nalampasan ng
buntot ang KALIWANG gilid, kaya mas maaga siya nang isang lapad ng
logo. Bahagi ng biyahe ng trak ang pagkakaiba, hindi nakapirming
bilang — kaya pareho silang gumagalaw kapag mabagal ang linya.
⚠ WALA NANG `--wipe` AT `--fx`, at wala na ring sinusulat na
custom property ang JS kada frame. Ang `--wipe` ay binabasa lang
ng mask na ito; kapag naiwan siya ay patay na kodigo na mukhang
buhay. Tinanggal na rin sa main.js at sa useHero.ts.
▶ PAGBABALIK NG PAWI: ibalik ang `--wipe:0; --fx:7%` at ang
dalawang `mask-image` dito, ang `.logo.done{mask-image:none}`,
at ang `buksan()` sa seksyon 1 ng main.js. */
.logo{
position:relative;display:block;cursor:pointer;
width:clamp(230px,44vw,640px);
filter:drop-shadow(0 8px 18px rgba(31,66,128,.13));
transition:transform .4s var(--back),filter .4s ease;
}
/* ⚠ DITO NAKATAGO ANG PANGALAN BAGO ANG TATAK, at nasa `.logo__img`
siya at hindi sa `.logo`: ang `.logo` ang may hover na `transform`,
at ang animation ay nakakalusot sa karaniwang deklarasyon — kapag
doon inilagay ang tatak ay mawawala ang hover habang tumatakbo.
⚠ Ang `.done` ay galing sa JS. Kung hindi tatakbo ang JS ay mananatili
siyang nakatago — kaya nandiyan ang `setTimeout(tapos, 4200)` bilang
lambat. Ganoon din ang panganib ng lumang `--wipe:0`. */
.logo:not(.done) .logo__img{opacity:0}
.logo__img{display:block;width:100%;height:auto}
@media (hover:hover){ .logo:hover{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 16px 26px rgba(31,66,128,.22))} }
/* ⚠⚠ ANG BUONG PAGDATING NG PANGALAN AY TATAK NA (Set 2, 2026).
Dalawang patong ng IISANG hampas, sabay na nagsisimula:
`stampIn` sa MARKA — bumabagsak, tumatama, pumipisa
`stampPress` sa IBABAW — umuurong ang lockup sa tama
Iisang klase lang (`.is-hit`) ang nagpapatakbo sa dalawa, kaya
imposible silang mag-iba ng oras.
1.15s ang buong tatak, at hati siya sa dalawa:
0 -> 22% (0-253ms) PAGBABA — ang marka lang ang gumagalaw
22% pataas (253-1150ms) HAMPAS, DIIN, PAGKUPAS
Kaya tahimik ang `stampPress` hanggang 21%: walang dahilan para
yumanig ang ibabaw bago pa may tumama dito.
⚠ 1.3x LANG ANG SIMULANG LAKI, at may sukat iyon. Sa 390px na
cellphone ay 296px ang logo; ang 1.3x ay 385px — kasya pa sa
screen. Sa 1.4x ay puputulin na ang magkabilang dulo ng wordmark
habang bumababa, at hindi na iyon tatak kundi sira.
⚠ WALANG `blur` DITO KAHIT SIYA ANG PINAKAMADALING PAMPABILIS NG
DATING. Dalawang dahilan: may sariling `filter` na `drop-shadow`
ang `.logo__img` sa loob ng isang media query sa seksyon 2 —
mabubura siya habang tumatakbo at biglang babalik sa dulo; at ang
`blur` sa 640px na larawan ay ipinipinta ng CPU kada frame. Ang
`transform` at `opacity` lang ang ginamit — pareho silang
compositor-only.
▶ Kapag pinalitan ang `1.15s`, PALITAN DIN ANG 1200 SA JS (seksyon 1
ng main.js at ang useHero.ts). Doon tinatanggal ang `.is-hit`;
kapag mas maikli iyon ay puputulin ang tatak sa kalagitnaan at
lulundag ang lahat pabalik. */
.lockup.is-hit{animation:stampPress 1.15s both;will-change:transform}
.lockup.is-hit .logo__img{
animation:stampIn 1.15s both;
transform-origin:50% 88%;will-change:transform,opacity;
}
/* ---- ANG TATAK: ANG MARKA ----
`50% 88%` ang `transform-origin` — malapit sa PAA ng titik. Doon
nakasalalay ang dalawang bagay nang sabay: pababa siyang lumiliit
patungo sa linyang iyon habang bumabagsak (kaya galing siya sa
ITAAS), at doon din siya pumipisa kapag tumama. Kung nasa gitna ito
ay lumulubog ang buong pangalan sa halip na maipit sa ibabaw.
⚠ MAY BAYAD ANG PAGPISA. Ang `scaleY(.968)` ay sinasagot ng
`scaleX(1.016)` — 1/sqrt(.968) = 1.0164. Ganoon kumikilos ang
bagay na may laman: kapag piniga pababa ay lumalapad. Kung
`scaleY` lang ang babaguhin ay lumiliit na larawan ang dating,
hindi goma.
⚠ HULING SUMISIKAT ANG `opacity`: 0 -> .16 -> 1. Sa huling 138ms
lang siya lumilitaw nang buo — sa mismong pagbagsak. Kaya
SUMUSULPOT ang marka sa sandali ng tama at hindi dahan-dahang
kumukupas papasok. Iyon ang pagkakaiba ng tatak sa fade.
⚠ PAREHO ANG LISTAHAN NG FUNCTION SA BAWAT KEYFRAME
(`translateY scaleX scaleY rotate`). Kapag hindi magkatugma ang
listahan ay ginagawa ng browser ang buong matrix bago mag-
interpolate, at doon nawawala ang malinis na pagpisa. */
@keyframes stampIn{
0% {opacity:0; transform:translateY(-16px) scaleX(1.3) scaleY(1.3) rotate(-3.6deg);
animation-timing-function:cubic-bezier(.45,.02,.78,.32)}
10% {opacity:.16; transform:translateY(-11px) scaleX(1.2) scaleY(1.2) rotate(-2.7deg);
animation-timing-function:cubic-bezier(.62,0,.86,.34)}
22% {opacity:1; transform:translateY(0) scaleX(1.016) scaleY(.968) rotate(-.32deg);
animation-timing-function:linear}
29% {opacity:1; transform:translateY(0) scaleX(1.0164) scaleY(.9676) rotate(-.3deg);
animation-timing-function:linear}
34% {transform:translateY(0) scaleX(1.0132) scaleY(.9738) rotate(-.26deg);
animation-timing-function:cubic-bezier(.3,1.45,.5,1)}
48% {transform:translateY(0) scaleX(.9948) scaleY(1.0104) rotate(.12deg)}
60% {transform:translateY(0) scaleX(1.002) scaleY(.996) rotate(-.045deg)}
71% {transform:translateY(0) scaleX(.9992) scaleY(1.0016) rotate(.018deg)}
82% {transform:translateY(0) scaleX(1.0003) scaleY(.9994) rotate(-.006deg)}
100%{opacity:1; transform:translateY(0) scaleX(1) scaleY(1) rotate(0deg)}
}
/* ---- ANG TATAK: ANG IBABAW NA TINAMAAN ----
Isang DAMPED OSCILLATION ito at hindi paikot-ikot na animation. Ang
lakas ng bawat pag-ugoy ay mga 38% ng nauna sa kaniya:
7.4 -> 2.7 -> 1.05 -> .4 -> .15 -> 0
Iyon ang hitsura ng tunay na bagay na humihinto sa paggalaw. Kapag
pantay-pantay ang mga bilang ay hindi na hampas ang dating kundi
nagbabalik-balik na kumpas.
⚠ TAHIMIK SIYA HANGGANG 21%. Bumabagsak pa lang ang marka noon —
walang dahilan para gumalaw ang ibabaw bago may tumama dito. Ang
`.lockup` ay kinabibilangan ng badge ni Boss RDR at ng trak, kaya
ang maagang yanig ay nagmumukhang ginalaw ang KAMERA.
⚠ NASA LOOB NG KEYFRAME ANG EASING, at doon nakasalalay ang lahat.
Tatlong magkakaibang pisika ang isang tatak:
21 -> 25% PAGBABA pabilis (`.6,0,.85,.35`) — bumabagsak siya
25 -> 36% DIIN halos tuwid — HAWAK, hindi tumatalbog
36% pataas ANGAT pabalik nang may sobra (`.3,1.45,.5,1`)
ANG DIIN ANG BUONG KONSEPTO. Ang tumatalbog agad mula sa
pinakamalalim ay bola; ang hinahawakan muna bago iniangat ay tatak.
⚠ PALIIT ANG `scale` SA HAMPAS AT HINDI PALAKI. Umuurong ang ibabaw
palayo sa iyo kapag may dumiin dito, hindi lumulundag palapit.
⚠ MAY -.32deg NA PIHIT. Walang kamay na tuwid na tuwid magtatak.
Nasa 3.5px lang iyon sa 640px na lapad — hindi mo mabibilang,
mararamdaman mo lang na may kumilos. */
@keyframes stampPress{
0% {transform:translateY(0) scale(1) rotate(0deg)}
21% {transform:translateY(0) scale(1) rotate(0deg);
animation-timing-function:cubic-bezier(.6,0,.85,.35)}
25% {transform:translateY(7.2px) scale(.9916) rotate(-.3deg);
animation-timing-function:linear}
31% {transform:translateY(7.4px) scale(.9912) rotate(-.32deg);
animation-timing-function:linear}
36% {transform:translateY(6.7px) scale(.9925) rotate(-.28deg);
animation-timing-function:cubic-bezier(.3,1.45,.5,1)}
50% {transform:translateY(-2.7px) scale(1.0033) rotate(.13deg)}
62% {transform:translateY(1.05px) scale(.9987) rotate(-.05deg)}
73% {transform:translateY(-.4px) scale(1.0005) rotate(.02deg)}
84% {transform:translateY(.15px) scale(.9998) rotate(-.007deg)}
100%{transform:translateY(0) scale(1) rotate(0deg)}
}
/* ---- ANG REKOMENDASYON NI BOSS RDR ----
Nasa itaas ng wordmark. Sumusulpot ito bago pa ang tagline (2.42s laban
sa 2.72s) dahil pagkilala ito: nauuna ang "sino ang nagsabi" bago ang
"ano ang sinabi".
`backwards` at hindi `forwards` — para hawak nito ang unang keyframe
habang naghihintay, kaya `opacity:0` ito mula sa unang pinta. Kung
`forwards`, sasandali itong buo bago maglaho, at tatalon ang layout. */
.rec{
display:inline-flex;align-items:center;gap:10px;
margin-bottom:clamp(14px,2.4vh,24px);
padding:6px 8px 6px 6px;border-radius:999px;text-decoration:none;
/* Parehong salamin ng header pill — magkapatid sila sa parehong
tanawin, at dapat pareho ang lalim nila sa mata. */
background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(240,246,255,.66));
border:1.4px solid rgba(255,255,255,.9);
box-shadow:
0 16px 34px -18px rgba(31,66,128,.6),
0 2px 8px -6px rgba(31,66,128,.26),
inset 0 1px 0 rgba(255,255,255,1);
backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
animation:up .9s var(--ease) 2.42s backwards;
transition:transform .3s var(--back),box-shadow .3s ease,border-color .3s ease;
}
@media (hover:hover){ .rec:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(31,66,128,.5);border-color:var(--line)} }
.rec__pic{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;display:block}
.rec__pic svg,.rec__pic img{width:100%;height:100%;display:block;object-fit:cover}
.rec__col{display:grid;gap:1px;text-align:left}
/* Limang bituin sa itaas ng pangalan. Ito ang unang nakikita — mas
mabilis mabasa ang hugis kaysa sa salitang "rekomendado". */
.rec__stars{display:flex;gap:1.5px;color:var(--kraft-deep);line-height:0}
/* ---- ANG PAGPASOK NG LIMANG BITUIN ----
Dalawang animation ang magkapatong sa bawat bituin:
starPop isang beses lang, pagsulpot ng badge. Mula sa wala,
lumalampas sa 1.35 bago bumalik sa 1 — iyon ang tumbok.
Magkakaiba ng 90ms ang lima, kaya IISA-ISA silang
lumalabas mula kaliwa, hindi sabay-sabay na kisap.
starShine paulit-ulit. Maiksing liwanag na tumatakbo mula kaliwa
pakanan tuwing 4.2s. Nasa 82%–90% lang ng bawat siklo ang
liwanag, kaya tahimik ito nang matagal at biglang
dumadaan — kung mas mahaba, nagiging pumipikit na ilaw.
Magkaibang haba ang stagger ng dalawa (.09s at .12s), kaya hindi
magkasabay ang alon at ang pagpasok.
`backwards` sa starPop: wala pa ito bago ang delay, kaya walang
bituing sumusulpot nang maaga sa badge.
⚠ Hindi `:nth-child(n)` na may formula ang delay — hiwalay ang lima.
Mas mahaba nga, pero nakikita mo ang bawat bilang at hindi mo na
kailangang isaisip ang formula kapag binago ang bilis. */
.rec__stars svg{
width:11px;height:11px;display:block;
animation:starPop .52s var(--back) backwards,
starShine 4.2s ease-in-out infinite;
}
.rec__stars svg:nth-child(1){animation-delay:2.62s, 3.40s}
.rec__stars svg:nth-child(2){animation-delay:2.71s, 3.52s}
.rec__stars svg:nth-child(3){animation-delay:2.80s, 3.64s}
.rec__stars svg:nth-child(4){animation-delay:2.89s, 3.76s}
.rec__stars svg:nth-child(5){animation-delay:2.98s, 3.88s}
@keyframes starPop{
0% {opacity:0;scale:.2;rotate:-45deg}
55% {opacity:1;scale:1.35;rotate:10deg}
100%{opacity:1;scale:1;rotate:0deg}
}
@keyframes starShine{
0%,78%,100%{color:var(--kraft-deep);filter:none;scale:1}
85% {color:#FFC46B;filter:drop-shadow(0 0 5px rgba(255,180,70,.95));scale:1.22}
}
/* When the badge is touched the wave runs again, faster — an answer to the
finger and not only decoration.
⚠ THE ANIMATION LIST MUST KEEP BOTH NAMES HERE. Only the times may
change. This rule used to read `animation:starShine 1.5s ease-in-out
infinite`, which dropped `starPop` off the list — and dropping a name
CANCELS that animation. So the moment the pointer left the badge,
`starPop` was built again from zero, and with its 2.62s delay and
`backwards` fill THE FIVE STARS WENT BLANK FOR 2.6 SECONDS. Every
hover. Fixed Aug 19, 2026 — *"nawawala yung stars nya"*.
▶ `animation-duration` and `animation-delay` do NOT restart anything —
they only change the clock an already-running animation is read
against. `starPop` finished seconds ago, so it stays finished. That
is the only reason these are written out as separate properties
instead of the shorthand.
The FIRST value of every pair is starPop's and is repeated unchanged
from the rule above; the SECOND is starShine's and is the one doing the
work. Drop a first value and the shorthand-cancel bug is back. */
.rec:focus-visible .rec__stars svg{animation-duration:.52s, 1.5s}
@media (hover:hover){ .rec:hover .rec__stars svg{animation-duration:.52s, 1.5s} .rec:hover .rec__stars svg:nth-child(1){animation-delay:2.62s, 0s} .rec:hover .rec__stars svg:nth-child(2){animation-delay:2.71s, .07s} .rec:hover .rec__stars svg:nth-child(3){animation-delay:2.80s, .14s} .rec:hover .rec__stars svg:nth-child(4){animation-delay:2.89s, .21s} .rec:hover .rec__stars svg:nth-child(5){animation-delay:2.98s, .28s} }
.rec__txt{
font-family:var(--display);font-weight:600;font-size:clamp(11.5px,1.05vw,13.5px);
letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;
}
/* ---- ANG MARKA SA PANGALAN ----
Gintong highlighter sa likod ng "Boss RDR", pumapahid mula kaliwa
pagkatapos ng huling bituin (2.98s + .52s = 3.50s). Iyon ang huling
kilos sa hero, kaya may hantungan ang buong pagkakasunod.
Sinukat: ang ginto sa .42–.62 sa ibabaw ng puti ay #F9D4B6, at 7.04:1
ang navy sa ibabaw niyon — hindi ito nagpapahina sa pagbabasa,
pinapatingkad lang.
`box-decoration-break:clone` — kung mahati sa dalawang linya ang
pangalan sa makitid na salamin, tig-isang marka ang bawat linya at
kasinghaba lang ng teksto roon. Kung wala ito, isang mahabang guhit
ang aabot sa buong lapad ng kahon. */
.rec__txt b{
font-weight:800;color:var(--navy);
padding:1px 4px;margin:0 -2px;border-radius:3px;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
background-image:linear-gradient(180deg,rgba(242,160,93,.42),rgba(242,160,93,.62));
background-repeat:no-repeat;background-position:0 100%;background-size:0 100%;
animation:recMark .75s var(--ease) 3.5s forwards;
}
@keyframes recMark{to{background-size:100% 100%}}
.rec__go{width:15px;height:15px;flex:none;color:var(--red);transition:transform .3s var(--back)}
@media (hover:hover){ .rec:hover .rec__go{transform:translateX(3px)} }
.tag{
font-family:var(--display);font-weight:600;color:var(--navy);
font-size:clamp(15px,1.95vw,27px);line-height:1.3;letter-spacing:-.01em;
margin-top:clamp(18px,3.2vh,34px);
animation:up .9s var(--ease) 2.72s backwards;
}
.tag em{font-style:normal;color:var(--navy-soft)}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
/* ---- ANG DALAWANG PINTO ----
Magkatabi sila sa cellphone, hindi magkapatong: maikli ang dalawang
label at masikip ang hero sa taas, kaya ang isang hilera ang tama. */
.hacts{
display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(8px,1.1vw,14px);margin-top:clamp(18px,3vh,32px);
animation:up .9s var(--ease) 2.84s backwards;
}
.hacts .btn{font-size:clamp(13px,1.1vw,15px);padding:12px 20px}
.icons{display:flex;gap:clamp(8px,1.05vw,13px);margin-top:clamp(16px,2.6vh,30px)}
.ic{
width:clamp(33px,3.1vw,42px);aspect-ratio:1;border-radius:50%;text-decoration:none;
display:grid;place-items:center;background:var(--navy);color:#fff;border:0;cursor:pointer;
animation:icIn .6s var(--back) backwards;animation-delay:var(--d);
transition:background .28s ease,transform .3s var(--back),box-shadow .3s ease;
box-shadow:0 6px 12px -6px rgba(31,66,128,.5);
}
@media (hover:hover){ .ic:hover{background:var(--red);transform:translateY(-5px) scale(1.1);box-shadow:0 12px 20px -8px rgba(217,4,41,.7)} }
.ic:active{transform:translateY(-2px) scale(1.04)}
.ic svg{width:46%;height:46%;display:block;transition:transform .3s var(--back)}
@media (hover:hover){ .ic:hover svg{transform:scale(1.12)} }
@keyframes icIn{from{opacity:0;transform:translateY(12px) scale(.85)}}
/* Pula na, dating navy. Asul ang dulong-ibaba ng hero — punit na papel
siya noon, blade na siya mula Set 1 2026 — at nawawala ang navy sa
navy. Kitang-kita ang pula sa asul at sa puti, kaya iisang kulay ang
gumagana sa dalawang panig ng gilid.
⚠ NASA LOOB NG BLADE SIYA NGAYON (42px mula sa dulo; 52px ang kapal ng
blade sa gitna). Sinasadya at nasukat: dalawang pixel siyang pula sa
asul, at doon din siya nakatayo noong punit pa ang ibaba. */
.cue{
position:absolute;left:50%;bottom:clamp(16px,2.6vh,28px);z-index:7;translate:-50% 0;
width:2px;border-radius:2px;height:clamp(20px,3vh,30px);background:var(--red);transform-origin:top;
opacity:0;animation:soft .9s ease 3.5s forwards,cue 3.4s ease-in-out 3.9s infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:.9}}
/* ================= 4. UI KIT ================= */
.wrap{width:min(1180px,100% - 44px);margin-inline:auto}
.sec{position:relative;padding:clamp(64px,9vh,118px) 0;overflow:hidden}
.sec--paper{background:var(--paper)}
.sec--cream{background:var(--cream)}
.sec--kraft{background:var(--kraft-paper)}
/* Ang tanging MALAMIG na lupa ng pahina — papel, krema at buhangin ang
lahat ng iba, at mainit silang tatlo. Ginagamit ng #dealership: iyon
ang pinaka-hiwalay na alok sa buong pahina (hindi produkto kundi
pakikipagsosyo), at ang lamig ang naghihiwalay nito nang hindi
bumabalik sa navy. */
.sec--sky{background:#EDF4FD}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(-24deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px);
}
.sec > *{position:relative;z-index:1}
/* torn divider */
/* ⚠ WALA NANG PUNIT NA TAHI SA PAHINA (Ago 12, 2026 — *"remove the
concept of this straight line nalang lahat"*). Anim na `