/* ============================================ 藝洋視覺設計工作室 — Premium Design System Inspired by mentry.dev ============================================ */ /* ---- CSS Custom Properties ---- Palette aligned with the 藝洋 Design System (claude.ai/design). PRIMARY scope is the warm/light "cream" theme (the design system's default :root); the dark "night" scope is kept under [data-theme="night"] for an optional toggle. Brand orange #F7931E + blush accent. */ :root { color-scheme: light; /* Warm light scope — 米 cream backgrounds, paper card surfaces */ --bg: #FBF6EE; /* cream-50 — page background */ --bg-soft: #F5ECDD; /* cream-100 — alt section band */ --panel: #FFFCF6; /* paper — card surface */ --panel-2: #FFFFFF; /* white — raised surface */ /* Warm ink text colors (no pure black) */ --text: #1A130C; /* ink-900 — strong text */ --muted: #6F5743; /* bark-600 — muted/body */ --line: rgba(46, 34, 25, 0.14); /* warm sand border */ /* Brand orange */ --coral: #F7931E; /* orange-500 — brand primary */ --coral-dim: rgba(247, 147, 30, 0.14); --coral-soft: #FDE3C2; /* orange-100 — light glow */ --coral-hover:#E27C0B; /* orange-600 — darken on hover (light bg) */ --coral-press:#BB6406; /* orange-700 — press state */ /* Blush accent — deepened so it reads as text on cream */ --cyan: #C95792; /* deep blush — readable accent */ /* Gold-orange accent — deepened for contrast on cream */ --lime: #E27C0B; /* orange-600 — prices / accents */ /* Soft warm shadows (design-system style — light, warm-tinted) */ --shadow: 0 14px 34px rgba(46, 34, 25, 0.12), 0 4px 10px rgba(46, 34, 25, 0.06); --shadow-soft: 0 4px 12px rgba(46, 34, 25, 0.08), 0 2px 4px rgba(46, 34, 25, 0.05); --shadow-sticker: 4px 4px 0 rgba(247, 147, 30, 0.85); --radius: 0px; --font-heading: 'Fraunces', 'Noto Sans TC', serif; --font-body: 'Noto Sans TC', 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'Space Grotesk', 'JetBrains Mono', monospace; --container: 1200px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- Optional dark scope — add data-theme="night" on ---- */ [data-theme="night"] { color-scheme: dark; --bg: #FBF6EE; --bg-soft: #F5ECDD; --panel: #211B15; --panel-2: #2E2620; --text: #F6EFE6; --muted: #A8997F; --line: rgba(46, 34, 25, 0.10); --coral-hover:#F89C32; --coral-press:#E27C0B; --cyan: #EBAAC9; --lime: #F89C32; --shadow: 0 28px 90px rgba(46, 34, 25, 0.55); --shadow-soft: 0 14px 34px rgba(46, 34, 25, 0.40); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; } ::selection { background: var(--coral); color: #1A130C; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* Make wrappers transparent to layout so CSS targeting inside containers (e.g. .avatar__core img, .work__img img) continues to work. */ picture { display: contents; } ul, ol { list-style: none; } h1, h2, h3, h4, p { margin-top: 0; } /* ---- Skip Link ---- */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 999; padding: 12px 24px; background: var(--coral); color: #1A130C; font-weight: 700; transition: top 0.2s; } .skip-link:focus { top: 16px; } /* ---- Container ---- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }