From bbc6ca0d698d497d7eed4bfb3a379389e58f26b9 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 1 Oct 2026 05:06:40 +0000 Subject: [PATCH 1/3] feat(home): restore CRA lab culture typewriter mottos Cycle the three English culture slogans from legacy About/LAB_CULTURE with vanilla type/delete loop, blinking underscore cursor, and reduced-motion instant rotation. Placed below mission copy in #lab-introduction. Co-authored-by: SSU-WEI HUANG --- docs/content-guide.md | 7 +- scripts/smoke-build.mjs | 4 +- src/components/HomePage.astro | 13 +++ src/data/page-copy.mjs | 10 +++ src/scripts/home-culture-typewriter.mjs | 106 ++++++++++++++++++++++++ src/styles/cra-layout.css | 41 +++++++++ tests/home-logo-browser.mjs | 2 + 7 files changed, 179 insertions(+), 4 deletions(-) create mode 100644 src/scripts/home-culture-typewriter.mjs diff --git a/docs/content-guide.md b/docs/content-guide.md index 674c2e6..b3a8e4e 100644 --- a/docs/content-guide.md +++ b/docs/content-guide.md @@ -145,8 +145,11 @@ and for the home hiking hero (`group-hiking` photo path). Do not add Life to the site nav or sitemap. The homepage shows a **mission** blurb (`home.{zh,en}.missionParagraphs` in -`src/data/page-copy.mjs`, rendered in `HomePage.astro` as `#lab-introduction`) -and the **NEWS & AWARDS** band (award records with external `source` links). Other +`src/data/page-copy.mjs`, rendered in `HomePage.astro` as `#lab-introduction`), +a **lab culture typewriter** (`home.{zh,en}.cultureMottos` — CRA English mottos on +both locales; `src/scripts/home-culture-typewriter.mjs`, `prefers-reduced-motion` +cycles text without typing), and the **NEWS & AWARDS** band (award records with +external `source` links). Other page UI labels also live in `src/data/page-copy.mjs`. Visual styling (gradients, liquid-glass controls, fonts) is documented in `docs/architecture.md` under **CRA visual system**. diff --git a/scripts/smoke-build.mjs b/scripts/smoke-build.mjs index ea5f380..fc80530 100644 --- a/scripts/smoke-build.mjs +++ b/scripts/smoke-build.mjs @@ -71,11 +71,11 @@ const unexpectedMissingCmsVars = ['CMS_GITHUB_REPO', 'CMS_OAUTH_BASE_URL', 'PUBL const checks = [ { file: 'dist/index.html', - includes: ['DVLab', 'NEWS & AWARDS', '設計驗證實驗室'], + includes: ['DVLab', 'NEWS & AWARDS', '設計驗證實驗室', 'We research because we are curious'], }, { file: 'dist/en/index.html', - includes: ['DVLab', 'NEWS & AWARDS', 'Design Verification Lab'], + includes: ['DVLab', 'NEWS & AWARDS', 'Design Verification Lab', 'We research because we are curious'], }, { file: 'dist/host/index.html', diff --git a/src/components/HomePage.astro b/src/components/HomePage.astro index 1d56377..acce5be 100644 --- a/src/components/HomePage.astro +++ b/src/components/HomePage.astro @@ -9,6 +9,8 @@ import { pickI18nText } from '../utils/i18n-text'; const { lang } = Astro.props as { lang: 'zh' | 'en' }; const labels = pageCopy.home[lang]; +const cultureMottosJson = JSON.stringify(labels.cultureMottos); +const cultureMottoInitial = labels.cultureMottos[0] ?? ''; const awardLabels = pageCopy.awards[lang]; const pathPrefix = lang === 'en' ? '/en' : ''; const t = lang === 'en' ? siteEn : siteZh; @@ -34,6 +36,16 @@ function awardAttendants(award: { students: string[]; advisors?: string[] }) { {labels.missionParagraphs.map((paragraph) => (

{paragraph}

))} +

+ + {cultureMottoInitial} + +

