/* ========================================================= LEAF Trip iOS 26/27 · Liquid Glass Design Foundation V1 只负责全局视觉基础，不负责具体页面组件 ========================================================= */ :root{ /* Apple / Liquid 色彩 */ --leaf-blue:#0A84FF; --leaf-blue-strong:#007AFF; --leaf-text:#111820; --leaf-text-2:rgba(24,34,44,.66); --leaf-text-3:rgba(35,47,58,.42); /* 页面背景 */ --leaf-bg-top:#F9FBFF; --leaf-bg-mid:#F3F7FC; --leaf-bg-bottom:#EDF3F8; /* 玻璃 */ --leaf-glass: rgba(255,255,255,.56); --leaf-glass-strong: rgba(255,255,255,.68); --leaf-glass-soft: rgba(245,249,255,.36); --leaf-glass-border: rgba(255,255,255,.82); /* 圆角 */ --leaf-radius-xl:30px; --leaf-radius-lg:24px; --leaf-radius-md:18px; --leaf-radius-sm:14px; /* 阴影 */ --leaf-shadow: 0 18px 42px rgba(56,76,110,.075); --leaf-shadow-float: 0 22px 52px rgba(55,78,120,.105); } /* ========================================================= ROOT ========================================================= */ html{ min-height:100%; background: #EEF3F8; -webkit-text-size-adjust: 100%; } body{ min-height:100vh; margin:0; color: var(--leaf-text); background: radial-gradient( circle at 94% -4%, rgba(115,163,255,.20), transparent 31% ), radial-gradient( circle at 0% 24%, rgba(198,215,255,.20), transparent 34% ), radial-gradient( circle at 80% 78%, rgba(180,220,255,.10), transparent 34% ), linear-gradient( 180deg, var(--leaf-bg-top) 0%, var(--leaf-bg-mid) 48%, var(--leaf-bg-bottom) 100% ) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================= APP 主容器 ========================================================= */ .app, .pages{ background: transparent !important; } .page{ position:relative; min-height: 100dvh; color: var(--leaf-text); background: transparent !important; padding-bottom: 108px !important; } /* 页面背景增加非常淡的液态光 */ .page::before{ content:""; position:fixed; width:300px; height:300px; right:-170px; top:80px; border-radius:50%; background: radial-gradient( circle, rgba(132,174,255,.12), transparent 69% ); pointer-events:none; z-index:-1; } /* ========================================================= TYPOGRAPHY ========================================================= */ .title{ color: var(--leaf-text) !important; font-weight: 780 !important; letter-spacing: -1.15px !important; } .eyebrow{ color: var(--leaf-text-3) !important; font-weight: 520 !important; letter-spacing: .35px !important; } .meta, .sub, small{ color: var(--leaf-text-3); } /* 数字统一 */ body{ font-variant-numeric: tabular-nums; } /* ========================================================= TOP BAR ========================================================= */ .topbar{ position:relative; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= LIQUID GLASS 基础材质 ========================================================= */ .leaf-glass{ position:relative; overflow:hidden; border: 1px solid var(--leaf-glass-border); border-radius: var(--leaf-radius-lg); background: radial-gradient( ellipse at 28% 0%, rgba(255,255,255,.86), transparent 43% ), linear-gradient( 145deg, var(--leaf-glass-strong), var(--leaf-glass-soft) ); backdrop-filter: blur(30px) saturate(195%) brightness(1.04); -webkit-backdrop-filter: blur(30px) saturate(195%) brightness(1.04); box-shadow: var(--leaf-shadow), inset 0 1.25px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(120,165,220,.08); } /* Liquid 顶部折射 */ .leaf-glass::before{ content:""; position:absolute; left:14px; right:14px; top:1px; height:26px; border-radius: 30px 30px 50% 50%; background: radial-gradient( ellipse at 30% 0%, rgba(255,255,255,.82), transparent 72% ); pointer-events:none; } /* ========================================================= 通用卡片基础 这里只统一材质，不改变具体页面布局 ========================================================= */ .trip-block, .setting-card, .detail-card, .hotel-list-card{ border: 1px solid rgba(255,255,255,.80) !important; border-radius: var(--leaf-radius-lg) !important; background: radial-gradient( ellipse at 28% 0%, rgba(255,255,255,.76), transparent 45% ), linear-gradient( 145deg, rgba(255,255,255,.61), rgba(235,244,255,.36) ) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; box-shadow: 0 15px 36px rgba(55,77,111,.07), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(124,171,225,.07) !important; } /* ========================================================= 通用按钮基础 ========================================================= */ button{ font-family: inherit; -webkit-tap-highlight-color: transparent; } button, a{ -webkit-touch-callout: none; } /* 点击压缩感 */ button:active{ transition: transform .1s ease; transform: scale(.97); } /* ========================================================= INPUT 基础 ========================================================= */ input, select, textarea{ font-family: inherit; color: var(--leaf-text); background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.78); outline: none; backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.86); } input:focus, select:focus, textarea:focus{ border-color: rgba(10,132,255,.30); box-shadow: 0 0 0 3px rgba(10,132,255,.075), inset 0 1px 0 rgba(255,255,255,.92); } /* ========================================================= SCROLLBAR ========================================================= */ ::-webkit-scrollbar{ width:0; height:0; } /* ========================================================= iPHONE SAFE AREA ========================================================= */ @supports( padding-bottom: env(safe-area-inset-bottom) ){ .page{ padding-bottom: calc( 104px + env(safe-area-inset-bottom) ) !important; } }