/* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Theme tokens ---------- Dark is the default regardless of OS/browser preference. data-theme is set synchronously in a script before first paint, so prefers-color-scheme is never consulted. */ :root[data-theme="dark"] { --bg: #111827; --bg-card: #1f2937; --text: #f3f4f6; --text-muted: #9ca3af; --border: #374151; --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --hover-bg: #374151; --btn-bg: #f3f4f6; --btn-text: #111827; } :root[data-theme="light"] { --bg: #ffffff; --bg-card: #ffffff; --text: #111827; --text-muted: #4b5563; --border: #e5e7eb; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --hover-bg: #f3f4f6; --btn-bg: #111827; --btn-text: #ffffff; } body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } /* ---------- Container ---------- */ .container { width: 95%; max-width: 1024px; margin: 0 auto; padding: 0 10px; } /* ---------- Nav ---------- */ .site-nav { display: flex; justify-content: flex-end; align-items: center; padding: 2.25rem 0 1rem; font-weight: 500; font-size: 0.95rem; color: var(--text-muted); } .site-nav a:hover { color: var(--text); } .nav-sep { margin: 0 0.5rem; font-weight: 700; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: 1rem; padding: 0.25rem; border: none; background: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; } .theme-toggle:hover { color: var(--text); } .theme-toggle .icon { width: 1.15rem; height: 1.15rem; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ---------- Headings ---------- */ .page-title { font-size: 2.25rem; font-weight: 700; margin: 0; } .page-subtitle { margin: 0 0 1.25rem; font-weight: 500; color: var(--text-muted); } .section-title { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; } /* ---------- Cards (shared) ---------- */ .card { display: block; background: var(--bg-card); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.2s ease; } .card:hover { box-shadow: var(--shadow-lg); } /* ---------- Showreel ---------- */ .video-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Work grid ---------- */ .work-wrap { display: flex; align-items: center; gap: 0.5rem; } .work-viewport { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; /* overflow-x: auto forces overflow-y to compute to auto too, which clips descendant box-shadow at the top/bottom edges. Vertical padding gives the shadow room to render; the matching negative margin cancels it back out so surrounding layout is unaffected. (Horizontal is left alone — clipping there is the intended carousel mask, and padding it would bleed under the nav buttons.) */ padding: 10px 0; margin: -10px 0; } .work-viewport::-webkit-scrollbar { display: none; } .work-card { cursor: default; flex: 0 0 100%; scroll-snap-align: start; } a.work-card { cursor: pointer; } @media (min-width: 640px) { .work-card { flex: 0 0 calc((100% - 1.5rem) / 3); } } .work-nav-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted); box-shadow: var(--shadow); cursor: pointer; transition: color 0.15s ease, opacity 0.15s ease; } .work-nav-btn svg { width: 1rem; height: 1rem; } .work-nav-btn:hover { color: var(--text); } .work-nav-btn:disabled { opacity: 0.35; cursor: default; } .work-nav-btn:disabled:hover { color: var(--text-muted); } .work-thumb { height: 8rem; width: 100%; background-size: cover; background-position: center; } .thumb-blue { background-color: #dbeafe; } .thumb-orange { background-color: #ffedd5; } .thumb-purple { background-color: #ede9fe; } .thumb-green { background-color: #dcfce7; } :root[data-theme="dark"] .thumb-blue { background-color: rgba(59, 130, 246, 0.16); } :root[data-theme="dark"] .thumb-orange { background-color: rgba(249, 115, 22, 0.16); } :root[data-theme="dark"] .thumb-purple { background-color: rgba(139, 92, 246, 0.16); } :root[data-theme="dark"] .thumb-green { background-color: rgba(34, 197, 94, 0.16); } .work-body { padding: 1.5rem; } .work-heading { display: flex; align-items: center; gap: 0.5rem; } .work-heading h3 { font-size: 1.05rem; font-weight: 600; margin: 0; } .work-arrow { width: 0.7rem; height: 0.7rem; margin-left: auto; color: var(--text-muted); opacity: 0; transition: opacity 0.2s ease; } a.work-card:hover .work-arrow { opacity: 1; } .work-description { margin: 0.65rem 0; font-size: 0.9rem; color: var(--text-muted); } .badge { display: inline-flex; align-items: center; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; line-height: 1.4; } .badge-blue { background: #dbeafe; color: #1e40af; } .badge-orange { background: #ffedd5; color: #9a3412; } .badge-purple { background: #ede9fe; color: #5b21b6; } .badge-green { background: #dcfce7; color: #166534; } :root[data-theme="dark"] .badge-blue { background: #1e3a8a; color: #bfdbfe; } :root[data-theme="dark"] .badge-orange { background: #7c2d12; color: #fed7aa; } :root[data-theme="dark"] .badge-purple { background: #4c1d95; color: #ddd6fe; } :root[data-theme="dark"] .badge-green { background: #14532d; color: #bbf7d0; } /* ---------- Experience ---------- */ .experience-list { padding: 0; } .experience-row { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); transition: background-color 0.15s ease; } .experience-row:first-child { border-top: none; } .experience-row:hover { background: var(--hover-bg); } @media (min-width: 640px) { .experience-row { flex-direction: row; align-items: center; gap: 0; padding: 1rem 1.5rem; } } .experience-who { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .experience-logo { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; overflow: hidden; } .experience-logo-image { background: #ffffff; } .experience-logo-image img { width: 100%; height: 100%; object-fit: contain; padding: 0.3rem; } .initial-blue { background: #dbeafe; color: #1e40af; } .initial-orange { background: #ffedd5; color: #9a3412; } .initial-purple { background: #ede9fe; color: #5b21b6; } .initial-green { background: #dcfce7; color: #166534; } :root[data-theme="dark"] .initial-blue { background: #1e3a8a; color: #bfdbfe; } :root[data-theme="dark"] .initial-orange { background: #7c2d12; color: #fed7aa; } :root[data-theme="dark"] .initial-purple { background: #4c1d95; color: #ddd6fe; } :root[data-theme="dark"] .initial-green { background: #14532d; color: #bbf7d0; } .experience-titles { margin-left: 1rem; } .experience-role { font-size: 0.9rem; font-weight: 600; } .experience-company { font-size: 0.9rem; color: var(--text-muted); } .experience-description { display: none; flex: 1 1 auto; padding: 0 1rem; font-size: 0.9rem; color: var(--text-muted); } @media (min-width: 1024px) { .experience-description { display: block; } } .experience-dates { flex-shrink: 0; font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; } .experience-present { font-weight: 700; } /* ---------- About ---------- */ .about-text p { color: var(--text-muted); margin: 0 0 0.85rem; } /* ---------- Contact ---------- */ .contact-intro { margin: 0 0 1rem; } .contact-links { display: flex; flex-wrap: wrap; justify-content: center; padding: 0.5rem 0 2rem; font-weight: 500; color: var(--text-muted); } .contact-links a:hover { color: var(--text); } /* ---------- Footer ---------- */ .site-footer { padding: 1.5rem 0 2.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }