/* yabrostudio · 作品集 — neobrutalism Shared by index.html and every /portfolio/.html journey page. Per-page accent is set with --accent on . */ :root { --paper: #FBF7EF; --paper-2: #FFFFFF; --ink: #111111; --ink-soft: #4A4A4A; --line: #111111; --border-w: 3px; --shadow: 6px 6px 0 var(--ink); --shadow-lg: 10px 10px 0 var(--ink); --shadow-sm: 4px 4px 0 var(--ink); --accent: #FFD84D; --accent-ink: #111111; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --font: "Inter", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif; --page: 1120px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; background-image: linear-gradient(rgba(17,17,17,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px); background-size: 28px 28px; } h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .page { max-width: var(--page); margin: 0 auto; padding: 0 var(--s5); } /* ---------- shared bits ---------- */ .box { background: var(--paper-2); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); } .tag { display: inline-block; border: 2px solid var(--ink); background: var(--paper-2); padding: 2px 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; } .tag--accent { background: var(--accent); color: var(--accent-ink); } .btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 12px 22px; background: var(--accent); color: var(--accent-ink); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-sm); font-weight: 900; font-size: 17px; text-decoration: none; transition: transform 120ms ease-out, box-shadow 120ms ease-out; } .btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); } .btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); } .btn--ghost { background: var(--paper-2); color: var(--ink); } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: var(--border-w) solid var(--ink); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; flex-wrap: wrap; } .nav-brand { font-weight: 900; font-size: 17px; text-decoration: none; letter-spacing: -0.01em; padding: 7px 0; } .nav-brand span { background: var(--accent); border: 2px solid var(--ink); padding: 1px 8px; } .nav-links { display: flex; gap: var(--s4); font-weight: 700; font-size: 15px; } .nav-links a { text-decoration: none; padding: 6px 2px; } .nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; } /* ---------- hero (index) ---------- */ .hero { padding: var(--s8) 0 var(--s7); } .hero-eyebrow { display: inline-block; background: var(--ink); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .18em; padding: 4px 12px; margin-bottom: var(--s5); } .hero h1 { font-size: clamp(34px, 6.2vw, 64px); max-width: 16em; margin-bottom: var(--s5); } .hero h1 mark { background: var(--accent); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero-sub { max-width: 40em; font-size: clamp(16px, 2.1vw, 19px); color: var(--ink-soft); font-weight: 500; } .stats { display: flex; flex-wrap: wrap; gap: 0; border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); background: var(--paper-2); margin-top: var(--s6); } .stat { flex: 1 1 180px; padding: var(--s4) var(--s5); border-right: var(--border-w) solid var(--ink); } .stat:last-child { border-right: 0; } .stat b { display: block; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; } .stat span { font-size: 14px; font-weight: 700; color: var(--ink-soft); } /* ---------- card grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s6); padding-bottom: var(--s9); } .card { display: flex; flex-direction: column; background: var(--paper-2); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); text-decoration: none; transition: transform 130ms ease-out, box-shadow 130ms ease-out; } .card:hover, .card:focus-visible { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); } .card-shot { border-bottom: var(--border-w) solid var(--ink); background: var(--c, #eee); aspect-ratio: 40 / 21; overflow: hidden; } .card-shot img { width: 100%; height: 100%; object-fit: cover; } .card-shot--contain img { object-fit: contain; } .card-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; } .card-tags { display: flex; flex-wrap: wrap; gap: var(--s2); } .card h3 { font-size: 23px; } .card-desc { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); flex: 1; } .card-go { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 900; font-size: 15px; padding-top: var(--s2); border-top: 2px dashed rgba(17,17,17,.25); margin-top: var(--s2); } .card-go::after { content: "→"; transition: transform 130ms ease-out; } .card:hover .card-go::after { transform: translateX(5px); } .section-head { padding: var(--s7) 0 var(--s5); } .section-head h2 { font-size: clamp(24px, 3.6vw, 34px); } .section-head p { color: var(--ink-soft); font-weight: 500; margin-top: var(--s3); max-width: 44em; } /* ---------- journey page ---------- */ .jhero { border-bottom: var(--border-w) solid var(--ink); background: var(--accent); padding: var(--s7) 0 0; } .jhero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s6); align-items: end; } .jhero-eyebrow { font-weight: 900; font-size: 13px; letter-spacing: .16em; margin-bottom: var(--s4); color: var(--accent-ink); } .jhero h1 { font-size: clamp(32px, 5.6vw, 54px); color: var(--accent-ink); margin-bottom: var(--s4); } .jhero-sub { font-size: clamp(16px, 2vw, 19px); font-weight: 600; color: var(--accent-ink); max-width: 32em; margin-bottom: var(--s5); } .jhero-tags { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s7); } .jhero-shot { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); margin-bottom: -1px; transform: translateY(var(--s5)); background: #fff; } .jhero-shot img { width: 100%; } .jmeta { display: flex; flex-wrap: wrap; gap: 0; border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); background: var(--paper-2); margin: var(--s8) 0 var(--s7); } .jmeta div { flex: 1 1 160px; padding: var(--s4) var(--s5); border-right: var(--border-w) solid var(--ink); } .jmeta div:last-child { border-right: 0; } .jmeta b { display: block; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; } .jmeta span { font-size: 13px; font-weight: 700; color: var(--ink-soft); } .prose { max-width: 44em; } .prose h2 { font-size: clamp(23px, 3.2vw, 30px); margin: var(--s8) 0 var(--s4); padding-bottom: var(--s3); border-bottom: var(--border-w) solid var(--ink); } .prose h2 .num { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--ink); font-size: 15px; padding: 0 9px; margin-right: var(--s3); vertical-align: 3px; } .prose h3 { font-size: 19px; margin: var(--s6) 0 var(--s3); } .prose p { margin-bottom: var(--s4); } .prose ul { list-style: none; margin-bottom: var(--s4); } .prose li { position: relative; padding-left: 26px; margin-bottom: var(--s3); } .prose li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--ink); } .prose strong { font-weight: 900; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--paper); border: 2px solid var(--ink); padding: 0 5px; } .callout { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-sm); background: var(--paper-2); padding: var(--s5); margin: var(--s6) 0; } .callout-label { display: inline-block; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .14em; padding: 3px 9px; margin-bottom: var(--s3); } .callout p:last-child { margin-bottom: 0; } .tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); margin: var(--s5) 0 var(--s6); } .tool { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-sm); background: var(--paper-2); padding: var(--s4); } .tool b { display: block; font-weight: 900; font-size: 16px; margin-bottom: 2px; } .tool span { font-size: 14px; color: var(--ink-soft); line-height: 1.6; display: block; } .cta { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-lg); background: var(--accent); padding: var(--s7) var(--s6); margin: var(--s9) 0 var(--s8); text-align: center; } .cta h2 { font-size: clamp(24px, 4vw, 36px); color: var(--accent-ink); margin-bottom: var(--s4); } .cta p { color: var(--accent-ink); font-weight: 600; max-width: 34em; margin: 0 auto var(--s5); } .cta .btn { background: var(--ink); color: #fff; } .pager { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; padding-bottom: var(--s8); } /* ---------- footer ---------- */ .foot { border-top: var(--border-w) solid var(--ink); background: var(--ink); color: #fff; padding: var(--s7) 0; } .foot a { color: #fff; } .foot-inner { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: flex-start; } .foot b { font-weight: 900; font-size: 18px; display: block; margin-bottom: var(--s2); } .foot p { font-size: 15px; color: #C9C9C9; max-width: 30em; } .foot-links { display: flex; flex-wrap: wrap; gap: var(--s4); font-weight: 700; font-size: 15px; } .foot-links a { padding: 7px 0; } /* ---------- responsive ---------- */ @media (max-width: 860px) { .jhero-grid { grid-template-columns: 1fr; } .jhero-shot { transform: none; margin-bottom: calc(var(--border-w) * -1); } .jhero-tags { padding-bottom: var(--s5); } .jmeta { margin-top: var(--s7); } } @media (max-width: 620px) { body { font-size: 16px; } .page { padding: 0 var(--s4); } .stat, .jmeta div { flex-basis: 100%; border-right: 0; border-bottom: var(--border-w) solid var(--ink); } .stat:last-child, .jmeta div:last-child { border-bottom: 0; } .grid { grid-template-columns: 1fr; gap: var(--s5); } :root { --shadow: 5px 5px 0 var(--ink); --shadow-lg: 7px 7px 0 var(--ink); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }