/* ========================================================= Victor — portfolio A quiet, left-aligned layout: a sticky masthead, numbered bands separated by hairlines, and lists instead of picture cards. Themes: dark is the default. The element gets data-theme="light" or data-theme="dark" from the button in the masthead, and every colour comes from a custom property, so the whole page changes by swapping one attribute. ========================================================= */ /* ---------- 1. Design tokens ---------- */ :root { /* Shape and rhythm */ --radius: 14px; --content: 60rem; --mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --speed: 0.25s; --theme-speed: 0.4s; /* --- Dark theme (default) --- */ color-scheme: dark; --bg: #0f172a; --surface: #182338; --surface-2: #1d2b45; --border: rgb(148 163 184 / 18%); --hairline: rgb(148 163 184 / 14%); --text: #e2e8f0; --text-muted: #94a3b8; --accent: #38bdf8; --accent-2: #818cf8; --accent-contrast: #0b1120; --glow: rgb(56 189 248 / 14%); --glow-card: rgb(56 189 248 / 18%); --icon-bg: rgb(56 189 248 / 8%); --icon-bg-hover: rgb(56 189 248 / 16%); --tag-bg: rgb(148 163 184 / 6%); --sheen: rgb(255 255 255 / 7%); --row-hover: rgb(56 189 248 / 5%); --card-shadow: 0 1px 2px rgb(2 6 23 / 40%); --card-shadow-hover: 0 0.9rem 2rem -1rem rgb(56 189 248 / 65%); --shadow-pop: 0 1rem 2.5rem -1rem rgb(2 6 23 / 55%); } /* --- Light theme --- */ :root[data-theme="light"] { color-scheme: light; --bg: #f8fafc; --surface: #fff; --surface-2: #f1f5f9; --border: rgb(15 23 42 / 12%); --hairline: rgb(15 23 42 / 9%); --text: #0f172a; --text-muted: #475569; --accent: #0369a1; /* darker blue so small text stays readable */ --accent-2: #4f46e5; --accent-contrast: #fff; --glow: rgb(56 189 248 / 18%); --glow-card: rgb(3 105 161 / 10%); --icon-bg: rgb(3 105 161 / 8%); --icon-bg-hover: rgb(3 105 161 / 14%); --tag-bg: rgb(15 23 42 / 4%); --sheen: rgb(15 23 42 / 5%); --row-hover: rgb(3 105 161 / 4%); --card-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 10px 26px -18px rgb(15 23 42 / 35%); --card-shadow-hover: 0 0.9rem 2rem -1rem rgb(3 105 161 / 45%); --shadow-pop: 0 1rem 2.5rem -1rem rgb(15 23 42 / 25%); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { min-height: 100vh; min-height: 100dvh; background-color: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color var(--theme-speed) var(--ease), color var(--theme-speed) var(--ease); } /* A single wash of colour behind the opening screen */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 32rem at 15% -10%, var(--glow), transparent 70%); } .skip-link { position: absolute; top: 0.75rem; left: 1rem; translate: 0 -200%; z-index: 40; padding: 0.6rem 1rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; text-decoration: none; transition: translate var(--speed) var(--ease); } .skip-link:focus-visible { translate: 0 0; } /* ---------- 3. Masthead ---------- */ .masthead { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); } .masthead-inner { display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2rem); width: 100%; max-width: var(--content); margin-inline: auto; padding: 0.7rem clamp(1.1rem, 5vw, 2rem); } .wordmark { display: flex; align-items: center; gap: 0.55rem; color: inherit; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .wordmark-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); font-family: var(--mono); font-size: 0.95rem; } /* Scrolls sideways on narrow screens instead of hiding behind a menu */ .nav { margin-left: auto; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav-list { display: flex; gap: clamp(0.6rem, 2.5vw, 1.5rem); } .nav-list a { position: relative; display: block; padding: 0.3rem 0.1rem; color: var(--text-muted); font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: color var(--speed) var(--ease); } /* Thin marker under the section you are reading */ .nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.15rem; height: 2px; border-radius: 2px; background: var(--accent); scale: 0 1; transition: scale var(--speed) var(--ease); } .nav-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .nav-list a[aria-current="true"] { color: var(--text); } .nav-list a[aria-current="true"]::after { scale: 1 1; } .theme-btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 0.82rem; cursor: pointer; transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease), background-color var(--theme-speed) var(--ease); } .theme-btn-icons { display: grid; width: 1.05rem; height: 1.05rem; } .theme-btn-icons svg { grid-area: 1 / 1; width: 100%; height: 100%; } .icon-sun, .icon-moon { transition: opacity var(--speed) var(--ease), rotate 0.45s var(--ease), scale 0.45s var(--ease); } .icon-moon { opacity: 0; rotate: -90deg; scale: 0.4; } :root[data-theme="light"] .icon-sun { opacity: 0; rotate: 90deg; scale: 0.4; } :root[data-theme="light"] .icon-moon { opacity: 1; rotate: 0deg; scale: 1; } .theme-btn:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ---------- 4. Shared pieces ---------- */ .intro, .band, .footer { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: clamp(1.1rem, 5vw, 2rem); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; } .pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow-card); animation: pulse 2.6s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 0.6rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .lead, .band-lead, .prose p, .work-text, .skill-note { color: var(--text-muted); } .tags { display: flex; flex-wrap: wrap; gap: 0.45rem; } .tag { padding: 0.2rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--tag-bg); color: var(--text-muted); font-family: var(--mono); font-size: 0.72rem; } .btn { display: inline-block; padding: 0.75rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: transform var(--speed) var(--ease), background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .btn-solid { background: var(--accent); color: var(--accent-contrast); } .btn-quiet { border-color: var(--border); color: var(--text); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn:active { transform: translateY(1px); } /* ---------- 5. Opening ---------- */ .intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-top: clamp(3rem, 10vw, 5.5rem); padding-bottom: clamp(3rem, 10vw, 5.5rem); } .portrait { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); outline: 6px solid var(--surface); background: var(--surface); transition: outline-color var(--theme-speed) var(--ease); } .intro-title { font-size: clamp(2.1rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; } .intro-title-soft { color: var(--text-muted); font-weight: 700; } .lead { max-width: 34rem; font-size: clamp(1rem, 2.2vw, 1.1rem); text-wrap: pretty; } .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; } .facts { display: grid; gap: 0; width: 100%; margin-top: 1.5rem; border-top: 1px solid var(--hairline); } .fact { display: grid; gap: 0.15rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); } .fact dt { color: var(--text-muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .fact dd { font-size: 0.95rem; } /* ---------- 6. Bands ---------- */ .band { padding-top: clamp(2.5rem, 8vw, 4.5rem); padding-bottom: clamp(2.5rem, 8vw, 4.5rem); } .band-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.75rem; } .band-index { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; } .band-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; } .band-rule { flex: 1; height: 1px; background: var(--hairline); } .band-lead { max-width: 38rem; margin-bottom: 1.5rem; } .prose { max-width: 42rem; display: grid; gap: 1rem; } /* ---------- 7. Skills ---------- */ .skill-rows { display: grid; border-top: 1px solid var(--hairline); } .skill { display: grid; gap: 0.35rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--hairline); } .skill-name { font-weight: 600; } .skill-note { grid-column: 1 / -1; grid-row: 2; font-size: 0.85rem; } /* ---------- 8. Work ---------- */ .work-list { display: grid; border-top: 1px solid var(--hairline); } .work-row { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; padding: 1.5rem 0.75rem; border-bottom: 1px solid var(--hairline); transition: background-color var(--speed) var(--ease); } .work-no { color: var(--accent); font-family: var(--mono); font-size: 0.78rem; padding-top: 0.35rem; } .work-title { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; } /* stylelint-disable-next-line no-descending-specificity -- this "a" lives inside a work row, the earlier one inside the nav, so the two rules can never apply to the same element. */ .work-title a { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; } .work-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; } .work-arrow svg { width: 1rem; height: 1rem; color: var(--text-muted); transition: translate var(--speed) var(--ease), color var(--speed) var(--ease); } .work-text { max-width: 40rem; margin: 0.4rem 0 0.9rem; } .work-meta { grid-column: 2; color: var(--text-muted); font-family: var(--mono); font-size: 0.75rem; margin-top: 0.9rem; } /* ---------- 9. Contact ---------- */ .contact-grid { display: grid; gap: 1.75rem; } .link-list { display: grid; gap: 0.7rem; } .link-card { position: relative; isolation: isolate; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), background-color var(--theme-speed) var(--ease), box-shadow var(--speed) var(--ease); } /* Glow that follows the pointer — position comes from script.js */ .link-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(12rem circle at var(--x, 50%) var(--y, 50%), var(--glow-card), transparent 65%); transition: opacity var(--speed) var(--ease); } /* Light sweeping across the button once on hover */ .link-card::after { content: ""; position: absolute; inset: 0; z-index: -1; translate: -100% 0; background: linear-gradient(105deg, transparent 40%, var(--sheen) 50%, transparent 60%); } @keyframes sheen { from { translate: -100% 0; } to { translate: 100% 0; } } .link-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); background-color: var(--surface-2); box-shadow: var(--card-shadow-hover); outline: 2px solid var(--accent); outline-offset: 3px; } .link-card:focus-visible::before { opacity: 1; } .link-card:active { transform: translateY(0) scale(0.99); } .link-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--border); border-radius: 10px; background: var(--icon-bg); color: var(--accent); transition: background-color var(--speed) var(--ease), scale var(--speed) var(--ease); } .link-icon svg { width: 1.2rem; height: 1.2rem; } .link-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; } .link-title { font-weight: 600; } .link-sub { color: var(--text-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-arrow { flex: 0 0 auto; display: grid; margin-left: auto; color: var(--text-muted); opacity: 0.6; transition: translate var(--speed) var(--ease), opacity var(--speed) var(--ease), color var(--speed) var(--ease); } .link-arrow svg { grid-area: 1 / 1; width: 1.05rem; height: 1.05rem; } .link-card:focus-visible .link-arrow { translate: 3px -3px; color: var(--accent); opacity: 1; } .link-card[data-copy]:focus-visible .link-arrow { translate: 0; } /* Clipboard icon turns into a checkmark right after copying */ .icon-copy, .icon-check { transition: opacity var(--speed) var(--ease), scale var(--speed) var(--ease); } .icon-check { opacity: 0; scale: 0.5; } .link-card.is-copied .icon-copy { opacity: 0; scale: 0.5; } .link-card.is-copied .icon-check { opacity: 1; scale: 1; color: var(--accent); } /* ---------- 10. Footer ---------- */ .footer { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between; padding-top: 1.75rem; padding-bottom: 3rem; border-top: 1px solid var(--hairline); color: var(--text-muted); font-family: var(--mono); font-size: 0.75rem; } /* ---------- 11. Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 1.5rem; translate: -50% 1.5rem; z-index: 35; padding: 0.55rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-pop); color: var(--text); font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity var(--speed) var(--ease), translate var(--speed) var(--ease); } .toast.is-visible { opacity: 1; translate: -50% 0; } /* ---------- 12. Reveal on scroll ---------- Only hidden when JavaScript can bring the content back. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- 13. Theme switch reveal ---------- */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 0; } ::view-transition-new(root) { z-index: 1; } /* ---------- 14. Pointer devices only ---------- */ @media (hover: hover) { .nav-list a:hover { color: var(--text); } .nav-list a:hover::after { scale: 1 1; } .theme-btn:hover { color: var(--accent); border-color: var(--accent); } .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 0.9rem 1.8rem -0.9rem var(--accent); } .btn-quiet:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); } .work-row:hover { background: var(--row-hover); } .work-row:hover .work-arrow svg { translate: 3px -3px; color: var(--accent); } .link-card:hover { transform: translateY(-2px); border-color: var(--accent); background-color: var(--surface-2); box-shadow: var(--card-shadow-hover); } .link-card:hover::before { opacity: 1; } .link-card:hover::after { animation: sheen 0.9s var(--ease); } .link-card:hover .link-icon { background: var(--icon-bg-hover); scale: 1.06; } .link-card:hover .link-arrow { translate: 3px -3px; color: var(--accent); opacity: 1; } .link-card[data-copy]:hover .link-arrow { translate: 0; } } /* ---------- 15. Narrow screens ---------- Drop the name next to the monogram so all four links fit on a phone. */ @media (max-width: 30em) { .wordmark-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .masthead-inner { gap: 0.6rem; padding-inline: 0.9rem; } .nav-list { gap: 0.75rem; } .nav-list a { font-size: 0.82rem; } } /* Smallest phones: the button keeps only its icon. The aria-label still names it, and the nav can still be swiped if it runs out of room. */ @media (max-width: 23em) { .theme-btn-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .theme-btn { padding: 0.4rem 0.5rem; } .nav-list { gap: 0.6rem; } .nav-list a { font-size: 0.78rem; } } /* ---------- 16. Wider screens ---------- */ @media (min-width: 40em) { .fact { grid-template-columns: 12rem 1fr; align-items: baseline; } .skill { grid-template-columns: 9rem 1fr; } .skill-note { grid-column: 2; grid-row: 1; justify-self: start; } .work-row { grid-template-columns: 3rem 1fr 9rem; } .work-meta { grid-column: 3; grid-row: 1; margin-top: 0.35rem; text-align: right; } } @media (min-width: 60em) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .band-lead { margin-bottom: 0; } } /* ---------- 17. Respect reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } .link-card:hover, .link-card:focus-visible, .btn:hover { transform: none; } }