前，并给 body 加 class="page-demo" 或 class="page-discover"。离线打开同样生效。 ============================================================ */ :root{ --lac-paper:#EFE6D4; --lac-paper-2:#F8F2E6; --lac-paper-3:#E6DAC2; --lac-ink:#26201A; --lac-ink-2:#5B4C3E; --lac-ink-3:#8A7A66; --lac-red:#9B2C20; --lac-red-deep:#771E15; --lac-lacquer:#33201A; --lac-gold:#AE8748; --lac-line:#D6C5A6; --lac-serif:"Noto Serif CJK SC","Noto Serif TC","Songti SC","Yu Mincho","Hiragino Mincho ProN",serif; --lac-fret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M0 1h48M0 15h48M4 1v10h10V5h6M28 1v10h10V5h6' fill='none' stroke='%23AE8748' stroke-width='1'/%3E%3C/svg%3E"); } /* ---------------- /demo/ 深色展陈：对齐朱砂与描金 ---------------- */ body.page-demo{--red:var(--lac-red);--gold:var(--lac-gold)} .page-demo header{border-bottom:3px double var(--lac-gold)} .page-demo .brand::before{ content:"漆"; display:inline-grid;place-items:center; width:26px;height:26px;margin-right:11px; background:var(--lac-red);color:#FBF3E5; font-family:var(--lac-serif);font-size:14px;letter-spacing:0; border:1px solid rgba(251,243,229,.4);vertical-align:middle; } .page-demo .eyebrow::before{content:"非遺 · ";color:var(--lac-red);letter-spacing:.24em} .page-demo .hero{position:relative} .page-demo .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:14px; background-image:var(--lac-fret);background-repeat:repeat-x;background-position:center; opacity:.55; } .page-demo .filters button.on{background:var(--lac-gold);border-color:var(--lac-gold);color:#14100C} .page-demo .lang button.on{background:var(--lac-gold);color:#14100C} .page-demo .card:hover{border-color:var(--lac-gold)} .page-demo .only{background:var(--lac-red);border-color:var(--lac-red);color:#FBF3E5} .page-demo .step .n{color:var(--lac-red)} .page-demo .dprice{color:var(--lac-gold)} .page-demo .hero-art .stamp{color:var(--lac-gold);letter-spacing:.24em} .page-demo footer{ border-top:3px double var(--lac-gold); background-image:var(--lac-fret);background-repeat:repeat-x;background-position:top center; padding-top:24px; } .page-demo .demo-bar{background:#3A211A;border-color:var(--lac-gold)} /* ---------------- /discover/ 宣纸发现流 ---------------- */ body.page-discover{ background-color:var(--lac-paper); background-image: radial-gradient(rgba(88,62,38,.045) 1px,transparent 1px), radial-gradient(rgba(88,62,38,.035) 1px,transparent 1px); background-size:7px 7px,13px 13px; background-position:0 0,4px 7px; color:var(--lac-ink); } .page-discover .topbar{background:var(--lac-lacquer);border-bottom:3px double var(--lac-gold)} .page-discover .brandmark{color:#F3E7D3;font-family:var(--lac-serif)} .page-discover .brandmark span{color:var(--lac-gold)} .page-discover .lang{background:#4A3228;border-radius:2px} .page-discover .lang button{color:#DCCBB0;border-radius:2px} .page-discover .lang button.on{background:var(--lac-red);color:#FBF3E5;box-shadow:none} .page-discover .phone{background:var(--lac-paper-2);border-color:var(--lac-lacquer);box-shadow:0 22px 60px rgba(51,32,26,.24)} .page-discover .view, .page-discover .feed-view, .page-discover .slide-view{background:var(--lac-paper-2)} .page-discover .appbar{background:var(--lac-paper-2);border-bottom-color:var(--lac-line)} .page-discover .appbar h1{font-family:var(--lac-serif);color:var(--lac-ink)} .page-discover .appbar .sub{color:var(--lac-ink-3)} .page-discover .chips{background:#F1E7D4;border-bottom-color:var(--lac-line)} .page-discover .chip{border-radius:2px;border-color:var(--lac-line);background:var(--lac-paper-2);color:var(--lac-ink-2)} .page-discover .chip.on{background:var(--lac-red);border-color:var(--lac-red-deep);color:#FBF3E5} .page-discover .feed{background:var(--lac-paper)} .page-discover .media{border-radius:2px} .page-discover .media-tag{background:var(--lac-paper-2);color:var(--lac-red-deep);border-radius:2px;font-family:var(--lac-serif)} .page-discover .content{background:var(--lac-paper-2);border:1px solid var(--lac-line);border-radius:2px} .page-discover .theme-line i{background:var(--lac-red)} .page-discover .content h2{font-family:var(--lac-serif);color:var(--lac-ink)} .page-discover .excerpt, .page-discover .byline{color:var(--lac-ink-3)} .page-discover .product-bar{background:var(--lac-paper-3);border-color:var(--lac-gold);border-radius:2px} .page-discover .pb-label{color:var(--lac-red)} .page-discover .pb-name{color:var(--lac-ink)} .page-discover .pb-price{color:var(--lac-red)} .page-discover .pb-go{background:var(--lac-red);border-radius:2px} .page-discover .story-link{color:var(--lac-red)} .page-discover .icon-btn{border-color:var(--lac-line);background:var(--lac-paper-2);color:var(--lac-red);border-radius:2px} .page-discover .dot.on{background:var(--lac-red)} .page-discover .spec div{border-bottom-color:var(--lac-line)} .page-discover .spec dt{color:var(--lac-ink-3)} .page-discover .spec dd{color:var(--lac-ink)} .page-discover .buy{background:var(--lac-red);border:1px solid var(--lac-red-deep);border-radius:2px;font-family:var(--lac-serif);letter-spacing:.14em} .page-discover .explore-btn, .page-discover .back{background:var(--lac-paper-2);border:1px solid var(--lac-line);border-radius:2px;color:var(--lac-red)} .page-discover .notice{background:var(--lac-paper-3);border:1px solid var(--lac-line);color:var(--lac-ink-2)} .page-discover .hero{background:var(--lac-paper-2)} .page-discover .subbar{background:var(--lac-paper-2);border-bottom-color:var(--lac-line)} .page-discover .related{border-top-color:var(--lac-line)}
漆 URU│SHI發現流原型 · Discover feed prototype

發現

從漆的故事，遇見一件