19 lines
12 KiB
CSS
19 lines
12 KiB
CSS
@font-face{font-family:Vazirmatn;src:url('./assets/Vazirmatn-variable.woff2') format('woff2');font-display:swap}
|
|
:root{--brand:#28626e;--brand-deep:#1c4c57;--gold:#f9e697;--charcoal:#313332;--ink:#22363a;--muted:#53686b;--line:#d9e5e4;--wash:#f3f8f7;--warm:#faf8f0;--white:#fff;--radius:16px}
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--white);font:400 16px/1.8 Vazirmatn,Tahoma,sans-serif}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}::selection{background:var(--gold);color:var(--charcoal)}.wrap{width:min(100% - 48px,1180px);margin-inline:auto}
|
|
.site-head{position:sticky;top:0;z-index:20;background:#fffffff2;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.head-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}.brand img{width:44px;height:44px;object-fit:contain}.brand strong{display:block;font-weight:800;font-size:15px;line-height:1.45}.brand small{display:block;font-size:11px;color:var(--muted);line-height:1.5}.top-nav{display:flex;align-items:center;gap:5px}.top-nav a{font-size:14px;font-weight:650;color:var(--muted);padding:9px 14px;border-radius:10px;text-decoration:none}.top-nav a:hover,.top-nav a[aria-current=page]{color:var(--brand-deep);background:var(--wash)}.head-action{display:flex;align-items:center;gap:10px}
|
|
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 18px;border-radius:10px;border:1px solid transparent;text-decoration:none;font-size:14px;font-weight:750;line-height:1.45;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,transform .18s}.button svg{width:17px;height:17px;flex:none}.button.primary{background:var(--brand);color:white}.button.primary:hover{background:var(--brand-deep)}.button.outline{border-color:#b8ceca;background:white;color:var(--brand-deep)}.button.outline:hover{background:var(--wash)}.button.ghost{color:var(--brand-deep)}.button.ghost:hover{background:var(--wash)}.button.gold{background:var(--gold);color:var(--charcoal)}.button.gold:hover{background:#ffeeb0}.button:active{transform:translateY(1px)}
|
|
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:3px 11px;color:var(--brand-deep);background:var(--wash);font-size:12px;font-weight:700;line-height:1.65}.badge.gold{background:#fff8db;border-color:#efe2a7;color:#655019}.badge.neutral{color:var(--muted);background:white}
|
|
.hero{background:linear-gradient(180deg,#f8fbfa 0%,white 100%);border-bottom:1px solid var(--line)}.hero-inner{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(330px,.86fr);gap:clamp(35px,5vw,80px);align-items:center;min-height:496px;padding-block:62px}.hero h1{font-size:clamp(39px,4.2vw,62px);line-height:1.3;letter-spacing:-.025em;font-weight:850;margin:0 0 19px;max-width:15ch}.hero p{max-width:50ch;color:var(--muted);font-size:18px;line-height:1.95;margin:0 0 25px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.hero-visual{position:relative;min-height:330px;border-radius:22px;background:var(--brand);display:grid;place-items:center;overflow:hidden}.hero-visual:before{content:"";position:absolute;inset:18px;border:1px solid #ffffff38;border-radius:14px}.hero-visual:after{content:"";position:absolute;left:-55px;bottom:-105px;width:270px;height:270px;border:1px solid #f9e69766;border-radius:50%}.hero-visual img{position:relative;z-index:1;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 17px 30px #102c3080)}.hero-visual span{position:absolute;right:30px;bottom:24px;color:#e8f4f2;font-size:13px;font-weight:650}.hero-visual .gold-rule{position:absolute;top:0;right:0;left:0;height:5px;background:var(--gold)}
|
|
.section{padding-block:77px}.section.alt{background:var(--wash)}.section-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:27px}.section-header h2{font-size:clamp(27px,2.7vw,38px);font-weight:800;line-height:1.4;margin:0}.section-header p{color:var(--muted);margin:6px 0 0;font-size:15px}.section-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand-deep);font-size:14px;font-weight:750;text-decoration:none;white-space:nowrap}.section-link:hover{text-decoration:underline;text-underline-offset:5px}.section-link svg{width:17px;height:17px}
|
|
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{min-width:0;overflow:hidden;background:white;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-3px);border-color:#b6ceca}.card-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e5eeeb}.card-image img{width:100%;height:100%;object-fit:cover;display:block}.card-image .image-badge{position:absolute;right:13px;top:13px;background:#fffef5ed;border-color:#fff;color:var(--ink)}.card-content{padding:19px 20px 0;flex:1}.card-content h3{font-size:18px;line-height:1.6;font-weight:800;margin:0 0 9px}.card-content p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:15px}.card-meta svg{width:15px;height:15px}.card-foot{padding:17px 20px 19px}.card-foot a{display:inline-flex;align-items:center;gap:5px;color:var(--brand-deep);text-decoration:none;font-size:14px;font-weight:750}.card-foot a:hover{text-decoration:underline;text-underline-offset:4px}.card-foot svg{width:16px;height:16px}
|
|
.blog-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:18px}.blog-lead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:320px}.editorial-art{min-height:220px;background:var(--brand-deep);color:var(--gold);padding:24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.editorial-art:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #f9e69785;border-radius:50%;left:-85px;top:46px}.editorial-art .art-word{font-size:clamp(46px,5vw,74px);line-height:1;letter-spacing:-.04em;font-weight:900;direction:ltr;align-self:flex-end;opacity:.92}.editorial-art small{font-size:13px;color:#fff8d2;position:relative;z-index:1}.blog-lead .card-content{padding:28px 26px 0}.blog-lead .card-content h3{font-size:23px}.blog-stack{display:grid;gap:14px}.blog-row{display:flex;align-items:center;gap:17px;padding:21px;min-height:150px}.blog-row .blog-mark{width:76px;height:76px;border-radius:14px;display:grid;place-items:center;flex:none;background:#e8f2f0;color:var(--brand-deep)}.blog-row .blog-mark.gold{background:#fff6d1;color:#6b5716}.blog-row .blog-mark svg{width:30px;height:30px}.blog-row h3{font-size:17px;margin:7px 0 5px}.blog-row p{color:var(--muted);font-size:13px;margin:0}.blog-row .badge{font-size:11px;padding:1px 8px}
|
|
.cta{background:var(--brand-deep);color:white;position:relative;overflow:hidden}.cta:before{content:"";position:absolute;width:410px;height:410px;border:1px solid #f9e6975e;border-radius:50%;left:-110px;top:-135px}.cta-inner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:67px}.cta h2{font-size:clamp(27px,3vw,40px);line-height:1.4;margin:0 0 9px}.cta p{margin:0;color:#d0e2e0;max-width:60ch}.cta .actions{display:flex;gap:10px;flex-wrap:wrap}.cta .button.outline{background:transparent;border-color:#a5c6c6;color:white}.cta .button.outline:hover{background:#ffffff1a}
|
|
.site-foot{background:var(--charcoal);color:#e9eeed;padding:55px 0 27px}.foot-grid{display:grid;grid-template-columns:1.55fr .8fr .8fr 1.15fr;gap:35px}.foot-brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:750}.foot-brand img{width:48px;height:48px}.site-foot p{color:#c0cdcb;font-size:13px;line-height:1.9;max-width:37ch}.site-foot h3{margin:4px 0 14px;font-size:14px;color:white}.site-foot a{display:block;color:#d4dedc;text-decoration:none;font-size:13px;margin-bottom:9px;overflow-wrap:anywhere}.site-foot a:hover{text-decoration:underline;text-underline-offset:4px}.site-foot .contact-link{display:flex;align-items:start;gap:8px}.site-foot .contact-link svg{width:16px;height:16px;margin-top:4px}.foot-base{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:39px;padding-top:19px;border-top:1px solid #ffffff30;color:#b7c5c2;font-size:12px}.foot-base a{margin:0}
|
|
.about-hero{background:var(--wash);padding:85px 0 72px;border-bottom:1px solid var(--line)}.about-hero h1{font-size:clamp(38px,4.2vw,58px);line-height:1.3;margin:0 0 17px}.about-hero p{max-width:70ch;color:var(--muted);font-size:18px;margin:0 0 25px}.about-hero .full-name{border-right:3px solid var(--gold);padding-right:14px;font-size:14px;font-weight:650;color:var(--brand-deep)}.about-columns{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:start}.about-columns h2{margin:0 0 16px;font-size:31px}.about-columns p{color:var(--muted);margin:0 0 15px}.about-points{display:grid;gap:12px}.about-point{display:flex;align-items:start;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}.about-point .icon-box{width:40px;height:40px;border-radius:10px;background:var(--wash);color:var(--brand-deep);display:grid;place-items:center;flex:none}.about-point strong{display:block;font-size:16px}.about-point span{font-size:13px;color:var(--muted)}.about-contact{background:var(--warm);border:1px solid #eae4cb;border-radius:var(--radius);padding:30px}.about-contact h2{margin:0 0 11px}.about-contact a{display:block;color:var(--brand-deep);overflow-wrap:anywhere;text-underline-offset:4px;margin:9px 0}.about-contact a[dir=ltr]{text-align:right}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-weight:700}.faq details p{color:var(--muted);margin:10px 0 0;max-width:70ch}
|
|
.mobile-nav{display:none}.review-note{font-size:12px;color:var(--muted);margin:22px 0 0}#home,#events,#blog,#contact,#about{scroll-margin-top:88px}
|
|
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr .8fr}.cards{gap:12px}.blog-grid{grid-template-columns:1fr}.blog-stack{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1.4fr 1fr 1fr}.foot-grid>div:last-child{grid-column:1/-1}}
|
|
@media(max-width:760px){.wrap{width:min(100% - 32px,1180px)}.head-inner{min-height:67px}.brand img{width:39px;height:39px}.brand small{display:none}.brand strong{font-size:14px}.top-nav,.head-action{display:none}.hero-inner{grid-template-columns:1fr;gap:28px;min-height:0;padding-block:54px 40px}.hero h1{font-size:clamp(36px,8vw,48px);max-width:18ch}.hero p{font-size:16px}.hero-visual{min-height:175px}.hero-visual img{width:108px;height:108px}.hero-visual span{font-size:11px;right:18px;bottom:12px}.hero-visual:after{width:160px;height:160px;bottom:-70px;left:-30px}.section{padding-block:56px}.section-header{align-items:start}.section-header h2{font-size:29px}.cards{grid-template-columns:1fr;gap:15px}.card-image{aspect-ratio:16/8.4}.blog-grid,.blog-stack{grid-template-columns:1fr}.blog-lead{grid-template-columns:1fr}.editorial-art{min-height:180px}.blog-row{min-height:130px}.cta-inner{display:block;padding-block:55px}.cta .actions{margin-top:22px}.foot-grid{grid-template-columns:1fr 1fr;gap:27px}.foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:1/-1}.site-foot{padding-bottom:120px}.about-hero{padding:65px 0 55px}.about-columns{grid-template-columns:1fr;gap:28px}.mobile-nav{position:fixed;z-index:30;bottom:calc(12px + env(safe-area-inset-bottom));right:16px;left:16px;display:flex;justify-content:space-around;gap:3px;padding:7px;border:1px solid #cadbd8;border-radius:20px;background:#fffffff2;box-shadow:0 12px 34px #143e4640;backdrop-filter:blur(14px)}.mobile-nav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:11px;font-weight:700;padding:8px 2px;border-radius:14px}.mobile-nav a[aria-current=page]{background:var(--brand);color:white}}
|
|
@media(max-width:480px){.hero-actions,.cta .actions{flex-direction:column}.hero-actions .button,.cta .button{width:100%}.section-header{display:block}.section-link{margin-top:8px}.foot-grid{grid-template-columns:1fr 1fr}.foot-base{display:block}.foot-base a{margin-top:7px}}
|
|
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.card{transition:none}}
|