/* ═══════════════════════════════════════════════════════════════ DAI DANG — PORTFOLIO Theme variables: change the look here. Glitch charset/intensity live on in index.html. ═══════════════════════════════════════════════════════════════ */ :root{ --paper: #F4F2ED; --ink: #0A0A0A; --dd-accent: #2222DD; /* signal accent — carets, bars, marks, nav */ --dd-accent-dark: #14147A; /* dark runner on certified bars */ --frame-bg: #e9e7e1; /* image frame fill */ --font-display: 'Anton', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --ink-70: rgba(10,10,10,0.7); --ink-62: rgba(10,10,10,0.62); --ink-60: rgba(10,10,10,0.6); --ink-55: rgba(10,10,10,0.55); --ink-50: rgba(10,10,10,0.5); --ink-45: rgba(10,10,10,0.45); --ink-40: rgba(10,10,10,0.4); --ink-30: rgba(10,10,10,0.3); --hairline: 1px solid var(--ink); --ease-out: cubic-bezier(.16,.84,.36,1); } /* ---------- base ---------- */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background:var(--paper); color:var(--ink); font-family:var(--font-mono); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{ background:var(--ink); color:var(--paper); } .dd-root{ position:relative; width:100%; min-height:100vh; overflow:hidden; padding:0 clamp(18px,4vw,52px); } .dd-dim{ color:var(--ink-55); } .dd-ink{ color:var(--ink); } .dd-accent{ color:var(--dd-accent); } .dd-right{ text-align:right; } .dd-outline{ color:transparent; -webkit-text-stroke:1.4px var(--ink); } @keyframes ddblink{ 0%,49%{opacity:1} 50%,100%{opacity:0} } @keyframes ddscan{ 0%{transform:translateX(-105%)} 100%{transform:translateX(440%)} } .dd-blink{ display:inline-block; background:var(--dd-accent); animation:ddblink 1.1s steps(1) infinite; } .dd-blink--loader{ width:7px; height:12px; } .dd-blink--cue{ width:7px; height:14px; } .dd-blink--hint{ width:6px; height:12px; animation-duration:1.1s; } /* ---------- loading screen ---------- */ .dd-loader{ position:fixed; inset:0; z-index:9999; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(20px,4vw,52px); font-family:var(--font-mono); } .dd-loader-top{ display:flex; justify-content:space-between; align-items:flex-start; font-size:11px; letter-spacing:0.2em; } .dd-loader-signal{ display:flex; align-items:center; gap:9px; } .dd-loader-mid{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; } .dd-loader-pct{ font-family:var(--font-display); font-weight:400; font-size:clamp(110px,28vw,420px); line-height:0.76; letter-spacing:-0.02em; } .dd-loader-note{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); padding-bottom:clamp(10px,2vw,30px); white-space:nowrap; } .dd-loader-track{ position:relative; height:2px; background:rgba(10,10,10,0.14); } .dd-loader-bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--ink); } /* ---------- side nav rail ---------- */ .dd-navrail{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:1px; font-family:var(--font-mono); } .dd-nav-btn{ appearance:none; background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:flex-end; gap:11px; padding:5px 16px 5px 10px; } .dd-nav-label{ font-size:10px; letter-spacing:0.18em; white-space:nowrap; color:var(--ink-60); opacity:0; transform:translateX(8px); transition:opacity .35s ease, transform .35s ease; } .dd-nav-num{ font-size:10px; letter-spacing:0.08em; min-width:18px; text-align:right; color:var(--ink-40); transition:color .35s ease; } .dd-nav-tick{ display:block; width:16px; height:1px; background:var(--ink-30); transition:width .4s var(--ease-out), background .35s ease; } /* ---------- O1 / hero ---------- */ .dd-hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; padding-top:clamp(20px,3vw,34px); padding-bottom:clamp(20px,3vw,34px); } .dd-hero-top{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:18px; border-bottom:var(--hairline); } .dd-hero-hud{ display:flex; flex-direction:column; gap:3px; } .dd-hero-hud--right{ text-align:right; } .dd-clock{ font-size:12px; font-weight:500; letter-spacing:0.04em; color:var(--ink); } .dd-date{ font-size:11px; letter-spacing:0.16em; color:var(--ink-55); } .dd-hud-line{ font-size:11px; letter-spacing:0.16em; } .dd-hero-index{ position:relative; display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; } .dd-hero-index > div{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); } .dd-hero-center{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(10px,2.5vh,34px) 0; gap:clamp(11px,1.7vh,20px); } .dd-eyebrow{ font-size:11px; letter-spacing:0.3em; color:var(--ink-55); display:flex; align-items:center; gap:11px; } .dd-eyebrow-rule{ display:inline-block; width:26px; height:1px; background:var(--ink-30); } .dd-name{ position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; cursor:pointer; user-select:none; -webkit-user-select:none; } .dd-name-dai, .dd-name-dang{ position:relative; font-family:var(--font-display); font-weight:400; font-size:clamp(80px,21vw,360px); line-height:0.80; text-transform:uppercase; } .dd-name-dai{ z-index:2; letter-spacing:0.01em; color:var(--ink); } .dd-name-dang{ z-index:1; margin-top:-0.20em; margin-left:0.52em; letter-spacing:-0.02em; color:transparent; -webkit-text-stroke:clamp(1.5px,0.32vw,3px) var(--ink); } .dd-name-dai span, .dd-name-dang span{ display:inline-block; } .dd-subtitle-mask{ overflow:hidden; max-width:560px; } .dd-subtitle{ font-size:clamp(13px,1.05vw,15px); line-height:1.65; letter-spacing:0.02em; color:var(--ink-70); } .dd-cue{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-top:18px; border-top:var(--hairline); } .dd-cue-left{ font-size:11px; letter-spacing:0.18em; display:flex; align-items:center; gap:8px; color:var(--ink); } .dd-cue-right{ font-size:11px; letter-spacing:0.16em; color:var(--ink-55); text-align:right; } /* ---------- stats band ---------- */ .dd-stats-band{ display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--hairline); border-bottom:var(--hairline); } .dd-stat{ padding:clamp(26px,4vw,52px) clamp(14px,2vw,28px) clamp(22px,3vw,40px) 0; } .dd-stat + .dd-stat{ border-left:var(--hairline); padding-left:clamp(20px,3vw,40px); } .dd-stat:last-child{ padding-right:0; } .dd-stat-label{ font-size:11px; letter-spacing:0.18em; color:var(--ink-55); margin-bottom:clamp(14px,2vw,24px); } .dd-stat-num{ font-family:var(--font-display); font-size:clamp(64px,9vw,132px); line-height:0.82; letter-spacing:-0.01em; } .dd-stat-dim{ color:var(--ink-40); } .dd-stat-sub{ font-size:11px; letter-spacing:0.1em; color:var(--ink-55); margin-top:14px; } .dd-stat-sub.dd-accent{ color:var(--dd-accent); } .dd-progress{ margin-top:clamp(14px,1.8vw,20px); height:2px; background:rgba(10,10,10,0.12); overflow:hidden; position:relative; } .dd-progress-fill{ position:absolute; top:0; bottom:0; left:0; width:100%; background:var(--dd-accent); } .dd-progress-fill--scan{ width:30%; animation:ddscan 1.9s linear infinite; } .dd-progress--done{ background:var(--dd-accent); } .dd-progress-fill--done{ width:30%; background:var(--dd-accent-dark); animation:ddscan 1.9s linear infinite; } .dd-progress--cert{ margin-top:auto; } /* ---------- shared section furniture ---------- */ .dd-sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; } .dd-sec-head > div{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); } .dd-title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(46px,7.4vw,116px); line-height:0.84; letter-spacing:-0.02em; text-transform:uppercase; } .dd-fig-meta{ display:flex; justify-content:space-between; align-items:baseline; font-size:10px; letter-spacing:0.16em; color:var(--ink-50); } /* ---------- O2 / about ---------- */ .dd-about{ padding:clamp(64px,11vw,150px) 0 clamp(48px,8vw,110px); } .dd-about-head{ margin-bottom:clamp(30px,4.5vw,56px); } .dd-about-grid{ display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:clamp(28px,5vw,80px); align-items:start; } .dd-portrait{ margin:0; display:flex; flex-direction:column; gap:14px; } .dd-portrait-frame{ position:relative; border:var(--hairline); overflow:hidden; background:var(--frame-bg); } .dd-portrait-img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 16%; filter:grayscale(1) contrast(1.06) brightness(1.02); transition:filter .55s ease, transform .9s var(--ease-out); transform:scale(1.001); } .dd-portrait:hover .dd-portrait-img{ filter:grayscale(0) contrast(1.02); transform:scale(1.035); } .dd-portrait-name{ position:absolute; left:11px; bottom:10px; font-size:10px; letter-spacing:0.16em; color:var(--paper); mix-blend-mode:difference; } .dd-fig-cap{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:0.12em; color:var(--ink-55); } /* portrait hover hint — desktop only (touch devices can't hover) */ .dd-portrait-hint{ display:none; font-size:10px; letter-spacing:0.14em; color:var(--dd-accent); } @media (hover:hover) and (pointer:fine){ .dd-portrait-hint{ display:block; } } .dd-about-text{ display:flex; flex-direction:column; gap:clamp(28px,4vw,50px); padding-top:clamp(0px,1vw,12px); } .dd-role-label{ font-size:11px; letter-spacing:0.18em; color:var(--ink-45); margin-bottom:clamp(12px,2vw,20px); } .dd-about-desc{ display:flex; gap:clamp(13px,1.5vw,24px); align-items:flex-start; } .dd-caret{ font-family:var(--font-display); font-size:clamp(20px,2vw,30px); line-height:1.55; color:var(--dd-accent); flex:none; animation:ddblink 1.05s steps(1) infinite; } .dd-bio{ margin:0; max-width:58ch; font-size:clamp(14px,1.05vw,16px); line-height:1.85; letter-spacing:0.01em; } /* ---------- O3 / focus + certifications ---------- */ .dd-focus{ padding:clamp(48px,7vw,96px) 0; border-top:var(--hairline); } .dd-focus-head{ margin-bottom:clamp(28px,4vw,48px); } .dd-focus-words{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,20px); align-items:center; } .dd-focus-word{ font-family:var(--font-display); font-size:clamp(28px,4.6vw,68px); line-height:0.95; letter-spacing:-0.01em; text-transform:uppercase; } .dd-focus-word--outline{ color:transparent; -webkit-text-stroke:1.2px var(--ink); } .dd-focus-sep{ color:var(--dd-accent); font-family:var(--font-display); font-size:clamp(22px,3vw,44px); } .dd-cert-head{ margin-top:clamp(46px,6.5vw,96px); display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-bottom:clamp(20px,3vw,32px); } .dd-cert-head-label{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); } .dd-cert-head-count{ font-size:11px; letter-spacing:0.2em; color:var(--dd-accent); } .dd-cert-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:var(--hairline); border-bottom:var(--hairline); } .dd-cert{ display:flex; flex-direction:column; padding:clamp(24px,3vw,40px) clamp(18px,2vw,28px) clamp(22px,2.6vw,34px) 0; } .dd-cert + .dd-cert{ border-left:var(--hairline); padding-left:clamp(20px,3vw,40px); padding-right:0; } .dd-cert-status{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.16em; color:var(--ink-55); margin-bottom:clamp(14px,2vw,22px); } .dd-cert-name{ font-family:var(--font-display); font-size:clamp(40px,5.6vw,84px); line-height:0.84; letter-spacing:-0.01em; text-transform:uppercase; } .dd-cert-desc{ font-size:11px; letter-spacing:0.06em; line-height:1.65; color:var(--ink-60); margin-top:clamp(12px,1.4vw,18px); margin-bottom:clamp(16px,2vw,22px); } /* ---------- O4 / selected work ---------- */ .dd-work{ padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px); border-top:var(--hairline); } .dd-work-headline{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:clamp(34px,5vw,60px); } .dd-work-eyebrow{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); margin-bottom:clamp(14px,2vw,26px); } .dd-title--work{ font-size:clamp(52px,9vw,140px); line-height:0.80; } .dd-work-note{ font-size:11px; letter-spacing:0.14em; color:var(--ink-50); text-align:right; max-width:220px; line-height:1.6; } .dd-work-thead{ display:grid; grid-template-columns:54px minmax(0,1.5fr) minmax(0,2.1fr) minmax(0,1.1fr) minmax(0,1.5fr) 64px; gap:clamp(8px,1.4vw,22px); padding:0 0 12px; font-size:10px; letter-spacing:0.16em; color:var(--ink-50); border-bottom:var(--hairline); } .dd-work-row{ border-bottom:1px solid rgba(10,10,10,0.85); } .dd-work-head{ display:grid; grid-template-columns:54px minmax(0,1.5fr) minmax(0,2.1fr) minmax(0,1.1fr) minmax(0,1.5fr) 64px; gap:clamp(8px,1.4vw,22px); align-items:center; padding:clamp(18px,2.4vw,30px) 0; cursor:pointer; transition:padding-left .4s var(--ease-out); } .dd-work-num{ font-family:var(--font-display); font-size:clamp(20px,2vw,30px); display:flex; align-items:center; gap:10px; } .dd-work-mark{ display:inline-block; color:var(--dd-accent); font-family:var(--font-mono); font-size:15px; transition:transform .4s var(--ease-out); } .dd-work-name{ font-size:clamp(14px,1.2vw,18px); font-weight:500; } .dd-work-what{ font-size:12px; line-height:1.5; color:var(--ink-62); } .dd-work-role{ font-size:11px; letter-spacing:0.04em; } .dd-work-stack{ font-size:11px; letter-spacing:0.04em; color:var(--ink-62); } .dd-work-year{ font-family:var(--font-display); font-size:clamp(18px,1.8vw,26px); text-align:right; } .dd-work-detail{ max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease-out), opacity .4s ease; } .dd-work-detail-inner{ display:grid; grid-template-columns:54px minmax(0,1fr); gap:clamp(8px,1.4vw,22px); padding:0 0 clamp(26px,3vw,40px); } .dd-work-sub{ font-size:10px; letter-spacing:0.16em; color:var(--ink-40); } .dd-work-detail-grid{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(22px,3.4vw,52px); align-items:stretch; } .dd-work-copy{ max-width:54ch; } .dd-work-copy--wide{ max-width:64ch; } .dd-work-copy p{ margin:0 0 18px; font-size:clamp(15px,1.2vw,18px); line-height:1.7; } .dd-tags{ display:flex; flex-wrap:wrap; gap:8px; } .dd-tag{ font-size:10px; letter-spacing:0.1em; padding:6px 10px; border:var(--hairline); } .dd-work-fig{ margin:0; display:flex; flex-direction:column; gap:10px; height:100%; } .dd-work-fig .dd-fig-meta{ letter-spacing:0.14em; } .dd-work-shot{ display:block; width:100%; flex:1 1 auto; min-height:clamp(200px,32vh,340px); border:var(--hairline); border-radius:2px; background:var(--frame-bg); cursor:pointer; overflow:hidden; } .dd-work-shot img{ display:block; width:100%; height:100%; object-fit:cover; } .dd-work-fig figcaption{ font-size:10px; letter-spacing:0.12em; color:var(--ink-55); } /* ---------- O5 / experience ---------- */ .dd-exp{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(24px,5vw,80px); padding:clamp(48px,7vw,96px) 0; border-top:var(--hairline); } .dd-exp-label{ font-size:11px; letter-spacing:0.2em; color:var(--ink-55); margin-bottom:clamp(18px,3vw,34px); } .dd-title--exp{ font-size:clamp(60px,11vw,170px); line-height:0.82; } .dd-title--exp-outline{ color:transparent; -webkit-text-stroke:1.5px var(--ink); } .dd-exp-list{ padding-top:clamp(4px,2vw,40px); } .dd-exp-row{ display:grid; grid-template-columns:1fr auto; gap:14px 24px; align-items:baseline; padding:clamp(16px,2vw,24px) 0; border-top:var(--hairline); } .dd-exp-row--last{ border-bottom:var(--hairline); } .dd-exp-role{ font-size:clamp(15px,1.3vw,19px); font-weight:500; margin-bottom:6px; } .dd-exp-dim{ color:var(--ink-50); } .dd-exp-org{ font-size:11px; letter-spacing:0.1em; color:var(--ink-55); } .dd-exp-year{ font-family:var(--font-display); font-size:clamp(18px,1.8vw,26px); white-space:nowrap; } /* ---------- O6 / contact ---------- */ .dd-contact{ padding:clamp(30px,12vw,170px) 0 clamp(34px,5vw,60px); border-top:var(--hairline); } .dd-contact-head{ margin-bottom:clamp(28px,4vw,44px); } .dd-contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; border-top:var(--hairline); padding-top:clamp(26px,3.5vw,48px); margin-bottom:clamp(34px,5vw,60px); } .dd-title--contact{ font-size:clamp(60px,12.5vw,180px); line-height:0.82; } .dd-title--contact-outline{ color:transparent; -webkit-text-stroke:clamp(1.5px,0.3vw,3px) var(--ink); } .dd-contact-hint{ margin-top:clamp(16px,2vw,28px); font-size:11px; letter-spacing:0.18em; color:var(--dd-accent); display:flex; align-items:center; gap:9px; } .dd-contact-links{ display:flex; flex-direction:column; border-top:var(--hairline); } .dd-contact-link{ text-decoration:none; color:var(--ink); padding:clamp(16px,2vw,24px) clamp(12px,1.4vw,18px); border-bottom:var(--hairline); display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .3s ease; } .dd-link-col{ display:flex; flex-direction:column; gap:7px; min-width:0; } .dd-link-label{ font-size:10px; letter-spacing:0.16em; color:var(--ink-50); } .dd-link-tx{ font-size:clamp(14px,1.3vw,19px); } .dd-link-tx--email{ word-break:break-all; } .dd-link-arrow{ font-size:clamp(15px,1.5vw,20px); } .dd-foot-meta{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; padding-top:26px; } .dd-foot-cell{ display:flex; flex-direction:column; gap:5px; } .dd-foot-cell--center{ text-align:center; } .dd-foot-cell--right{ text-align:right; } .dd-foot-label{ font-size:10px; letter-spacing:0.18em; color:var(--ink-45); } .dd-foot-value{ font-size:12px; letter-spacing:0.05em; } .dd-foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:22px; margin-top:24px; border-top:var(--hairline); } .dd-foot-bottom > div{ font-size:11px; letter-spacing:0.14em; color:var(--ink-55); } /* ---------- responsive ---------- */ @media (max-width:980px){ .dd-navrail{ display:none !important; } } /* tablet & down — stack the big two-column blocks, simplify the work table */ @media (max-width:860px){ .dd-about-grid{ grid-template-columns:1fr; } .dd-exp{ grid-template-columns:1fr; gap:clamp(22px,5vw,44px); } .dd-work-thead{ display:none; } .dd-work-head{ grid-template-columns:auto 1fr auto; column-gap:16px; } .dd-work-head > div:nth-child(3), .dd-work-head > div:nth-child(4), .dd-work-head > div:nth-child(5){ display:none; } .dd-work-detail-grid{ grid-template-columns:1fr; } } @media (max-width:720px){ .dd-contact-grid{ grid-template-columns:1fr; align-items:start; } .dd-cert-grid{ grid-template-columns:1fr; } .dd-cert + .dd-cert{ border-left:none; border-top:var(--hairline); padding-left:0; } } /* phone — stack the stats band */ @media (max-width:620px){ .dd-stats-band{ grid-template-columns:1fr; } .dd-stat + .dd-stat{ border-left:none; border-top:var(--hairline); padding-left:0; } .dd-stat{ padding-left:0; padding-right:0; } }