first commit
This commit is contained in:
amirhosein.ashourloo
@@ -0,0 +1,15 @@
|
||||
import { aboutParagraphs, faqs } from '../../lib/content';
|
||||
export const metadata = { title: 'دربارهٔ گروه معماری ساناز گودرزی', description:'با رویکرد، تجربه و حوزه‌های فعالیت گروه معماری و دکوراسیون ساناز گودرزی در طراحی، نظارت و اجرای پروژه‌های معماری آشنا شوید.', alternates:{canonical:'/aboutus/'} };
|
||||
const indicators = [['رضایت مشتریان',68],['تنوع خدمات',25],['زیبایی بصری',36],['نمونه‌کارها',82]];
|
||||
export default function About() {
|
||||
return <>
|
||||
<section className="reference-about-hero"><p className="reference-english" dir="ltr">About Us</p><h1>رویای شما<br/>تبدیل به واقعیت می‌شود</h1>
|
||||
<div className="reference-about-icons" aria-label="طراحی، نظارت و اجرا">{[1,2,3].map((number)=><span key={number}><img src={`/img/info/${number}.png`} alt={['نظارت و اجرا','طراحی معماری','دکوراسیون داخلی'][number-1]} width="60" height="80"/></span>)}</div>
|
||||
</section>
|
||||
<section className="reference-about-intro"><div><h2>گروه معماری و دکوراسیون<br/>ساناز گودرزی</h2><p className="reference-english" dir="ltr">ARCHITECT & INTERIOR DESIGN</p><p>{aboutParagraphs.join(' ')}</p></div><img src="/img/info_1/bg.jpg" alt="طراحی داخلی فضای غذاخوری" loading="lazy"/></section>
|
||||
<section className="reference-about-values"><img src="/img/info_2/bg.jpg" alt="طراحی فضای نشیمن" loading="lazy"/><div className="reference-about-values-copy"><h2>رویای شما تبدیل به واقعیت می‌شود؛ این تمام چیزی است که ما انجام می‌دهیم.</h2><p className="reference-english" dir="ltr">TURN YOUR DREAMS INTO REALITY</p><p>رویای شما تبدیل به واقعیت می‌شود؛ این تمام چیزی است که ما انجام می‌دهیم.</p>
|
||||
{indicators.map(([label,value],index)=><div className="reference-progress" key={label}><label htmlFor={`indicator-${index}`}>{label}</label><progress id={`indicator-${index}`} value={value} max="100">{value}%</progress></div>)}
|
||||
</div></section>
|
||||
<section className="reference-faq"><div><h2>با ما بیشتر آشنا شوید</h2><p className="reference-english" dir="ltr">MORE ABOUT US</p><p>این مجموعه با اولویت قرار دادن خواسته‌های کارفرما و رسیدگی پیگیرانه به موضوعات پیش‌آمده، تا حصول نتیجهٔ رضایت‌بخش دست از تلاش و همکاری بر نخواهد داشت.</p><div className="faqs">{faqs.map(([question,answer])=><details key={question}><summary>{question}<span aria-hidden="true">+</span></summary><p>{answer}</p></details>)}</div></div></section>
|
||||
</>;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { faSlug, getBlogById, getBlogs, imageUrlOf, plainText, titleOf } from '../../../../lib/meshkee-api';
|
||||
|
||||
export const dynamicParams = false;
|
||||
export async function generateStaticParams() { const params=(await getBlogs()).map((post)=>({slug:String(post.id),titleSlug:faSlug(titleOf(post))})); return params.length?params:[{slug:'__placeholder__',titleSlug:'بدون-عنوان'}]; }
|
||||
export async function generateMetadata({params}) { const {slug}=await params; const post=await getBlogById(slug); if(!post)return{robots:{index:false,follow:false}}; const title=titleOf(post,'بلاگ'); const description=post.seoMetaDescription||plainText(post.abstract||post.summary||post.mainTextHtml||'').slice(0,160)||`مقالهٔ ${title} از گروه معماری ساناز گودرزی.`; const canonical=`/blog/${post.id}/${faSlug(title)}/`; return {title:post.seoMetaTitle||title,description,alternates:{canonical},openGraph:{title,description,url:canonical,type:'article',images:imageUrlOf(post)?[{url:imageUrlOf(post),alt:title}]:[]}}; }
|
||||
export default async function BlogDetail({params}) { const {slug}=await params; const post=await getBlogById(slug); if(!post)notFound(); const title=titleOf(post); const image=imageUrlOf(post); return <article className="editorial-detail container">
|
||||
{post.schema?.jsonLd&&<script type="application/ld+json" dangerouslySetInnerHTML={{__html:JSON.stringify(post.schema.jsonLd)}}/>}
|
||||
<Link className="text-link" href="/blog/">بازگشت به بلاگ ←</Link><span className="eyebrow">بلاگ معماری</span><h1>{title}</h1>{post.abstract&&<p className="editorial-lead">{plainText(post.abstract)}</p>}{image&&<img className="editorial-cover" src={image} alt={`تصویر شاخص مقالهٔ ${title}`}/>}<div className="rich-content" dangerouslySetInnerHTML={{__html:post.mainTextHtml||post.contentHtml||''}}/>
|
||||
</article>; }
|
||||
@@ -0,0 +1,13 @@
|
||||
import Link from 'next/link';
|
||||
import { ArrowUpLeft } from 'lucide-react';
|
||||
import { PageHeading } from '../../components/common';
|
||||
import { faSlug, getBlogs, imageUrlOf, plainText, titleOf } from '../../lib/meshkee-api';
|
||||
|
||||
export const metadata = { title: 'بلاگ معماری و طراحی داخلی', description: 'مقاله‌ها و نوشته‌های گروه معماری ساناز گودرزی دربارهٔ معماری، طراحی داخلی، طراحی نما و فضای سبز.', alternates:{canonical:'/blog/'} };
|
||||
export default async function BlogPage() {
|
||||
const posts = await getBlogs();
|
||||
return <><PageHeading title="بلاگ" en="BLOG"/><section className="container editorial-list">
|
||||
{!posts.length && <div className="empty-content"><div className="empty-thumbnail" aria-hidden="true"/><h2>مقاله‌ها به‌زودی منتشر می‌شوند</h2><p>این بخش به API بلاگ متصل است و پس از انتشار نخستین مطلب، محتوای واقعی همین‌جا نمایش داده می‌شود.</p></div>}
|
||||
<div className="editorial-grid">{posts.map((post) => { const title=titleOf(post,'مقالهٔ معماری'); const image=imageUrlOf(post)||'/img/subheader/bg.jpg'; return <article key={post.id}><Link href={`/blog/${post.id}/${faSlug(title)}/`}><div className="editorial-image"><img src={image} alt={title} loading="lazy"/></div><small>{post.categoryName||'بلاگ معماری'}</small><h2>{title}</h2>{(post.abstract||post.summary)&&<p>{plainText(post.abstract||post.summary)}</p>}<span>ادامه مطلب <ArrowUpLeft size={18}/></span></Link></article>})}</div>
|
||||
</section></>;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Instagram, Mail } from 'lucide-react';
|
||||
import { PageHeading } from '../../components/common';
|
||||
import ContactForm from '../../components/contact-form';
|
||||
import { offices, phones, emails, instagram } from '../../lib/content';
|
||||
export const metadata = { title: 'تماس با گروه معماری ساناز گودرزی', description:'اطلاعات تماس، شماره تلفن، ایمیل و نشانی دفترهای گروه معماری ساناز گودرزی در تهران، کیش، قم و ازمیر.', alternates:{canonical:'/contactus/'} };
|
||||
export default function Contact() {
|
||||
return <><PageHeading title="تماس با ما" en="Contact Us"/>
|
||||
<section className="reference-contact">
|
||||
<div><h2>آدرس مجموعه</h2>{offices.map(office=><p key={office.city}>{office.city} — {office.address}</p>)}<p className="contact-address-latin" dir="ltr">{offices[3].latin}</p></div>
|
||||
<div className="reference-contact-links"><h2>اطلاعات تماس با ما</h2>{phones.map(phone=><a key={phone.value} dir="ltr" href={`tel:${phone.value}`}>{phone.label}</a>)}{emails.map(email=><a key={email} href={`mailto:${email}`} dir="ltr">{email}</a>)}</div>
|
||||
<div><h2>با ما در شبکه‌های اجتماعی</h2><div className="reference-contact-social"><a href={instagram} target="_blank" rel="noreferrer"><span dir="ltr">instagram</span><Instagram/></a><a href={`mailto:${emails[0]}`}><span dir="ltr">email</span><Mail/></a></div></div>
|
||||
</section>
|
||||
<section className="reference-message"><h2>منتظر پیام شما هستیم</h2><p className="reference-english" dir="ltr">SEND US MESSAGE</p><ContactForm/></section>
|
||||
</>;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
|
||||
:root{--gold:#e4c385;--gold-dark:#89682f;--ink:#262827;--muted:#73746f;--paper:#faf9f6;--line:#e5e1d9;--dark:#222523;--font:var(--font-iranyekan),Tahoma,sans-serif}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.95}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}img{max-width:100%;display:block}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.6}h1{font-size:clamp(36px,4.5vw,64px);font-weight:300}h2{font-size:clamp(28px,3vw,42px);font-weight:300}h3{font-size:25px;font-weight:300}p{color:var(--muted)}:focus-visible{outline:2px solid var(--gold-dark);outline-offset:5px}.container{width:min(1240px,calc(100% - 112px));margin-inline:auto}.eyebrow{display:block;color:var(--gold-dark);font-size:12px;font-weight:300;letter-spacing:.06em;margin-bottom:20px}.eyebrow[dir=ltr]{text-align:right;letter-spacing:.18em}.button{display:inline-flex;align-items:center;justify-content:center;gap:34px;min-height:54px;padding:13px 25px;border:1px solid transparent;font-size:14px;transition:background .2s,color .2s}.button-gold{background:var(--gold);color:var(--ink)}.button-gold:hover{background:#f1d8a8}.button-dark{background:var(--dark);color:white}.button-dark:hover{background:#444b43}.text-link{display:inline-flex;align-items:center;gap:24px;border-bottom:1px solid #bbae92;padding:8px 0;font-size:14px;transition:gap .2s}.text-link:hover{gap:32px}.skip-link{position:fixed;top:8px;right:8px;transform:translateY(-160%);z-index:100;background:white;padding:10px 20px}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
||||
.site-header{position:relative;width:100%;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}.site-header.over-hero{position:absolute;top:0;background:linear-gradient(#171b1890,transparent);border-bottom:1px solid #ffffff22;color:#fff}.header-inner{width:min(1400px,calc(100% - 80px));height:112px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;flex-direction:column;gap:0;line-height:1.6}.brand-name{font-size:27px;font-weight:300;white-space:nowrap}.brand-dot{color:var(--gold);padding-right:3px}.brand-caption{font-family:var(--font);font-size:8px;letter-spacing:1.8px}.desktop-nav{display:flex;gap:29px;align-items:center;font-size:13px}.desktop-nav a{position:relative;padding:18px 0}.desktop-nav a:after{content:'';position:absolute;bottom:10px;right:0;width:0;height:1px;background:var(--gold);transition:width .2s}.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{width:100%}.header-contact{display:flex;align-items:center;gap:20px;font-size:12px;border:1px solid #9998;padding:9px 15px}.menu-button{border:0;background:none;display:none;padding:12px;min-width:48px;min-height:48px}.icon-button{display:grid;place-items:center;border:1px solid var(--line);background:transparent;width:48px;height:48px}.mobile-menu{border:0;margin:0 0 0 auto;padding:32px;max-height:100dvh;height:100dvh;width:min(430px,100%);max-width:100%;color:var(--ink);background:var(--paper)}.mobile-menu::backdrop{background:#111a;backdrop-filter:blur(5px)}.menu-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:55px}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu nav a{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:18px 0;font-size:22px}.mobile-menu nav a svg{margin-right:auto;width:18px}.mobile-menu nav small{font-family:var(--font);color:var(--gold-dark);font-size:11px}.mobile-menu nav a[aria-current]{color:var(--gold-dark)}.menu-phone{display:block;margin-top:38px;text-align:right}
|
||||
.hero{position:relative;height:min(880px,100svh);min-height:650px;background:#303532;color:#fff}.hero>.swiper{height:100%}.hero .swiper-slide{height:100%;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(270deg,#171c19c9 0%,#171c1970 52%,#171c1910),linear-gradient(0deg,#151c1890,transparent 30%)}.hero-content{position:relative;z-index:1;padding-top:clamp(195px,27vh,285px);padding-bottom:140px}.hero-content .eyebrow{color:var(--gold);font-size:13px;display:flex;align-items:center;gap:15px}.hero-content .eyebrow:before{content:'';width:32px;height:1px;background:var(--gold)}.hero h1{font-size:clamp(38px,4.8vw,68px);font-weight:300;line-height:1.7;max-width:770px;letter-spacing:-1px}.hero h1 em{color:var(--gold);font-style:normal}.hero-content p{color:#e1e2dd;font-size:15px;margin:19px 0 31px}.hero-bottom{position:absolute;z-index:5;bottom:28px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:24px;border-top:1px solid #ffffff30}.scroll-cue{display:flex;align-items:center;gap:12px;font-size:11px;color:#e1e2dd}.slider-controls{display:flex;align-items:center;gap:16px}.slider-controls button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff40;background:transparent;color:#fff;transition:background .2s}.slider-controls button:hover{background:#ffffff20}.slide-count{display:flex;align-items:center;gap:16px;font-family:var(--font);font-size:12px;color:#c1c3bc}.slide-count b{font-size:20px;color:var(--gold);font-weight:300}.slide-count span{color:#ffffff50}.hero-signature{font-family:var(--font);font-size:9px;letter-spacing:1.5px;color:#d1d3cd}
|
||||
.services-home{padding-top:110px;padding-bottom:100px}.section-heading{display:flex;justify-content:space-between;gap:80px;align-items:end;margin-bottom:75px}.section-heading-side{max-width:370px}.section-heading-side p{font-size:15px;margin-bottom:20px}.service-editorial{display:grid;gap:100px}.service-row{display:grid;grid-template-columns:1.18fr 1fr;gap:90px;align-items:center}.service-row:nth-child(even){direction:ltr}.service-row:nth-child(even)>*{direction:rtl}.service-photo{position:relative;overflow:hidden}.service-photo img{height:480px;width:100%;object-fit:cover;transition:transform .7s}.service-photo:hover img{transform:scale(1.025)}.image-index{position:absolute;left:0;bottom:0;background:var(--paper);font-family:var(--font);font-size:39px;line-height:1;padding:25px 30px 10px;color:#a39476}.service-copy h3{font-size:35px;margin-bottom:24px}.service-copy p{margin-bottom:25px;font-size:16px;line-height:2.2}.service-copy .eyebrow{margin-bottom:18px}.about-band{background:#eeece5;padding:80px 0}.about-band-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:90px;align-items:center}.about-band img{width:100%;height:400px;object-fit:cover}.about-band p{margin:24px 0}.contact-cta{display:flex;justify-content:space-between;align-items:center;padding-block:95px;gap:30px}.contact-cta .eyebrow{margin-bottom:12px}.contact-cta h2{font-size:34px}
|
||||
.page-heading{background:#eeede8 url('/img/subheader/bg.jpg') center/cover no-repeat;padding:46px 0 55px;min-height:285px;border-bottom:1px solid var(--line)}.page-heading h1{font-size:44px;margin-bottom:12px}.page-heading .eyebrow{margin:28px 0 6px;letter-spacing:.2em}.page-heading p{max-width:620px;color:#575d56}.breadcrumb{display:flex;gap:14px;font-size:11px;color:#7d7f76}.breadcrumb a:hover{color:var(--gold-dark)}.services-page{padding-top:45px}.category-tabs{display:flex;gap:12px;flex-wrap:wrap}.category-tabs button,.category-tabs a{font-size:13px;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;padding:9px 19px;border:1px solid var(--line);background:transparent;transition:background .2s}.category-tabs button[aria-pressed=true],.category-tabs a:hover,.category-tabs button:hover{background:var(--dark);color:#fff;border-color:var(--dark)}.service-detail{display:grid;grid-template-columns:.9fr 1fr;gap:75px;padding:80px 0;border-bottom:1px solid var(--line);align-items:start;scroll-margin-top:30px}.service-detail h2{font-size:34px;margin-bottom:25px}.service-detail p{margin-bottom:16px}.service-detail .text-link{margin-top:15px}.service-detail-image{position:relative}.service-detail-image img{width:100%;height:540px;object-fit:cover}.service-detail-image>span{position:absolute;bottom:15px;left:25px;color:#fff;font-family:var(--font);font-size:55px;text-shadow:0 1px 15px #222}.about-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start;padding-block:90px}.about-intro h2{font-size:31px;margin-bottom:24px}.about-intro p{margin-bottom:20px;font-size:15px}.about-portrait{position:relative;background:#efede6;padding:32px 20px}.about-portrait img{width:100%;aspect-ratio:1;object-fit:contain}.about-portrait>span{display:block;font-family:var(--font);font-size:12px;letter-spacing:3px;line-height:1.8;text-align:center;margin:35px 0 8px;color:#7b725e}.values-band{background:var(--dark);color:white;padding:65px 0;text-align:center}.values-band h2{font-size:30px;margin-bottom:40px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr)}.values-grid>div+div{border-right:1px solid #ffffff20}.values-grid img{margin:auto auto 20px;object-fit:contain}.values-grid h3{font-size:18px}.faq-section{padding-block:95px;display:grid;grid-template-columns:1fr 1.2fr;gap:85px}.faq-section h2{font-size:32px;margin-bottom:22px}.faqs details{border-bottom:1px solid #dcd8ce}.faqs summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;padding:22px 0;font-weight:300}.faqs summary::-webkit-details-marker{display:none}.faqs summary span{color:var(--gold-dark);font-size:26px;transition:transform .2s}.faqs details[open] summary span{transform:rotate(45deg)}.faqs details p{padding-bottom:25px;font-size:15px}
|
||||
.contact-info{padding-block:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.contact-info>div{min-width:0}.contact-info>div+div{border-right:1px solid var(--line);padding-right:35px}.gold-icon{color:var(--gold-dark);width:26px;height:26px;margin-bottom:18px}.contact-info h2{font-size:22px;margin-bottom:20px}.contact-info a{display:block;text-align:right;font-size:16px;overflow-wrap:anywhere}.contact-info a:hover{color:var(--gold-dark)}.contact-info p{font-size:13px;margin-top:12px}.offices-section{padding:65px 0;background:#eeece6}.offices-section .eyebrow{margin-bottom:8px}.offices-section h2{font-size:32px}.offices-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:40px}.offices-grid article{border-top:1px solid #c7c0ae;padding-top:25px}.offices-grid svg{color:var(--gold-dark);margin-bottom:14px}.offices-grid h3{font-size:20px;margin-bottom:12px}.offices-grid p{font-size:14px}.offices-grid p[dir=ltr]{font-family:var(--font);font-size:12px;margin-top:8px;text-align:right}.message-section{padding-block:80px}.message-section .section-heading{margin-bottom:35px}.message-section h2{font-size:32px}.contact-form{max-width:1000px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:25px}.contact-form label{display:block;font-size:13px;font-weight:300}.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #d8d4ca;background:#ffffff66;border-radius:0;color:var(--ink);padding:14px 16px;margin-top:9px;font-size:15px;min-width:0}.contact-form textarea{resize:vertical}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#92948d}.form-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:28px}.form-note{font-size:12px;max-width:560px}.form-bottom button{flex-shrink:0}.form-status{font-size:14px;margin-top:20px;color:var(--gold-dark)}
|
||||
.portfolio-section{padding-block:50px 80px}.portfolio-note{font-size:13px;margin:25px 0 40px}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 35px}.portfolio-image{position:relative;overflow:hidden}.portfolio-image img{height:390px;width:100%;object-fit:cover;transition:transform .6s}.portfolio-image:hover img{transform:scale(1.025)}.portfolio-image>span{position:absolute;top:18px;right:18px;background:#faf9f0ee;color:#4c4d46;padding:5px 13px;font-size:11px}.portfolio-card-title{display:flex;justify-content:space-between;align-items:center;padding-top:20px}.portfolio-card-title small{color:var(--muted);font-size:11px}.portfolio-card-title h2{font-size:24px;margin-top:5px}.portfolio-card-title>svg{color:var(--gold-dark)}.portfolio-detail{padding-block:70px;display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}.portfolio-detail>img{width:100%;height:570px;object-fit:cover}.portfolio-detail h2{margin-bottom:25px}.placeholder-notice{border-right:2px solid var(--gold);background:#eeece6;padding:20px;margin:25px 0}.placeholder-notice p{font-size:14px;margin-top:8px}.not-found{min-height:60vh;padding-block:100px}.not-found p{margin:20px 0 30px}
|
||||
.site-footer{background:var(--dark);color:#eee}.footer-main{padding-block:75px 55px;display:grid;grid-template-columns:1.4fr .65fr 1fr 1.4fr;gap:45px}.site-footer h3{font-size:15px;margin-bottom:25px;color:#f2f0e8}.footer-intro .brand-name{font-size:26px}.footer-intro .brand-caption{font-size:7px}.footer-intro>p{color:#a1a59d;font-size:12px;margin-top:24px}.footer-intro>p+p{margin-top:10px}.footer-nav{display:flex;flex-direction:column;gap:11px;font-size:12px;color:#b7bab2}.footer-contact>a{display:block;text-align:right;font-size:14px;color:#b7bab2;margin-bottom:9px}.footer-contact .email{font-family:var(--font);font-size:11px;overflow-wrap:anywhere}.footer-offices p{font-size:11px;color:#a1a59d;margin-bottom:15px}.footer-offices p strong{color:#d4d6cf;font-weight:300}.footer-offices p span{display:block;font-size:10px;text-align:right}.social-links{display:flex;gap:12px;margin-top:23px}.social-links a{width:35px;height:35px;display:grid;place-items:center;border:1px solid #5e645a;color:#d4d6cf}.footer-nav a:hover,.footer-contact a:hover,.social-links a:hover{color:var(--gold)}.footer-bottom{background:#1a1d1b;border-top:1px solid #ffffff0b;padding:22px 0}.footer-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}.footer-bottom-bar>span{color:#9c9c9c;font-size:12px}.meshkee-credit{align-items:center;color:#9c9c9c;display:inline-flex;gap:10px;padding:6px 10px;position:relative;text-decoration:none;font-family:var(--font);transition:color .3s}.meshkee-credit:hover{color:#e0e0e0}.meshkee-credit__frame{inset:0;pointer-events:none;position:absolute}.meshkee-credit__frame i{background:#777;position:absolute;transition:transform .28s cubic-bezier(.22,1,.36,1)}.meshkee-credit__frame i:nth-child(1){height:100%;left:0;top:0;transform:scaleY(0);transform-origin:top;width:1px}.meshkee-credit__frame i:nth-child(2){bottom:0;height:1px;left:0;transform:scaleX(0);transform-origin:left;transition-delay:.14s;width:100%}.meshkee-credit__frame i:nth-child(3){height:100%;right:0;top:0;transform:scaleY(0);transform-origin:bottom;transition-delay:.28s;width:1px}.meshkee-credit__frame i:nth-child(4){height:1px;left:0;top:0;transform:scaleX(0);transform-origin:right;transition-delay:.42s;width:100%}.meshkee-credit:hover .meshkee-credit__frame i,.meshkee-credit:focus-visible .meshkee-credit__frame i{transform:scale(1)}.meshkee-credit>img{flex-shrink:0;height:42px;width:42px;object-fit:contain;opacity:.7;transition:opacity .3s}.meshkee-credit:hover>img{opacity:1}.meshkee-credit__text{display:flex;flex-direction:column;justify-content:center;line-height:1.25;min-height:42px;gap:3px}.meshkee-credit__text>span{font-size:11px}.meshkee-credit__text>strong{color:#cfcfcf;font-size:13px;font-weight:300}.back-top{border:1px solid #6666;width:38px;height:38px;display:grid;place-items:center}
|
||||
@media(min-width:1600px){.hero-content{padding-top:260px}}
|
||||
@media(max-width:1100px){.container{width:calc(100% - 72px)}.header-inner{width:calc(100% - 60px);gap:18px}.desktop-nav{gap:20px;font-size:12px}.header-contact{display:none}.service-row,.about-band-grid{gap:50px}.service-photo img{height:420px}.footer-main{grid-template-columns:1.2fr .7fr 1fr;gap:35px}.footer-offices{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.footer-offices h3{grid-column:1/-1;margin-bottom:0}.about-intro{gap:45px}.service-detail{gap:40px}.contact-info{gap:25px}.contact-info>div+div{padding-right:25px}.hero-signature{display:none}.portfolio-detail{gap:40px}}
|
||||
@media(max-width:800px){.container{width:calc(100% - 48px)}.header-inner{height:92px;width:calc(100% - 40px)}.desktop-nav{display:none}.menu-button{display:grid;place-items:center}.brand-name{font-size:25px}.brand-caption{font-size:7px}.hero{min-height:680px;max-height:900px;height:90svh}.hero-content{padding-top:190px}.hero h1{font-size:48px}.hero-shade{background:linear-gradient(270deg,#172018d6,#17201855),linear-gradient(0deg,#17201899,transparent)}.section-heading{gap:40px;margin-bottom:50px}.section-heading-side{max-width:310px}.service-row{gap:35px}.service-photo img{height:370px}.service-copy h3{font-size:29px}.service-copy p{font-size:14px}.service-editorial{gap:65px}.services-home{padding-top:75px;padding-bottom:70px}.about-band-grid{gap:35px}.about-band img{height:330px}.about-band h2{font-size:28px}.about-band p{font-size:14px}.contact-cta{padding-block:65px}.contact-cta h2{font-size:27px}.contact-cta .button{gap:15px;padding-inline:18px}.page-heading{min-height:250px;padding-block:35px 40px;background-position:35% center}.page-heading h1{font-size:36px}.service-detail{grid-template-columns:1fr;gap:30px;padding-block:50px}.service-detail-image img{height:430px}.service-detail h2{font-size:30px}.about-intro{grid-template-columns:1fr;padding-block:60px;gap:35px}.about-portrait{max-width:500px;width:100%;margin:auto}.faq-section{grid-template-columns:1fr;gap:25px;padding-block:60px}.contact-info{grid-template-columns:1fr 1fr;gap:35px}.contact-info>div+div{padding-right:0;border-right:0}.offices-grid{grid-template-columns:1fr 1fr}.portfolio-image img{height:330px}.portfolio-detail{grid-template-columns:1fr;gap:35px}.portfolio-detail>img{height:450px}.footer-main{grid-template-columns:1fr 1fr}.footer-offices{grid-template-columns:1fr 1fr}.footer-intro{grid-row:span 2}.footer-bottom-bar{flex-wrap:wrap}.back-top{display:none}}
|
||||
@media(max-width:560px){html{scroll-padding-top:30px}.container{width:calc(100% - 40px)}.header-inner{height:86px;width:calc(100% - 32px)}.brand-name{font-size:23px}.brand-caption{font-size:6.5px;letter-spacing:1.3px}.hero{height:calc(100svh - 20px);min-height:620px;max-height:830px}.hero-content{padding-top:178px;padding-bottom:135px}.hero h1{font-size:clamp(34px,8.8vw,48px);line-height:1.8;letter-spacing:-.7px}.hero-content .eyebrow{font-size:11px;margin-bottom:23px}.hero-content p{font-size:12px;margin:20px 0 30px}.hero-image{object-position:42% center}.hero-bottom{bottom:22px;gap:10px;padding-top:18px}.hero-bottom .scroll-cue{font-size:10px;gap:7px}.slider-controls{gap:9px}.slider-controls button{width:35px;height:38px}.slide-count{gap:8px;font-size:10px}.slide-count b{font-size:17px}.hero .button{min-height:52px;font-size:13px;gap:30px}.section-heading{display:block;margin-bottom:40px}.section-heading h2{font-size:31px}.section-heading-side{margin-top:25px;max-width:none}.section-heading-side p{font-size:14px}.services-home{padding-top:60px}.eyebrow{font-size:11px;margin-bottom:15px}.service-row,.about-band-grid{grid-template-columns:1fr;gap:25px}.service-row:nth-child(even){direction:rtl}.service-photo img{height:390px}.service-copy h3{font-size:29px;margin-bottom:15px}.service-copy p{font-size:15px;margin-bottom:17px}.service-copy .eyebrow{font-size:10px;margin-bottom:10px}.image-index{font-size:30px;padding:18px 22px 8px}.service-editorial{gap:55px}.about-band{padding-block:50px}.about-band img{height:280px}.about-band h2{font-size:32px}.contact-cta{display:block;padding-block:55px}.contact-cta h2{font-size:29px}.contact-cta .button{margin-top:27px;font-size:13px;padding-inline:25px;gap:30px}.page-heading{padding-block:25px 35px;min-height:235px;background-image:linear-gradient(90deg,#eeede8b8,#eeede8f7),url('/img/subheader/bg.jpg')}.page-heading .eyebrow{margin-top:27px;font-size:10px}.page-heading h1{font-size:34px}.page-heading p{font-size:13px}.category-tabs{gap:8px}.category-tabs button,.category-tabs a{padding:9px 12px;font-size:11px}.service-detail-image img{height:380px}.service-detail p{font-size:15px}.about-intro h2{font-size:27px}.about-portrait{padding:20px}.about-portrait>span{font-size:10px;margin-top:20px}.values-band{padding-block:45px}.values-band h2{font-size:26px}.values-grid img{width:45px;height:45px}.values-grid h3{font-size:13px}.faq-section h2{font-size:28px}.faq-section>div>p{font-size:14px}.faqs summary{font-size:14px}.contact-info{grid-template-columns:1fr;padding-block:45px;gap:30px}.contact-info>div+div{border-top:1px solid var(--line);padding-top:30px}.contact-info h2{font-size:21px;margin-bottom:14px}.gold-icon{margin-bottom:12px}.offices-section{padding-block:45px}.offices-grid{gap:30px 22px}.offices-grid p{font-size:12px}.offices-grid h3{font-size:19px}.message-section{padding-block:50px}.message-section h2{font-size:27px}.form-grid{grid-template-columns:1fr;gap:20px}.contact-form input,.contact-form textarea{font-size:16px}.form-bottom{display:block}.form-bottom button{margin-top:22px;width:100%}.portfolio-section{padding-block:35px 45px}.portfolio-grid{grid-template-columns:1fr;gap:35px}.portfolio-note{font-size:12px;margin:22px 0 30px}.portfolio-image img{height:370px}.portfolio-card-title h2{font-size:23px}.portfolio-detail{padding-block:40px}.portfolio-detail>img{height:400px}.portfolio-detail h2{font-size:28px}.portfolio-detail p{font-size:15px}.footer-main{padding-block:50px 30px;gap:35px 22px;grid-template-columns:.8fr 1.2fr}.footer-intro{grid-column:1/-1;grid-row:auto}.footer-intro>p{max-width:390px}.footer-offices{gap:18px}.footer-offices p{font-size:11px}.footer-contact .email{font-size:10px}.site-footer h3{font-size:13px;margin-bottom:19px}.footer-contact>a{font-size:13px}.footer-bottom-bar{flex-direction:column;text-align:center;gap:18px}.footer-bottom{padding-block:20px}.meshkee-credit__text>span{font-size:10px}.meshkee-credit__text>strong{font-size:12px}.mobile-menu{padding:25px}.menu-top{margin-bottom:35px}.mobile-menu nav a{font-size:20px}.not-found h1{font-size:32px}}
|
||||
@media(max-width:360px){.container{width:calc(100% - 32px)}.hero h1{font-size:32px}.service-photo img{height:340px}.footer-main{grid-template-columns:1fr}.footer-intro{grid-column:auto}.footer-offices{grid-template-columns:1fr}.footer-contact .email{font-size:12px}}
|
||||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero .swiper-wrapper{transition-duration:0ms!important}}
|
||||
|
||||
/* Client typography: real IRANYekan Bold titles; Light everywhere else. */
|
||||
.brand { flex-direction: row; align-items: center; gap: 12px; }
|
||||
.brand-wordmark { display: flex; flex-direction: column; }
|
||||
.brand-logo { width: 62px; height: auto; flex-shrink: 0; object-fit: contain; }
|
||||
.footer-intro .brand { flex-wrap: wrap; }
|
||||
.footer-intro .brand-logo { width: 72px; }
|
||||
@media (max-width: 560px) {
|
||||
.brand { gap: 9px; }
|
||||
.brand-logo { width: 44px; }
|
||||
.mobile-menu .brand-logo { width: 38px; }
|
||||
.mobile-menu .brand-name { font-size: 20px; }
|
||||
.mobile-menu .brand-caption { font-size: 5.5px; }
|
||||
.menu-top { gap: 10px; }
|
||||
.menu-top .icon-button { flex-shrink: 0; }
|
||||
.footer-intro .brand-logo { width: 60px; }
|
||||
}
|
||||
body,button,input,textarea,b,strong{font-weight:300}h1,h2,h3,.hero h1{font-weight:700}
|
||||
|
||||
/* Keep subheader copy legible over the photograph at every breakpoint. */
|
||||
.page-heading {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
|
||||
url('/img/subheader/bg.jpg');
|
||||
color: #fff;
|
||||
}
|
||||
.page-heading h1 { color: #fff; }
|
||||
.page-heading .eyebrow { color: #fff; font-size: 13px; }
|
||||
.page-heading p { color: #fff; font-size: 16px; line-height: 2; }
|
||||
.page-heading .breadcrumb { color: #fff; font-size: 13px; flex-wrap: wrap; }
|
||||
.page-heading .breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
|
||||
.page-heading .breadcrumb a:hover { color: #fff; }
|
||||
.page-heading a:focus-visible { outline-color: #fff; }
|
||||
|
||||
@keyframes gentle-entry {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Prepare offscreen content before entry; never reset visible content to zero. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
[data-scroll-reveal='pending'] { opacity: 0; transform: translateY(16px); }
|
||||
[data-scroll-reveal='visible'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: opacity .5s ease-out, transform .6s cubic-bezier(.2,.65,.3,1);
|
||||
}
|
||||
[data-scroll-reveal='pending']:focus-within { opacity: 1; transform: none; }
|
||||
}
|
||||
@keyframes backdrop-in { from { background-color: #1110; backdrop-filter: blur(0); } to { background-color: #111a; backdrop-filter: blur(5px); } }
|
||||
@keyframes backdrop-out { from { background-color: #111a; backdrop-filter: blur(5px); } to { background-color: #1110; backdrop-filter: blur(0); } }
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.page-heading > .container { animation: gentle-entry .65s cubic-bezier(.22,1,.36,1) both; }
|
||||
.swiper-slide-active .hero-content > * { animation: gentle-entry .8s cubic-bezier(.22,1,.36,1) both; }
|
||||
.swiper-slide-active .hero-content h1 { animation-delay: .08s; }
|
||||
.swiper-slide-active .hero-content p { animation-delay: .16s; }
|
||||
.swiper-slide-active .hero-content .button { animation-delay: .24s; }
|
||||
.mobile-menu[data-phase='opening']::backdrop { animation: backdrop-in .44s ease both; }
|
||||
.mobile-menu[data-phase='closing']::backdrop { animation: backdrop-out .26s ease both; }
|
||||
.mobile-menu[data-phase='opening'] nav a { animation: gentle-entry .5s cubic-bezier(.22,1,.36,1) both; }
|
||||
.mobile-menu nav a:nth-child(2) { animation-delay: .05s; }
|
||||
.mobile-menu nav a:nth-child(3) { animation-delay: .10s; }
|
||||
.mobile-menu nav a:nth-child(4) { animation-delay: .15s; }
|
||||
.mobile-menu nav a:nth-child(5) { animation-delay: .20s; }
|
||||
.button, .icon-button, .social-links a { transition: transform .25s ease, background .25s ease, color .25s ease; }
|
||||
.button:active, .icon-button:active { transform: scale(.97); }
|
||||
}
|
||||
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
||||
.button:hover, .social-links a:hover { transform: translateY(-3px); }
|
||||
.text-link svg, .portfolio-card-title svg { transition: transform .25s ease; }
|
||||
.text-link:hover svg, .portfolio-grid a:hover .portfolio-card-title svg { transform: translate(-3px,-3px); }
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import './globals.css';
|
||||
import './reference.css';
|
||||
import localFont from 'next/font/local';
|
||||
import { Header, Footer } from '../components/shell';
|
||||
import PageMotion from '../components/page-motion';
|
||||
import { getBranding, getBusinessInfo } from '../lib/meshkee-api';
|
||||
const iranyekan = localFont({
|
||||
src: [
|
||||
{path:'../public/fonts/iranyekanweblightfanum.woff',weight:'300',style:'normal'},
|
||||
{path:'../public/fonts/iranyekanwebboldfanum.woff',weight:'700',style:'normal'},
|
||||
],
|
||||
variable:'--font-iranyekan', display:'swap',
|
||||
});
|
||||
export async function generateMetadata(){const branding=await getBranding();return {metadataBase:new URL('https://sanazgoodarzi.ir'),title:{default:'گروه معماری ساناز گودرزی',template:'%s | گروه معماری ساناز گودرزی'},description:'طراحی معماری، دکوراسیون داخلی، سالن‌های زیبایی، فضای سبز و نمای ساختمان؛ گروه معماری ساناز گودرزی.',icons:branding.faviconUrl?[{url:branding.faviconUrl}]:[{url:'/Logo.png'}]};}
|
||||
export default async function RootLayout({children}) {const [branding,business]=await Promise.all([getBranding(),getBusinessInfo()]);return <html lang="fa" dir="rtl" className={iranyekan.variable}><body>{business.schema?.enabled&&business.schema?.jsonLd&&<script type="application/ld+json" dangerouslySetInnerHTML={{__html:JSON.stringify(business.schema.jsonLd)}}/>}<a className="skip-link" href="#main">رفتن به محتوای اصلی</a><Header branding={branding}/><main id="main">{children}</main><PageMotion/><Footer branding={branding}/></body></html>;}
|
||||
@@ -0,0 +1,2 @@
|
||||
import Link from 'next/link';
|
||||
export default function NotFound(){return <section className="not-found container"><span className="eyebrow">۴۰۴</span><h1>این صفحه پیدا نشد.</h1><p>از منوی سایت یا صفحهٔ اصلی مسیرتان را ادامه دهید.</p><Link href="/" className="button button-dark">بازگشت به خانه</Link></section>}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { services } from '../../lib/content';
|
||||
import { PageHeading } from '../../components/common';
|
||||
export const metadata = { title: 'خدمات طراحی معماری و دکوراسیون', description:'خدمات طراحی ویلا و آپارتمان، فضاهای اداری و تجاری، سالن‌های زیبایی، فضای سبز و نمای ساختمان توسط گروه ساناز گودرزی.', alternates:{canonical:'/ourservices/'} };
|
||||
const order = ['residential', 'commercial', 'landscape', 'beauty', 'facade'];
|
||||
export default function Services() {
|
||||
return <><PageHeading title="خدمات ما" en="Our Services"/>
|
||||
<div className="reference-services">{order.map(id => {
|
||||
const service = services.find(item => item.id === id);
|
||||
return <section className="reference-service-card" id={id} key={id}>
|
||||
<h2>{service.title}</h2><p className="reference-english" dir="ltr">{service.en}</p>
|
||||
<div className="service-card-text"><p>{service.description}</p>{service.details.map(text => <p key={text}>{text}</p>)}</div>
|
||||
</section>;
|
||||
})}</div></>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import HomeExperience from '../components/home-experience';
|
||||
export const metadata={title:{absolute:'گروه معماری ساناز گودرزی | معماری و طراحی داخلی'},description:'گروه معماری ساناز گودرزی؛ طراحی ویلا و آپارتمان، فضاهای اداری و تجاری، سالن زیبایی، فضای سبز و نمای ساختمان.',alternates:{canonical:'/'}};
|
||||
export default function Home() { return <HomeExperience/>; }
|
||||
@@ -0,0 +1,12 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import MediaGallery from '../../../../components/media-gallery';
|
||||
import { faSlug, galleryOf, getPortfolioById, getPortfolios, imageUrlOf, plainText, titleOf } from '../../../../lib/meshkee-api';
|
||||
|
||||
export const dynamicParams = false;
|
||||
export async function generateStaticParams() { const params=(await getPortfolios()).map((item)=>({slug:String(item.id),titleFaSlug:faSlug(titleOf(item))})); return params.length?params:[{slug:'__placeholder__',titleFaSlug:'بدون-عنوان'}]; }
|
||||
export async function generateMetadata({params}) { const {slug}=await params; const item=await getPortfolioById(slug); if(!item)return{robots:{index:false,follow:false}}; const title=titleOf(item,'نمونه‌کار'); const description=item.seoMetaDescription||plainText(item.abstract||item.mainTextHtml||'').slice(0,160)||`معرفی پروژهٔ ${title} از گروه معماری ساناز گودرزی.`; const canonical=`/portfolios/${item.id}/${faSlug(title)}/`; return {title:item.seoMetaTitle||title,description,alternates:{canonical},openGraph:{title,description,url:canonical,type:'article',images:imageUrlOf(item)?[{url:imageUrlOf(item),alt:title}]:[]}}; }
|
||||
export default async function PortfolioPage({params}) { const {slug}=await params; const item=await getPortfolioById(slug); if(!item)notFound(); const all=await getPortfolios(); const title=titleOf(item); const cover=imageUrlOf(item); const gallery=galleryOf(item); const images=[...(cover?[{id:'cover',url:cover,alt:`تصویر اصلی پروژهٔ ${title}`}]:[]),...gallery.filter(image=>image.url!==cover)]; const related=all.filter(candidate=>candidate.id!==item.id&&(candidate.categoryId===item.categoryId||candidate.categoryName===item.categoryName)).slice(0,3); return <>
|
||||
<article className="portfolio-api-detail container"><Link className="text-link" href="/portfolios/">بازگشت به نمونه‌کارها ←</Link><header><span className="eyebrow">{item.categoryName||'نمونه‌کار معماری'}</span><h1>{title}</h1>{item.abstract&&<p>{plainText(item.abstract)}</p>}</header><MediaGallery images={images} title={title}/>{item.mainTextHtml&&<div className="rich-content" dangerouslySetInnerHTML={{__html:item.mainTextHtml}}/>}{item.projectUrl&&<a className="button button-dark" href={item.projectUrl} target="_blank" rel="noopener noreferrer">مشاهده وب‌سایت پروژه</a>}</article>
|
||||
{related.length>0&&<section className="related-work container"><h2>نمونه‌کارهای مشابه</h2><div className="editorial-grid">{related.map(candidate=>{const candidateTitle=titleOf(candidate);return <article key={candidate.id}><Link href={`/portfolios/${candidate.id}/${faSlug(candidateTitle)}/`}><div className="editorial-image"><img src={imageUrlOf(candidate)||'/img/subheader/bg.jpg'} alt={`تصویر پروژهٔ ${candidateTitle}`} loading="lazy"/></div><h3>{candidateTitle}</h3></Link></article>})}</div></section>}
|
||||
</>; }
|
||||
@@ -0,0 +1,8 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { portfolioItems } from '../../../lib/portfolio';
|
||||
import { services } from '../../../lib/content';
|
||||
import { PageHeading, ContactCTA } from '../../../components/common';
|
||||
export function generateStaticParams(){return portfolioItems.map(item=>({slug:item.slug}))}
|
||||
export async function generateMetadata({params}){const {slug}=await params;const item=portfolioItems.find(i=>i.slug===slug);return {title:item?.title??'نمونه‌کار',robots:{index:false,follow:true}}}
|
||||
export default async function PortfolioDetail({params}){const {slug}=await params;const item=portfolioItems.find(i=>i.slug===slug);if(!item)notFound();const service=services.find(s=>s.id===slug);return <><PageHeading title={item.title} en={service.en}/><article className="container portfolio-detail"><img src={item.image} alt={`تصویر نمایشی ${item.title}`}/><div><span className="eyebrow">پیش‌نمایش حوزهٔ طراحی</span><h2>{item.title}</h2><p>{service.description}</p><div className="placeholder-notice"><strong>اطلاعات پروژه‌ها به‌زودی</strong><p>{item.description} این تصویر معرفی حوزهٔ طراحی است و به پروژهٔ مشخصی نسبت داده نشده است.</p></div><Link className="text-link" href="/portfolios/">بازگشت به نمونه‌کارها ←</Link></div></article><ContactCTA/></>}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { PageHeading } from '../../components/common';
|
||||
import PortfolioGrid from '../../components/portfolio-grid';
|
||||
import { getPortfolioItems } from '../../lib/portfolio';
|
||||
export const metadata={title:'نمونه‌کارهای معماری و طراحی داخلی',description:'مجموعه نمونه‌کارهای معماری، طراحی داخلی، فضای سبز و نمای ساختمان گروه معماری ساناز گودرزی.',alternates:{canonical:'/portfolios/'}};
|
||||
export default async function Portfolios(){const items=await getPortfolioItems();return <><PageHeading title="نمونه‌کارها" en="OUR PORTFOLIO" description="نگاهی به حوزه‌های طراحی گروه معماری ساناز گودرزی."/><section className="container portfolio-section"><PortfolioGrid items={items}/></section></>}
|
||||
@@ -0,0 +1,276 @@
|
||||
/* Layout matched to the running source site; explicit client changes remain. */
|
||||
:root { --paper: #fff; --dark: #000; --gold: #efc379; }
|
||||
body { background:#fff; }
|
||||
.site-header, .site-header.over-hero { position:absolute; top:0; background:none; border:0; color:#fff; pointer-events:none; }
|
||||
.header-inner { width:calc(100% - 100px); height:112px; flex-direction:row-reverse; }
|
||||
.header-inner > a, .header-actions, .menu-button { pointer-events:auto; }
|
||||
.header-actions { display:flex; align-items:center; }
|
||||
.account-menu, .header-actions>.account-trigger { position:fixed; right:120px; top:29px; z-index:30; }
|
||||
.account-trigger { min-width:50px; height:50px; padding:0 14px; border:0; border-radius:8px; background:#2229; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; }
|
||||
.account-trigger svg { width:22px; height:22px; stroke-width:1.5; }
|
||||
.account-user span { font-size:13px; white-space:nowrap; }
|
||||
.account-dropdown { position:absolute; top:calc(100% + 10px); right:0; min-width:190px; padding:9px; background:#fff; color:#222; border:1px solid #eee; box-shadow:0 15px 35px #0002; }
|
||||
.account-dropdown a { display:flex; align-items:center; gap:10px; padding:11px 9px; font-size:13px; }
|
||||
.account-dropdown a:hover { background:#f4f1ea; }
|
||||
.account-dropdown svg { width:17px; height:17px; }
|
||||
.header-inner .brand-wordmark { display:none; }
|
||||
.header-inner .brand-logo { width:65px; max-height:76px; object-fit:contain; }
|
||||
.desktop-nav, .header-contact { display:none; }
|
||||
.menu-button { display:grid; place-items:center; position:fixed; right:50px; top:28px; color:white; background:#2229; border-radius:8px; width:56px; height:52px; }
|
||||
.menu-button svg { width:28px; height:28px; stroke-width:1.4; }
|
||||
.mobile-menu { width:100%; max-width:100%; height:100dvh; background:#222; color:#fff; padding:65px 100px; }
|
||||
.mobile-menu .menu-top { flex-direction:row-reverse; margin-bottom:10px; }
|
||||
.mobile-menu .brand-wordmark, .mobile-menu nav small, .mobile-menu nav svg, .menu-phone { display:none; }
|
||||
.mobile-menu .icon-button { border:0; }
|
||||
.mobile-menu .icon-button svg { width:32px; height:32px; }
|
||||
.mobile-menu nav { width:min(420px,100%); margin-left:auto; }
|
||||
.mobile-menu nav a { border:0; padding:20px 0; font-size:25px; }
|
||||
.reference-home { position:relative; background:#fff; }
|
||||
.reference-home.is-desktop, .reference-home.is-desktop > .swiper { height:100svh; }
|
||||
.reference-home.is-desktop .swiper-slide { height:100%; }
|
||||
.reference-hero { height:100svh; min-height:600px; position:relative; color:#fff; }
|
||||
.reference-hero-image { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
|
||||
.reference-hero-copy { position:absolute; top:50%; left:50%; transform:translate(-50%,-35%); width:90%; text-align:center; }
|
||||
.reference-hero h1 { font-size:clamp(42px,4.2vw,64px); line-height:1.5; color:#fff; text-shadow:0 2px 16px #0004; }
|
||||
.reference-gold-button { background:var(--gold); color:#292929; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; width:160px; height:56px; margin-top:64px; font-size:13px; }
|
||||
.reference-discover { position:absolute; right:9.5%; bottom:9.5%; display:flex; flex-direction:row-reverse; align-items:center; gap:44px; background:none; border:0; color:#fff; font-size:15px; }
|
||||
.reference-play { width:110px; height:110px; background:var(--gold); border-radius:50%; display:grid; place-items:center; }
|
||||
.reference-feature { display:grid; grid-template-columns:1fr 1fr; direction:ltr; height:100svh; min-height:650px; }
|
||||
.reference-feature-image { position:relative; min-width:0; }
|
||||
.reference-feature-image img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
|
||||
.reference-feature-info { position:relative; direction:rtl; background:#fff; display:flex; align-items:center; justify-content:flex-start; padding:70px max(9.5vw,75px) 70px 85px; }
|
||||
.reference-feature-copy { width:100%; max-width:350px; }
|
||||
.reference-english { letter-spacing:4px; font-size:15px; text-align:right; color:#222; margin-bottom:32px; white-space:nowrap; }
|
||||
.reference-feature h2 { position:relative; font-size:32px; line-height:1.5; margin-bottom:48px; }
|
||||
.reference-number { position:absolute; right:-42px; top:12px; font-size:18px; color:#333; }
|
||||
.reference-description { font-size:15px; line-height:1.85; text-align:justify; color:#666; }
|
||||
.reference-letter { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); font-family:Arial,sans-serif; font-size:clamp(180px,20vw,310px); font-weight:300; line-height:1; color:var(--gold); z-index:2; pointer-events:none; }
|
||||
.reference-project-link { display:flex; align-items:center; gap:18px; margin-top:clamp(55px,12vh,130px); font-size:13px; }
|
||||
.reference-project-link svg { color:#b4b4b4; }
|
||||
.feature-dark .reference-feature-info { background:#000; color:#fff; }
|
||||
.feature-dark .reference-english, .feature-dark .reference-description { color:#fff; }
|
||||
.feature-dark .reference-number { color:#a9a9a9; }
|
||||
.reference-pagination { position:absolute; z-index:10; right:3.5%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; }
|
||||
.reference-pagination button { width:30px; height:24px; display:grid; place-items:center; border:0; background:none; padding:0; }
|
||||
.reference-pagination span { width:10px; height:10px; border-radius:50%; background:#eee; }
|
||||
.reference-pagination.on-light span { background:#bdbdbd; }
|
||||
.reference-pagination button[aria-current] span { background:var(--gold); }
|
||||
.reference-home.is-stacked > .swiper > .swiper-wrapper { display:block; transform:none!important; }
|
||||
.reference-home.is-stacked .swiper-slide { height:auto!important; }
|
||||
.page-heading { height:690px; min-height:0; padding:0; display:grid; place-items:center; text-align:center; background-image:url('/img/subheader/bg.jpg'); background-position:center; color:#222; }
|
||||
.page-heading h1, .page-heading .eyebrow { color:#222; }
|
||||
.page-heading .container { display:flex; flex-direction:column; align-items:center; }
|
||||
.page-heading h1 { font-size:40px; order:0; margin:0 0 12px; }
|
||||
.page-heading .eyebrow { order:1; margin:0; font-size:18px; letter-spacing:5px; text-align:center; }
|
||||
.page-heading .breadcrumb, .page-heading p { display:none; }
|
||||
.reference-services { width:min(1100px,calc(100% - 80px)); margin:-100px auto 110px; position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
|
||||
.reference-service-card { background:#fff; padding:60px 48px; box-shadow:0 12px 42px #0000000c; scroll-margin-top:30px; }
|
||||
.reference-service-card h2 { font-size:21px; }
|
||||
.reference-service-card .reference-english { text-align:right; }
|
||||
.reference-service-card .reference-english { white-space:normal; font-size:12px; letter-spacing:4px; margin:0; padding-bottom:20px; border-bottom:1px solid #ddd; }
|
||||
.reference-service-card .service-card-text { margin-top:28px; }
|
||||
.reference-service-card p { font-size:15px; line-height:2.1; text-align:justify; }
|
||||
.reference-about-hero { min-height:100svh; background:url('/img/info/bg.jpg') center/cover; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:150px 20px 90px; text-align:center; }
|
||||
.reference-about-hero .reference-english { font-size:23px; margin:0 0 25px; text-align:center; }
|
||||
.reference-about-hero h1 { font-size:32px; line-height:1.5; }
|
||||
.reference-about-icons { display:flex; direction:ltr; gap:100px; margin-top:65px; }
|
||||
.reference-about-icons span { width:160px; height:160px; display:grid; place-items:center; border-radius:50%; background:#ef0060; }
|
||||
.reference-about-icons span:nth-child(2) { background:#efb900; }
|
||||
.reference-about-icons span:nth-child(3) { background:#096bd9; }
|
||||
.reference-about-icons img { width:60px; height:80px; object-fit:contain; }
|
||||
.reference-about-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:110px; width:min(1100px,calc(100% - 80px)); margin:100px auto; }
|
||||
.reference-about-intro h2 { font-size:30px; margin-bottom:8px; }
|
||||
.reference-about-intro .reference-english { text-align:right; }
|
||||
.reference-about-intro .reference-english { font-size:15px; letter-spacing:4px; margin-bottom:70px; }
|
||||
.reference-about-intro p { font-size:15px; line-height:2; text-align:justify; }
|
||||
.reference-about-intro img { width:445px; max-width:100%; justify-self:center; }
|
||||
.reference-about-values { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12%; padding:20px 30px 100px; }
|
||||
.reference-about-values > img { width:100%; }
|
||||
.reference-about-values-copy { max-width:330px; }
|
||||
.reference-about-values h2 { font-size:30px; }
|
||||
.reference-about-values .reference-english { white-space:normal; font-size:28px; letter-spacing:3px; margin-bottom:30px; }
|
||||
.reference-about-values p { font-size:13px; }
|
||||
.reference-progress { margin-top:40px; }
|
||||
.reference-progress label { display:block; font-size:13px; margin-bottom:12px; }
|
||||
.reference-progress progress { appearance:none; display:block; height:4px; width:100%; border:0; background:#f3f3f3; }
|
||||
.reference-progress progress::-webkit-progress-bar { background:#f3f3f3; }
|
||||
.reference-progress progress::-webkit-progress-value { background:var(--gold); }
|
||||
.reference-progress progress::-moz-progress-bar { background:var(--gold); }
|
||||
.reference-faq { max-width:1100px; margin:30px auto 120px; width:calc(100% - 80px); }
|
||||
.reference-faq > div { width:50%; margin-left:auto; }
|
||||
.reference-faq h2 { font-size:30px; }
|
||||
.reference-faq .reference-english { font-size:16px; margin-bottom:35px; }
|
||||
.reference-faq p { font-size:15px; margin-bottom:24px; }
|
||||
.reference-contact { max-width:1100px; width:calc(100% - 80px); margin:55px auto 80px; display:grid; grid-template-columns:repeat(3,1fr); gap:65px; }
|
||||
.reference-contact h2 { font-size:21px; text-align:center; margin-bottom:35px; }
|
||||
.reference-contact p, .reference-contact a { font-size:17px; color:#666; }
|
||||
.reference-contact p { margin-bottom:10px; }
|
||||
.reference-contact .contact-address-latin { font-size:14px; }
|
||||
.reference-contact-links a { display:block; text-align:center; margin-bottom:16px; overflow-wrap:anywhere; }
|
||||
.reference-contact-social { display:flex; justify-content:center; gap:24px; }
|
||||
.reference-contact-social a { display:flex; flex-direction:column; align-items:center; gap:9px; }
|
||||
.reference-contact-social svg { padding:14px; width:50px; height:50px; background:#eee; border-radius:50%; }
|
||||
.reference-message { margin:80px auto 110px; padding:0 20px; }
|
||||
.reference-message h2 { text-align:center; font-size:30px; }
|
||||
.reference-message .reference-english { text-align:center; margin:5px 0 45px; }
|
||||
.reference-message .contact-form { width:min(540px,100%); margin:auto; }
|
||||
.reference-message .form-grid { grid-template-columns:1fr; gap:26px; }
|
||||
.reference-message .contact-form label { font-size:13px; }
|
||||
.reference-message .contact-form input, .reference-message .contact-form textarea { background:#fff; border:1px solid #ddd; }
|
||||
.form-status.success { color:#39744c; }
|
||||
.form-status.error { color:#a33b35; }
|
||||
.contact-form button:disabled { opacity:.58; cursor:wait; }
|
||||
.toast { position:fixed; z-index:80; left:30px; bottom:30px; width:min(420px,calc(100% - 40px)); padding:17px 18px; background:#1f2721; color:#fff; display:flex; align-items:center; gap:12px; box-shadow:0 14px 40px #0004; }
|
||||
.toast>svg { color:var(--gold); flex:none; }
|
||||
.toast span { flex:1; font-size:14px; }
|
||||
.toast button { border:0; background:none; color:#fff; padding:5px; }
|
||||
.toast button svg { width:18px; height:18px; }
|
||||
.editorial-list { padding-block:80px 110px; }
|
||||
.editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:55px 30px; }
|
||||
.editorial-grid article { min-width:0; }
|
||||
.editorial-image { aspect-ratio:4/3; overflow:hidden; background:#eeeae1; margin-bottom:20px; }
|
||||
.editorial-image img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease; }
|
||||
.editorial-grid a:hover .editorial-image img { transform:scale(1.045); }
|
||||
.editorial-grid small { color:#9a8055; font-size:11px; }
|
||||
.editorial-grid h2, .editorial-grid h3 { font-size:22px; margin:8px 0 12px; }
|
||||
.editorial-grid p { color:#777; font-size:14px; line-height:1.9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||||
.editorial-grid a>span { display:flex; align-items:center; gap:9px; margin-top:18px; font-size:13px; }
|
||||
.empty-content { text-align:center; max-width:700px; margin:auto; }
|
||||
.empty-thumbnail { width:100%; aspect-ratio:16/7; background:linear-gradient(135deg,#ece8df,#f7f5f0); position:relative; }
|
||||
.empty-thumbnail:after { content:'BLOG'; position:absolute; inset:0; display:grid; place-items:center; color:#c8baa0; font-family:Arial,sans-serif; letter-spacing:14px; font-size:clamp(30px,7vw,70px); }
|
||||
.empty-content h2 { margin:35px 0 12px; font-size:27px; }
|
||||
.empty-content p { color:#777; }
|
||||
.editorial-detail, .portfolio-api-detail { max-width:1050px; padding-block:150px 100px; }
|
||||
.editorial-detail .text-link, .portfolio-api-detail .text-link { display:inline-block; margin-bottom:50px; }
|
||||
.editorial-detail h1, .portfolio-api-detail h1 { font-size:clamp(34px,5vw,58px); margin:12px 0 20px; }
|
||||
.editorial-lead, .portfolio-api-detail header p { color:#777; font-size:18px; max-width:760px; }
|
||||
.editorial-cover { width:100%; max-height:620px; object-fit:cover; margin:55px 0; }
|
||||
.rich-content { font-size:16px; line-height:2.2; color:#555; }
|
||||
.rich-content h2 { color:#222; font-size:28px; margin:45px 0 15px; }
|
||||
.rich-content img { max-width:100%; height:auto; }
|
||||
.media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:55px 0; }
|
||||
.media-gallery button { border:0; background:none; overflow:hidden; padding:0; aspect-ratio:4/3; cursor:zoom-in; }
|
||||
.media-gallery button:first-child { grid-column:1/-1; aspect-ratio:16/9; }
|
||||
.media-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
|
||||
.media-gallery button:hover img { transform:scale(1.08); }
|
||||
.lightbox { position:fixed; inset:0; z-index:100; background:#080808ed; display:grid; place-items:center; color:#fff; padding:40px 90px; }
|
||||
.lightbox>img { max-width:100%; max-height:calc(100dvh - 80px); object-fit:contain; }
|
||||
.lightbox button { position:absolute; border:0; background:#ffffff18; color:#fff; width:48px; height:48px; display:grid; place-items:center; }
|
||||
.lightbox-close { top:25px; right:25px; }
|
||||
.lightbox-prev { right:25px; top:50%; }
|
||||
.lightbox-next { left:25px; top:50%; }
|
||||
.lightbox>span { position:absolute; bottom:18px; font-family:Arial,sans-serif; }
|
||||
.related-work { padding-bottom:110px; }
|
||||
.related-work>h2 { font-size:30px; margin-bottom:35px; }
|
||||
.reference-message .form-bottom { flex-direction:column; align-items:stretch; }
|
||||
.reference-message .form-bottom button { align-self:center; background:var(--gold); color:#222; border-radius:4px; }
|
||||
.site-footer { background:#000; }
|
||||
.reference-footer-main { padding:140px 0 85px; width:calc(100% - 19%); margin:auto; display:grid; grid-template-columns:1fr 1.8fr; gap:70px; direction:ltr; }
|
||||
.reference-footer-intro, .reference-footer-details { direction:rtl; }
|
||||
.reference-footer-intro .brand-wordmark { display:none; }
|
||||
.reference-footer-intro .brand-logo { width:110px; margin:0 auto 35px; }
|
||||
.reference-footer-intro p { font-size:18px; line-height:1.65; color:white; text-align:justify; }
|
||||
.reference-footer-details { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
|
||||
.reference-footer-details h3 { font-size:20px; margin-bottom:30px; }
|
||||
.reference-footer-details p, .reference-footer-details a { color:#eee; font-size:15px; }
|
||||
.reference-footer-details .footer-contact a { font-size:16px; margin-bottom:12px; }
|
||||
.reference-footer-details .footer-contact .email { font-size:13px; }
|
||||
.reference-footer-details .footer-offices { display:block; }
|
||||
.reference-footer-details .footer-offices p { margin-bottom:16px; }
|
||||
.reference-footer-nav { display:flex; justify-content:center; gap:40px; padding:0 20px 55px; font-size:14px; }
|
||||
.footer-bottom { background:#111; }
|
||||
@media (max-width:1200px) {
|
||||
.reference-feature-info { padding-right:85px; padding-left:70px; }
|
||||
.reference-feature h2 { font-size:30px; margin-bottom:30px; }
|
||||
.reference-english { font-size:12px; letter-spacing:3px; }
|
||||
.reference-description { font-size:14px; }
|
||||
.reference-project-link { margin-top:55px; }
|
||||
.reference-footer-main { width:calc(100% - 100px); gap:40px; }
|
||||
.reference-footer-details { gap:30px; }
|
||||
.reference-footer-intro p { font-size:16px; }
|
||||
}
|
||||
@media (max-width:899px), (max-height:649px) {
|
||||
.reference-feature { min-height:650px; height:auto; }
|
||||
.reference-feature-info { padding:90px 55px 90px 60px; }
|
||||
.reference-letter { font-size:160px; }
|
||||
.reference-english { white-space:normal; }
|
||||
.reference-about-intro { gap:45px; }
|
||||
.reference-about-values { gap:7%; }
|
||||
.reference-about-icons { gap:50px; }
|
||||
.reference-about-icons span { width:130px; height:130px; }
|
||||
.reference-footer-main { grid-template-columns:1fr; padding-top:80px; }
|
||||
.reference-footer-intro { max-width:650px; }
|
||||
.reference-contact { gap:30px; }
|
||||
.editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
}
|
||||
@media (max-width:650px) {
|
||||
.header-inner { width:calc(100% - 40px); height:90px; }
|
||||
.header-inner .brand-logo { width:48px; }
|
||||
.menu-button { right:20px; top:20px; width:48px; height:48px; }
|
||||
.account-menu, .header-actions>.account-trigger { right:78px; top:20px; }
|
||||
.account-trigger { min-width:48px; width:48px; height:48px; padding:0; }
|
||||
.account-user { width:auto; max-width:180px; padding:0 12px; }
|
||||
.account-user span { max-width:90px; overflow:hidden; text-overflow:ellipsis; }
|
||||
.mobile-menu { padding:25px; }
|
||||
.mobile-menu nav a { font-size:22px; padding:18px 0; }
|
||||
.reference-hero { min-height:620px; }
|
||||
.reference-hero h1 { font-size:clamp(30px,7.4vw,42px); }
|
||||
.reference-hero-copy { transform:translate(-50%,-55%); }
|
||||
.reference-gold-button { margin-top:38px; }
|
||||
.reference-discover { right:25px; bottom:35px; gap:22px; font-size:13px; }
|
||||
.reference-play { width:70px; height:70px; }
|
||||
.reference-feature { display:flex; flex-direction:column; min-height:0; }
|
||||
.reference-feature-image { height:52svh; min-height:300px; }
|
||||
.reference-feature-info { padding:65px 40px 55px; min-height:430px; }
|
||||
.reference-feature-copy { max-width:none; }
|
||||
.reference-letter { left:35px; top:0; font-size:115px; transform:translateY(-50%); }
|
||||
.reference-number { position:static; display:inline-block; margin-left:16px; font-size:14px; }
|
||||
.reference-feature h2 { display:flex; align-items:start; font-size:28px; margin-bottom:28px; }
|
||||
.reference-feature .reference-english { margin-bottom:20px; font-size:12px; }
|
||||
.reference-description { font-size:15px; }
|
||||
.reference-project-link { margin-top:35px; }
|
||||
.page-heading { height:430px; }
|
||||
.page-heading h1 { font-size:32px; }
|
||||
.page-heading .eyebrow { font-size:14px; }
|
||||
.reference-services { width:calc(100% - 40px); grid-template-columns:1fr; gap:25px; margin-top:-55px; margin-bottom:65px; }
|
||||
.reference-service-card { padding:35px 25px; }
|
||||
.reference-service-card h2 { font-size:22px; }
|
||||
.reference-about-hero { min-height:700px; padding:140px 20px 90px; }
|
||||
.reference-about-hero h1 { font-size:28px; }
|
||||
.reference-about-icons { gap:22px; margin-top:50px; }
|
||||
.reference-about-icons span { width:80px; height:80px; }
|
||||
.reference-about-icons img { width:35px; height:45px; }
|
||||
.reference-about-intro { grid-template-columns:1fr; width:calc(100% - 40px); margin-block:65px; gap:35px; }
|
||||
.reference-about-intro h2 { font-size:27px; }
|
||||
.reference-about-intro .reference-english { margin-bottom:30px; font-size:12px; letter-spacing:2px; }
|
||||
.reference-about-intro img { width:340px; }
|
||||
.reference-about-values { grid-template-columns:1fr; padding:0 20px 60px; gap:35px; }
|
||||
.reference-about-values-copy { max-width:none; }
|
||||
.reference-about-values h2 { font-size:26px; }
|
||||
.reference-about-values .reference-english { font-size:22px; }
|
||||
.reference-faq { width:calc(100% - 40px); margin-bottom:70px; }
|
||||
.reference-faq > div { width:100%; }
|
||||
.reference-contact { width:calc(100% - 40px); grid-template-columns:1fr; margin-block:50px; gap:45px; }
|
||||
.reference-contact h2 { margin-bottom:20px; }
|
||||
.reference-contact p, .reference-contact a { font-size:16px; }
|
||||
.reference-message { margin-block:60px; }
|
||||
.reference-message h2 { font-size:25px; }
|
||||
.reference-footer-main { width:calc(100% - 40px); padding-top:60px; padding-bottom:40px; }
|
||||
.reference-footer-details { grid-template-columns:1fr; gap:35px; }
|
||||
.reference-footer-details h3 { font-size:19px; margin-bottom:22px; }
|
||||
.reference-footer-intro p { font-size:16px; }
|
||||
.reference-footer-nav { flex-wrap:wrap; gap:18px 25px; padding-bottom:35px; }
|
||||
.editorial-list, .editorial-detail, .portfolio-api-detail { padding-block:65px 80px; }
|
||||
.editorial-grid { grid-template-columns:1fr; }
|
||||
.media-gallery { grid-template-columns:1fr; gap:14px; }
|
||||
.media-gallery button:first-child { grid-column:auto; }
|
||||
.lightbox { padding:70px 15px; }
|
||||
.lightbox-prev { right:10px; }
|
||||
.lightbox-next { left:10px; }
|
||||
.toast { left:20px; bottom:20px; }
|
||||
}
|
||||
@media (prefers-reduced-motion:no-preference) {
|
||||
.reference-home .swiper-slide-active .reference-feature-copy { animation:gentle-entry .6s ease both; }
|
||||
.reference-project-link svg { transition:transform .25s; }
|
||||
.reference-project-link:hover svg { transform:translateX(-8px); }
|
||||
}
|
||||
Reference in New Issue
Block a user