瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锝滆嚜鐒剁函鑹蹭笌浜烘枃缇庡鐨勫弻鍚戝璧?/title> <meta name="description" content="璇绘噦瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锛氳タ鍩熻嚜鐒剁媯鎯抽亣瑙佸厠鑾卞洜绾壊鍝插锛屼互椋庡懗閲嶅鑻规灉浠峰€兼爣鍑嗭紝鍔╁啘鐪嬭琚拷鐣ョ殑鎴愮啛銆備竴棰楀厠鑾卞洜绾紝鐪嬭琚拷鐣ョ殑瑗垮煙鐢溿€?> <meta name="keywords" content="瑗垮煙鍏嬭幈鍥犵孩,鍏嬭幈鍥犵孩鍝佺墝鏁呬簨,鏂扮枂鑻规灉,鍐扮硸蹇?鍔╁啘,浼婂か鍏嬭幈鍥?绾壊鍝插,KLEIN RED"> <meta name="author" content="鍏嬭幈鍥犵孩路瑗垮煙"> <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"> <meta name="googlebot" content="index,follow"> <meta name="format-detection" content="telephone=yes"> <meta name="theme-color" content="#0C0C0E"> <meta name="color-scheme" content="dark"> <link rel="canonical" href="https://www.ytklyh.com/story.html"> <link rel="alternate" hreflang="zh-CN" href="https://www.ytklyh.com/story.html"> <link rel="alternate" hreflang="x-default" href="https://www.ytklyh.com/story.html"> <link rel="sitemap" type="application/xml" title="Sitemap" href="https://www.ytklyh.com/sitemap.xml"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="images/story/image14.jpeg"> <meta property="og:type" content="article"> <meta property="og:locale" content="zh_CN"> <meta property="og:site_name" content="瑗垮煙鍏嬭幈鍥犵孩 KLEIN RED"> <meta property="og:title" content="瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锝滆嚜鐒剁函鑹蹭笌浜烘枃缇庡"> <meta property="og:description" content="褰撹タ鍩熺殑鐢樼敎閬囪鏋佽嚧鑹烘湳鑹插僵锛氫袱绉嶆瀬鑷寸浉閬囥€佸姪鍐滀环鍊奸噸濉戜笌鍝佺墝鍙ｅ彿鍏ㄨВ鏋愩€?> <meta property="og:url" content="https://www.ytklyh.com/story.html"> <meta property="og:image" content="https://www.ytklyh.com/images/story/image14.jpeg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="瑗垮煙鍏嬭幈鍥犵孩鑻规灉鍥灉瀹炵壒鍐?> <meta property="article:section" content="鍝佺墝鏁呬簨"> <meta property="article:published_time" content="2026-08-09"> <meta property="article:modified_time" content="2026-08-13"> <meta property="article:tag" content="瑗垮煙鍏嬭幈鍥犵孩"> <meta property="article:tag" content="鏂扮枂鑻规灉"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨"> <meta name="twitter:description" content="鑷劧绾壊涓庝汉鏂囩編瀛︾殑鍙屽悜濂旇荡锛岀湅瑙佽蹇界暐鐨勮タ鍩熺敎銆?> <meta name="twitter:image" content="https://www.ytklyh.com/images/story/image14.jpeg"> <link rel="stylesheet" href="fonts/local.css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.ytklyh.com/#organization", "name": "瑗垮煙鍏嬭幈鍥犵孩", "alternateName": ["鍏嬭幈鍥犵孩", "KLEIN RED"], "url": "https://www.ytklyh.com/" }, { "@type": "WebPage", "@id": "https://www.ytklyh.com/story.html#webpage", "url": "https://www.ytklyh.com/story.html", "name": "瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨", "description": "瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锛氳嚜鐒剁媯鎯炽€佸厠鑾卞洜绾壊鍝插銆佸姪鍐滀环鍊奸噸濉戜笌鍝佺墝鍙ｅ彿銆?, "isPartOf": {"@id": "https://www.ytklyh.com/#website"}, "about": {"@id": "https://www.ytklyh.com/#organization"}, "inLanguage": "zh-CN", "primaryImageOfPage": { "@type": "ImageObject", "url": "https://www.ytklyh.com/images/story/image14.jpeg" } }, { "@type": "AboutPage", "@id": "https://www.ytklyh.com/story.html#about", "url": "https://www.ytklyh.com/story.html", "name": "鍏充簬瑗垮煙鍏嬭幈鍥犵孩", "mainEntity": {"@id": "https://www.ytklyh.com/#organization"} }, { "@type": "Article", "@id": "https://www.ytklyh.com/story.html#article", "headline": "瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锛氳嚜鐒剁函鑹蹭笌浜烘枃缇庡鐨勫弻鍚戝璧?, "description": "褰撹タ鍩熺殑鐢樼敎閬囪鏋佽嚧鐨勮壓鏈壊褰╋紝鍦ㄥぉ灞遍洩姘存粙鍏讳笅婕旂粠缇庡瀵硅瘽涓庡懗瑙夌洓瀹淬€?, "inLanguage": "zh-CN", "author": {"@id": "https://www.ytklyh.com/#organization"}, "publisher": {"@id": "https://www.ytklyh.com/#organization"}, "image": [ "https://www.ytklyh.com/images/story/image14.jpeg", "https://www.ytklyh.com/images/story/image19.jpeg", "https://www.ytklyh.com/images/products/apple.jpg" ], "mainEntityOfPage": {"@id": "https://www.ytklyh.com/story.html#webpage"}, "datePublished": "2026-08-09", "dateModified": "2026-08-13", "articleSection": "鍝佺墝鏁呬簨", "keywords": ["瑗垮煙鍏嬭幈鍥犵孩", "鏂扮枂鑻规灉", "鍔╁啘", "绾壊鍝插", "鍏嬭幈鍥犵孩"] }, { "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "棣栭〉", "item": "https://www.ytklyh.com/" }, { "@type": "ListItem", "position": 2, "name": "鍝佺墝鏁呬簨", "item": "https://www.ytklyh.com/story.html" }] } ] } </script> <style> :root{ --bg-deep:#070708;--bg-base:#0C0C0E;--bg-elevated:#141416;--bg-panel:#1A1A1D; --gold:#C9A84C;--gold-bright:#E4C76B;--gold-deep:#A16207;--gold-glow:rgba(201,168,76,.22); --border:rgba(255,255,255,.08);--border-gold:rgba(201,168,76,.28); --text:#F3EFE6;--text-secondary:rgba(243,239,230,.68);--text-muted:rgba(243,239,230,.42); --font-display:"Bodoni Moda","Cormorant Garamond","Songti SC","SimSun",serif; --font-en:"Cinzel","Bodoni Moda",serif; --font-script:"Great Vibes","Cormorant Garamond",cursive; --font-body:"Jost","PingFang SC","Microsoft YaHei",sans-serif; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg-base);scroll-padding-top:72px} body{font-family:var(--font-body);background:var(--bg-base);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .ambient{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 60% 45% at 20% 15%,rgba(201,168,76,.1),transparent 55%), radial-gradient(ellipse 45% 40% at 85% 75%,rgba(161,98,7,.08),transparent 50%), linear-gradient(180deg,#0A0A0C,#070708 50%,#0C0C0E)} nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;padding:0 clamp(20px,5vw,88px); display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease} nav.scrolled{background:#0C0C0E;border-bottom-color:var(--border-gold)} .logo{font-family:var(--font-en);font-size:clamp(15px,1.5vw,19px);font-weight:600;letter-spacing:.2em;display:flex;align-items:baseline;gap:10px} .logo .cn{font-family:var(--font-display);font-size:.95em;letter-spacing:.28em;color:var(--gold-bright);font-weight:600} .nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)} .nav-links a{font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--text-secondary);padding:6px 0} .nav-links a:hover{color:var(--gold-bright)} .nav-cta{padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#14110A;font-size:12px;font-weight:600;letter-spacing:.1em} .nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(201,168,76,.35);border-radius:8px;background:#141416;color:var(--gold-bright);font-size:13px;letter-spacing:.08em;cursor:pointer} .nav-toggle::after{content:"鑿滃崟"} .nav-toggle.is-open::after{content:"鍏抽棴"} .wrap{position:relative;z-index:2} section{padding:96px clamp(20px,5vw,88px)} .section-head{max-width:680px;margin:0 auto 48px;text-align:center} .eyebrow{display:block;font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .section-head h2,.story-title{font-family:var(--font-display);font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.15;margin-bottom:14px} .section-head h2 .gold,.story-title .gold{color:var(--gold-bright)} .section-head p{font-size:15px;line-height:1.75;color:var(--text-secondary)} .gold-rule{width:48px;height:1px;margin:20px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* Hero 鈥?solid color + canvas like index */ .story-hero{ position:relative;z-index:2;min-height:100vh;min-height:100dvh; display:flex;align-items:center; padding:100px clamp(20px,5vw,88px) 56px;overflow:hidden; } .story-hero-plane{ position:absolute;inset:0;z-index:0; background: radial-gradient(ellipse 55% 70% at 78% 45%, rgba(201,168,76,.16) 0%, transparent 58%), radial-gradient(ellipse 40% 50% at 20% 80%, rgba(161,98,7,.08) 0%, transparent 50%), linear-gradient(180deg,#101012 0%,#070708 100%); } .story-hero-grid{ position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,72px);align-items:center; } .story-hero-content{position:relative;min-width:0;max-width:none} .story-hero .brand-row{position:relative;display:inline-block;padding-right:clamp(48px,6vw,80px);margin-bottom:8px} .story-hero .seal{ position:absolute;right:0;top:.1em; writing-mode:vertical-rl;text-orientation:upright; font-family:var(--font-display);font-size:clamp(16px,2vw,24px);font-weight:600; letter-spacing:.35em;line-height:1;color:var(--gold-bright); border:1px solid rgba(201,168,76,.55);padding:.5em .26em;background:rgba(201,168,76,.06); } .story-hero h1{font-family:var(--font-display);font-size:clamp(40px,6.5vw,84px);font-weight:700;line-height:.98;margin-bottom:12px} .story-hero h1 .gold{color:var(--gold-bright)} .story-hero .en{font-family:var(--font-en);font-size:clamp(12px,1.3vw,16px);letter-spacing:.42em;color:var(--gold);margin-bottom:18px} .story-hero .lead{font-size:clamp(16px,2vw,24px);font-family:var(--font-display);color:var(--text);margin-bottom:16px;line-height:1.4} .story-hero .sub{font-size:15px;line-height:1.8;color:var(--text-secondary);max-width:34em} .hero-visual{ position:relative;display:flex;align-items:center;justify-content:center; min-height:clamp(300px,46vh,520px);width:100%; } .hero-visual::before{ content:'';position:absolute;inset:8% 10%; background:radial-gradient(circle at 50% 50%,rgba(201,168,76,.22) 0%,rgba(201,168,76,.06) 35%,transparent 68%); filter:blur(8px);pointer-events:none; } #orbit-canvas{ width:min(100%,520px);height:auto;aspect-ratio:1;max-width:520px; display:block;position:relative;z-index:1; } #particles{position:fixed;inset:0;z-index:1;pointer-events:none} /* Split blocks */ .split{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .split.reverse .split-media{order:2} .split-media{overflow:hidden;border:1px solid var(--border-gold);min-height:360px;background:var(--bg-elevated)} .split-media img{width:100%;height:100%;min-height:360px;object-fit:cover} .split-copy .tag{font-family:var(--font-en);font-size:11px;letter-spacing:.28em;color:var(--gold);margin-bottom:12px;text-transform:uppercase} .split-copy h3{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.2;margin-bottom:16px} .split-copy h3 .gold{color:var(--gold-bright)} .split-copy p{font-size:14px;line-height:1.85;color:var(--text-secondary);margin-bottom:12px} .split-copy .quote{margin-top:20px;padding:16px 18px;border-left:2px solid var(--gold);color:var(--gold-bright);font-family:var(--font-display);font-size:16px;line-height:1.6} /* Dual cards */ .dual{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px} .dual-card{padding:32px 28px;border:1px solid var(--border);background:rgba(255,255,255,.03)} .dual-card.accent{border-color:var(--border-gold);background:linear-gradient(160deg,rgba(201,168,76,.08),rgba(255,255,255,.02))} .dual-card .n{font-family:var(--font-en);font-size:11px;letter-spacing:.24em;color:var(--gold);margin-bottom:14px} .dual-card h3{font-family:var(--font-display);font-size:22px;margin-bottom:12px} .dual-card p{font-size:14px;line-height:1.8;color:var(--text-secondary)} /* Feature trio */ .trio{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .trio-item{padding:24px 20px;border:1px solid var(--border);background:var(--bg-elevated)} .trio-item h4{font-size:16px;margin-bottom:8px;color:var(--gold-bright)} .trio-item p{font-size:13px;line-height:1.7;color:var(--text-secondary)} /* Philosophy */ .phil{max-width:900px;margin:0 auto;text-align:center} .phil blockquote{font-family:var(--font-display);font-size:clamp(18px,2.4vw,28px);line-height:1.6;color:var(--text);margin:28px 0 12px} .phil cite{display:block;font-style:normal;font-size:13px;letter-spacing:.18em;color:var(--gold);margin-bottom:28px} .phil-words{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px} .phil-words .w{padding:22px 14px;border:1px solid var(--border-gold);background:rgba(201,168,76,.06)} .phil-words .w strong{display:block;font-family:var(--font-en);font-size:14px;letter-spacing:.2em;color:var(--gold-bright);margin-bottom:8px} .phil-words .w span{font-size:13px;color:var(--text-secondary);line-height:1.6} /* Three reds */ .reds{max-width:1100px;margin:0 auto;display:grid;gap:14px} .red-row{display:grid;grid-template-columns:88px 1fr;gap:18px;padding:22px 20px;border:1px solid var(--border);background:rgba(255,255,255,.03);align-items:start} .red-row .idx{font-family:var(--font-display);font-size:28px;color:var(--gold-bright);line-height:1} .red-row h4{font-size:17px;margin-bottom:6px} .red-row p{font-size:14px;line-height:1.75;color:var(--text-secondary)} /* Slogan */ .slogan-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .slogan-card{padding:28px 22px;border:1px solid var(--border-gold);background:linear-gradient(180deg,rgba(201,168,76,.07),transparent)} .slogan-card h3{font-family:var(--font-display);font-size:22px;color:var(--gold-bright);margin-bottom:12px} .slogan-card p{font-size:14px;line-height:1.75;color:var(--text-secondary)} .slogan-finale{max-width:760px;margin:40px auto 0;text-align:center;font-family:var(--font-display);font-size:clamp(18px,2.4vw,28px);line-height:1.5;color:var(--gold-bright)} /* Closing */ .closing{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 24px;overflow:hidden} .closing-bg{position:absolute;inset:0;background:center/cover no-repeat url("images/story/image27.jpeg"); filter:brightness(.45) saturate(1.05)} .closing-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.7))} .closing-inner{position:relative;z-index:2;max-width:720px} .closing-inner h2{font-family:var(--font-display);font-size:clamp(28px,5vw,52px);line-height:1.2;margin-bottom:18px} .closing-inner .en{font-family:var(--font-en);letter-spacing:.36em;font-size:12px;color:var(--gold);margin-bottom:28px} .closing-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px} .btn-gold,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.06em;cursor:pointer} .btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#14110A;border:none} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-gold)} footer{position:relative;z-index:2;padding:36px clamp(20px,5vw,88px) 48px;text-align:center;border-top:1px solid var(--border)} footer .links{display:flex;justify-content:center;gap:28px;margin-bottom:14px;flex-wrap:wrap} footer .links a{font-size:12px;letter-spacing:.12em;color:var(--text-secondary)} footer .links a:hover{color:var(--gold)} footer p{font-size:12px;color:var(--text-muted);line-height:1.7} .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-muted);letter-spacing:.06em;padding:88px clamp(20px,5vw,88px) 0;position:relative;z-index:2} .breadcrumb a{color:var(--text-secondary)} .breadcrumb a:hover{color:var(--gold)} .breadcrumb .sep{opacity:.5} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (max-width:1024px){ .story-hero-grid{grid-template-columns:1fr;gap:28px} .hero-visual{order:-1;min-height:clamp(240px,40vw,380px)} #orbit-canvas{width:min(78vw,360px)} } @media (max-width:900px){ .split,.dual,.trio,.phil-words,.slogan-grid{grid-template-columns:1fr} .split.reverse .split-media{order:0} .split-media,.split-media img{min-height:260px} .red-row{grid-template-columns:64px 1fr} } @media (max-width:768px){ nav{height:64px;padding:0 20px;background:#0C0C0E;border-bottom:1px solid rgba(201,168,76,.22)} .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch; background:#121214;border-bottom:1px solid rgba(201,168,76,.28);padding:8px 16px 16px;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .nav-links.open{display:flex} .nav-links a{font-size:16px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text)} .nav-links .nav-cta{margin-top:12px;text-align:center;border:none;border-radius:999px;padding:14px;color:#14110A} section{padding:64px 20px} .story-hero{padding:88px 20px 40px;min-height:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } </style> </head> <body> <a class="sr-only" href="#main">璺冲埌涓昏鍐呭</a> <div class="ambient" aria-hidden="true"></div> <canvas id="particles" aria-hidden="true"></canvas> <nav id="navbar" aria-label="涓诲鑸?> <a href="index.html" class="logo" title="鍏嬭幈鍥犵孩鎷涘晢棣栭〉">KLEIN <span class="cn">鍏嬭幈鍥犵孩</span></a> <div class="nav-links" id="navLinks"> <a href="index.html">鎷涘晢棣栭〉</a> <a href="#meet">涓ょ鐩搁亣</a> <a href="#origin">瑗垮煙鏈壊</a> <a href="#klein">绾壊鍝插</a> <a href="#farmer">鍔╁啘鐑儏</a> <a href="#slogan">鍝佺墝鍙ｅ彿</a> <a href="index.html#contact" class="nav-cta">绔嬪嵆鍜ㄨ</a> </div> <button class="nav-toggle" id="navToggle" type="button" aria-label="鎵撳紑鑿滃崟" aria-expanded="false" aria-controls="navLinks"></button> </nav> <nav class="breadcrumb" aria-label="闈㈠寘灞戝鑸?> <a href="index.html">棣栭〉</a><span class="sep" aria-hidden="true">/</span> <span aria-current="page">鍝佺墝鏁呬簨</span> </nav> <main id="main"> <article itemscope itemtype="https://schema.org/Article"> <meta itemprop="headline" content="瑗垮煙鍏嬭幈鍥犵孩鍝佺墝鏁呬簨锛氳嚜鐒剁函鑹蹭笌浜烘枃缇庡鐨勫弻鍚戝璧?> <section class="story-hero" id="top" aria-label="鍝佺墝鏁呬簨棣栧睆"> <div class="story-hero-plane" aria-hidden="true"></div> <div class="story-hero-grid"> <div class="story-hero-content"> <div class="brand-row reveal"> <h1 itemprop="name">瑗垮煙<span class="gold">鍏嬭幈鍥犵孩</span></h1> <span class="seal" aria-label="瑗垮煙">瑗垮煙</span> </div> <div class="en reveal">XIYU 路 KLEIN RED</div> <p class="lead reveal" itemprop="description">鑷劧绾壊涓庝汉鏂囩編瀛︾殑鍙屽悜濂旇荡</p> <p class="sub reveal">褰撹タ鍩熺殑鐢樼敎閬囪鏋佽嚧鐨勮壓鏈壊褰╋紝鍦ㄥぉ灞遍洩姘寸殑婊嬪吇涓嬶紝婕旂粠涓€鍦鸿法瓒婂北娴风殑缇庡瀵硅瘽涓庡懗瑙夌洓瀹淬€?/p> </div> <div class="hero-visual reveal" aria-hidden="true"> <canvas id="orbit-canvas" width="1040" height="1040"></canvas> </div> </div> </section> <div class="wrap"> <section id="meet"> <div class="section-head reveal"> <span class="eyebrow">Dual Extremes</span> <h2>涓ょ鏋佽嚧鐨?span class="gold">鐩搁亣</span></h2> <p>銆岃タ鍩熷厠鑾卞洜绾€嶈癁鐢熶簬涓ょ鐪嬩技杩ュ紓鍗村唴鏍哥浉閫氱殑鏋佽嚧缇庡纰版挒涓庝氦铻嶏紝灏嗚嚜鐒剁殑鍘熷寮犲姏涓庤壓鏈殑绾补鍝叉€濈揣瀵嗙浉杩炪€?/p> <div class="gold-rule"></div> </div> <div class="dual"> <article class="dual-card reveal"> <div class="n">01 / NATURE</div> <h3>瑗垮煙鐨勮嚜鐒剁媯鎯?/h3> <p>婧愯嚜鏂扮枂鐙湁鐨勮嚜鐒跺姏閲忥紝鏄垐澹佺殑鑻嶈尗銆佺伀鐒板北鐨勭偨鐑堜笌绾㈡渤璋风殑娴撻儊浜ょ粐銆傚畠鏄ぇ鍦版渶鏈湡鐨勮壊褰╄〃杈撅紝甯︾潃鍘熷銆侀噹鎬т笖鍏呮弧鐢熷懡鍔涚殑瑙嗚寮犲姏锛岃瘔璇寸潃瑗垮煙澶у湴鐨勫．闃斾笌绁炵銆?/p> </article> <article class="dual-card accent reveal"> <div class="n">02 / ART</div> <h3>鍏嬭幈鍥犵殑绾补鍝插</h3> <p>鑷存暚浼婂か路鍏嬭幈鍥犵殑鍗曡壊鑹烘湳瀹ｈ█锛岃拷姹傝壊褰╃殑鏋佽嚧绾补涓庣簿绁炵殑缁濆鑷敱銆傚墺绂荤箒澶嶈〃璞★紝浠ュ崟涓€鐨勭孩鑹叉瀯寤洪潤璋ф繁閭冪殑绮剧鍦哄煙锛岃癄閲婃瀬绠€涓讳箟鐨勭編瀛﹂珮搴︺€?/p> </article> </div> <p class="slogan-finale reveal" style="margin-top:36px">褰撹嚜鐒剁殑閲庢€ф挒涓婅壓鏈殑绾补锛屼究鏈変簡鐙睘浜庢鍒荤殑瑙嗚璇楀銆?/p> </section> <section id="origin"> <div class="split"> <div class="split-media reveal"><img src="images/story/image14.jpeg" alt="瑗垮煙鍏嬭幈鍥犵孩鑻规灉鍥€斺€旀灊澶存垚鐔熺殑绾㈣嫻鏋滅壒鍐? width="1350" height="900" loading="lazy" decoding="async" itemprop="image"></div> <div class="split-copy"> <div class="tag reveal">Western Sun</div> <h3 class="reveal">瑗垮煙鐨?span class="gold">澶槼</span></h3> <p class="reveal">瑗垮煙澶ф紶锛屾棩鍏夋极闀跨偨鐑堬紝鏄煎娓╁樊鎮畩銆傛棩鍏夋棩澶滈吙閫犵硸鍒嗭紝鏅氶灏佸瓨鏋滆倝鐢滄鼎锛屾极闀跨敓闀挎番鐐煎嚭涓€灞傞ケ鍜屽害鎷夋弧銆佹棤鏉傝壊鏅曟煋鐨勯矞鏋滅孩鈥斺€斿湡鍦扮嫭涓€浠戒笉鍔犱慨楗扮殑鍘熺敓绾壊銆?/p> <div class="quote reveal">杩欐槸鏉ヨ嚜瑗垮煙澶у湴锛岄槼鍏変笌鍦熷湴鍏卞悓瀛曡偛鐨勮嚜鐒朵箣鍛?/div> </div> </div> <div class="trio" style="margin-top:28px"> <div class="trio-item reveal"><h4>鏃ュ厜娣偧</h4><p>鏁板崈灏忔椂鏃ョ収锛屽皢绯栧垎娣辨繁鎺ㄥ叆鏋滆倝锛岃祴浜堟灉瀹為唶鍘氱殑鑷劧鍩哄簳銆?/p></div> <div class="trio-item reveal"><h4>娓╁樊鍑濊悆</h4><p>鏄煎娓╁樊鎮畩锛岄攣浣忕敎铚滀笌姘村垎锛岃椋庡懗鍦ㄥ喎鏆栦氦鏇夸腑鎱㈡參娌夋穩銆?/p></div> <div class="trio-item reveal"><h4>鍘熺敓缁濊壊</h4><p>鏃犳潅鑹叉檿鏌撶殑椴滄灉绾紝鏄タ鍩熷湡鍦扮嫭涓€浠姐€佷笉鍔犱慨楗扮殑鑷劧鏈壊銆?/p></div> </div> </section> <section> <div class="split reverse"> <div class="split-media reveal"><img src="images/products/apple.jpg" alt="鐢勯€夌殑瑗垮煙鍏嬭幈鍥犵孩鍐扮硸蹇冭嫻鏋滃墫闈? width="656" height="641" loading="lazy" decoding="async"></div> <div class="split-copy"> <div class="tag reveal">Selected Apple</div> <h3 class="reveal">鐢勯€夌殑<span class="gold">鑻规灉</span></h3> <p class="reveal">鍘嗙粡闃冲厜鐐欑儰銆侀娌欑（鐮轰笌婕暱鐢熼暱鍛ㄦ湡锛屾瘡涓€棰楄嫻鏋滈兘娌夋穩鍑轰笉鍔犱慨楗般€佹祿鐑堥ケ婊＄殑鍘熺敓鑹叉辰銆傚畠浠槸鑷劧鐨勬澃浣滐紝鏄椂闂寸殑鏋滃疄銆?/p> <div class="trio" style="margin-top:20px;grid-template-columns:1fr"> <div class="trio-item reveal"><h4>鑷劧瀛曡偛</h4><p>澶╁北闆按绾噣鐏屾簤锛屾辈鍙栧湡澹ゆ繁灞傚吇鍒嗭紝鍥炲綊鏈湡鑷劧銆?/p></div> <div class="trio-item reveal"><h4>鏃ョ収鍏呰冻</h4><p>骞村潎瓒?2800 灏忔椂鍏夌収锛岃祴浜堟灉瀹炴祿閮佺硸蹇冧笌绾㈡鼎鑹叉辰銆?/p></div> <div class="trio-item reveal"><h4>闇滈檷鍘嗙粌</h4><p>鏄煎娓╁樊鎮畩锛岀硸鍒嗗厖鍒嗗嚌鑱氾紝閫犲氨鑴嗙埥澶氭眮鐨勭嫭鐗瑰彛鎰熴€?/p></div> </div> <div class="quote reveal">涓€棰楀ソ鑻规灉锛岃棌鐫€鑷劧鐨勬氮婕笌璧よ瘹</div> </div> </div> </section> <section id="klein"> <div class="section-head reveal"> <span class="eyebrow">Yves Klein</span> <h2>绾补鐨?span class="gold">琛ㄨ揪</span></h2> <p>浼婂か路鍏嬭幈鍥狅紙Yves Klein锛夛紝20 涓栫邯鍏堥攱鑹烘湳鐨勭伒榄備汉鐗┿€備粬灏嗚壊褰╀粠褰㈠紡涓墺绂伙紝浠ユ爣蹇楁€х殑銆屽浗闄呭厠鑾卞洜钃濄€嶏紙IKB锛夎癄閲婃瀬鑷寸函绮广€?/p> <div class="gold-rule"></div> </div> <div class="phil reveal"> <blockquote>銆岃壊褰╋紝鏃犻渶渚濋檮澶栧舰锛岃嚜鏈夌嫭绔嬨€佸钩绛夌殑绮剧浠峰€笺€傚畠鏄函绮圭殑濯掍粙锛屾壙杞界潃瓒呰秺鍏疯薄鐨勭伒榄傚叡楦ｃ€傘€?/blockquote> <cite>鈥斺€?浼婂か路鍏嬭幈鍥?/cite> <p style="color:var(--text-secondary);font-size:14px;line-height:1.8;max-width:640px;margin:0 auto">浠栫敤鏋佺畝鐨勫崟鑹茬敾鎵撶牬浼犵粺瀹＄編妗庢锛岃瘉鏄庤壓鏈殑鏈川涓嶅湪浜庣箒澶嶄慨楗帮紝鑰屽湪浜庡绾补绮剧鐨勬瀬鑷磋拷姹備笌鑷敱琛ㄨ揪銆?/p> <div class="phil-words"> <div class="w"><strong>PURE</strong><span>绾补路鍓旈櫎涓€鍒囧共鎵扮殑瑙嗚鏉傝川</span></div> <div class="w"><strong>WHOLE</strong><span>瀹屾暣路鑹插僵鑷韩鍗虫槸鍏ㄩ儴鐨勬剰涔?/span></div> <div class="w"><strong>RESONANCE</strong><span>鍏遍福路璺ㄨ秺褰㈠紡鐨勭簿绁炴繁搴﹁繛鎺?/span></div> </div> </div> </section> <section> <div class="split"> <div class="split-media reveal"><img src="images/story/image17.jpeg" alt="褰撹タ鍩熻嚜鐒堕亣瑙佸厠鑾卞洜绾壊鍝插鐨勫搧鐗岃瑙? width="1200" height="800" loading="lazy" decoding="async" onerror="this.src='images/story/image26.jpeg'"></div> <div class="split-copy"> <div class="tag reveal">Collision</div> <h3 class="reveal">褰撹タ鍩熼亣瑙?span class="gold">鍏嬭幈鍥?/span></h3> <p class="reveal">璺冲嚭琛屼笟鍥哄寲閫昏緫锛屼互椋庡懗閲嶅浠峰€兼爣灏恒€傚綋鍦板悕涓庤壓鏈悊蹇靛悎浜屼负涓€锛屾垜浠墦鐮存按鏋滃競鍦轰互鏋滃舰澶у皬銆佸瑙傚崠鐩歌楂樹綆鐨勪紶缁熻瘎鍒や綋绯汇€?/p> <p class="reveal">鍥炲綊椋熺墿鏈川锛屽彧浠ヨ嚜鐒舵垚鐔熺殑椋庡懗銆佺函绮规祿閮佺殑鍙ｆ劅瀹氬ソ鍧忥紝閲嶆柊瀹氫箟涓€棰楀ソ鑻规灉鐨勪环鍊兼爣鍑嗐€?/p> <div class="quote reveal">绾补椋庡懗锛屾槸瀵硅嚜鐒舵垚鐔熺殑鏈€楂樿嚧鏁?/div> </div> </div> </section> <section id="farmer"> <div class="section-head reveal"> <span class="eyebrow">Value Rebuild</span> <h2>琚拷鐣ョ殑鎴愮啛路 <span class="gold">鍔╁啘鐨勭儹鎯?/span></h2> <p>灏哄涔嬪锛屾槸琚緶璐熺殑鑷劧椋庡懗銆傛垜浠噸鏋勫叕骞崇殑浠峰€间綋绯伙紝璁╂瘡涓€棰楁灉瀹炶鐪嬭銆?/p> <div class="gold-rule"></div> </div> <div class="split"> <div class="split-media reveal"><img src="images/story/image19.jpeg" alt="鏂扮枂鏋滃洯鏋滃啘閲囨憳鍏嬭幈鍥犵孩鑻规灉鍔╁姏涔℃潙鎸叴" width="1200" height="1600" loading="lazy" decoding="async"></div> <div class="split-copy"> <div class="tag reveal">Farmers First</div> <h3 class="reveal">閲嶆瀯浠峰€硷紝璁╂瘡涓€棰楁灉瀹?span class="gold">琚湅瑙?/span></h3> <p class="reveal">闈掔孩鐩搁棿鐨勬灉瀹炶棌鍦ㄧ箒鑼傜豢鍙堕棿锛岀Н鏀掍簡涓€鏁翠釜鐢熼暱瀛ｇ殑闃冲厜涓庨洦闇层€傚畠浠鍛虫祿閮侊紝鍗村洜銆屼釜澶翠笉杈炬爣銆嶏紝琚尅鍦ㄥ競鍦轰富娴佽閲庝箣澶栥€?/p> <p class="reveal">鎴愮啛鏄槼鍏夈€佸湡澹や笌鏃堕棿鐨勫叡鍚岀粨鏅讹紝鑰岄潪鍐板喎鐨勫昂瀵告暟鎹€傛垜浠互璐唬鎹愶紝鎵撶牬瀵广€屽畬缇庡昂瀵搞€嶇殑鍋忚锛岃鏋滃啘鐨勬睏姘磋鐪嬭锛岃鑷劧鐨勯璧犺鐝嶆儨銆?/p> </div> </div> <div class="trio" style="margin-top:28px"> <div class="trio-item reveal"><h4>鑷劧鏈懗</h4><p>闃冲厜闆ㄩ湶鐨勭函绮归璧?/p></div> <div class="trio-item reveal"><h4>浠峰€奸噸濉?/h4><p>鎵撶牬鍋忚鐨勫競鍦哄叕骞?/p></div> <div class="trio-item reveal"><h4>鍖犲績鍔╁啘</h4><p>瀹堟姢姣忎竴浠借緵鍕よ€曡€?/p></div> </div> </section> <section> <div class="section-head reveal"> <span class="eyebrow">Klein Red</span> <h2>瑗垮煙鐨勭孩锛屾槸<span class="gold">鍏嬭幈鍥犵孩</span></h2> <div class="gold-rule"></div> </div> <div class="reds"> <article class="red-row reveal"><div class="idx">01</div><div><h4>瑗垮煙鐨勫お闃?/h4><p>鎴堝鐨勭儓鏃ヨ祴浜堟灉瀹炴渶娴撶儓鐨勫簳鑹诧紝閭ｆ姽濡傚厠鑾卞洜绾㈣埇绾补鐨勭孩锛屾槸闃冲厜涓庡湡鍦扮殑娣辨儏瀵硅瘽锛岀儹鐑堣€岃丹璇氥€?/p></div></article> <article class="red-row reveal"><div class="idx">02</div><div><h4>鐢勯€夌殑绯栧績</h4><p>姣忎竴棰楄嫻鏋滈兘缁忚繃灞傚眰鐢勯€夛紝鏋滆倝楗辨弧锛屾灉蹇冨嚌钀冨铚溿€傞偅閫氶€忕殑绾紝鏄嚜鐒跺鍛宠暰鐨勬瀬鑷撮璧狅紝鐢滄鼎蹇冮棿銆?/p></div></article> <article class="red-row reveal"><div class="idx">03</div><div><h4>鍔╁啘鐨勭儹鎯?/h4><p>鎵庢牴涔″湡锛屼互璐唬鎹愶紝鐢ㄨ鍔ㄤ紶閫掓俯鏆栥€傝繖浠藉姪鍐滅殑婊¤厰鐑勘锛屾槸鏈€鍔ㄤ汉鐨勫厠鑾卞洜绾紝鐐逛寒涔℃潙鎸叴鐨勫笇鏈涖€?/p></div></article> </div> </section> <section id="slogan"> <div class="section-head reveal"> <span class="eyebrow">Brand Slogan</span> <h2>鍝佺墝<span class="gold">鍙ｅ彿</span></h2> <p>銆岃タ鍩熷厠鑾卞洜绾€嶄笉浠呮槸瀵规柊鐤嗗ぇ鍦版瀬鑷磋嚜鐒舵垚鑹茬殑鍛藉悕锛屾洿鏄鏋滃搧浠峰€兼爣鍑嗙殑涓€娆℃俯鏌旈潻鏂般€?/p> <div class="gold-rule"></div> </div> <div class="slogan-grid"> <article class="slogan-card reveal"><h3>瑗垮煙鍑濊丹</h3><p>绾壊瑙佹湰蹇冿紝浜庢垐澹佷笌缁挎床涔嬮棿锛岃繕鍘熻嚜鐒剁敓闀跨殑绾补銆備互璧よ瘹涔嬪績锛岄吙灏变笉鍔犱慨楗扮殑鏈湡椋庡懗銆?/p></article> <article class="slogan-card reveal"><h3>涓嶉棶澶у皬</h3><p>鍙鎴愮啛锛岃姣忎竴棰楁灉瀹為兘缁忓巻瓒冲鐨勬棩鐓т笌椋庨湝銆傛嫆缁濆偓鐔燂紝鐢ㄦ椂闂存矇娣€鍑洪ケ婊℃祿閮佺殑鐢樼敎銆?/p></article> <article class="slogan-card reveal"><h3>鐪嬭鐢樼敎</h3><p>涓€棰楀厠鑾卞洜绾紝鍙戞帢琚拷鐣ョ殑瑗垮煙椋庡懗銆傚湪鏃犱汉闂触鐨勫湡鍦颁笂锛屽瓡鑲插嚭浠や汉鎯婅壋鐨勭孩鑹插杩广€?/p></article> </div> <p class="slogan-finale reveal">涓€棰楀厠鑾卞洜绾紝鐪嬭琚拷鐣ョ殑瑗垮煙鐢?/p> </section> <section> <div class="split reverse"> <div class="split-media reveal"><img src="images/story/image26.jpeg" alt="鑷劧鎴愮啛鐨勮タ鍩熷厠鑾卞洜绾㈤槼鍏夋灉瀹炰骇鍝? width="1200" height="800" loading="lazy" decoding="async"></div> <div class="split-copy"> <div class="tag reveal">Our Product</div> <h3 class="reveal">鎴戜滑鐨?span class="gold">浜у搧</span></h3> <p class="reveal">鐢勯€夋柊鐤嗘牳蹇冧骇鍖猴紝鍙负涓€鍙ｆ瀬鑷撮鍛炽€傛瘡涓€棰楄嫻鏋滈兘缁忚繃灞傚眰涓ユ牸绛涢€夛紝鎷掔粷浠ュぇ灏忚鑻遍泟锛屽彧鐢勯€夌湡姝ｈ嚜鐒舵垚鐔熺殑鏋滃疄銆?/p> <p class="reveal">浠庡ぉ灞辫剼涓嬬殑鏋滃洯鍒版灊澶达紝鎴戜滑瀹堟姢闃冲厜璧嬩簣鐨勬祿閮佽壊娉戒笌鑴嗙埥鍙ｆ劅锛屼繚鐣欐湰鐪熺敇鐢滀笌澶氭眮锛岃姣忎竴鍙ｉ兘鏄嚜鐒剁殑绾补棣堣禒銆?/p> <div class="quote reveal">涓嶈緶璐熸瘡涓€鍦烘棩鐓?路涓嶈交瑙嗘瘡涓€浠芥垚鐔?/div> </div> </div> </section> </div> </article> <section class="closing" id="end" aria-label="鍝佺墝鏁呬簨缁撹"> <div class="closing-bg" aria-hidden="true"></div> <div class="closing-inner"> <h2 class="reveal">璁╄蹇界暐鐨勬垚鐔?br>琚噸鏂?span class="gold" style="color:var(--gold-bright)">鐪嬭</span></h2> <div class="en reveal">瑗垮煙鍏嬭幈鍥犵孩路 THANK YOU</div> <p class="reveal" style="color:var(--text-secondary);margin-bottom:28px;line-height:1.7">鎺㈢储鑹插僵鐨勮竟鐣岋紝閬囪鑹烘湳鐨勭伒榄?br>EXPLORE THE BOUNDARIES OF COLOR</p> <div class="closing-actions reveal"> <a class="btn-gold" href="index.html#contact">鍔犵洘鍜ㄨ</a> <a class="btn-ghost" href="index.html">杩斿洖鎷涘晢棣栭〉</a> <a class="btn-ghost" href="index.html#faq">鎷涘晢甯歌闂</a> </div> </div> </section> </main> <footer role="contentinfo"> <div class="links"> <a href="index.html">鎷涘晢棣栭〉</a> <a href="story.html" aria-current="page">鍝佺墝鏁呬簨</a> <a href="index.html#contact">鍚堜綔鍜ㄨ</a> <a href="https://www.ytklyh.com" target="_blank" rel="noopener noreferrer">瀹樻柟缃戠珯</a> </div> <p>漏 2026 鍏嬭幈鍥犵孩路瑗垮煙 KLEIN RED 路鐤嗘灉绾棗涓嬪叏鍥介浂椋熻繛閿佸搧鐗?br>All Rights Reserved</p> </footer> <script> (function(){ var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* particles */ var canvas = document.getElementById('particles'); if (canvas) { var ctx = canvas.getContext('2d'); var particles = []; function resize(){ canvas.width = innerWidth; canvas.height = innerHeight; } resize(); addEventListener('resize', resize); function P(){ this.x = Math.random()*canvas.width; this.y = Math.random()*canvas.height; this.s = Math.random()*1.6+0.3; this.sx=(Math.random()-0.5)*0.25; this.sy=(Math.random()-0.5)*0.25; this.o = Math.random()*0.35+0.08; } P.prototype.update=function(){ this.x+=this.sx; this.y+=this.sy; if(this.x<0||this.x>canvas.width) this.sx*=-1; if(this.y<0||this.y>canvas.height) this.sy*=-1; }; P.prototype.draw=function(){ ctx.beginPath(); ctx.arc(this.x,this.y,this.s,0,Math.PI*2); ctx.fillStyle='rgba(201,168,76,'+this.o+')'; ctx.fill(); }; if(!reduced){ var count=Math.min(40, Math.floor(canvas.width*canvas.height/32000)); for(var i=0;i<count;i++) particles.push(new P()); (function loop(){ ctx.clearRect(0,0,canvas.width,canvas.height); particles.forEach(function(p){ p.update(); p.draw(); }); for(var a=0;a<particles.length;a++){ for(var b=a+1;b<particles.length;b++){ var dx=particles[a].x-particles[b].x, dy=particles[a].y-particles[b].y; var d=Math.sqrt(dx*dx+dy*dy); if(d<110){ ctx.beginPath(); ctx.moveTo(particles[a].x,particles[a].y); ctx.lineTo(particles[b].x,particles[b].y); ctx.strokeStyle='rgba(201,168,76,'+(0.04*(1-d/110))+')'; ctx.stroke(); } } } requestAnimationFrame(loop); })(); } } /* gold orbit */ var oc = document.getElementById('orbit-canvas'); if (oc) { (function(){ var g=oc.getContext('2d'); var W=oc.width,H=oc.height,cx=W/2,cy=H/2,t=0; var nodes=[]; for(var n=0;n<33;n++){ var ring=n<12?0:n<24?1:2; nodes.push({ring:ring,base:(n/(ring===0?12:ring===1?12:9))*Math.PI*2+ring*0.4,speed:0.0035+ring*0.0012,size:3.2-ring*0.4}); } var rings=[{r:W*0.18,tilt:0.22},{r:W*0.30,tilt:0.34},{r:W*0.42,tilt:0.28}]; function drawStatic(){ g.clearRect(0,0,W,H); var glow=g.createRadialGradient(cx,cy,0,cx,cy,W*0.48); glow.addColorStop(0,'rgba(201,168,76,0.18)'); glow.addColorStop(0.45,'rgba(201,168,76,0.05)'); glow.addColorStop(1,'rgba(201,168,76,0)'); g.fillStyle=glow; g.beginPath(); g.arc(cx,cy,W*0.48,0,Math.PI*2); g.fill(); for(var a=0;a<3;a++){ g.beginPath(); g.strokeStyle='rgba(201,168,76,'+(0.18-a*0.04)+')'; g.lineWidth=1.2; g.arc(cx,cy,W*(0.46-a*0.03),-0.8+a*0.3,0.9+a*0.2); g.stroke(); } var core=g.createRadialGradient(cx-20,cy-24,10,cx,cy,W*0.12); core.addColorStop(0,'rgba(228,199,107,0.35)'); core.addColorStop(0.55,'rgba(161,98,7,0.18)'); core.addColorStop(1,'rgba(20,20,22,0.2)'); g.fillStyle=core; g.beginPath(); g.arc(cx,cy,W*0.12,0,Math.PI*2); g.fill(); g.strokeStyle='rgba(201,168,76,0.45)'; g.lineWidth=1.5; g.beginPath(); g.arc(cx,cy,W*0.12,0,Math.PI*2); g.stroke(); } function frame(){ drawStatic(); t+=reduced?0:1; rings.forEach(function(ring,ri){ g.beginPath(); g.strokeStyle='rgba(201,168,76,'+(0.22-ri*0.04)+')'; g.lineWidth=1; for(var i=0;i<=90;i++){ var ang=(i/90)*Math.PI*2+t*(0.004+ri*0.0015)*(ri%2?-1:1); var x=cx+Math.cos(ang)*ring.r, y=cy+Math.sin(ang)*ring.r*ring.tilt; if(i===0) g.moveTo(x,y); else g.lineTo(x,y); } g.stroke(); }); var pts=[]; nodes.forEach(function(node){ var ring=rings[node.ring], ang=node.base+t*node.speed; pts.push({x:cx+Math.cos(ang)*ring.r,y:cy+Math.sin(ang)*ring.r*ring.tilt,z:Math.sin(ang),size:node.size}); }); for(var i=0;i<pts.length;i++){ for(var j=i+1;j<pts.length;j++){ var dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y, d=Math.sqrt(dx*dx+dy*dy); if(d<W*0.16){ g.beginPath(); g.moveTo(pts[i].x,pts[i].y); g.lineTo(pts[j].x,pts[j].y); g.strokeStyle='rgba(201,168,76,'+(0.08*(1-d/(W*0.16)))+')'; g.stroke(); } } } pts.forEach(function(p){ var depth=(p.z+1)*0.5, s=p.size*(0.7+depth*0.8), alpha=0.35+depth*0.55; var gg=g.createRadialGradient(p.x,p.y,0,p.x,p.y,s*4); gg.addColorStop(0,'rgba(228,199,107,'+(alpha*0.45)+')'); gg.addColorStop(1,'rgba(201,168,76,0)'); g.fillStyle=gg; g.beginPath(); g.arc(p.x,p.y,s*4,0,Math.PI*2); g.fill(); g.fillStyle='rgba(228,199,107,'+alpha+')'; g.beginPath(); g.arc(p.x,p.y,s,0,Math.PI*2); g.fill(); }); if(!reduced) requestAnimationFrame(frame); } frame(); })(); } var nav = document.getElementById('navbar'); var toggle = document.getElementById('navToggle'); var links = document.getElementById('navLinks'); function closeNav(){ if(!links) return; links.classList.remove('open'); if(toggle){ toggle.classList.remove('is-open'); toggle.setAttribute('aria-expanded','false'); } } addEventListener('scroll', function(){ if(nav) nav.classList.toggle('scrolled', scrollY>60); }, {passive:true}); if(toggle && links){ toggle.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); var open = !links.classList.contains('open'); links.classList.toggle('open', open); toggle.classList.toggle('is-open', open); toggle.setAttribute('aria-expanded', open?'true':'false'); }); document.addEventListener('click', function(e){ if(!links.classList.contains('open')) return; if(nav && nav.contains(e.target)) return; closeNav(); }); } document.querySelectorAll('a[href^="#"]').forEach(function(a){ a.addEventListener('click', function(e){ var id=this.getAttribute('href'); if(!id||id==='#') return; var t=document.querySelector(id); if(!t) return; e.preventDefault(); t.scrollIntoView({behavior:'smooth',block:'start'}); closeNav(); }); }); var reveals=document.querySelectorAll('.reveal'); if(reduced){ reveals.forEach(function(el){ el.classList.add('in'); }); } else{ var io=new IntersectionObserver(function(entries){ entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target);} }); },{threshold:0.12,rootMargin:'0px 0px -30px 0px'}); reveals.forEach(function(el,i){ el.style.transitionDelay=(i%5)*0.05+'s'; io.observe(el); }); setTimeout(function(){ reveals.forEach(function(el){ if(!el.classList.contains('in')) el.classList.add('in'); }); },1200); } })(); </script> </body> </html>