/* ============================================================ Cristal Jiang — Portfolio Design System (Direction A · Editorial) Single source of truth. Link this on every page: Pages default to DARK (the portfolio ground). Add class="theme-light" on for the light reference. ============================================================ */ /* ---- Fonts ---- */ /* @import is fine, or preconnect+link in the page for speed: https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap */ /* ---- Tokens : DARK (portfolio default) ---- */ :root { /* neutrals */ --ground: #0A0B0D; --surface: #121317; --ink: #F4F4F2; --body: #9B9BA1; --muted: #6C6C72; --meta: #83838A; /* lines & shadow */ --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.12); --frame-shadow: 0 1px 3px rgba(0,0,0,.4), 0 50px 90px -60px rgba(0,0,0,.9); /* accents — lifted for dark (one per case study) */ --ac-ms: #3B9EFF; --ac-napoz: #FF6076; --ac-privoce: #8AA8FF; --ac-egge: #E08A40; /* default page accent (overridable per page: set --accent on a scope) */ --accent: var(--ac-ms); /* type */ --sans: 'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, sans-serif; --serif: var(--sans); /* narrative italic accent now uses Geist — no separate serif face (2 type families total: Geist + Geist Mono) */ --mono: 'Geist Mono', ui-monospace, monospace; /* meta / labels ONLY */ /* radius */ --r-frame: 16px; /* cards & frames */ --r-tile: 12px; /* images & tiles */ --r-pill: 99px; /* tags & dots */ /* layout */ --container: 1180px; --gutter: 72px; --prose: 720px; /* 640–760 reading measure */ } /* ---- Tokens : LIGHT (reference / styleguide) ---- */ .theme-light { --ground: #ECECEA; --surface: #FCFCFC; --ink: #141414; --body: #5E5E5E; --muted: #9A9A9A; --meta: #9A9A9A; --hairline: rgba(0,0,0,.08); --hairline-strong: rgba(0,0,0,.12); --frame-shadow: 0 40px 70px -50px rgba(20,20,20,.4); --ac-ms: #0078D4; --ac-napoz: #FF4760; --ac-privoce: #6990F2; --ac-egge: #D4762A; --accent: var(--ac-ms); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } ::selection { background: rgba(0,120,212,.32); color: #fff; } ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: var(--r-pill); } .theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); } ::-webkit-scrollbar-track { background: transparent; } body.ds { background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ---- Layout helpers ---- */ .ds-container { max-width: var(--container); margin: 0 auto; } .ds-frame { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--frame-shadow); } .ds-prose { max-width: var(--prose); margin: 0 auto; } .ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 44px; } /* ---- Type scale (02) ---- */ .ds-hero { font-family: var(--sans); font-size: 62px; line-height: 1.04; letter-spacing: -.035em; font-weight: 700; color: var(--ink); margin: 0; text-wrap: balance; } .ds-section-title { font-family: var(--sans); font-size: 32px; letter-spacing: -.025em; font-weight: 600; color: var(--ink); margin: 0; } .ds-card-title { font-family: var(--sans); font-size: 26px; letter-spacing: -.022em; font-weight: 600; color: var(--ink); margin: 0; } .ds-lede { font-size: 18px; line-height: 1.75; color: var(--body); } .ds-body { font-size: 16px; line-height: 1.75; color: var(--body); } .ds-eyebrow{ font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--meta); } .ds-italic { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; } /* narrative accent */ /* ---- Nav (04) ---- */ .ds-nav { display: flex; justify-content: space-between; align-items: center; padding: 30px var(--gutter); border-bottom: 1px solid var(--hairline); } /* opt-in: sticky header on scroll (applied per page — homepage opts out) */ .ds-nav.is-sticky { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } .ds-wordmark { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--meta); text-decoration: none; } .ds-wordmark > span { display: block; transition: transform .42s cubic-bezier(.4,0,.2,1); } .ds-wordmark::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--ink); transform: translateY(100%); transition: transform .42s cubic-bezier(.4,0,.2,1); } .ds-wordmark:hover > span { transform: translateY(-100%); } .ds-wordmark:hover::after { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .ds-wordmark > span, .ds-wordmark::after { transition: none; } } .ds-navlinks { display: flex; gap: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .ds-navlinks a { color: var(--meta); text-decoration: none; padding-bottom: 3px; transition: color .2s ease; } .ds-navlinks a:hover { color: var(--ink); } .ds-navlinks a.active { color: var(--ink); border-bottom: 1.5px solid var(--ink); } /* ---- Tags & labels (04) ---- */ .ds-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 4px 9px; border-radius: var(--r-pill); } /* ---- Work card (04) : hover scales image, lights underline + number ---- */ .ds-card { text-decoration: none; display: block; cursor: pointer; } .ds-card .ds-thumb { overflow: hidden; border-radius: var(--r-tile); border: 1px solid var(--hairline); aspect-ratio: 16/11; background: var(--surface); } .ds-card .ds-thumb-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg,#1e1f25 0 22px,#191a1f 22px 44px); transform: scale(1); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .theme-light .ds-card .ds-thumb-inner { background: repeating-linear-gradient(135deg,#e8e8e3 0 22px,#e3e3dd 22px 44px); } .ds-card .ds-thumb-inner span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .ds-card:hover .ds-thumb-inner { transform: scale(1.045); } .ds-card .ds-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; } .ds-card .ds-card-meta .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); } .ds-card .ds-card-meta .num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); transition: color .3s; } .ds-card .ds-card-title { margin-top: 10px; } .ds-card .ds-card-title .ul { border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .3s; } .ds-card p { margin: 9px 0 0; font-size: 14.5px; color: var(--body); line-height: 1.6; } .ds-card:hover .num { color: var(--accent); } .ds-card:hover .ds-card-title .ul { border-bottom-color: var(--accent); } /* ---- Index row (04) : shifts 10px, reveals arrow, accent number ---- */ .ds-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; border-top: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline); text-decoration: none; transform: translateX(0); transition: transform .4s cubic-bezier(.2,.7,.2,1); cursor: pointer; } .ds-row:hover { transform: translateX(10px); } .ds-row .num { font-family: var(--mono); font-size: 13px; color: var(--muted); transition: color .3s; } .ds-row:hover .num { color: var(--accent); } .ds-row .ds-row-title { font-size: 24px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); } .ds-row .ds-row-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); margin-top: 8px; } .ds-row .ds-row-arrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--ink); opacity: 0; transition: opacity .3s; } .ds-row:hover .ds-row-arrow { opacity: 1; } /* ---- Signal bars (04) : skill rating, 5 dots ---- */ .ds-signal { display: inline-flex; align-items: center; gap: 10px; } .ds-signal i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--accent); display: inline-block; } .ds-signal i.half { background: linear-gradient(90deg, var(--accent) 50%, var(--hairline-strong) 50%); } .ds-signal i.empty { background: var(--hairline-strong); } /* ---- Stat (04) ---- */ .ds-stat { flex: none; border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 22px 24px; } .ds-stat .num { font-size: 50px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); } .ds-stat .num span { color: var(--accent); } .ds-stat .lbl { font-size: 13px; color: var(--body); margin-top: 12px; max-width: 160px; line-height: 1.5; } /* ---- Pull-quote (04) ---- */ .ds-quote { border-left: 3px solid var(--accent); padding-left: 18px; } .ds-quote p { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; } /* ---- Principle card (05) ---- */ .ds-principle { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-frame); padding: 30px 32px; } .ds-principle .n { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--accent); line-height: 1; } .ds-principle .t { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-top: 16px; color: var(--ink); } .ds-principle .d { font-size: 13.5px; color: var(--body); line-height: 1.7; margin-top: 12px; } /* ---- Accent scopes (set the single accent per page/section) ---- */ .accent-ms { --accent: var(--ac-ms); } .accent-napoz { --accent: var(--ac-napoz); } .accent-privoce { --accent: var(--ac-privoce); } .accent-egge { --accent: var(--ac-egge); } /* ---- Reveal motion (optional) ---- */ .ds-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .ds-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ds-reveal { opacity: 1; transform: none; transition: none; } } /* ---- Responsive ---- */ @media (max-width: 860px) { :root { --gutter: 26px; } .ds-grid-2 { grid-template-columns: 1fr; gap: 44px; } .ds-hero { font-size: 40px; } }