/* ============================================================ Mural Bunny — cute cartoon skin (layered on top of styles.css / page CSS). Loaded LAST in every so it overrides. Borrows wallism's layout, adds the playful kid-cute look: rounded display font, pastel bubbles, chunky bouncy buttons, wiggly card hovers. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap"); :root { --radius: 26px; --radius-lg: 36px; --font-display: "Fredoka", "Baloo 2", "Nunito", var(--font); --peach: #ffd9c2; --sky: #c7e6ff; --lemon: #fff0ad; --mint2: #cdf5e6; --lilac: #e6ddff; --bubble: #ffe0ef; --shadow: 0 16px 38px rgba(109, 95, 146, .16); } /* ---- playful rounded headings / logo / big copy ---- */ h1, h2, h3, .section__title, .page__title, .pdp__name, .product__name, .post__title, .hero__title, .cat__label, .news h2, .usp b, .roomcard b, .trustwall__head { font-family: var(--font-display); letter-spacing: .2px; } .section__title { font-weight: 700; } /* ---- chunky, bouncy buttons ---- */ .btn, .seg, .news__btn, .viewbtn { font-family: var(--font-display); font-weight: 600; border-radius: 999px; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, background .2s; } .btn--primary { box-shadow: 0 8px 22px rgba(255, 126, 179, .38); } .btn:hover { transform: translateY(-2px) scale(1.03); } .btn:active { transform: translateY(1px) scale(.99); } /* ---- softer, rounder cards with a little wiggle on hover ---- */ .product, .tile, .roomcard, .blogcard, .review, .accard, .railcard, .mat, .faq__item, .cartitem, .usp { border-radius: var(--radius); } .product:hover, .roomcard:hover, .blogcard:hover { transform: translateY(-6px) rotate(-.7deg); } /* ---- wallism circular category picker, kid-cute ---- */ .cats { display: grid; gap: 24px 16px; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); max-width: 1040px; margin: 10px auto 0; } .cat { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; } .cat__bubble { width: clamp(92px, 12vw, 140px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(38px, 5vw, 54px); line-height: 1; box-shadow: inset 0 -9px 0 rgba(0, 0, 0, .06), 0 12px 26px rgba(109, 95, 146, .18); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); } .cat:hover .cat__bubble { transform: translateY(-6px) scale(1.05) rotate(-4deg); } .cat__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); } /* ---- rounded badges / pills everywhere ---- */ .trustbadge, .mat__badge, .badge, .pill, .chip, .fchips__chip, .segs { border-radius: 999px; } /* ---- roomier newsletter block ---- */ .news { border-radius: var(--radius-lg); } /* ============ compact rhythm — wallism density ============ 实测 wallism:标题 24px、区块间隙 ~48px；我们原来 90+90=180px，太松。 全站把垂直节奏收紧到接近 wallism，一屏能看到更多内容。 */ .section { padding-top: 36px; padding-bottom: 36px; } .section__title { font-size: 25px; } .section__lead { font-size: 14.5px; margin-bottom: 20px; } .section__head { margin-bottom: 14px; } .rooms { margin-top: 6px; } .blogs { margin-top: 6px; } .tiles, .rooms, .blogs, .pdp-grid { gap: 18px; } .reviews { gap: 16px; } .row { gap: 16px; } .usps { padding-top: 20px; padding-bottom: 40px; } .news { padding: 54px 24px; } /* 商品页各段维持同一节奏（product-plus 里的 54px 一并收紧） */ .ptitle { padding-top: 30px; padding-bottom: 0; } .pdprelated + .pdprelated { padding-top: 0; } /* ---- hidden 必须赢 ---- 这些组件的 class 自带 display:grid/flex，会盖过 [hidden] 属性（同类 bug 第 4 次： fitwrap→抽屉→Load more→账户评价弹窗）。全量排查出的 9 个，一次修死。 注意不能上全局 [hidden]!important：.lc-nav-mobile(靠 hidden+max-height 动画) 和 商品页 hero(行内 display 开关) 是故意的例外。 */ .acmodal[hidden], .actab[hidden], .acwrap[hidden], .cart__empty[hidden], .ck__done[hidden], .crop__empty[hidden], .paybox__demo[hidden], .promo__on[hidden], .summary__row[hidden] { display: none !important; } /* ---- unified page frame：内页(商店/购物车/结账/账户/博客/帮助/工作室)统一骨架 ---- 原来 .page 宽 1296px、页题 38px、上下 40/80px，跟首页板块(1440px/25px/36px)不是一套。 统一成一个体系，页与页切换不再跳感。 */ .page { max-width: 1440px; padding-top: 26px; padding-bottom: 48px; } .page__head { margin-bottom: 20px; } .page__title { font-size: clamp(24px, 2.4vw, 30px); } .page__lead { font-size: 14.5px; margin-top: 4px; }