@@ -71,4 +83,5 @@ function awardAttendants(award: { students: string[]; advisors?: string[] }) { diff --git a/src/data/page-copy.mjs b/src/data/page-copy.mjs index 9f2bc76..d0ffa38 100644 --- a/src/data/page-copy.mjs +++ b/src/data/page-copy.mjs @@ -6,6 +6,11 @@ export const pageCopy = { "在 DVLab，我們聚焦三大研究軸線：AI 形式方法、EDA 與 3DIC、以及量子設計自動化。面對系統層級設計的驗證瓶頸，我們以自動抽象降低問題複雜度，並以學習與引導式精化捕捉關鍵設計意圖，朝向可重現、可分享的開源驗證與設計流程努力。", "我們也關注量子計算如何重塑設計堆疊——從合成、映射、最佳化到在實際裝置上的驗證；同時在 3DIC 與異質整合場景延伸時序、簽核與系統級 EDA 方法。無論是哪一條路線，我們都希望在嚴謹理論、實用工具與探索未知的好奇心之間取得平衡。" ], + "cultureMottos": [ + "We research because we are curious", + "We publish because we love to share", + "We exercise because we work too hard" + ], "newsAwards": "NEWS & AWARDS", "allAwards": "所有獲獎紀錄", "awardSeparator": "、", @@ -19,6 +24,11 @@ export const pageCopy = { "At DVLab, we advance three connected directions—AI Formal Methods, EDA for 3DIC, and Quantum Design Automation. To ease system-level verification bottlenecks, we combine automatic abstraction that tames complexity with learning-guided refinement that captures essential design intent, building open, reproducible frameworks our collaborators can rely on.", "We are equally curious about how quantum techniques reshape the computing stack—from synthesis and optimization to verification on practical devices—and how classical EDA must evolve for heterogeneous 3DIC integration and sign-off. Across AI Formal, EDA 3DIC, and Quantum, we pursue rigorous theory, useful tools, and the curiosity that keeps hard engineering problems worth solving." ], + "cultureMottos": [ + "We research because we are curious", + "We publish because we love to share", + "We exercise because we work too hard" + ], "newsAwards": "NEWS & AWARDS", "allAwards": "All awards", "awardSeparator": ", ", diff --git a/src/scripts/home-culture-typewriter.mjs b/src/scripts/home-culture-typewriter.mjs new file mode 100644 index 0000000..56f0a24 --- /dev/null +++ b/src/scripts/home-culture-typewriter.mjs @@ -0,0 +1,106 @@ +/** CRA About lab-culture typewriter (typewriter-effect options: delay 20, deleteSpeed 30, cursor _). */ + +const TYPE_DELAY_MS = 20; +const DELETE_DELAY_MS = 30; +const PAUSE_TYPED_MS = 2000; +const PAUSE_DELETED_MS = 400; +const REDUCED_ROTATE_MS = 5000; + +function parseStrings(root) { + try { + const raw = root.dataset.strings; + if (!raw) return []; + const parsed = JSON.parse(raw); + return Array.isArray(parsed) ? parsed.filter((s) => typeof s === 'string' && s.length > 0) : []; + } catch { + return []; + } +} + +function runTypewriter(display, strings) { + let stringIndex = 0; + let charIndex = 0; + let deleting = false; + let cancelled = false; + + const schedule = (fn, ms) => { + const id = window.setTimeout(fn, ms); + return () => { + cancelled = true; + window.clearTimeout(id); + }; + }; + + const step = () => { + if (cancelled) return; + const current = strings[stringIndex]; + if (!deleting) { + charIndex += 1; + display.textContent = current.slice(0, charIndex); + if (charIndex >= current.length) { + schedule(() => { + deleting = true; + step(); + }, PAUSE_TYPED_MS); + return; + } + schedule(step, TYPE_DELAY_MS); + return; + } + + charIndex -= 1; + display.textContent = current.slice(0, charIndex); + if (charIndex <= 0) { + deleting = false; + stringIndex = (stringIndex + 1) % strings.length; + schedule(step, PAUSE_DELETED_MS); + return; + } + schedule(step, DELETE_DELAY_MS); + }; + + step(); + return () => { + cancelled = true; + }; +} + +function runReducedCycle(display, strings) { + let index = 0; + display.textContent = strings[0]; + if (strings.length <= 1) return () => {}; + + const id = window.setInterval(() => { + index = (index + 1) % strings.length; + display.textContent = strings[index]; + }, REDUCED_ROTATE_MS); + + return () => window.clearInterval(id); +} + +export function initHomeCultureTypewriter(root) { + if (!(root instanceof HTMLElement)) return () => {}; + const strings = parseStrings(root); + const display = root.querySelector('[data-typewriter-display]'); + if (!display || strings.length === 0) return () => {}; + + const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + root.classList.toggle('is-reduced-motion', reduced); + + if (reduced) { + return runReducedCycle(display, strings); + } + + return runTypewriter(display, strings); +} + +export function initHomeCultureTypewriters() { + const roots = document.querySelectorAll('[data-culture-typewriter]'); + const cleanups = []; + for (const root of roots) { + cleanups.push(initHomeCultureTypewriter(root)); + } + return () => cleanups.forEach((fn) => fn()); +} + +initHomeCultureTypewriters(); diff --git a/src/styles/cra-layout.css b/src/styles/cra-layout.css index 9ddcac8..1fa24c6 100644 --- a/src/styles/cra-layout.css +++ b/src/styles/cra-layout.css @@ -210,6 +210,47 @@ margin-bottom: 0; } +/* CRA About lab-culture typewriter (Coolvetica + light gold, blinking _) */ +.home-culture-motto { + margin: clamp(28px, 4vw, 40px) 0 0; + text-align: center; +} + +.home-culture-typewriter { + display: inline-block; + font-family: var(--font-title); + font-size: clamp(26px, 3.2vw, 44px); + font-weight: var(--fw-latin-strong); + line-height: 1.25; + color: var(--cra-light-gold); + letter-spacing: 0.02em; +} + +[data-theme='light'] .home-culture-typewriter { + color: #4a5e20; +} + +.home-culture-cursor { + display: inline-block; + margin-left: 1px; + animation: home-culture-cursor-blink 0.9s step-end infinite; +} + +.home-culture-motto.is-reduced-motion .home-culture-cursor { + animation: none; + opacity: 0.85; +} + +@keyframes home-culture-cursor-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + [data-theme='light'] .home-mission-text { color: var(--text-soft); } diff --git a/tests/home-logo-browser.mjs b/tests/home-logo-browser.mjs index b795814..deab606 100644 --- a/tests/home-logo-browser.mjs +++ b/tests/home-logo-browser.mjs @@ -19,6 +19,8 @@ export async function testHomeLogo(browser, base) { assert.equal(await logo.locator('img').count(), 6); assert.equal(await page.locator('a[href*="/join/"]').count(), 0); assert.equal(await page.locator('.home-news-item').count(), 7); + assert(await page.locator('[data-culture-typewriter]').isVisible()); + assert((await page.locator('[data-culture-typewriter]').getAttribute('data-strings'))?.includes('We publish because we love to share')); assert((await page.locator('.home-opening').boundingBox()).height >= 844 * 0.8 - 1); assert(await page.locator('h1').isVisible()); assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)); From 95867e9140220094a122dfc561cc95b7949d0dc3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 1 Oct 2026 10:20:46 +0000 Subject: [PATCH 2/3] fix(home): nowrap on culture typewriter to keep cursor on same line Co-authored-by: SSU-WEI HUANG --- src/styles/cra-layout.css | 797 -------------------------------------- 1 file changed, 797 deletions(-) diff --git a/src/styles/cra-layout.css b/src/styles/cra-layout.css index 1fa24c6..e69de29 100644 --- a/src/styles/cra-layout.css +++ b/src/styles/cra-layout.css @@ -1,797 +0,0 @@ -/* CRA (2022 React) layout parity — flat sections, navy/gold chrome */ - -.cra-site { - --cra-dark-blue: #1f3751; - --cra-black-blue: #14263a; - --cra-light-blue: #bcdddf; - --cra-gray-blue: #6daaaf; - --cra-gold: #ffd700; - --cra-light-gold: #fcffcc; - --cra-news-gray: #dddddd; -} - -.nav-link { - color: var(--cra-light-blue); - opacity: 0.72; -} - -.nav-link:hover, -.nav-link:focus-visible, -.nav-link.is-active { - color: var(--cra-light-gold); - opacity: 1; -} - -.page-title { - font-family: var(--font-title); - color: var(--cra-light-blue); - font-weight: var(--fw-heading); - font-size: clamp(36px, 5vw, 56px); - line-height: 1.15; -} - -.cra-page-title { - color: var(--cra-light-blue); -} - -[data-theme='light'] .page-title, -[data-theme='light'] .cra-page-title { - color: var(--text); -} - -.page-head { - margin-bottom: 24px; - padding-top: 8px; -} - -.page-head > p { - color: var(--cra-light-blue); - font-size: var(--text-md); - max-width: 52rem; -} - -[data-theme='light'] .page-head > p { - color: var(--text-soft); -} - -/* Flat surfaces: strip card chrome on list/detail pages */ -.cra-site .detail-shell .card, -.cra-site .filter-wrap .card, -.cra-site .paper-list-item { - background: transparent; - box-shadow: none; - backdrop-filter: none; - border: none; - border-radius: 0; - padding: 0; -} - -/* Member profile hero: liquid-glass panel (list tiles use .member-tile) */ -.cra-site .detail-shell .card.detail-hero-member { - border: none; - border-radius: var(--radius-card); - padding: clamp(18px, 3vw, 26px); - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.cra-site .card-hover:hover { - transform: none; - box-shadow: none; -} - -.paper-list { - display: flex; - flex-direction: column; - gap: 0; - margin-top: 12px; -} - -.paper-list-item { - display: block; - padding: 18px 0; - border-bottom: 1px solid rgba(188, 221, 223, 0.22); - color: inherit; - text-decoration: none; - transition: color var(--motion-fast) var(--ease-standard); -} - -.paper-list-item:hover, -.paper-list-item:focus-visible { - color: var(--cra-light-gold); -} - -.paper-list-item h3 { - margin: 0 0 6px; - font-size: clamp(17px, 1.6vw, 20px); - font-weight: var(--fw-heading-lg); - line-height: 1.45; -} - -.paper-list-item p { - margin: 0; - color: var(--cra-gray-blue); - font-size: var(--text-sm); -} - -[data-theme='light'] .paper-list-item { - border-bottom-color: var(--line); -} - -[data-theme='light'] .paper-list-item p { - color: var(--muted); -} - -.flat-entry { - padding: 22px 0; - border-bottom: 1px solid rgba(188, 221, 223, 0.22); -} - -.flat-entry:last-child { - border-bottom: none; -} - -.flat-entry h2 { - margin: 0 0 8px; - font-size: clamp(22px, 2.2vw, 28px); - color: var(--cra-light-gold); - font-weight: var(--fw-heading-lg); -} - -[data-theme='light'] .flat-entry h2 { - color: var(--text); -} - -.flat-entry p { - margin: 0 0 10px; - color: var(--cra-light-blue); -} - -[data-theme='light'] .flat-entry p { - color: var(--text-soft); -} - -/* Home (CRA): one continuous backdrop — logo hero + NEWS & AWARDS, no gray band */ -.home-cra { - position: relative; - isolation: isolate; - margin-top: 0; - overflow: clip; -} - -.home-particles { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 1; - overflow: hidden; -} - -.home-opening { - position: relative; - z-index: 2; - border-radius: 0; - min-height: 85vh; - min-height: 85svh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px); - color: var(--cra-light-gold); -} - -.home-mission { - position: relative; - z-index: 2; - color: var(--cra-light-blue); - padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); -} - -.home-mission-inner { - width: min(72%, 920px); - margin: 0 auto; - padding: 0 clamp(16px, 4vw, 32px); -} - -.home-mission-text { - margin: 0 0 1.35em; - font-size: clamp(17px, 1.65vw, 21px); - line-height: 1.72; - text-align: justify; - color: var(--cra-light-blue); -} - -.home-mission-text:last-child { - margin-bottom: 0; -} - -/* CRA About lab-culture typewriter (Coolvetica + light gold, blinking _) */ -.home-culture-motto { - margin: clamp(28px, 4vw, 40px) 0 0; - text-align: center; -} - -.home-culture-typewriter { - display: inline-block; - font-family: var(--font-title); - font-size: clamp(26px, 3.2vw, 44px); - font-weight: var(--fw-latin-strong); - line-height: 1.25; - color: var(--cra-light-gold); - letter-spacing: 0.02em; -} - -[data-theme='light'] .home-culture-typewriter { - color: #4a5e20; -} - -.home-culture-cursor { - display: inline-block; - margin-left: 1px; - animation: home-culture-cursor-blink 0.9s step-end infinite; -} - -.home-culture-motto.is-reduced-motion .home-culture-cursor { - animation: none; - opacity: 0.85; -} - -@keyframes home-culture-cursor-blink { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0; - } -} - -[data-theme='light'] .home-mission-text { - color: var(--text-soft); -} - -.home-news { - --home-news-date-chip-width: 10rem; - position: relative; - z-index: 2; - background: transparent; - color: var(--cra-light-blue); - padding: clamp(12px, 2vw, 24px) 0 clamp(48px, 6vw, 72px); -} - -.home-news-inner { - width: min(72%, 1040px); - margin: 0 auto; - padding: 0 clamp(16px, 4vw, 32px); -} - -.home-news-heading.section-title { - color: var(--cra-gold); - font-size: clamp(32px, 4.4vw, 44px); - font-weight: var(--fw-latin-strong); - padding: 0 0 16px; - margin: 0 0 clamp(24px, 3vw, 36px); - letter-spacing: 0.14em; - line-height: 1.2; -} - -[data-theme='light'] .home-news-heading.section-title { - color: #4a5e20; -} - -[data-theme='light'] .home-news { - color: var(--text-soft); -} - -.home-news-list { - display: flex; - flex-direction: column; - gap: 0; -} - -.home-news-item { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - gap: clamp(18px, 2.8vw, 32px); - align-items: start; - padding: clamp(18px, 2.5vw, 26px) 0; - border-bottom: 1px solid rgba(188, 221, 223, 0.14); -} - -.home-news-item:last-child { - border-bottom: none; - padding-bottom: 0; -} - -.home-news-date { - flex-shrink: 0; - width: var(--home-news-date-chip-width); -} - -.home-news-date-chip { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 6px; - box-sizing: border-box; - width: var(--home-news-date-chip-width); - min-width: var(--home-news-date-chip-width); - max-width: var(--home-news-date-chip-width); - padding: 14px 10px; - text-align: center; - border-radius: 14px; - background: var(--glass-bg); - border: none; - box-shadow: var(--glass-shadow); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - color: var(--cra-light-blue); -} - -.home-news-date-year, -.home-news-date-month { - width: 100%; - white-space: nowrap; - text-align: center; -} - -.home-news-date-year { - font-size: 1.125rem; - font-weight: var(--fw-latin-chip); - line-height: 1.2; - letter-spacing: 0.08em; - color: var(--cra-light-gold); -} - -.home-news-date-month { - font-size: 0.8125rem; - font-weight: var(--fw-latin-chip-sub); - line-height: 1.35; - letter-spacing: 0.06em; - text-transform: uppercase; - color: rgba(188, 221, 223, 0.95); -} - -[data-theme='light'] .home-news-date-year { - color: #4a5e20; -} - -[data-theme='light'] .home-news-date-month { - color: var(--text-soft); -} - -.home-news-detail { - padding-top: 4px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.home-news-title { - margin: 0; - font-size: clamp(1.05rem, 1.15vw + 0.85rem, 1.3125rem); - line-height: 1.55; -} - -html[lang^='zh'] .home-news-title { - letter-spacing: 0.06em; -} - -html[lang^='en'] .home-news-title { - letter-spacing: 0.025em; -} - -.home-news-title { - color: var(--cra-light-gold); -} - -[data-theme='light'] .home-news-title { - color: var(--text); -} - -.home-news-source-link { - margin-top: 4px; - width: fit-content; - height: auto; - min-height: 40px; -} - -.home-news-meta { - margin: 0; - font-size: 0.9375rem; - line-height: 1.7; - letter-spacing: 0.05em; - font-weight: var(--fw-latin-meta); - color: rgba(188, 221, 223, 0.9); -} - -html[lang^='en'] .home-news-meta { - letter-spacing: 0.035em; -} - -[data-theme='light'] .home-news-meta { - color: var(--text-soft); -} - -.cra-site .section-title { - font-family: var(--font-title); - font-weight: var(--fw-heading); - line-height: 1.1; -} - -/* Members (CRA horizontal scrolling tracks) */ - -.members-page-title { - margin: 0 0 8px; - color: var(--cra-light-gold); - font-size: clamp(40px, 6vw, 60px); -} - -.members-toolbar { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 12px; - margin: 0 0 clamp(20px, 3vw, 28px); -} - -.members-status-toggle { - display: inline-flex; - align-items: stretch; - gap: 0; - padding: 4px; - border-radius: var(--radius-pill); - border: none; - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.members-status-toggle .filter-tag { - border: none; - box-shadow: none; - background: transparent; - min-width: 7.5rem; - justify-content: center; - font-size: var(--text-sm); - font-weight: var(--fw-latin-ui); - color: var(--text-soft); -} - -.members-status-toggle .filter-tag:hover { - color: var(--text); - background: rgba(255, 255, 255, 0.06); - box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); -} - -.members-status-toggle .filter-tag.is-selected { - color: var(--primary-2); - background: var(--glass-bg-accent); - border-radius: calc(var(--radius-pill) - 4px); - box-shadow: var(--glass-shadow-accent); - font-weight: var(--fw-latin-strong); -} - -.members-status-toggle .filter-tag.is-selected:hover { - background: var(--glass-bg-accent-hover); - box-shadow: var(--glass-shadow-accent-hover); -} - -[data-theme='light'] .members-status-toggle .filter-tag.is-selected { - color: #29321e; -} - -.members-empty-state { - margin: 0; - font-size: var(--text-sm); - color: var(--cra-light-blue); -} - -[data-theme='light'] .members-empty-state { - color: var(--text-soft); -} - -/* Enrolled-first default before members filter script initializes */ -[data-members-filter-root]:not([data-members-filter-init]) [data-member-card][data-member-enrollment='graduated'] { - display: none; -} - -[data-theme='light'] .members-page-title { - color: var(--text); -} - -.group-title { - font-size: clamp(28px, 3vw, 40px); - color: var(--cra-gray-blue); - font-weight: var(--fw-heading); - margin: 25px 0 15px; -} - -.members-track { - position: relative; -} - -.members-track-scroll { - display: flex; - gap: 16px; - overflow-x: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - padding: 8px 0 16px; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; -} - -.members-track-scroll:focus-visible { - outline: 2px solid var(--cra-light-gold); - outline-offset: 4px; -} - -.member-tile { - flex: 0 0 170px; - scroll-snap-align: center; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 240px; - padding: 14px 10px; - border-radius: var(--radius-md); - border: none; - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - color: var(--cra-light-blue); - text-decoration: none; - text-align: center; - transition: - background-color var(--motion-fast) var(--ease-standard), - box-shadow var(--motion-fast) var(--ease-standard), - color var(--motion-fast) var(--ease-standard), - transform var(--motion-fast) var(--ease-standard); -} - -.member-tile:hover, -.member-tile:focus-visible { - background: var(--glass-bg-hover); - box-shadow: var(--glass-shadow-hover); - color: var(--cra-light-gold); - transform: translateY(-1px); -} - -.member-tile:active { - transform: translateY(0); - box-shadow: var(--glass-shadow-pressed); -} - -.member-tile .member-avatar { - width: 100px; - height: 100px; - border-radius: 50%; - object-fit: cover; - margin-bottom: 12px; -} - -.member-tile h3 { - margin: 0; - font-size: 20px; - font-weight: var(--fw-member-name); - line-height: 1.25; - font-family: var(--font-title); -} - -[data-theme='light'] .member-tile { - color: var(--text); -} - -[data-theme='light'] .member-tile:hover, -[data-theme='light'] .member-tile:focus-visible { - color: var(--text); -} - -/* Host profile (CRA HostProfile) */ -.host-cra { - --host-social-tile: rgba(188, 221, 223, 0.92); - /* Dark navy host section — glyphs must be light (CRA media-list used white, not dark blue). */ - --host-social-glyph: var(--cra-light-blue); - padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 6vw, 80px); -} - -.host-cra-wrapper { - width: min(1120px, 80vw); - margin: 0 auto; -} - -.host-cra-title { - margin: 0 0 12px; - font-size: clamp(36px, 5vw, 60px); - font-weight: var(--fw-heading); - color: var(--cra-gold); - line-height: 1.1; -} - -.host-cra-tagline { - margin: 0 0 28px; - font-size: clamp(22px, 2.5vw, 30px); - font-weight: var(--fw-latin-strong); - font-style: italic; - line-height: 1.25; - color: var(--cra-light-gold); -} - -.host-content-info { - display: flex; - gap: clamp(24px, 4vw, 48px); - align-items: flex-start; - justify-content: space-between; -} - -.host-left-col { - flex: 1 1 58%; - min-width: 0; -} - -.host-left-col p { - margin: 0 0 1.15em; - font-size: clamp(17px, 1.7vw, 22px); - line-height: 1.65; - color: var(--cra-light-blue); - text-align: justify; -} - -[data-theme='light'] .host-left-col p { - color: var(--text-soft); -} - -.host-right-col { - flex: 0 1 35%; - min-width: 220px; -} - -.host-photo-wrap { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.host-photo { - width: min(100%, 320px); - height: auto; - border-radius: 15px; - object-fit: cover; - display: block; -} - -.host-social-cra .host-social-link { - opacity: 1; - background: transparent; -} - -.host-social-cra { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - gap: 4px; - width: min(100%, 320px); - margin: 0 auto; - padding: 18px 0 0; - list-style: none; -} - -.host-social-cra li { - flex: 0 0 auto; -} - -.host-social-cra .host-social-link.host-social-link-square { - display: block; - width: clamp(40px, 4.8vw, 50px); - height: clamp(40px, 4.8vw, 50px); - padding: 0; - background: transparent; - border-radius: 10px; - opacity: 1; - transition: transform var(--motion-fast) var(--ease-standard); -} - -.host-social-cra .host-social-square-icon { - width: 100%; - height: 100%; - display: block; - color: var(--host-social-glyph); - opacity: 0.94; - transition: - color var(--motion-fast) var(--ease-standard), - opacity var(--motion-fast) var(--ease-standard), - transform var(--motion-fast) var(--ease-standard), - filter var(--motion-fast) var(--ease-standard); -} - -/* Lucide stroke icons: match filled glyphs’ visual weight at rest */ -.host-social-cra svg.host-social-square-icon:not(.host-social-square-icon--solid) { - stroke-width: 2.35; -} - -.host-social-cra .host-social-link-square:hover, -.host-social-cra .host-social-link-square:focus-visible { - transform: translateY(-1px); -} - -.host-social-cra .host-social-link-square:hover .host-social-square-icon, -.host-social-cra .host-social-link-square:focus-visible .host-social-square-icon { - color: #ffffff; - opacity: 1; - filter: brightness(1.04); - transform: scale(1.05); -} - -.host-social-cra .host-social-link-square:active .host-social-square-icon { - opacity: 1; - filter: brightness(0.96); - transform: scale(0.98); -} - -[data-theme='light'] .host-cra { - --host-social-glyph: var(--cra-dark-blue); -} - -[data-theme='light'] .host-social-cra .host-social-square-icon { - color: var(--host-social-glyph); - opacity: 1; -} - -.host-cra-actions { - display: flex; - flex-wrap: wrap; - gap: 12px; - margin-top: 36px; -} - -@media (max-width: 800px) { - .host-content-info { - flex-direction: column-reverse; - } - - .host-right-col { - width: 100%; - } -} - -@media (max-width: 880px) { - .home-news-inner { - width: min(100%, 640px); - } - - .home-news-item { - grid-template-columns: 1fr; - gap: 14px; - } - - .home-news { - --home-news-date-chip-width: 9.25rem; - } - - .home-news-date-chip { - flex-direction: row; - justify-content: center; - padding: 10px 8px; - gap: 10px; - } - - .home-news-date-month { - text-transform: none; - letter-spacing: 0.04em; - } - - .home-news-detail { - padding-top: 0; - } -} From 4ed453220e63651e5e4287612c04457cdb7311a6 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 1 Oct 2026 10:24:48 +0000 Subject: [PATCH 3/3] fix(styles): restore cra-layout.css and add typewriter nowrap 95867e9 accidentally emptied cra-layout.css on the remote. Restore full stylesheet from bbc6ca0 and add white-space: nowrap on .home-culture-typewriter. Co-authored-by: SSU-WEI HUANG --- src/styles/cra-layout.css | 798 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 798 insertions(+) diff --git a/src/styles/cra-layout.css b/src/styles/cra-layout.css index e69de29..bdfbb81 100644 --- a/src/styles/cra-layout.css +++ b/src/styles/cra-layout.css @@ -0,0 +1,798 @@ +/* CRA (2022 React) layout parity — flat sections, navy/gold chrome */ + +.cra-site { + --cra-dark-blue: #1f3751; + --cra-black-blue: #14263a; + --cra-light-blue: #bcdddf; + --cra-gray-blue: #6daaaf; + --cra-gold: #ffd700; + --cra-light-gold: #fcffcc; + --cra-news-gray: #dddddd; +} + +.nav-link { + color: var(--cra-light-blue); + opacity: 0.72; +} + +.nav-link:hover, +.nav-link:focus-visible, +.nav-link.is-active { + color: var(--cra-light-gold); + opacity: 1; +} + +.page-title { + font-family: var(--font-title); + color: var(--cra-light-blue); + font-weight: var(--fw-heading); + font-size: clamp(36px, 5vw, 56px); + line-height: 1.15; +} + +.cra-page-title { + color: var(--cra-light-blue); +} + +[data-theme='light'] .page-title, +[data-theme='light'] .cra-page-title { + color: var(--text); +} + +.page-head { + margin-bottom: 24px; + padding-top: 8px; +} + +.page-head > p { + color: var(--cra-light-blue); + font-size: var(--text-md); + max-width: 52rem; +} + +[data-theme='light'] .page-head > p { + color: var(--text-soft); +} + +/* Flat surfaces: strip card chrome on list/detail pages */ +.cra-site .detail-shell .card, +.cra-site .filter-wrap .card, +.cra-site .paper-list-item { + background: transparent; + box-shadow: none; + backdrop-filter: none; + border: none; + border-radius: 0; + padding: 0; +} + +/* Member profile hero: liquid-glass panel (list tiles use .member-tile) */ +.cra-site .detail-shell .card.detail-hero-member { + border: none; + border-radius: var(--radius-card); + padding: clamp(18px, 3vw, 26px); + background: var(--glass-bg); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); +} + +.cra-site .card-hover:hover { + transform: none; + box-shadow: none; +} + +.paper-list { + display: flex; + flex-direction: column; + gap: 0; + margin-top: 12px; +} + +.paper-list-item { + display: block; + padding: 18px 0; + border-bottom: 1px solid rgba(188, 221, 223, 0.22); + color: inherit; + text-decoration: none; + transition: color var(--motion-fast) var(--ease-standard); +} + +.paper-list-item:hover, +.paper-list-item:focus-visible { + color: var(--cra-light-gold); +} + +.paper-list-item h3 { + margin: 0 0 6px; + font-size: clamp(17px, 1.6vw, 20px); + font-weight: var(--fw-heading-lg); + line-height: 1.45; +} + +.paper-list-item p { + margin: 0; + color: var(--cra-gray-blue); + font-size: var(--text-sm); +} + +[data-theme='light'] .paper-list-item { + border-bottom-color: var(--line); +} + +[data-theme='light'] .paper-list-item p { + color: var(--muted); +} + +.flat-entry { + padding: 22px 0; + border-bottom: 1px solid rgba(188, 221, 223, 0.22); +} + +.flat-entry:last-child { + border-bottom: none; +} + +.flat-entry h2 { + margin: 0 0 8px; + font-size: clamp(22px, 2.2vw, 28px); + color: var(--cra-light-gold); + font-weight: var(--fw-heading-lg); +} + +[data-theme='light'] .flat-entry h2 { + color: var(--text); +} + +.flat-entry p { + margin: 0 0 10px; + color: var(--cra-light-blue); +} + +[data-theme='light'] .flat-entry p { + color: var(--text-soft); +} + +/* Home (CRA): one continuous backdrop — logo hero + NEWS & AWARDS, no gray band */ +.home-cra { + position: relative; + isolation: isolate; + margin-top: 0; + overflow: clip; +} + +.home-particles { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + overflow: hidden; +} + +.home-opening { + position: relative; + z-index: 2; + border-radius: 0; + min-height: 85vh; + min-height: 85svh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px); + color: var(--cra-light-gold); +} + +.home-mission { + position: relative; + z-index: 2; + color: var(--cra-light-blue); + padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); +} + +.home-mission-inner { + width: min(72%, 920px); + margin: 0 auto; + padding: 0 clamp(16px, 4vw, 32px); +} + +.home-mission-text { + margin: 0 0 1.35em; + font-size: clamp(17px, 1.65vw, 21px); + line-height: 1.72; + text-align: justify; + color: var(--cra-light-blue); +} + +.home-mission-text:last-child { + margin-bottom: 0; +} + +/* CRA About lab-culture typewriter (Coolvetica + light gold, blinking _) */ +.home-culture-motto { + margin: clamp(28px, 4vw, 40px) 0 0; + text-align: center; +} + +.home-culture-typewriter { + display: inline-block; + white-space: nowrap; + font-family: var(--font-title); + font-size: clamp(26px, 3.2vw, 44px); + font-weight: var(--fw-latin-strong); + line-height: 1.25; + color: var(--cra-light-gold); + letter-spacing: 0.02em; +} + +[data-theme='light'] .home-culture-typewriter { + color: #4a5e20; +} + +.home-culture-cursor { + display: inline-block; + margin-left: 1px; + animation: home-culture-cursor-blink 0.9s step-end infinite; +} + +.home-culture-motto.is-reduced-motion .home-culture-cursor { + animation: none; + opacity: 0.85; +} + +@keyframes home-culture-cursor-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + +[data-theme='light'] .home-mission-text { + color: var(--text-soft); +} + +.home-news { + --home-news-date-chip-width: 10rem; + position: relative; + z-index: 2; + background: transparent; + color: var(--cra-light-blue); + padding: clamp(12px, 2vw, 24px) 0 clamp(48px, 6vw, 72px); +} + +.home-news-inner { + width: min(72%, 1040px); + margin: 0 auto; + padding: 0 clamp(16px, 4vw, 32px); +} + +.home-news-heading.section-title { + color: var(--cra-gold); + font-size: clamp(32px, 4.4vw, 44px); + font-weight: var(--fw-latin-strong); + padding: 0 0 16px; + margin: 0 0 clamp(24px, 3vw, 36px); + letter-spacing: 0.14em; + line-height: 1.2; +} + +[data-theme='light'] .home-news-heading.section-title { + color: #4a5e20; +} + +[data-theme='light'] .home-news { + color: var(--text-soft); +} + +.home-news-list { + display: flex; + flex-direction: column; + gap: 0; +} + +.home-news-item { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: clamp(18px, 2.8vw, 32px); + align-items: start; + padding: clamp(18px, 2.5vw, 26px) 0; + border-bottom: 1px solid rgba(188, 221, 223, 0.14); +} + +.home-news-item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.home-news-date { + flex-shrink: 0; + width: var(--home-news-date-chip-width); +} + +.home-news-date-chip { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + box-sizing: border-box; + width: var(--home-news-date-chip-width); + min-width: var(--home-news-date-chip-width); + max-width: var(--home-news-date-chip-width); + padding: 14px 10px; + text-align: center; + border-radius: 14px; + background: var(--glass-bg); + border: none; + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + color: var(--cra-light-blue); +} + +.home-news-date-year, +.home-news-date-month { + width: 100%; + white-space: nowrap; + text-align: center; +} + +.home-news-date-year { + font-size: 1.125rem; + font-weight: var(--fw-latin-chip); + line-height: 1.2; + letter-spacing: 0.08em; + color: var(--cra-light-gold); +} + +.home-news-date-month { + font-size: 0.8125rem; + font-weight: var(--fw-latin-chip-sub); + line-height: 1.35; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(188, 221, 223, 0.95); +} + +[data-theme='light'] .home-news-date-year { + color: #4a5e20; +} + +[data-theme='light'] .home-news-date-month { + color: var(--text-soft); +} + +.home-news-detail { + padding-top: 4px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.home-news-title { + margin: 0; + font-size: clamp(1.05rem, 1.15vw + 0.85rem, 1.3125rem); + line-height: 1.55; +} + +html[lang^='zh'] .home-news-title { + letter-spacing: 0.06em; +} + +html[lang^='en'] .home-news-title { + letter-spacing: 0.025em; +} + +.home-news-title { + color: var(--cra-light-gold); +} + +[data-theme='light'] .home-news-title { + color: var(--text); +} + +.home-news-source-link { + margin-top: 4px; + width: fit-content; + height: auto; + min-height: 40px; +} + +.home-news-meta { + margin: 0; + font-size: 0.9375rem; + line-height: 1.7; + letter-spacing: 0.05em; + font-weight: var(--fw-latin-meta); + color: rgba(188, 221, 223, 0.9); +} + +html[lang^='en'] .home-news-meta { + letter-spacing: 0.035em; +} + +[data-theme='light'] .home-news-meta { + color: var(--text-soft); +} + +.cra-site .section-title { + font-family: var(--font-title); + font-weight: var(--fw-heading); + line-height: 1.1; +} + +/* Members (CRA horizontal scrolling tracks) */ + +.members-page-title { + margin: 0 0 8px; + color: var(--cra-light-gold); + font-size: clamp(40px, 6vw, 60px); +} + +.members-toolbar { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + margin: 0 0 clamp(20px, 3vw, 28px); +} + +.members-status-toggle { + display: inline-flex; + align-items: stretch; + gap: 0; + padding: 4px; + border-radius: var(--radius-pill); + border: none; + background: var(--glass-bg); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); +} + +.members-status-toggle .filter-tag { + border: none; + box-shadow: none; + background: transparent; + min-width: 7.5rem; + justify-content: center; + font-size: var(--text-sm); + font-weight: var(--fw-latin-ui); + color: var(--text-soft); +} + +.members-status-toggle .filter-tag:hover { + color: var(--text); + background: rgba(255, 255, 255, 0.06); + box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); +} + +.members-status-toggle .filter-tag.is-selected { + color: var(--primary-2); + background: var(--glass-bg-accent); + border-radius: calc(var(--radius-pill) - 4px); + box-shadow: var(--glass-shadow-accent); + font-weight: var(--fw-latin-strong); +} + +.members-status-toggle .filter-tag.is-selected:hover { + background: var(--glass-bg-accent-hover); + box-shadow: var(--glass-shadow-accent-hover); +} + +[data-theme='light'] .members-status-toggle .filter-tag.is-selected { + color: #29321e; +} + +.members-empty-state { + margin: 0; + font-size: var(--text-sm); + color: var(--cra-light-blue); +} + +[data-theme='light'] .members-empty-state { + color: var(--text-soft); +} + +/* Enrolled-first default before members filter script initializes */ +[data-members-filter-root]:not([data-members-filter-init]) [data-member-card][data-member-enrollment='graduated'] { + display: none; +} + +[data-theme='light'] .members-page-title { + color: var(--text); +} + +.group-title { + font-size: clamp(28px, 3vw, 40px); + color: var(--cra-gray-blue); + font-weight: var(--fw-heading); + margin: 25px 0 15px; +} + +.members-track { + position: relative; +} + +.members-track-scroll { + display: flex; + gap: 16px; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + padding: 8px 0 16px; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; +} + +.members-track-scroll:focus-visible { + outline: 2px solid var(--cra-light-gold); + outline-offset: 4px; +} + +.member-tile { + flex: 0 0 170px; + scroll-snap-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 240px; + padding: 14px 10px; + border-radius: var(--radius-md); + border: none; + background: var(--glass-bg); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + color: var(--cra-light-blue); + text-decoration: none; + text-align: center; + transition: + background-color var(--motion-fast) var(--ease-standard), + box-shadow var(--motion-fast) var(--ease-standard), + color var(--motion-fast) var(--ease-standard), + transform var(--motion-fast) var(--ease-standard); +} + +.member-tile:hover, +.member-tile:focus-visible { + background: var(--glass-bg-hover); + box-shadow: var(--glass-shadow-hover); + color: var(--cra-light-gold); + transform: translateY(-1px); +} + +.member-tile:active { + transform: translateY(0); + box-shadow: var(--glass-shadow-pressed); +} + +.member-tile .member-avatar { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 12px; +} + +.member-tile h3 { + margin: 0; + font-size: 20px; + font-weight: var(--fw-member-name); + line-height: 1.25; + font-family: var(--font-title); +} + +[data-theme='light'] .member-tile { + color: var(--text); +} + +[data-theme='light'] .member-tile:hover, +[data-theme='light'] .member-tile:focus-visible { + color: var(--text); +} + +/* Host profile (CRA HostProfile) */ +.host-cra { + --host-social-tile: rgba(188, 221, 223, 0.92); + /* Dark navy host section — glyphs must be light (CRA media-list used white, not dark blue). */ + --host-social-glyph: var(--cra-light-blue); + padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 6vw, 80px); +} + +.host-cra-wrapper { + width: min(1120px, 80vw); + margin: 0 auto; +} + +.host-cra-title { + margin: 0 0 12px; + font-size: clamp(36px, 5vw, 60px); + font-weight: var(--fw-heading); + color: var(--cra-gold); + line-height: 1.1; +} + +.host-cra-tagline { + margin: 0 0 28px; + font-size: clamp(22px, 2.5vw, 30px); + font-weight: var(--fw-latin-strong); + font-style: italic; + line-height: 1.25; + color: var(--cra-light-gold); +} + +.host-content-info { + display: flex; + gap: clamp(24px, 4vw, 48px); + align-items: flex-start; + justify-content: space-between; +} + +.host-left-col { + flex: 1 1 58%; + min-width: 0; +} + +.host-left-col p { + margin: 0 0 1.15em; + font-size: clamp(17px, 1.7vw, 22px); + line-height: 1.65; + color: var(--cra-light-blue); + text-align: justify; +} + +[data-theme='light'] .host-left-col p { + color: var(--text-soft); +} + +.host-right-col { + flex: 0 1 35%; + min-width: 220px; +} + +.host-photo-wrap { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.host-photo { + width: min(100%, 320px); + height: auto; + border-radius: 15px; + object-fit: cover; + display: block; +} + +.host-social-cra .host-social-link { + opacity: 1; + background: transparent; +} + +.host-social-cra { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + gap: 4px; + width: min(100%, 320px); + margin: 0 auto; + padding: 18px 0 0; + list-style: none; +} + +.host-social-cra li { + flex: 0 0 auto; +} + +.host-social-cra .host-social-link.host-social-link-square { + display: block; + width: clamp(40px, 4.8vw, 50px); + height: clamp(40px, 4.8vw, 50px); + padding: 0; + background: transparent; + border-radius: 10px; + opacity: 1; + transition: transform var(--motion-fast) var(--ease-standard); +} + +.host-social-cra .host-social-square-icon { + width: 100%; + height: 100%; + display: block; + color: var(--host-social-glyph); + opacity: 0.94; + transition: + color var(--motion-fast) var(--ease-standard), + opacity var(--motion-fast) var(--ease-standard), + transform var(--motion-fast) var(--ease-standard), + filter var(--motion-fast) var(--ease-standard); +} + +/* Lucide stroke icons: match filled glyphs’ visual weight at rest */ +.host-social-cra svg.host-social-square-icon:not(.host-social-square-icon--solid) { + stroke-width: 2.35; +} + +.host-social-cra .host-social-link-square:hover, +.host-social-cra .host-social-link-square:focus-visible { + transform: translateY(-1px); +} + +.host-social-cra .host-social-link-square:hover .host-social-square-icon, +.host-social-cra .host-social-link-square:focus-visible .host-social-square-icon { + color: #ffffff; + opacity: 1; + filter: brightness(1.04); + transform: scale(1.05); +} + +.host-social-cra .host-social-link-square:active .host-social-square-icon { + opacity: 1; + filter: brightness(0.96); + transform: scale(0.98); +} + +[data-theme='light'] .host-cra { + --host-social-glyph: var(--cra-dark-blue); +} + +[data-theme='light'] .host-social-cra .host-social-square-icon { + color: var(--host-social-glyph); + opacity: 1; +} + +.host-cra-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 36px; +} + +@media (max-width: 800px) { + .host-content-info { + flex-direction: column-reverse; + } + + .host-right-col { + width: 100%; + } +} + +@media (max-width: 880px) { + .home-news-inner { + width: min(100%, 640px); + } + + .home-news-item { + grid-template-columns: 1fr; + gap: 14px; + } + + .home-news { + --home-news-date-chip-width: 9.25rem; + } + + .home-news-date-chip { + flex-direction: row; + justify-content: center; + padding: 10px 8px; + gap: 10px; + } + + .home-news-date-month { + text-transform: none; + letter-spacing: 0.04em; + } + + .home-news-detail { + padding-top: 0; + } +}