/* ============================================================ Orae Team — 设计系统 / Design tokens 电商带货视频素材增长系统 ============================================================ */ /* ---------- Fonts ---------- */ /* Latin/numerals: Schibsted Grotesk (default) + Hanken Grotesk (humanist option) Chinese: Noto Sans SC. Loaded in HTML . */ :root { /* warm neutral editorial — DEFAULT light theme canvas is pure white; the sidebar is the only tinted surface */ --bg: oklch(1 0 0); /* pure-white production canvas */ --bg-2: oklch(0.975 0.005 75); /* tinted — sidebar / quiet rails */ --surface: oklch(1 0 0); --surface-2: oklch(0.971 0.005 75); /* segmented tracks · thumbs · soft fills */ --ink: oklch(0.235 0.012 60); --ink-2: oklch(0.47 0.012 60); --ink-3: oklch(0.645 0.009 60); --line: oklch(0.925 0.004 70); /* hairline */ --line-2: oklch(0.875 0.006 70); /* accent — vermilion default (brighter, fresher coral-vermilion) */ --accent: oklch(0.655 0.172 36); --accent-press:oklch(0.60 0.176 35); --accent-ink: oklch(0.995 0.008 60); --accent-soft: oklch(0.962 0.038 42); --accent-line: oklch(0.875 0.066 40); /* utility */ --good: oklch(0.62 0.13 155); --warn: oklch(0.72 0.14 70); --bad: oklch(0.60 0.18 25); --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 20px; --r-xl: 28px; /* neutral, barely-there elevation — reserved for floating UI only */ --shadow-sm: 0 1px 2px oklch(0.25 0.01 60 / 0.035); --shadow: 0 6px 20px oklch(0.22 0.008 60 / 0.06); --shadow-lg: 0 16px 44px oklch(0.2 0.01 60 / 0.12), 0 3px 10px oklch(0.2 0.01 60 / 0.05); --maxw: 1200px; --font-cn: "Noto Sans SC"; --font-latin: "Schibsted Grotesk"; --font: var(--font-latin), var(--font-cn), -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } /* ---------- accent presets ---------- */ html[data-accent="vermilion"] { --accent: oklch(0.655 0.172 36); --accent-press: oklch(0.60 0.176 35); --accent-soft: oklch(0.962 0.038 42); --accent-line: oklch(0.875 0.066 40); } html[data-accent="forest"] { --accent: oklch(0.55 0.12 157); --accent-press: oklch(0.49 0.12 157); --accent-soft: oklch(0.955 0.03 160); --accent-line: oklch(0.85 0.06 160); } html[data-accent="cobalt"] { --accent: oklch(0.55 0.15 252); --accent-press: oklch(0.49 0.15 252); --accent-soft: oklch(0.955 0.03 250); --accent-line: oklch(0.85 0.06 250); } html[data-accent="amber"] { --accent: oklch(0.68 0.15 62); --accent-press: oklch(0.62 0.15 62); --accent-ink: oklch(0.22 0.02 60); --accent-soft: oklch(0.96 0.05 75); --accent-line: oklch(0.86 0.09 70); } /* ---------- deep theme ---------- */ html[data-theme="deep"] { --bg: oklch(0.21 0.012 65); --bg-2: oklch(0.245 0.013 65); --surface: oklch(0.255 0.013 65); --surface-2: oklch(0.29 0.014 65); --ink: oklch(0.96 0.006 75); --ink-2: oklch(0.78 0.01 75); --ink-3: oklch(0.62 0.012 75); --line: oklch(0.34 0.014 65); --line-2: oklch(0.40 0.016 65); --accent-soft: oklch(0.32 0.04 40); --accent-line: oklch(0.42 0.06 40); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 28px 70px oklch(0 0 0 / 0.5); } html[data-theme="deep"][data-accent="amber"] { --accent-soft: oklch(0.34 0.05 70); } /* ---------- font presets ---------- */ html[data-font="grotesk"] { --font-latin: "Schibsted Grotesk"; } html[data-font="humanist"] { --font-latin: "Hanken Grotesk"; } html[data-font="mono-num"] { --font-latin: "Space Grotesk"; } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; font-size: 16px; letter-spacing: -0.005em; } ::selection { background: var(--accent-soft); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3, h4 { margin: 0; font-weight: 680; letter-spacing: -0.02em; line-height: 1.08; } p { margin: 0; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .latin { font-family: var(--font-latin), system-ui, sans-serif; } /* ============================================================ Layout helpers ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .section-tag { font-family: var(--font-latin); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: var(--r-sm); font-size: 15.5px; font-weight: 580; letter-spacing: -0.01em; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-press); } /* disabled = unmistakably inert: neutral fill, muted ink, no motion, no hover */ .btn:disabled, .btn[disabled] { cursor: not-allowed; } .btn:disabled:active { transform: none; } .btn-primary:disabled, .btn-primary[disabled] { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); } .btn-primary:disabled:hover { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { border-color: var(--ink-3); background: var(--surface-2); } .btn-soft { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn-soft:hover { border-color: var(--line-2); background: var(--surface-2); } .btn-sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: var(--r-xs); } .btn-lg { height: 54px; padding: 0 28px; font-size: 16.5px; } .btn .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================ Striped placeholder (for product shots / video stills) ============================================================ */ .ph { position: relative; overflow: hidden; background-color: var(--surface-2); background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 9px, oklch(0.5 0.02 60 / 0.06) 9px, oklch(0.5 0.02 60 / 0.06) 10px ); display: flex; align-items: center; justify-content: center; } html[data-theme="deep"] .ph { background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 9px, oklch(0.8 0.02 60 / 0.08) 9px, oklch(0.8 0.02 60 / 0.08) 10px); } .ph-label { font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3); background: var(--surface); padding: 4px 9px; border-radius: 100px; border: 1px solid var(--line); white-space: nowrap; } /* ============================================================ 9:16 reel ============================================================ */ .reel { position: relative; aspect-ratio: 9/16; border-radius: 22px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 30px 60px oklch(0.2 0.01 60 / 0.12); } .reel .ph { position: absolute; inset: 0; } .reel-grad { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.2 0.02 60 / 0.18) 0%, transparent 26%, transparent 56%, oklch(0.15 0.02 60 / 0.55) 100%); pointer-events: none; } .reel-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; } .reel-chip { font-family: var(--font-latin); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: oklch(0.15 0.02 60 / 0.5); color: #fff; padding: 4px 9px; border-radius: 100px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; } .reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: oklch(1 0 0 / 0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px oklch(0.15 0.02 60 / 0.3); } .reel-play svg { margin-left: 3px; } .reel-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; } .reel-cap { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-shadow: 0 1px 8px oklch(0.1 0.02 60 / 0.5); margin-bottom: 10px; } .reel-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 640; background: var(--accent); color: var(--accent-ink); padding: 7px 13px; border-radius: 100px; } .reel-sub { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); background: oklch(0.12 0.02 60 / 0.62); color: #fff; font-size: 12.5px; font-weight: 560; padding: 5px 10px; border-radius: 7px; white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================================ Card / surface ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } /* ============================================================ Misc chips ============================================================ */ .tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 100px; font-size: 12.5px; font-weight: 560; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .tag.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }