Eastern Stillness \u2014 Discover the Art of Eastern Living<\/title>\n<style>\n\n\/* ===== GLOBAL ===== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n:root {\n --cinnabar: #9c4a38; \n --ink: #2b2725; \n --paper: #f8f6f2; \n --border: #e5e0d8;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n margin: 0;\n font-family: \"Cormorant Garamond\", serif;\n background: var(--paper);\n color: var(--ink);\n line-height: 1.8;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n}\n\n.container {\n max-width: 1200px;\n margin: auto;\n padding: 120px 40px;\n}\n\n.section-title {\n text-align: center;\n font-size: 42px;\n font-weight: 500;\n margin-bottom: 10px;\n letter-spacing: 1px;\n}\n\n.section-sub {\n text-align: center;\n font-family: \"Montserrat\", sans-serif;\n color: #7a746d;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 3px;\n margin-bottom: 60px;\n position: relative;\n}\n\n.section-sub::after {\n content: ''; display: block; width: 30px; height: 1px;\n background: var(--cinnabar); margin: 20px auto 0;\n}\n\n\/* ===== HERO ===== *\/\n\n.hero {\n position: relative;\n height: 90vh;\n min-height: 650px;\n background:\n linear-gradient(to bottom, rgba(248,246,242,.2) 0%, rgba(248,246,242,.7) 60%, rgba(248,246,242,1) 100%),\n url(\"\/wp-content\/uploads\/2026\/03\/image-%E9%A6%96%E8%AF%84.png\");\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.hero-inner { max-width: 800px; padding: 0 20px; margin-top: -60px; }\n\n.hero small {\n font-family: \"Montserrat\", sans-serif;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--cinnabar);\n font-size: 11px;\n font-weight: 600;\n display: block; margin-bottom: 20px;\n}\n\n.hero h1 { \n font-size: clamp(46px, 7vw, 76px); \n font-weight: 500; \n line-height: 1.1;\n margin: 0 0 20px 0; \n}\n\n\/* 2. \u6587\u6848\u4f18\u5316\uff1a\u66f4\u5177\u6587\u5316\u54c1\u724c\u611f *\/\n.hero-desc { \n font-size: 24px; \n color: var(--ink); \n font-style: italic; \n margin: 0 0 15px 0;\n}\n\n.hero-tags {\n font-family: \"Montserrat\", sans-serif;\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: #8c857c;\n margin: 0 0 40px 0;\n}\n\n.hero-cta {\n display: inline-block;\n padding: 16px 45px;\n font-family: \"Montserrat\", sans-serif;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--ink);\n border: 1px solid var(--ink);\n text-decoration: none;\n transition: all 0.4s ease;\n}\n\n.hero-cta:hover {\n background: var(--ink);\n color: var(--paper);\n}\n\n.scroll-explore {\n position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);\n display: flex; flex-direction: column; align-items: center; gap: 15px;\n}\n.scroll-explore span { \n font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500;\n letter-spacing: 3px; color: #7a746d; text-transform: uppercase; \n}\n.scroll-explore .vertical-line { \n width: 1px; height: 50px; \n background: linear-gradient(to bottom, var(--cinnabar), transparent); opacity: 0.6; \n}\n\n\/* ===== CIVILIZATION ===== *\/\n\n.civilization { padding: 120px 40px; }\n\n.civil-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 30px;\n}\n\n.civil-item {\n position: relative;\n cursor: pointer;\n overflow: hidden;\n background: #000;\n border: 1px solid var(--border);\n border-radius: 2px;\n}\n\n.civil-item img {\n width: 100%; height: 420px; object-fit: cover;\n filter: grayscale(40%) brightness(0.8);\n transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-item:hover img {\n transform: scale(1.05); filter: grayscale(80%) brightness(0.3);\n}\n\n.civil-name {\n position: absolute; inset: 0; display: flex; flex-direction: column;\n justify-content: center; align-items: center; padding: 30px; text-align: center;\n background: rgba(20, 18, 16, 0.35); transition: all 0.6s ease;\n}\n\n.civil-item:hover .civil-name { background: rgba(20, 18, 16, 0.6); }\n\n.civil-name h3 { \n margin: 0; font-size: 28px; font-weight: 500; letter-spacing: 4px; \n text-transform: uppercase; color: #ffffff; text-shadow: 0 4px 15px rgba(0,0,0,0.8);\n transform: translateY(15px); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-desc {\n opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n color: rgba(248, 246, 242, 0.9); font-family: \"Montserrat\", sans-serif;\n font-size: 13px; font-weight: 300; line-height: 1.7; margin-top: 25px;\n display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;\n}\n\n.civil-item:hover h3 { transform: translateY(-10px); color: var(--cinnabar); }\n.civil-item:hover .civil-desc { opacity: 1; transform: translateY(0); }\n\n\/* ===== UNIVERSE ===== *\/\n\n.universe {\n padding: 140px 0;\n background: radial-gradient(circle at center, #24211e 0%, #11100f 100%);\n color: var(--paper); text-align: center; position: relative;\n}\n\n.universe .section-sub { color: #888; }\n.universe .section-sub::after { background: var(--paper); opacity: 0.3; }\n\n#universe-container { position: relative; width: 100%; height: 600px; overflow: hidden; cursor: grab; }\n#universe-container:active { cursor: grabbing; }\n#universeCanvas { width: 100%; height: 100%; outline: none; }\n\n.universe-label {\n position: absolute; top: 0; left: 0; color: #ffffff;\n font-family: \"Montserrat\", sans-serif; font-size: 14px; font-weight: 500;\n letter-spacing: 4px; text-transform: uppercase; text-align: center;\n pointer-events: none; text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 20px rgba(217, 83, 58, 0.7);\n transition: opacity 0.2s; will-change: transform, opacity;\n}\n\n\/* ===== PATHS ===== *\/\n\n.paths { padding: 120px 40px; background: var(--paper); }\n.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }\n.path { border: 1px solid var(--border); padding: 60px 40px; background: white; transition: 0.4s; text-align: center; cursor: pointer; }\n.path:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,.06); border-color: var(--cinnabar); }\n.path h3 { margin-top: 0; margin-bottom: 20px; font-size: 26px; font-weight: 500; }\n.path p { color: #7a746d; font-size: 16px; font-family: \"Montserrat\", sans-serif; font-weight: 300; line-height: 1.7; }\n\n\/* ===== SHOP ===== *\/\n\n\/* \u3010\u5df2\u66f4\u65b0\u3011\u5b89\u5168\u9690\u85cf\u6574\u4e2a\u5546\u54c1\u533a\u5757 *\/\n.shop { display: none; padding: 120px 40px; background: #f2efe9; }\n.shop-filters { display: flex; justify-content: center; gap: 40px; margin-bottom: 60px; }\n.filter-btn {\n background: transparent; border: none; font-family: \"Montserrat\", sans-serif; font-size: 12px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 2px; color: #7a746d; cursor: pointer; padding: 5px 0; border-bottom: 1px solid transparent; transition: all 0.3s ease; \n}\n.filter-btn:hover { color: var(--ink); }\n.filter-btn.active { color: var(--cinnabar); border-bottom: 1px solid var(--cinnabar); }\n\n.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; min-height: 400px; align-content: start; }\n.shop-item { background: white; border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); cursor: pointer; display: flex; flex-direction: column; }\n.shop-item:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(43, 39, 37, 0.06); border-color: var(--cinnabar); }\n\n.shop-item-img { overflow: hidden; border-bottom: 1px solid var(--border); }\n.shop-item img { width: 100%; aspect-ratio: 1\/1; object-fit: cover; transition: transform 0.8s ease; }\n.shop-item:hover img { transform: scale(1.05); }\n\n.shop-item-info { padding: 25px 30px; display: flex; flex-direction: column; flex-grow: 1; }\n.shop-item-tag { font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #7a746d; margin-bottom: 15px; }\n.shop-item h4 { margin: 0 0 20px 0; font-size: 20px; font-weight: 500; }\n\n.shop-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--border); }\n.shop-item-bottom .price { color: var(--cinnabar); font-size: 15px; font-family: \"Montserrat\", sans-serif; font-weight: 500; }\n.shop-item-bottom .view-btn { font-family: \"Montserrat\", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color 0.3s; }\n.shop-item:hover .view-btn { color: var(--cinnabar); border-color: var(--cinnabar); }\n\n@keyframes itemFadeIn {\n from { opacity: 0; transform: scale(0.95) translateY(10px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n.shop-item.show-item { display: flex; animation: itemFadeIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }\n\n\/* ===== MOBILE ADAPTATION ===== *\/\n\n@media(max-width:1024px) {\n .container, .civilization, .paths, .shop { padding: 80px 30px; }\n .civil-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\n .path-grid { grid-template-columns: 1fr; gap: 25px; }\n .hero { height: 75vh; min-height: 550px;}\n #universe-container { height: 400px; }\n .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\n}\n\n@media(max-width:600px) {\n .container, .civilization, .paths, .shop { padding: 60px 20px; }\n .hero-inner { margin-top: 0; }\n .section-title { font-size: 32px; }\n .section-sub { font-size: 10px; margin-bottom: 40px; }\n \n .hero h1 { font-size: 40px; }\n .hero-desc { font-size: 18px; }\n .hero-tags { display: none; } \n .hero-cta { padding: 14px 30px; }\n\n .civil-desc { display: none; }\n .civil-name h3 { transform: translateY(0); font-size: 24px; }\n \n .shop-filters {\n justify-content: flex-start; overflow-x: auto; padding-bottom: 15px; gap: 30px;\n -webkit-overflow-scrolling: touch; scrollbar-width: none; \n }\n .shop-filters::-webkit-scrollbar { display: none; }\n .filter-btn { white-space: nowrap; font-size: 12px; }\n .shop-grid { grid-template-columns: 1fr; gap: 25px; }\n}\n\n<\/style>\n<\/head>\n<body>\n\n<section class=\"hero\">\n<div class=\"hero-inner\">\n<small>Eastern Civilization<\/small>\n<h1>Discover the Art of Eastern Living<\/h1>\n<p class=\"hero-desc\">A living tradition of Eastern wisdom, reinterpreted for modern life.<\/p>\n<p class=\"hero-tags\">Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space<\/p>\n<a href=\"#explore\" class=\"hero-cta\">Begin the Practice<\/a>\n<\/div>\n<div class=\"scroll-explore\">\n <span>Explore More<\/span>\n <div class=\"vertical-line\"><\/div>\n<\/div>\n<\/section>\n\n<section id=\"explore\" class=\"civilization\">\n<div class=\"section-title\">Eight Dimensions<\/div>\n<p class=\"section-sub\">Explore the core pillars of Eastern philosophy<\/p>\n<div class=\"civil-grid\">\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\">\n<div class=\"civil-name\">\n<h3>Tea<\/h3>\n<p class=\"civil-desc\">From the physical leaf to the state of mind, establishing a complete aesthetic of daily tea rituals and presence.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\">\n<div class=\"civil-name\">\n<h3>Zen<\/h3>\n<p class=\"civil-desc\">Stripping away mysticism to explore the contemporary scientific practice of mindfulness, breathing, and meditation.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\">\n<div class=\"civil-name\">\n<h3>Craft<\/h3>\n<p class=\"civil-desc\">Understanding Wabi-Sabi and Kintsugi, exploring the natural laws and human touch behind woodwork and pottery.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\">\n<div class=\"civil-name\">\n<h3>Dao<\/h3>\n<p class=\"civil-desc\">Aligning with the heavenly way, embracing the profound wisdom of subtraction, non-action, and absolute stillness.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\">\n<div class=\"civil-name\">\n<h3>Medicine<\/h3>\n<p class=\"civil-desc\">Rooted in ancient wisdom, reshaping the physical and mental rhythms in harmony with the four seasons.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\">\n<div class=\"civil-name\">\n<h3>Calligraphy<\/h3>\n<p class=\"civil-desc\">Every stroke is a cultivation, feeling the spiritual breath and discipline of Eastern scholars through ink.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\">\n<div class=\"civil-name\">\n<h3>Incense<\/h3>\n<p class=\"civil-desc\">Connecting to the divine through scent, creating a clear and elegant realm of inner peace and concentration.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\">\n<div class=\"civil-name\">\n<h3>Space<\/h3>\n<p class=\"civil-desc\">Bringing nature indoors, using empty space, shadow, and light to build a quiet sanctuary in the modern city.<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"universe\">\n<div class=\"section-title\">The Constellation<\/div>\n<p class=\"section-sub\">Drag to explore the interconnected web of wisdom<\/p>\n<div id=\"universe-container\">\n <canvas id=\"universeCanvas\"><\/canvas>\n<\/div>\n<\/section>\n\n<section class=\"paths\">\n<div class=\"section-title\">Learning Paths<\/div>\n<p class=\"section-sub\">From theory to daily practice<\/p>\n<div class=\"path-grid\">\n\n<div class=\"path\">\n<h3>Tea: Matter & Mind<\/h3>\n<p>From understanding the fermentation of the six tea types to the aesthetics of Zisha teapots, establishing a complete daily tea ritual.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Zen: Daily Stillness<\/h3>\n<p>Stripping away the esoteric, discussing the philosophical and scientific foundations of mindfulness, breath observation, and meditation.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Craft: Beauty of Form<\/h3>\n<p>Understanding Wabi-Sabi and the art of Kintsugi, exploring the Eastern laws of nature behind traditional woodworking and ceramics.<\/p>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"shop\">\n <div class=\"section-title\">Curated Objects<\/div>\n <p class=\"section-sub\">Tools for your daily practice<\/p>\n \n <div class=\"shop-filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">All Items<\/button>\n <button class=\"filter-btn\" data-filter=\"tea\">Tea Wares<\/button>\n <button class=\"filter-btn\" data-filter=\"incense\">Incense<\/button>\n <button class=\"filter-btn\" data-filter=\"craft\">Crafts<\/button>\n <\/div>\n\n <div class=\"shop-grid\" id=\"shopGrid\">\n <div class=\"shop-item show-item\" data-category=\"tea\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=1\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Tea Wares<\/span>\n <h4>Handmade Clay Teacup<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 45.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"incense\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=2\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Incense<\/span>\n <h4>Sandalwood Incense Set<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 28.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"craft\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=3\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Crafts<\/span>\n <h4>Wabi-Sabi Bamboo Mat<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 18.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"tea\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=4\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Tea Wares<\/span>\n <h4>Zisha Clay Teapot<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 185.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/examples\/jsm\/\"\n }\n }\n<\/script>\n\n<script type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\n\/* ===== 3D UNIVERSE LOGIC ===== *\/\nconst container = document.getElementById(\"universe-container\");\nconst canvas = document.getElementById(\"universeCanvas\");\n\nconst scene = new THREE.Scene();\nscene.fog = new THREE.FogExp2(0x11100f, 0.06); \n\nconst camera = new THREE.PerspectiveCamera(55, container.clientWidth \/ container.clientHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });\nrenderer.setSize(container.clientWidth, container.clientHeight);\n\n\/\/ 3. \u6027\u80fd\u4f18\u5316\uff1a\u89c6\u89c9\u4e0e GPU \u7684\u5b8c\u7f8e\u5e73\u8861\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\nconst controls = new OrbitControls(camera, canvas);\ncontrols.enableDamping = true;\ncontrols.dampingFactor = 0.05;\ncontrols.enableZoom = false; \ncontrols.autoRotate = true; \ncontrols.autoRotateSpeed = 0.6; \ncontrols.enablePan = false; \n\n\/\/ 4. \u4ea4\u4e92\u4f18\u5316\uff1a\u62d6\u62fd\u65f6\u505c\u6b62\u65cb\u8f6c\uff0c\u677e\u624b\u540e\u5ef6\u8fdf\u6062\u590d\uff0c\u66f4\u663e\u9ad8\u7ea7\nlet rotationTimeout;\ncontrols.addEventListener('start', () => {\n controls.autoRotate = false;\n clearTimeout(rotationTimeout);\n});\ncontrols.addEventListener('end', () => {\n rotationTimeout = setTimeout(() => {\n controls.autoRotate = true;\n }, 1200); \/\/ \u547c\u5438\u611f\u505c\u987f 1.2 \u79d2\n});\n\nconst group = new THREE.Group();\nscene.add(group);\n\nfunction createGlowingNodeMaterial() {\n \/\/ 5. Bug\u4fee\u590d\uff1a\u89c4\u8303\u53d8\u91cf\u540d\uff0c\u907f\u514d\u8986\u76d6\n const glowCanvas = document.createElement('canvas');\n glowCanvas.width = 128; glowCanvas.height = 128; \n const context = glowCanvas.getContext('2d');\n const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);\n gradient.addColorStop(0, 'rgba(255, 240, 220, 1)'); \n gradient.addColorStop(0.15, 'rgba(217, 83, 58, 0.9)'); \n gradient.addColorStop(0.5, 'rgba(156, 74, 56, 0.4)'); \n gradient.addColorStop(1, 'rgba(156, 74, 56, 0)'); \n context.fillStyle = gradient;\n context.fillRect(0, 0, 128, 128);\n const texture = new THREE.CanvasTexture(glowCanvas);\n return new THREE.SpriteMaterial({ map: texture, transparent: true, blending: THREE.AdditiveBlending });\n}\nconst nodeMaterial = createGlowingNodeMaterial();\n\nconst starsGeometry = new THREE.BufferGeometry();\nconst starsMaterial = new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.03, transparent: true, opacity: 0.7 });\nconst starVertices = [];\n\n\/\/ 6. \u6027\u80fd\u4f18\u5316\uff1a\u661f\u5c18\u6570\u91cf\u524a\u51cf\uff0c\u51cf\u8f7b\u79fb\u52a8\u7aef\u53d1\u70ed\nfor (let i = 0; i < 500; i++) {\n const x = (Math.random() - 0.5) * 20;\n const y = (Math.random() - 0.5) * 20;\n const z = (Math.random() - 0.5) * 20;\n starVertices.push(x, y, z);\n}\nstarsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));\nconst stars = new THREE.Points(starsGeometry, starsMaterial);\nscene.add(stars);\n\n\/\/ \u8bcd\u6c47\u7edf\u4e00\nconst labelsData = [\"TEA\", \"ZEN\", \"CRAFT\", \"DAO\", \"MEDICINE\", \"CALLIGRAPHY\", \"INCENSE\", \"SPACE\"];\nconst nodes = [];\nconst htmlLabels = [];\n\nfor (let i = 0; i < labelsData.length; i++) {\n let sprite = new THREE.Sprite(nodeMaterial);\n sprite.scale.set(0.4, 0.4, 0.4); \n let phi = Math.acos(-1 + (2 * i) \/ labelsData.length);\n let theta = Math.sqrt(labelsData.length * Math.PI) * phi;\n sprite.position.setFromSphericalCoords(2.8, phi, theta); \n group.add(sprite);\n nodes.push(sprite);\n\n let div = document.createElement('div');\n div.className = 'universe-label';\n div.innerText = labelsData[i];\n container.appendChild(div);\n htmlLabels.push(div);\n}\n\nconst lineMat = new THREE.LineBasicMaterial({ color: 0xd9533a, transparent: true, opacity: 0.35 });\nfor (let i = 0; i < nodes.length; i++) {\n for (let j = i + 1; j < nodes.length; j++) {\n if (nodes[i].position.distanceTo(nodes[j].position) < 4.5) {\n const points = [nodes[i].position, nodes[j].position];\n const lineGeo = new THREE.BufferGeometry().setFromPoints(points);\n const line = new THREE.Line(lineGeo, lineMat);\n group.add(line);\n }\n }\n}\n\ncamera.position.z = 5.5; \nconst tempV = new THREE.Vector3();\n\nfunction animate() {\n requestAnimationFrame(animate);\n controls.update();\n stars.rotation.y += 0.0003; \n\n for (let i = 0; i < nodes.length; i++) {\n nodes[i].getWorldPosition(tempV);\n tempV.project(camera);\n const x = (tempV.x * 0.5 + 0.5) * container.clientWidth;\n const y = (tempV.y * -0.5 + 0.5) * container.clientHeight;\n \n if (tempV.z > 1 || tempV.z < -1) {\n htmlLabels[i].style.opacity = 0;\n } else {\n htmlLabels[i].style.transform = `translate(-50%, -50%) translate(${x}px, ${y - 25}px)`; \n let opacity = 1 - (tempV.z * 1.5); \n opacity = Math.max(0.1, Math.min(1, opacity));\n htmlLabels[i].style.opacity = opacity;\n let scale = 1 + (0.5 - tempV.z) * 0.2;\n htmlLabels[i].style.transform += ` scale(${scale})`;\n }\n }\n renderer.render(scene, camera);\n}\n\nanimate();\n\nwindow.addEventListener('resize', () => {\n camera.aspect = container.clientWidth \/ container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n});\n\n\n\/* ===== SHOP FILTER LOGIC ===== *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n const filterBtns = document.querySelectorAll('.filter-btn');\n const shopItems = document.querySelectorAll('.shop-item');\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n\n const filterValue = btn.getAttribute('data-filter');\n\n shopItems.forEach(item => {\n \/\/ 7. \u8fc7\u6ee4\u4f18\u5316\uff1a\u66f4\u7b80\u6d01\u7684\u5207\u6362\u903b\u8f91\n item.style.display = 'none';\n item.classList.remove('show-item');\n\n if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\n item.style.display = 'flex'; \n void item.offsetWidth; \n item.classList.add('show-item');\n }\n });\n });\n });\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Eastern Stillness \u2014 Discover the Art of Eastern Living Eastern Civilization Discover the Art of Eastern Living A living tradition of Eastern wisdom, reinterpreted for modern life. Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space Begin the Practice Explore More Eight Dimensions Explore the core pillars of Eastern […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3902","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"easternstillness","author_link":"https:\/\/easternstillness.com\/pt-br\/author\/luckybabyok668gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Eastern Stillness \u2014 Discover the Art of Eastern Living Eastern Civilization Discover the Art of Eastern Living A living tradition of Eastern wisdom, reinterpreted for modern life. Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space Begin the Practice Explore More Eight Dimensions Explore the core pillars of Eastern…","_links":{"self":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/comments?post=3902"}],"version-history":[{"count":1,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902\/revisions"}],"predecessor-version":[{"id":3904,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902\/revisions\/3904"}],"wp:attachment":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/media?parent=3902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3902,"date":"2026-03-03T14:49:51","date_gmt":"2026-03-03T14:49:51","guid":{"rendered":"https:\/\/easternstillness.com\/loja-de-cha\/"},"modified":"2026-03-26T15:58:41","modified_gmt":"2026-03-26T15:58:41","slug":"loja-de-cha","status":"publish","type":"page","link":"https:\/\/easternstillness.com\/pt-br\/","title":{"rendered":"Loja de Ch\u00e1"},"content":{"rendered":"\n\n\n\n\n\n\nEastern Stillness \u2014 Discover the Art of Eastern Living<\/title>\n<style>\n\n\/* ===== GLOBAL ===== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n:root {\n --cinnabar: #9c4a38; \n --ink: #2b2725; \n --paper: #f8f6f2; \n --border: #e5e0d8;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n margin: 0;\n font-family: \"Cormorant Garamond\", serif;\n background: var(--paper);\n color: var(--ink);\n line-height: 1.8;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n}\n\n.container {\n max-width: 1200px;\n margin: auto;\n padding: 120px 40px;\n}\n\n.section-title {\n text-align: center;\n font-size: 42px;\n font-weight: 500;\n margin-bottom: 10px;\n letter-spacing: 1px;\n}\n\n.section-sub {\n text-align: center;\n font-family: \"Montserrat\", sans-serif;\n color: #7a746d;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 3px;\n margin-bottom: 60px;\n position: relative;\n}\n\n.section-sub::after {\n content: ''; display: block; width: 30px; height: 1px;\n background: var(--cinnabar); margin: 20px auto 0;\n}\n\n\/* ===== HERO ===== *\/\n\n.hero {\n position: relative;\n height: 90vh;\n min-height: 650px;\n background:\n linear-gradient(to bottom, rgba(248,246,242,.2) 0%, rgba(248,246,242,.7) 60%, rgba(248,246,242,1) 100%),\n url(\"\/wp-content\/uploads\/2026\/03\/image-%E9%A6%96%E8%AF%84.png\");\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.hero-inner { max-width: 800px; padding: 0 20px; margin-top: -60px; }\n\n.hero small {\n font-family: \"Montserrat\", sans-serif;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--cinnabar);\n font-size: 11px;\n font-weight: 600;\n display: block; margin-bottom: 20px;\n}\n\n.hero h1 { \n font-size: clamp(46px, 7vw, 76px); \n font-weight: 500; \n line-height: 1.1;\n margin: 0 0 20px 0; \n}\n\n\/* 2. \u6587\u6848\u4f18\u5316\uff1a\u66f4\u5177\u6587\u5316\u54c1\u724c\u611f *\/\n.hero-desc { \n font-size: 24px; \n color: var(--ink); \n font-style: italic; \n margin: 0 0 15px 0;\n}\n\n.hero-tags {\n font-family: \"Montserrat\", sans-serif;\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: #8c857c;\n margin: 0 0 40px 0;\n}\n\n.hero-cta {\n display: inline-block;\n padding: 16px 45px;\n font-family: \"Montserrat\", sans-serif;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--ink);\n border: 1px solid var(--ink);\n text-decoration: none;\n transition: all 0.4s ease;\n}\n\n.hero-cta:hover {\n background: var(--ink);\n color: var(--paper);\n}\n\n.scroll-explore {\n position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);\n display: flex; flex-direction: column; align-items: center; gap: 15px;\n}\n.scroll-explore span { \n font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500;\n letter-spacing: 3px; color: #7a746d; text-transform: uppercase; \n}\n.scroll-explore .vertical-line { \n width: 1px; height: 50px; \n background: linear-gradient(to bottom, var(--cinnabar), transparent); opacity: 0.6; \n}\n\n\/* ===== CIVILIZATION ===== *\/\n\n.civilization { padding: 120px 40px; }\n\n.civil-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 30px;\n}\n\n.civil-item {\n position: relative;\n cursor: pointer;\n overflow: hidden;\n background: #000;\n border: 1px solid var(--border);\n border-radius: 2px;\n}\n\n.civil-item img {\n width: 100%; height: 420px; object-fit: cover;\n filter: grayscale(40%) brightness(0.8);\n transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-item:hover img {\n transform: scale(1.05); filter: grayscale(80%) brightness(0.3);\n}\n\n.civil-name {\n position: absolute; inset: 0; display: flex; flex-direction: column;\n justify-content: center; align-items: center; padding: 30px; text-align: center;\n background: rgba(20, 18, 16, 0.35); transition: all 0.6s ease;\n}\n\n.civil-item:hover .civil-name { background: rgba(20, 18, 16, 0.6); }\n\n.civil-name h3 { \n margin: 0; font-size: 28px; font-weight: 500; letter-spacing: 4px; \n text-transform: uppercase; color: #ffffff; text-shadow: 0 4px 15px rgba(0,0,0,0.8);\n transform: translateY(15px); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-desc {\n opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n color: rgba(248, 246, 242, 0.9); font-family: \"Montserrat\", sans-serif;\n font-size: 13px; font-weight: 300; line-height: 1.7; margin-top: 25px;\n display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;\n}\n\n.civil-item:hover h3 { transform: translateY(-10px); color: var(--cinnabar); }\n.civil-item:hover .civil-desc { opacity: 1; transform: translateY(0); }\n\n\/* ===== UNIVERSE ===== *\/\n\n.universe {\n padding: 140px 0;\n background: radial-gradient(circle at center, #24211e 0%, #11100f 100%);\n color: var(--paper); text-align: center; position: relative;\n}\n\n.universe .section-sub { color: #888; }\n.universe .section-sub::after { background: var(--paper); opacity: 0.3; }\n\n#universe-container { position: relative; width: 100%; height: 600px; overflow: hidden; cursor: grab; }\n#universe-container:active { cursor: grabbing; }\n#universeCanvas { width: 100%; height: 100%; outline: none; }\n\n.universe-label {\n position: absolute; top: 0; left: 0; color: #ffffff;\n font-family: \"Montserrat\", sans-serif; font-size: 14px; font-weight: 500;\n letter-spacing: 4px; text-transform: uppercase; text-align: center;\n pointer-events: none; text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 20px rgba(217, 83, 58, 0.7);\n transition: opacity 0.2s; will-change: transform, opacity;\n}\n\n\/* ===== PATHS ===== *\/\n\n.paths { padding: 120px 40px; background: var(--paper); }\n.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }\n.path { border: 1px solid var(--border); padding: 60px 40px; background: white; transition: 0.4s; text-align: center; cursor: pointer; }\n.path:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,.06); border-color: var(--cinnabar); }\n.path h3 { margin-top: 0; margin-bottom: 20px; font-size: 26px; font-weight: 500; }\n.path p { color: #7a746d; font-size: 16px; font-family: \"Montserrat\", sans-serif; font-weight: 300; line-height: 1.7; }\n\n\/* ===== SHOP ===== *\/\n\n\/* \u3010\u5df2\u66f4\u65b0\u3011\u5b89\u5168\u9690\u85cf\u6574\u4e2a\u5546\u54c1\u533a\u5757 *\/\n.shop { display: none; padding: 120px 40px; background: #f2efe9; }\n.shop-filters { display: flex; justify-content: center; gap: 40px; margin-bottom: 60px; }\n.filter-btn {\n background: transparent; border: none; font-family: \"Montserrat\", sans-serif; font-size: 12px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 2px; color: #7a746d; cursor: pointer; padding: 5px 0; border-bottom: 1px solid transparent; transition: all 0.3s ease; \n}\n.filter-btn:hover { color: var(--ink); }\n.filter-btn.active { color: var(--cinnabar); border-bottom: 1px solid var(--cinnabar); }\n\n.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; min-height: 400px; align-content: start; }\n.shop-item { background: white; border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); cursor: pointer; display: flex; flex-direction: column; }\n.shop-item:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(43, 39, 37, 0.06); border-color: var(--cinnabar); }\n\n.shop-item-img { overflow: hidden; border-bottom: 1px solid var(--border); }\n.shop-item img { width: 100%; aspect-ratio: 1\/1; object-fit: cover; transition: transform 0.8s ease; }\n.shop-item:hover img { transform: scale(1.05); }\n\n.shop-item-info { padding: 25px 30px; display: flex; flex-direction: column; flex-grow: 1; }\n.shop-item-tag { font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #7a746d; margin-bottom: 15px; }\n.shop-item h4 { margin: 0 0 20px 0; font-size: 20px; font-weight: 500; }\n\n.shop-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--border); }\n.shop-item-bottom .price { color: var(--cinnabar); font-size: 15px; font-family: \"Montserrat\", sans-serif; font-weight: 500; }\n.shop-item-bottom .view-btn { font-family: \"Montserrat\", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color 0.3s; }\n.shop-item:hover .view-btn { color: var(--cinnabar); border-color: var(--cinnabar); }\n\n@keyframes itemFadeIn {\n from { opacity: 0; transform: scale(0.95) translateY(10px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n.shop-item.show-item { display: flex; animation: itemFadeIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }\n\n\/* ===== MOBILE ADAPTATION ===== *\/\n\n@media(max-width:1024px) {\n .container, .civilization, .paths, .shop { padding: 80px 30px; }\n .civil-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\n .path-grid { grid-template-columns: 1fr; gap: 25px; }\n .hero { height: 75vh; min-height: 550px;}\n #universe-container { height: 400px; }\n .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\n}\n\n@media(max-width:600px) {\n .container, .civilization, .paths, .shop { padding: 60px 20px; }\n .hero-inner { margin-top: 0; }\n .section-title { font-size: 32px; }\n .section-sub { font-size: 10px; margin-bottom: 40px; }\n \n .hero h1 { font-size: 40px; }\n .hero-desc { font-size: 18px; }\n .hero-tags { display: none; } \n .hero-cta { padding: 14px 30px; }\n\n .civil-desc { display: none; }\n .civil-name h3 { transform: translateY(0); font-size: 24px; }\n \n .shop-filters {\n justify-content: flex-start; overflow-x: auto; padding-bottom: 15px; gap: 30px;\n -webkit-overflow-scrolling: touch; scrollbar-width: none; \n }\n .shop-filters::-webkit-scrollbar { display: none; }\n .filter-btn { white-space: nowrap; font-size: 12px; }\n .shop-grid { grid-template-columns: 1fr; gap: 25px; }\n}\n\n<\/style>\n<\/head>\n<body>\n\n<section class=\"hero\">\n<div class=\"hero-inner\">\n<small>Eastern Civilization<\/small>\n<h1>Discover the Art of Eastern Living<\/h1>\n<p class=\"hero-desc\">A living tradition of Eastern wisdom, reinterpreted for modern life.<\/p>\n<p class=\"hero-tags\">Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space<\/p>\n<a href=\"#explore\" class=\"hero-cta\">Begin the Practice<\/a>\n<\/div>\n<div class=\"scroll-explore\">\n <span>Explore More<\/span>\n <div class=\"vertical-line\"><\/div>\n<\/div>\n<\/section>\n\n<section id=\"explore\" class=\"civilization\">\n<div class=\"section-title\">Eight Dimensions<\/div>\n<p class=\"section-sub\">Explore the core pillars of Eastern philosophy<\/p>\n<div class=\"civil-grid\">\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\">\n<div class=\"civil-name\">\n<h3>Tea<\/h3>\n<p class=\"civil-desc\">From the physical leaf to the state of mind, establishing a complete aesthetic of daily tea rituals and presence.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\">\n<div class=\"civil-name\">\n<h3>Zen<\/h3>\n<p class=\"civil-desc\">Stripping away mysticism to explore the contemporary scientific practice of mindfulness, breathing, and meditation.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\">\n<div class=\"civil-name\">\n<h3>Craft<\/h3>\n<p class=\"civil-desc\">Understanding Wabi-Sabi and Kintsugi, exploring the natural laws and human touch behind woodwork and pottery.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\">\n<div class=\"civil-name\">\n<h3>Dao<\/h3>\n<p class=\"civil-desc\">Aligning with the heavenly way, embracing the profound wisdom of subtraction, non-action, and absolute stillness.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\">\n<div class=\"civil-name\">\n<h3>Medicine<\/h3>\n<p class=\"civil-desc\">Rooted in ancient wisdom, reshaping the physical and mental rhythms in harmony with the four seasons.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\">\n<div class=\"civil-name\">\n<h3>Calligraphy<\/h3>\n<p class=\"civil-desc\">Every stroke is a cultivation, feeling the spiritual breath and discipline of Eastern scholars through ink.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\">\n<div class=\"civil-name\">\n<h3>Incense<\/h3>\n<p class=\"civil-desc\">Connecting to the divine through scent, creating a clear and elegant realm of inner peace and concentration.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\">\n<div class=\"civil-name\">\n<h3>Space<\/h3>\n<p class=\"civil-desc\">Bringing nature indoors, using empty space, shadow, and light to build a quiet sanctuary in the modern city.<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"universe\">\n<div class=\"section-title\">The Constellation<\/div>\n<p class=\"section-sub\">Drag to explore the interconnected web of wisdom<\/p>\n<div id=\"universe-container\">\n <canvas id=\"universeCanvas\"><\/canvas>\n<\/div>\n<\/section>\n\n<section class=\"paths\">\n<div class=\"section-title\">Learning Paths<\/div>\n<p class=\"section-sub\">From theory to daily practice<\/p>\n<div class=\"path-grid\">\n\n<div class=\"path\">\n<h3>Tea: Matter & Mind<\/h3>\n<p>From understanding the fermentation of the six tea types to the aesthetics of Zisha teapots, establishing a complete daily tea ritual.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Zen: Daily Stillness<\/h3>\n<p>Stripping away the esoteric, discussing the philosophical and scientific foundations of mindfulness, breath observation, and meditation.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Craft: Beauty of Form<\/h3>\n<p>Understanding Wabi-Sabi and the art of Kintsugi, exploring the Eastern laws of nature behind traditional woodworking and ceramics.<\/p>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"shop\">\n <div class=\"section-title\">Curated Objects<\/div>\n <p class=\"section-sub\">Tools for your daily practice<\/p>\n \n <div class=\"shop-filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">All Items<\/button>\n <button class=\"filter-btn\" data-filter=\"tea\">Tea Wares<\/button>\n <button class=\"filter-btn\" data-filter=\"incense\">Incense<\/button>\n <button class=\"filter-btn\" data-filter=\"craft\">Crafts<\/button>\n <\/div>\n\n <div class=\"shop-grid\" id=\"shopGrid\">\n <div class=\"shop-item show-item\" data-category=\"tea\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=1\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Tea Wares<\/span>\n <h4>Handmade Clay Teacup<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 45.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"incense\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=2\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Incense<\/span>\n <h4>Sandalwood Incense Set<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 28.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"craft\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=3\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Crafts<\/span>\n <h4>Wabi-Sabi Bamboo Mat<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 18.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"shop-item show-item\" data-category=\"tea\">\n <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=4\"><\/div>\n <div class=\"shop-item-info\">\n <span class=\"shop-item-tag\">Tea Wares<\/span>\n <h4>Zisha Clay Teapot<\/h4>\n <div class=\"shop-item-bottom\">\n <span class=\"price\">$ 185.00<\/span>\n <span class=\"view-btn\">Details<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/examples\/jsm\/\"\n }\n }\n<\/script>\n\n<script type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\n\/* ===== 3D UNIVERSE LOGIC ===== *\/\nconst container = document.getElementById(\"universe-container\");\nconst canvas = document.getElementById(\"universeCanvas\");\n\nconst scene = new THREE.Scene();\nscene.fog = new THREE.FogExp2(0x11100f, 0.06); \n\nconst camera = new THREE.PerspectiveCamera(55, container.clientWidth \/ container.clientHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });\nrenderer.setSize(container.clientWidth, container.clientHeight);\n\n\/\/ 3. \u6027\u80fd\u4f18\u5316\uff1a\u89c6\u89c9\u4e0e GPU \u7684\u5b8c\u7f8e\u5e73\u8861\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\nconst controls = new OrbitControls(camera, canvas);\ncontrols.enableDamping = true;\ncontrols.dampingFactor = 0.05;\ncontrols.enableZoom = false; \ncontrols.autoRotate = true; \ncontrols.autoRotateSpeed = 0.6; \ncontrols.enablePan = false; \n\n\/\/ 4. \u4ea4\u4e92\u4f18\u5316\uff1a\u62d6\u62fd\u65f6\u505c\u6b62\u65cb\u8f6c\uff0c\u677e\u624b\u540e\u5ef6\u8fdf\u6062\u590d\uff0c\u66f4\u663e\u9ad8\u7ea7\nlet rotationTimeout;\ncontrols.addEventListener('start', () => {\n controls.autoRotate = false;\n clearTimeout(rotationTimeout);\n});\ncontrols.addEventListener('end', () => {\n rotationTimeout = setTimeout(() => {\n controls.autoRotate = true;\n }, 1200); \/\/ \u547c\u5438\u611f\u505c\u987f 1.2 \u79d2\n});\n\nconst group = new THREE.Group();\nscene.add(group);\n\nfunction createGlowingNodeMaterial() {\n \/\/ 5. Bug\u4fee\u590d\uff1a\u89c4\u8303\u53d8\u91cf\u540d\uff0c\u907f\u514d\u8986\u76d6\n const glowCanvas = document.createElement('canvas');\n glowCanvas.width = 128; glowCanvas.height = 128; \n const context = glowCanvas.getContext('2d');\n const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);\n gradient.addColorStop(0, 'rgba(255, 240, 220, 1)'); \n gradient.addColorStop(0.15, 'rgba(217, 83, 58, 0.9)'); \n gradient.addColorStop(0.5, 'rgba(156, 74, 56, 0.4)'); \n gradient.addColorStop(1, 'rgba(156, 74, 56, 0)'); \n context.fillStyle = gradient;\n context.fillRect(0, 0, 128, 128);\n const texture = new THREE.CanvasTexture(glowCanvas);\n return new THREE.SpriteMaterial({ map: texture, transparent: true, blending: THREE.AdditiveBlending });\n}\nconst nodeMaterial = createGlowingNodeMaterial();\n\nconst starsGeometry = new THREE.BufferGeometry();\nconst starsMaterial = new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.03, transparent: true, opacity: 0.7 });\nconst starVertices = [];\n\n\/\/ 6. \u6027\u80fd\u4f18\u5316\uff1a\u661f\u5c18\u6570\u91cf\u524a\u51cf\uff0c\u51cf\u8f7b\u79fb\u52a8\u7aef\u53d1\u70ed\nfor (let i = 0; i < 500; i++) {\n const x = (Math.random() - 0.5) * 20;\n const y = (Math.random() - 0.5) * 20;\n const z = (Math.random() - 0.5) * 20;\n starVertices.push(x, y, z);\n}\nstarsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));\nconst stars = new THREE.Points(starsGeometry, starsMaterial);\nscene.add(stars);\n\n\/\/ \u8bcd\u6c47\u7edf\u4e00\nconst labelsData = [\"TEA\", \"ZEN\", \"CRAFT\", \"DAO\", \"MEDICINE\", \"CALLIGRAPHY\", \"INCENSE\", \"SPACE\"];\nconst nodes = [];\nconst htmlLabels = [];\n\nfor (let i = 0; i < labelsData.length; i++) {\n let sprite = new THREE.Sprite(nodeMaterial);\n sprite.scale.set(0.4, 0.4, 0.4); \n let phi = Math.acos(-1 + (2 * i) \/ labelsData.length);\n let theta = Math.sqrt(labelsData.length * Math.PI) * phi;\n sprite.position.setFromSphericalCoords(2.8, phi, theta); \n group.add(sprite);\n nodes.push(sprite);\n\n let div = document.createElement('div');\n div.className = 'universe-label';\n div.innerText = labelsData[i];\n container.appendChild(div);\n htmlLabels.push(div);\n}\n\nconst lineMat = new THREE.LineBasicMaterial({ color: 0xd9533a, transparent: true, opacity: 0.35 });\nfor (let i = 0; i < nodes.length; i++) {\n for (let j = i + 1; j < nodes.length; j++) {\n if (nodes[i].position.distanceTo(nodes[j].position) < 4.5) {\n const points = [nodes[i].position, nodes[j].position];\n const lineGeo = new THREE.BufferGeometry().setFromPoints(points);\n const line = new THREE.Line(lineGeo, lineMat);\n group.add(line);\n }\n }\n}\n\ncamera.position.z = 5.5; \nconst tempV = new THREE.Vector3();\n\nfunction animate() {\n requestAnimationFrame(animate);\n controls.update();\n stars.rotation.y += 0.0003; \n\n for (let i = 0; i < nodes.length; i++) {\n nodes[i].getWorldPosition(tempV);\n tempV.project(camera);\n const x = (tempV.x * 0.5 + 0.5) * container.clientWidth;\n const y = (tempV.y * -0.5 + 0.5) * container.clientHeight;\n \n if (tempV.z > 1 || tempV.z < -1) {\n htmlLabels[i].style.opacity = 0;\n } else {\n htmlLabels[i].style.transform = `translate(-50%, -50%) translate(${x}px, ${y - 25}px)`; \n let opacity = 1 - (tempV.z * 1.5); \n opacity = Math.max(0.1, Math.min(1, opacity));\n htmlLabels[i].style.opacity = opacity;\n let scale = 1 + (0.5 - tempV.z) * 0.2;\n htmlLabels[i].style.transform += ` scale(${scale})`;\n }\n }\n renderer.render(scene, camera);\n}\n\nanimate();\n\nwindow.addEventListener('resize', () => {\n camera.aspect = container.clientWidth \/ container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n});\n\n\n\/* ===== SHOP FILTER LOGIC ===== *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n const filterBtns = document.querySelectorAll('.filter-btn');\n const shopItems = document.querySelectorAll('.shop-item');\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n\n const filterValue = btn.getAttribute('data-filter');\n\n shopItems.forEach(item => {\n \/\/ 7. \u8fc7\u6ee4\u4f18\u5316\uff1a\u66f4\u7b80\u6d01\u7684\u5207\u6362\u903b\u8f91\n item.style.display = 'none';\n item.classList.remove('show-item');\n\n if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\n item.style.display = 'flex'; \n void item.offsetWidth; \n item.classList.add('show-item');\n }\n });\n });\n });\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Eastern Stillness \u2014 Discover the Art of Eastern Living Eastern Civilization Discover the Art of Eastern Living A living tradition of Eastern wisdom, reinterpreted for modern life. Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space Begin the Practice Explore More Eight Dimensions Explore the core pillars of Eastern […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3902","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"easternstillness","author_link":"https:\/\/easternstillness.com\/pt-br\/author\/luckybabyok668gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Eastern Stillness \u2014 Discover the Art of Eastern Living Eastern Civilization Discover the Art of Eastern Living A living tradition of Eastern wisdom, reinterpreted for modern life. Tea \u00b7 Zen \u00b7 Dao \u00b7 Craft \u00b7 Medicine \u00b7 Calligraphy \u00b7 Incense \u00b7 Space Begin the Practice Explore More Eight Dimensions Explore the core pillars of Eastern…","_links":{"self":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/comments?post=3902"}],"version-history":[{"count":1,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902\/revisions"}],"predecessor-version":[{"id":3904,"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/pages\/3902\/revisions\/3904"}],"wp:attachment":[{"href":"https:\/\/easternstillness.com\/pt-br\/wp-json\/wp\/v2\/media?parent=3902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}