/* ============================================================
TINY LENS — Home Page Enhancement Layer
Scoped entirely under body.page-home so it never touches
services / portfolio / about / contact pages, which share
the same base css/style.css.
Adds: rounded geometry, glassmorphism, hover glow + zoom,
ambient depth, and smoother, consistent easing — homepage only.
============================================================ */
body.page-home{
--r-lg: 22px;
--r-md: 16px;
--r-sm: 10px;
--r-xs: 6px;
--glow: rgba(198,165,117,.55);
--glass-fill: rgba(255,253,247,.5);
--glass-fill-dark: rgba(24,17,11,.42);
--glass-border: rgba(255,255,255,.35);
--ease-smooth: cubic-bezier(.22,.68,0,1);
}
/* ---------------- Global smoothing ---------------- */
body.page-home a,
body.page-home button,
body.page-home .btn,
body.page-home img{
transition:transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth),
border-color .4s var(--ease-smooth), background-color .4s var(--ease-smooth),
opacity .4s var(--ease-smooth), filter .5s var(--ease-smooth);
}
body.page-home *{ backface-visibility:hidden; }
/* ---------------- Rounded geometry everywhere ---------------- */
body.page-home .btn{ border-radius:999px; }
body.page-home .hero-media,
body.page-home .frame-media,
body.page-home .cat-band,
body.page-home .cat-media,
body.page-home .tilt-card,
body.page-home .testi-card,
body.page-home .masonry-item,
body.page-home .split-feature,
body.page-home .split-tab,
body.page-home .feature-chip,
body.page-home .hero-stats,
body.page-home .mega-panel,
body.page-home .newsletter,
body.page-home .cta-band .hero-media{
border-radius:var(--r-lg);
overflow:hidden;
}
body.page-home .split-tab,
body.page-home .newsletter{ border-radius:var(--r-md); }
body.page-home .tags span,
body.page-home .frame-tag,
body.page-home .filter-pill,
body.page-home .footer-social a{ border-radius:var(--r-xs); }
body.page-home .footer-social a{ border-radius:50%; }
body.page-home .cat-band{ border-radius:var(--r-lg); }
body.page-home .cat-band .cat-media{ border-radius:0; }
/* ---------------- Ambient depth: soft blurred colour washes ---------------- */
body.page-home .bg-beige,
body.page-home .bg-paper{ position:relative; overflow:hidden; }
body.page-home .bg-beige::before,
body.page-home .bg-paper::before{
content:''; position:absolute; inset:-10% -10% auto -10%; height:70%;
background:
radial-gradient(480px 320px at 12% 18%, rgba(198,165,117,.16), transparent 70%),
radial-gradient(560px 380px at 88% 8%, rgba(156,122,69,.12), transparent 70%);
filter:blur(10px); pointer-events:none; z-index:0;
}
body.page-home .bg-beige > .container,
body.page-home .bg-paper > .container{ position:relative; z-index:1; }
/* ---------------- Header / nav glass polish ---------------- */
body.page-home .site-header.scrolled{
background:rgba(250,246,238,.72);
backdrop-filter:blur(20px) saturate(1.5);
-webkit-backdrop-filter:blur(20px) saturate(1.5);
box-shadow:0 8px 30px -18px rgba(20,13,8,.35);
}
body.page-home .mega-panel{
background:rgba(255,253,249,.82);
backdrop-filter:blur(22px) saturate(1.6);
-webkit-backdrop-filter:blur(22px) saturate(1.6);
border:1px solid var(--glass-border);
border-top:none;
}
/* ---------------- Hero: clear space for the floating stats bar ---------------- */
body.page-home .hero-inner{ padding-bottom:176px; }
@media (max-width:900px){ body.page-home .hero-inner{ padding-bottom:150px; } }
@media (max-width:800px){ body.page-home .hero-inner{ padding-bottom:70px; } }
body.page-home .hero-actions{ row-gap:14px; }
/* ---------------- Hero stats: glass bar ---------------- */
body.page-home .hero-stats{
background:var(--glass-fill-dark);
backdrop-filter:blur(18px) saturate(1.4);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
border:1px solid rgba(250,246,238,.18);
bottom:40px; left:40px; right:40px; width:auto;
box-shadow:0 18px 26px -10px rgba(0,0,0,.4);
}
@media (max-width:900px){ body.page-home .hero-stats{ left:22px; right:22px; bottom:22px; } }
body.page-home .hero-stats .stat{
transition:background-color .4s var(--ease-smooth), transform .4s var(--ease-smooth);
cursor:default;
}
body.page-home .hero-stats .stat:hover{
background:rgba(198,165,117,.14);
transform:translateY(-3px);
}
body.page-home .hero-stats .stat:hover .num{ text-shadow:0 0 18px rgba(198,165,117,.6); }
/* ---------------- Split feature + tabs ---------------- */
body.page-home .split-feature{
box-shadow:0 30px 60px -34px rgba(20,13,8,.4);
transition:box-shadow .5s var(--ease-smooth), transform .5s var(--ease-smooth);
}
body.page-home .split-feature:hover{
transform:translateY(-6px);
box-shadow:0 0 0 1.5px var(--camel), 0 40px 70px -30px rgba(156,122,69,.4);
}
body.page-home .split-feature:hover img{ transform:scale(1.06); }
body.page-home .split-feature img{ transition:transform .8s var(--ease-smooth); }
body.page-home .feature-chip{
backdrop-filter:blur(10px) saturate(1.5);
-webkit-backdrop-filter:blur(10px) saturate(1.5);
}
body.page-home .split-tab{
transition:transform .45s var(--ease-smooth), border-color .35s, box-shadow .45s var(--ease-smooth);
}
body.page-home .split-tab:hover{
transform:translateY(-4px) scale(1.035);
border-color:var(--camel);
box-shadow:0 18px 30px -16px rgba(156,122,69,.45);
}
body.page-home .split-tab img{ transition:transform .7s var(--ease-smooth); }
body.page-home .split-tab:hover img{ transform:scale(1.08); }
/* ---------------- Craft showcase: rounded frame + tabs ---------------- */
body.page-home .craft-frame{
border-radius:var(--r-lg);
overflow:hidden;
transition:box-shadow .5s var(--ease-smooth), border-color .4s var(--ease-smooth);
}
body.page-home .craft-frame:hover{
border-color:var(--camel);
box-shadow:0 0 0 1.5px var(--camel), 0 40px 74px -34px rgba(156,122,69,.4);
}
body.page-home .craft-tab{
border-radius:var(--r-sm);
transition:transform .4s var(--ease-smooth), border-color .35s, box-shadow .4s var(--ease-smooth);
}
body.page-home .craft-tab-progress{ border-radius:0 0 var(--r-sm) var(--r-sm); }
/* ---------------- Craft highlights: compact rows filling the copy column ---------------- */
body.page-home .craft-highlights{
display:flex; flex-direction:column; gap:14px;
}
body.page-home .craft-highlight-card{
display:flex; align-items:center; gap:16px;
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--r-md);
padding:16px 18px;
text-align:left;
transition:transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), border-color .35s var(--ease-smooth);
}
body.page-home .craft-highlight-card:hover{
transform:translateX(6px);
border-color:var(--camel);
box-shadow:0 16px 34px -22px rgba(156,122,69,.45);
}
body.page-home .craft-highlight-icon{
flex:none;
display:flex; align-items:center; justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:rgba(198,165,117,.16);
color:var(--bronze);
transition:transform .5s var(--ease-smooth), background-color .4s var(--ease-smooth);
}
body.page-home .craft-highlight-icon svg{ width:20px; height:20px; }
body.page-home .craft-highlight-card:hover .craft-highlight-icon{
transform:scale(1.12) rotate(-6deg);
background:rgba(198,165,117,.28);
}
body.page-home .craft-highlight-copy h3{ font-size:16.5px; margin-bottom:5px; }
body.page-home .craft-highlight-copy p{ font-size:14px; line-height:1.55; color:rgba(28,20,13,.62); text-align:justify; text-justify:inter-word; }
/* ---------------- Craft showcase: full-bleed shell, left to right ---------------- */
body.page-home .craft-shell{ width:100%; max-width:none; padding:0 56px; }
@media (min-width:981px) and (max-width:1440px){ body.page-home .craft-shell{ max-width:1180px; margin:0 auto; } }
@media (max-width:900px){ body.page-home .craft-shell{ padding:0 22px; } }
/* ---------------- Category bands ---------------- */
body.page-home .cat-band{
transition:transform .55s var(--ease-smooth), box-shadow .55s var(--ease-smooth), border-color .45s var(--ease-smooth);
border-color:var(--line);
position:relative;
}
body.page-home .cat-band:hover{
transform:translateY(-8px);
border-color:var(--camel);
box-shadow:0 0 0 1.5px var(--camel), 0 44px 80px -36px rgba(156,122,69,.42);
z-index:3;
}
body.page-home .cat-icon{ transition:transform .5s var(--ease-smooth), background-color .4s var(--ease-smooth); }
body.page-home .cat-band:hover .cat-icon{ transform:scale(1.12) rotate(-6deg); background:rgba(198,165,117,.28); }
body.page-home .cat-band::after{
content:''; position:absolute; inset:0; border-radius:var(--r-lg); pointer-events:none;
opacity:0; transition:opacity .5s var(--ease-smooth);
background:radial-gradient(340px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 70%);
}
body.page-home .cat-band:hover::after{ opacity:1; }
/* ---------------- Tilt cards (Selected Work) ---------------- */
body.page-home .tilt-card{
border-radius:var(--r-lg);
border-color:var(--line);
position:relative;
transition:box-shadow .5s var(--ease-smooth), border-color .4s var(--ease-smooth);
}
body.page-home .tilt-card:hover{
border-color:var(--camel);
box-shadow:0 0 0 1.5px var(--camel), 0 46px 80px -32px rgba(0,0,0,.5);
}
body.page-home .tilt-card::before{
content:''; position:absolute; inset:0; border-radius:var(--r-lg); z-index:6; pointer-events:none;
opacity:0; transition:opacity .5s var(--ease-smooth);
background:radial-gradient(300px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 70%);
}
body.page-home .tilt-card:hover::before{ opacity:1; }
body.page-home .tilt-card .frame-media{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
/* ---------------- Testimonials: frosted glass cards ---------------- */
body.page-home .testi-card{
background:var(--glass-fill);
backdrop-filter:blur(16px) saturate(1.3);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
border:1px solid var(--glass-border);
box-shadow:0 20px 50px -30px rgba(20,13,8,.25);
position:relative;
transition:transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth), border-color .4s var(--ease-smooth);
}
body.page-home .testi-card:hover{
transform:translateY(-8px) scale(1.015);
border-color:var(--camel);
box-shadow:0 0 0 1.5px var(--camel), 0 36px 70px -32px rgba(156,122,69,.4);
}
body.page-home .testi-who img{
transition:transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
box-shadow:0 0 0 3px rgba(198,165,117,.25);
}
body.page-home .testi-card:hover .testi-who img{ transform:scale(1.08); box-shadow:0 0 0 3px var(--camel); }
/* ---------------- Masonry gallery ---------------- */
body.page-home .masonry-item{
border:1.5px solid transparent;
transition:transform .6s var(--ease-smooth), border-color .4s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}
body.page-home .masonry-item:hover{
border-color:var(--camel);
box-shadow:0 30px 60px -30px rgba(20,13,8,.45);
transform:translateY(-5px) scale(1.015);
}
/* ---------------- Process list ---------------- */
body.page-home .process-item{
border-radius:var(--r-md);
transition:background-color .45s var(--ease-smooth), transform .45s var(--ease-smooth), padding-left .45s var(--ease-smooth);
}
body.page-home .process-item:hover{
background:rgba(198,165,117,.1);
transform:translateX(6px);
padding-left:14px;
padding-right:14px;
}
body.page-home .process-num{ transition:color .4s, text-shadow .4s; }
body.page-home .process-item:hover .process-num{ color:var(--bronze); text-shadow:0 0 16px rgba(198,165,117,.5); }
/* ---------------- Logo marquee: infinite scroll + shimmer background ---------------- */
body.page-home .logo-marquee{
position:relative; overflow:hidden; width:100%;
padding:8px 0;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body.page-home .logo-marquee::before{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(100deg, transparent 35%, rgba(198,165,117,.35) 50%, transparent 65%);
background-size:250% 100%;
animation:logo-shimmer 7s ease-in-out infinite;
}
body.page-home .logo-marquee-inner{
display:flex; width:max-content;
animation:logo-scroll 32s linear infinite;
}
body.page-home .logo-marquee:hover .logo-marquee-inner{ animation-play-state:paused; }
body.page-home .logo-track{
display:flex; align-items:center; gap:48px;
padding-right:48px;
white-space:nowrap;
}
body.page-home .logo-track span{
font-family:var(--font-display); font-size:20px; letter-spacing:.04em;
opacity:.55;
transition:transform .4s var(--ease-smooth), opacity .4s, color .4s;
display:inline-block;
}
body.page-home .logo-track span:hover{
transform:translateY(-3px) scale(1.08);
opacity:1;
color:var(--bronze);
}
@keyframes logo-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes logo-shimmer{ 0%{ background-position:250% 0; } 100%{ background-position:-250% 0; } }
@media (prefers-reduced-motion: reduce){
body.page-home .logo-marquee-inner{ animation:none; }
body.page-home .logo-marquee::before{ animation:none; }
}
/* ---------------- CTA band: glass content panel ---------------- */
body.page-home .cta-band .container{
background:var(--glass-fill-dark);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border:1px solid rgba(250,246,238,.16);
border-radius:var(--r-lg);
padding:64px 40px;
max-width:900px;
}
@media (max-width:700px){ body.page-home .cta-band .container{ padding:44px 24px; } }
/* ---------------- Buttons: soft shine sweep ---------------- */
body.page-home .btn{ position:relative; overflow:hidden; }
body.page-home .btn::before{
content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
transform:skewX(-20deg); transition:left .6s var(--ease-smooth); pointer-events:none;
}
body.page-home .btn:hover::before{ left:130%; }
body.page-home .btn-primary:hover,
body.page-home .btn-outline:hover{ transform:translateY(-3px) scale(1.02); }
/* ---------------- Footer touches ---------------- */
body.page-home .footer-social a{
transition:transform .4s var(--ease-smooth), background-color .35s, border-color .35s;
}
body.page-home .footer-social a:hover{ transform:translateY(-4px) scale(1.08); }
body.page-home .newsletter{ border-color:rgba(250,246,238,.25); }
body.page-home .newsletter:focus-within{ border-color:var(--camel); }
/* ---------------- Back to top / WhatsApp float ---------------- */
body.page-home .to-top,
body.page-home .wa-float{
transition:transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth), background-color .4s;
}
body.page-home .to-top:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 16px 34px -14px rgba(20,13,8,.5); }
body.page-home .wa-float:hover{ transform:translateY(-4px) scale(1.08); }
@media (prefers-reduced-motion: reduce){
body.page-home .btn::before{ display:none; }
}
/* ---------------- TINY LENS video-in-text reveal ---------------- */
.tl-reveal{
background:linear-gradient(180deg, var(--ivory) 0%, var(--beige) 60%, var(--beige-2) 100%);
padding:104px 0 96px;
position:relative;
overflow:hidden;
}
.tl-reveal::before{
content:'';
position:absolute; inset:0;
background:
radial-gradient(900px 520px at 50% 0%, rgba(198,165,117,.22), transparent 68%),
radial-gradient(700px 460px at 15% 90%, rgba(198,165,117,.14), transparent 70%),
radial-gradient(700px 460px at 85% 90%, rgba(156,122,69,.1), transparent 70%);
pointer-events:none;
}
.tl-reveal-head{
max-width:760px;
margin:0 auto;
text-align:center;
position:relative;
z-index:1;
}
.tl-reveal-frame{
position:relative;
max-width:1180px;
margin:56px auto 0;
padding:28px;
border-radius:calc(var(--r-lg) + 14px);
background:linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
backdrop-filter:blur(22px) saturate(1.5);
-webkit-backdrop-filter:blur(22px) saturate(1.5);
border:1px solid rgba(255,255,255,.6);
box-shadow:
0 40px 90px -34px rgba(90,66,36,.35),
inset 0 1px 0 rgba(255,255,255,.7);
z-index:1;
}
.tl-reveal-stage{
position:relative;
aspect-ratio:1400/700;
border-radius:var(--r-lg);
overflow:hidden;
isolation:isolate;
}
.tl-reveal-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
filter:brightness(1.08) contrast(1.05) saturate(1.25);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
}
.tl-reveal-sound{
position:absolute; right:20px; bottom:20px; z-index:2;
width:46px; height:46px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.35);
backdrop-filter:blur(10px) saturate(1.4);
-webkit-backdrop-filter:blur(10px) saturate(1.4);
border:1px solid rgba(255,255,255,.55);
color:var(--espresso);
cursor:pointer;
transition:background-color .35s, border-color .35s, transform .35s var(--ease-smooth);
}
.tl-reveal-sound:hover{
background:rgba(198,165,117,.4);
border-color:var(--camel);
transform:scale(1.08);
}
.tl-reveal-sound svg{ width:19px; height:19px; }
.tl-reveal-sound .icon-vol-on{ display:none; }
.tl-reveal-sound[aria-pressed="true"] .icon-vol-off{ display:none; }
.tl-reveal-sound[aria-pressed="true"] .icon-vol-on{ display:block; }
.tl-reveal-foot{
max-width:1180px;
margin:28px auto 0;
display:flex; align-items:center; justify-content:space-between; gap:20px;
position:relative; z-index:1;
}
.tl-reveal-tag{
font-family:var(--font-body);
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:rgba(28,20,13,.55);
}
@media (max-width:600px){
.tl-reveal{ padding:76px 0 64px; }
.tl-reveal-frame{ margin-top:40px; padding:16px; }
.tl-reveal-foot{ flex-direction:column; align-items:flex-start; }
}
/* ---------------- Unified body-copy typography (matches .craft-desc) ---------------- */
body.page-home .section-head p,
body.page-home .two-col p,
body.page-home .cat-copy p,
body.page-home .craft-highlight-copy p,
body.page-home .process-item p,
body.page-home .testi-card p,
body.page-home .tl-reveal-head p,
body.page-home .tilt-card .frame-body p{
font-family:var(--font-body);
font-size:17px;
line-height:1.75;
color:rgba(28,20,13,.68);
text-align:justify;
text-justify:inter-word;
}