docs: record approved website redesign plan

This commit is contained in:
2026-09-26 22:21:33 +03:30
parent 6bed8cf50f
commit 3b89eefa73
35 changed files with 2549 additions and 0 deletions

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

View File

@@ -0,0 +1,18 @@
# Logo-led Home/About comp: implementation map
Status: Home/About visual direction approved by the owner on 2026-09-25. [Home](d-logo-led-home.html) and [About](d-logo-led-about.html) are static review comps. They use the association's current logo, its sampled teal `#28626E`, pale gold `#F9E697`, and charcoal `#313332`. The event posters are copies of existing backend media. Blog titles and artwork in the Home comp are explicitly illustrative.
The frontend already has Shadcn/ui source components under `src/components/ui/` and `lucide-react`. Production implementation should compose those local components with theme tokens, not copy this comp's static HTML or inline SVG sprite:
| Comp element | Frontend composition |
| --- | --- |
| Primary/secondary action | `Button` with `asChild`, `variant="default"` or `variant="outline"`, and the app's `Link`. Use semantic theme tokens for the logo palette. |
| Event/post preview | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`; image from event/blog domain record. |
| Archive/category label | `Badge` with `secondary` or `outline` variant. |
| Footer and article dividers | `Separator` where a semantic divider helps. |
| Mobile navigation | Existing `MobileBottomNav` pattern, adjusted for brand tokens and content clearance. |
| Icons | Existing `lucide-react`: `ArrowUpLeft`, `CalendarDays`, `BookOpen`, `Newspaper`, `GraduationCap`, `UsersRound`, `Mail`, `Send`, `Instagram`. The comp's SVG sprite uses their icon paths. |
Home order is fixed: association intro → featured events → featured blog posts → participation CTA → footer. The CMS supplies intro/CTA and shared identity/contact copy. The event and blog sections read their existing APIs. The events model currently has no editorial `is_featured` flag; proposed first pass selects the next three published future events, then clearly labeled recent archive items if none are upcoming. Blog has `is_featured`; proposed first pass selects published featured posts, then recent published posts as fallback. Dates, prices, capacity, and registration status must come from each event record at render time, never from the static comp. A later owner decision can add manual curation if needed.
The comp is the approved visual and structural direction for T04. T05 CMS/API contract approval remains open; no production Home/About route or business rule changed.

View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#28626e">
<link rel="icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./d-logo-led.css">
<title>درباره انجمن — طرح مبتنی بر نشان انجمن</title>
</head>
<body>
<header class="site-head"><div class="wrap head-inner">
<a class="brand" href="./d-logo-led-home.html"><img src="./assets/favicon.ico" alt=""><span><strong>انجمن علمی مهندسی کامپیوتر</strong><small>دانشکده‌ی فنی و مهندسی شرق گیلان</small></span></a>
<nav class="top-nav" aria-label="ناوبری اصلی"><a href="./d-logo-led-home.html">خانه</a><a href="./d-logo-led-home.html#events">رویدادها</a><a href="./d-logo-led-home.html#blog">بلاگ</a><a href="#about" aria-current="page">درباره انجمن</a></nav>
<div class="head-action"><a class="button outline" href="https://east-guilan-ce.ir/auth">ورود / ثبت‌نام</a></div>
</div></header>
<main id="about">
<section class="about-hero" aria-labelledby="about-title"><div class="wrap"><h1 id="about-title">درباره انجمن</h1><p>انجمن علمی مهندسی کامپیوتر در دانشکده‌ی فنی و مهندسی شرق گیلان، فضایی برای یادگیری، اجرای برنامه‌های علمی و همکاری میان دانشجویان فراهم می‌کند.</p><div class="full-name">انجمن علمی مهندسی کامپیوتر دانشگاه گیلان (دانشکده‌ی فنی و مهندسی شرق گیلان)</div></div></section>
<section class="section" aria-labelledby="mission-title"><div class="wrap about-columns"><div><h2 id="mission-title">کاری که انجام می‌دهیم</h2><p>با برگزاری رویدادها و انتشار محتوای آموزشی، فرصت‌هایی برای تمرین مهارت، آشنایی با موضوع‌های تازه و ارتباط با دیگر علاقه‌مندان به فناوری ایجاد می‌کنیم.</p><p>دانشجویان می‌توانند از راه شرکت در برنامه‌ها، خواندن و نوشتن مطالب یا همکاری در اجرای فعالیت‌ها همراه انجمن باشند.</p><a class="button primary" href="./d-logo-led-home.html#events">دیدن رویدادها <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div><div class="about-points"><div class="about-point"><span class="icon-box"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#graduation-cap"/></svg></span><div><strong>یادگیری کاربردی</strong><span>کارگاه‌ها و برنامه‌های آموزشی</span></div></div><div class="about-point"><span class="icon-box"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#calendar-days"/></svg></span><div><strong>رویدادهای علمی</strong><span>نشست‌ها و فرصت‌های آشنایی با تجربه‌های تازه</span></div></div><div class="about-point"><span class="icon-box"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#users"/></svg></span><div><strong>همکاری دانشجویی</strong><span>مشارکت در برنامه‌ریزی و اجرای فعالیت‌ها</span></div></div></div></div></section>
<section class="section alt" id="contact" aria-labelledby="contact-title"><div class="wrap about-columns"><div><h2 id="contact-title">با انجمن در ارتباط باشید</h2><p>برای پرسش، پیشنهاد برنامه یا همکاری، از کانال‌های رسمی انجمن پیام بدهید.</p><p>برای شناخت برنامه‌های برگزارشده و نوشته‌های انجمن هم می‌توانید بخش رویدادها و بلاگ را ببینید.</p></div><div class="about-contact"><h2>راه‌های ارتباطی</h2><a dir="ltr" href="mailto:eastguilanceassociation@gmail.com">eastguilanceassociation@gmail.com</a><a dir="ltr" href="https://t.me/guilancea">t.me/guilancea</a><a dir="ltr" href="https://instagram.com/guilance.ir">instagram.com/guilance.ir</a></div></div></section>
<section class="section faq" aria-labelledby="faq-title"><div class="wrap"><div class="section-header"><div><h2 id="faq-title">پرسش‌های رایج</h2><p>چند پاسخ کوتاه برای شروع.</p></div></div><details><summary>چطور در یک رویداد شرکت کنم؟</summary><p>رویداد موردنظرتان را انتخاب کنید و شرایط، زمان و مراحل ثبت‌نام همان رویداد را بخوانید.</p></details><details><summary>چطور با انجمن همکاری کنم؟</summary><p>برای پیشنهاد همکاری، از راه‌های ارتباطی بالا پیام بدهید و موضوع پیشنهادی‌تان را توضیح دهید.</p></details></div></section>
<section class="cta" aria-labelledby="cta-title"><div class="wrap cta-inner"><div><h2 id="cta-title">از برنامه‌های انجمن شروع کنید</h2><p>رویدادهای برگزارشده و نوشته‌های انجمن، بهترین راه برای آشنایی با فعالیت‌های ما هستند.</p></div><div class="actions"><a class="button gold" href="./d-logo-led-home.html#events">رویدادها <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a><a class="button outline" href="./d-logo-led-home.html#blog">بلاگ</a></div></div></section>
</main>
<footer class="site-foot"><div class="wrap"><div class="foot-grid"><div><div class="foot-brand"><img src="./assets/favicon.ico" alt=""><span>انجمن علمی مهندسی کامپیوتر</span></div><p>دانشکده‌ی فنی و مهندسی شرق گیلان، دانشگاه گیلان. فضایی برای یادگیری، رویداد و همکاری دانشجویی.</p></div><div><h3>دسترسی سریع</h3><a href="./d-logo-led-home.html">خانه</a><a href="#about">درباره انجمن</a><a href="./d-logo-led-home.html#events">رویدادها</a><a href="./d-logo-led-home.html#blog">بلاگ</a></div><div><h3>همراه انجمن</h3><a href="https://east-guilan-ce.ir/auth">ورود / ثبت‌نام</a><a href="./d-logo-led-home.html#events">برنامه‌ها</a><a href="#contact">پیشنهاد همکاری</a></div><div><h3>ارتباط</h3><a class="contact-link" href="mailto:eastguilanceassociation@gmail.com"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#mail"/></svg><span dir="ltr">eastguilanceassociation@gmail.com</span></a><a class="contact-link" href="https://t.me/guilancea"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#send"/></svg><span>تلگرام انجمن</span></a><a class="contact-link" href="https://instagram.com/guilance.ir"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#instagram"/></svg><span>اینستاگرام انجمن</span></a></div></div><div class="foot-base"><span>انجمن علمی مهندسی کامپیوتر دانشگاه گیلان</span><a href="#about">بازگشت به بالا</a></div></div></footer>
<nav class="mobile-nav" aria-label="ناوبری نمونه در موبایل"><a href="./d-logo-led-home.html">خانه</a><a href="./d-logo-led-home.html#events">رویدادها</a><a href="./d-logo-led-home.html#blog">بلاگ</a><a href="#about" aria-current="page">درباره</a></nav>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#28626e">
<link rel="icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./d-logo-led.css">
<title>خانه — طرح مبتنی بر نشان انجمن</title>
</head>
<body>
<header class="site-head"><div class="wrap head-inner">
<a class="brand" href="#home"><img src="./assets/favicon.ico" alt=""><span><strong>انجمن علمی مهندسی کامپیوتر</strong><small>دانشکده‌ی فنی و مهندسی شرق گیلان</small></span></a>
<nav class="top-nav" aria-label="ناوبری اصلی"><a href="#home" aria-current="page">خانه</a><a href="#events">رویدادها</a><a href="#blog">بلاگ</a><a href="./d-logo-led-about.html">درباره انجمن</a></nav>
<div class="head-action"><a class="button outline" href="https://east-guilan-ce.ir/auth">ورود / ثبت‌نام</a></div>
</div></header>
<main id="home">
<section class="hero" aria-labelledby="hero-title"><div class="wrap hero-inner">
<div><h1 id="hero-title">انجمن علمی کامپیوتر دانشگاه گیلان</h1><p>در دانشکده‌ی فنی و مهندسی شرق گیلان، برای یادگیری، برگزاری رویدادهای تخصصی و به‌اشتراک‌گذاشتن تجربه‌های دانشجویی کنار هم هستیم. اینجا می‌توانید با انجمن و برنامه‌های آن آشنا شوید.</p><div class="hero-actions"><a class="button primary" href="./d-logo-led-about.html">آشنایی با انجمن <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a><a class="button outline" href="#events">دیدن رویدادها</a></div></div>
<div class="hero-visual" aria-hidden="true"><div class="gold-rule"></div><img src="./assets/favicon.ico" alt=""><span>یادگیری · رویداد · همکاری</span></div>
</div></section>
<section class="section" id="events" aria-labelledby="events-title"><div class="wrap">
<div class="section-header"><div><h2 id="events-title">رویدادهای برگزیده</h2><p>نگاهی به برنامه‌های انجمن؛ وضعیت و زمان هر رویداد در صفحه‌ی خودش مشخص می‌شود.</p></div><a class="section-link" href="https://east-guilan-ce.ir/events">همه رویدادها <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div>
<div class="cards">
<article class="card"><div class="card-image"><img src="./assets/event-docker.webp" alt="پوستر کارگاه آشنایی با داکر"><span class="badge image-badge">نمونه از آرشیو</span></div><div class="card-content"><h3>کارگاه آشنایی با داکر</h3><p>آشنایی عملی با مفاهیم کانتینر و ابزارهای توسعه.</p><div class="card-meta"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#calendar-days"/></svg><span>جزئیات و زمان در صفحه رویداد</span></div></div><div class="card-foot"><a href="https://east-guilan-ce.ir/events">مشاهده رویداد <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></article>
<article class="card"><div class="card-image"><img src="./assets/event-git.webp" alt="پوستر کارگاه گیت و گیت‌هاب"><span class="badge image-badge">نمونه از آرشیو</span></div><div class="card-content"><h3>کارگاه گیت و گیت‌هاب</h3><p>مروری بر همکاری تیمی، مدیریت نسخه و گردش کار توسعه.</p><div class="card-meta"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#calendar-days"/></svg><span>جزئیات و زمان در صفحه رویداد</span></div></div><div class="card-foot"><a href="https://east-guilan-ce.ir/events">مشاهده رویداد <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></article>
<article class="card"><div class="card-image"><img src="./assets/event-algorithms.webp" alt="پوستر دوره ساختمان داده و طراحی الگوریتم"><span class="badge image-badge">نمونه از آرشیو</span></div><div class="card-content"><h3>ساختمان داده و طراحی الگوریتم</h3><p>دوره‌ای برای تمرین حل مسئله و مفاهیم پایه‌ی الگوریتم.</p><div class="card-meta"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#calendar-days"/></svg><span>جزئیات و زمان در صفحه رویداد</span></div></div><div class="card-foot"><a href="https://east-guilan-ce.ir/events">مشاهده رویداد <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></article>
</div>
</div></section>
<section class="section alt" id="blog" aria-labelledby="blog-title"><div class="wrap">
<div class="section-header"><div><h2 id="blog-title">از بلاگ انجمن</h2><p>نوشته‌ها و تجربه‌هایی برای یادگیری فراتر از کلاس.</p></div><a class="section-link" href="https://east-guilan-ce.ir/blog">همه نوشته‌ها <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div>
<div class="blog-grid"><article class="card blog-lead"><div class="editorial-art" aria-hidden="true"><small>انجمن علمی مهندسی کامپیوتر</small><strong class="art-word">{ code }</strong><small>خواندن · تجربه کردن · ساختن</small></div><div><div class="card-content"><span class="badge gold">یادگیری</span><h3>از کجا یادگیری برنامه‌نویسی را شروع کنیم؟</h3><p>یک مسیر ساده برای انتخاب موضوع، تمرین مستمر و ساختن پروژه‌های کوچک.</p></div><div class="card-foot"><a href="https://east-guilan-ce.ir/blog">خواندن مطلب <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></div></article>
<div class="blog-stack"><article class="card blog-row"><span class="blog-mark"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#book-open"/></svg></span><div><span class="badge">راهنما</span><h3>چطور برای یک پروژه‌ی دانشجویی برنامه‌ریزی کنیم؟</h3><p>از ایده تا نسخه‌ی قابل ارائه</p><a class="section-link" href="https://east-guilan-ce.ir/blog">ادامه مطلب <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></article><article class="card blog-row"><span class="blog-mark gold"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#newspaper"/></svg></span><div><span class="badge gold">تجربه</span><h3>یادگیری گروهی چه کمکی به رشد مهارت‌ها می‌کند؟</h3><p>تمرین، بازخورد و همکاری</p><a class="section-link" href="https://east-guilan-ce.ir/blog">ادامه مطلب <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a></div></article></div></div>
<p class="review-note">پوسترهای رویداد از رسانه‌های موجود پروژه‌اند. عنوان‌ها و پوشش‌های بلاگ برای بررسی چیدمان نمایشی هستند؛ نسخه‌ی نهایی، نوشته‌های منتشرشده را از سامانه می‌خواند.</p>
</div></section>
<section class="cta" aria-labelledby="cta-title"><div class="wrap cta-inner"><div><h2 id="cta-title">در جریان برنامه‌های انجمن باشید</h2><p>رویدادها و نوشته‌های تازه را دنبال کنید و اگر پیشنهادی برای همکاری دارید، با انجمن در ارتباط باشید.</p></div><div class="actions"><a class="button gold" href="https://east-guilan-ce.ir/events">دیدن رویدادها <svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#arrow-up-left"/></svg></a><a class="button outline" href="./d-logo-led-about.html#contact">ارتباط با انجمن</a></div></div></section>
</main>
<footer class="site-foot"><div class="wrap"><div class="foot-grid"><div><div class="foot-brand"><img src="./assets/favicon.ico" alt=""><span>انجمن علمی مهندسی کامپیوتر</span></div><p>دانشکده‌ی فنی و مهندسی شرق گیلان، دانشگاه گیلان. فضایی برای یادگیری، رویداد و همکاری دانشجویی.</p></div><div><h3>دسترسی سریع</h3><a href="#home">خانه</a><a href="./d-logo-led-about.html">درباره انجمن</a><a href="https://east-guilan-ce.ir/events">رویدادها</a><a href="https://east-guilan-ce.ir/blog">بلاگ</a></div><div><h3>همراه انجمن</h3><a href="https://east-guilan-ce.ir/auth">ورود / ثبت‌نام</a><a href="https://east-guilan-ce.ir/events">برنامه‌ها</a><a href="./d-logo-led-about.html#contact">پیشنهاد همکاری</a></div><div><h3>ارتباط</h3><a class="contact-link" href="mailto:eastguilanceassociation@gmail.com"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#mail"/></svg><span dir="ltr">eastguilanceassociation@gmail.com</span></a><a class="contact-link" href="https://t.me/guilancea"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#send"/></svg><span>تلگرام انجمن</span></a><a class="contact-link" href="https://instagram.com/guilance.ir"><svg class="icon" aria-hidden="true"><use href="./d-lucide-icons.svg#instagram"/></svg><span>اینستاگرام انجمن</span></a></div></div><div class="foot-base"><span>انجمن علمی مهندسی کامپیوتر دانشگاه گیلان</span><a href="#home">بازگشت به بالا</a></div></div></footer>
<nav class="mobile-nav" aria-label="ناوبری نمونه در موبایل"><a href="#home" aria-current="page">خانه</a><a href="#events">رویدادها</a><a href="#blog">بلاگ</a><a href="./d-logo-led-about.html">درباره</a></nav>
<script>
function syncNav(){
const current = location.hash === '#events' || location.hash === '#blog' ? location.hash : '#home';
for (const link of document.querySelectorAll('.mobile-nav a[href^="#"],.top-nav a[href^="#"]')) {
if (link.getAttribute('href') === current) link.setAttribute('aria-current','page');
else link.removeAttribute('aria-current');
}
}
addEventListener('hashchange',syncNav);
syncNav();
</script>
</body>
</html>

View File

@@ -0,0 +1,18 @@
@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}}

View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="arrow-up-left" viewBox="0 0 24 24"><path d="M7 17V7h10"/><path d="M17 17 7 7"/></symbol>
<symbol id="calendar-days" viewBox="0 0 24 24"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></symbol>
<symbol id="book-open" viewBox="0 0 24 24"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></symbol>
<symbol id="mail" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
<symbol id="send" viewBox="0 0 24 24"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></symbol>
<symbol id="instagram" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></symbol>
<symbol id="clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16.5 12"/></symbol>
<symbol id="users" viewBox="0 0 24 24"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></symbol>
<symbol id="graduation-cap" viewBox="0 0 24 24"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></symbol>
<symbol id="newspaper" viewBox="0 0 24 24"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8V6Z"/></symbol>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB