/* ============================================================ Thomas J. Bruland — portfolio Palette: fjord water at dusk + glacial teal + bone white ============================================================ */ /* Register theme colors as animatable so the whole palette crossfades in one motion when data-theme flips on */ @property --ink { syntax: ""; inherits: true; initial-value: #0a0e13; } @property --ink-2 { syntax: ""; inherits: true; initial-value: #0f151c; } @property --ink-3 { syntax: ""; inherits: true; initial-value: #161e27; } @property --bone { syntax: ""; inherits: true; initial-value: #eae5da; } @property --bone-dim { syntax: ""; inherits: true; initial-value: #a9a698; } @property --glacier { syntax: ""; inherits: true; initial-value: #7fe0d1; } @property --glacier-deep { syntax: ""; inherits: true; initial-value: #2b7f74; } @property --line { syntax: ""; inherits: true; initial-value: rgba(234,229,218,0.14); } :root { --ink: #0a0e13; /* deep fjord */ --ink-2: #0f151c; --ink-3: #161e27; --bone: #eae5da; /* warm off-white */ --bone-dim: #a9a698; --glacier: #7fe0d1; /* accent */ --glacier-deep: #2b7f74; --line: rgba(234, 229, 218, 0.14); --font-display: "Fraunces", Georgia, serif; --font-hero: "Archivo", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --pad: clamp(1.25rem, 4vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Light mode — scroll-driven via data-section-theme (see main.js) */ body[data-theme="light"] { --ink: #f2efe8; /* bone paper */ --ink-2: #faf8f3; --ink-3: #e9e5db; --bone: #12171e; /* deep fjord as ink */ --bone-dim: #6f6d62; --glacier: #128577; /* deeper teal for contrast on paper */ --glacier-deep: #0f6459; --line: rgba(18, 23, 30, 0.16); } body { background: var(--ink); color: var(--bone); /* the palette variables themselves animate — everything that uses them (backgrounds, borders, text) shifts in the same breath */ transition: --ink 0.9s ease, --ink-2 0.9s ease, --ink-3 0.9s ease, --bone 0.9s ease, --bone-dim 0.9s ease, --glacier 0.9s ease, --glacier-deep 0.9s ease, --line 0.9s ease; font-family: var(--font-body); font-weight: 300; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--glacier); color: var(--ink); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.02; } em { font-style: italic; } /* light chip so dark/colored logos read on the dark theme */ .chip { background: #f2efe8; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .chip img { object-fit: contain; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glacier); display: inline-block; animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.35; transform: scale(0.75);} } /* ============ NAV — floating pill ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 1.1rem var(--pad); font-family: var(--font-hero); color: var(--bone); transition: transform 0.45s cubic-bezier(.22,.61,.36,1), padding 0.45s ease; animation: navFade 0.6s 0.35s ease both; } .nav__pill { animation: navRise 0.7s 0.3s cubic-bezier(.22,.61,.36,1) both; } @keyframes navFade { from { opacity: 0; } to { opacity: 1; } } @keyframes navRise { from { transform: translateY(-14px); } to { transform: none; } } /* hide on scroll down, reveal on scroll up */ .nav.is-hidden { transform: translateY(-160%); } /* tuck the pill up a touch once scrolled (frosted state) */ .nav.is-solid { padding-top: 0.75rem; } .nav__pill { display: flex; align-items: center; gap: 2.5rem; padding: 0.5rem 0.5rem 0.5rem 1.4rem; border-radius: 999px; border: 1px solid transparent; background: transparent; transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; } .nav.is-solid .nav__pill { background: color-mix(in srgb, var(--ink) 62%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.45); } .nav:not(.is-solid) .nav__link, .nav:not(.is-solid) .nav__logo { text-shadow: 0 1px 12px rgba(6,10,15,0.4); } .nav__logo { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; margin-right: auto; } .nav__menu { display: flex; align-items: center; gap: 0.35rem; } .nav__link { padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--bone); opacity: 0.82; transition: opacity 0.2s, color 0.2s, background-color 0.2s; } .nav__link:hover { opacity: 1; background: color-mix(in srgb, var(--bone) 12%, transparent); } .nav__link--cta { background: var(--glacier); color: var(--ink); opacity: 1; font-weight: 600; } .nav__link--cta:hover { background: var(--glacier); color: var(--ink); filter: brightness(1.08); } /* hamburger */ .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: 999px; background: none; border: none; color: inherit; cursor: pointer; } .nav__burger span { display: block; height: 2px; width: 22px; border-radius: 2px; background: currentColor; transition: transform 0.3s, opacity 0.3s; } .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile: hamburger + dropdown menu */ @media (max-width: 768px) { .nav__pill { width: 100%; justify-content: space-between; gap: 1rem; position: relative; /* always show the pill surface on mobile so the burger reads */ background: color-mix(in srgb, var(--ink) 62%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); padding: 0.5rem 0.6rem 0.5rem 1.4rem; } .nav__burger { display: flex; } .nav__menu { position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.6rem; border-radius: 22px; background: color-mix(in srgb, var(--ink) 85%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0,0,0,0.5); transform: translateY(-10px) scale(0.98); transform-origin: top center; opacity: 0; pointer-events: none; transition: transform 0.28s ease, opacity 0.28s ease; } .nav__menu.is-open { transform: none; opacity: 1; pointer-events: auto; } .nav__link { padding: 0.85rem 1rem; font-size: 1rem; opacity: 0.95; text-align: left; } .nav__link--cta { text-align: center; margin-top: 0.2rem; } } /* ============ HERO ============ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #080b10; /* The hero sits over a photo — pin the dark palette here so its text stays white even when the scroll-driven theme flips to light */ --ink: #0a0e13; --ink-2: #0f151c; --ink-3: #161e27; --bone: #eae5da; --bone-dim: #a9a698; --glacier: #7fe0d1; --glacier-deep: #2b7f74; --line: rgba(234, 229, 218, 0.14); } /* full-bleed photograph */ .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; will-change: transform; } /* legibility scrim — darkens the base for the wordmark, eases toward the sky */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(6,10,15,0.88) 0%, rgba(6,10,15,0.55) 24%, rgba(6,10,15,0.12) 50%, rgba(6,10,15,0.30) 100%), linear-gradient(105deg, rgba(6,10,15,0.35) 0%, rgba(6,10,15,0) 45%); } .hero__grain { position: absolute; inset: -100%; pointer-events: none; opacity: 0.045; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 7s steps(8) infinite; } @keyframes grain { 0%,100% { transform: translate(0,0);} 25% { transform: translate(-4%,3%);} 50% { transform: translate(3%,-2%);} 75% { transform: translate(-2%,-4%);} } .hero__inner { position: relative; z-index: 3; flex: 1; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--pad) + 4.6rem) var(--pad) 2.4rem; } .hero__eyebrow { margin-top: auto; /* drop the eyebrow down with the wordmark */ margin-bottom: 1.1rem; color: rgba(234,229,218,0.6); } .hero__title { font-family: var(--font-hero); font-weight: 800; text-transform: uppercase; font-size: clamp(3.1rem, 13vw, 12rem); line-height: 0.88; letter-spacing: -0.035em; color: var(--bone); } .hero__title { position: relative; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: inline-block; will-change: transform; } .hero__title em { font-style: normal; color: var(--glacier); } /* intro greeting — sits over the title, wipes away to reveal the name */ .hero__hi { position: absolute; left: 0; top: 0; font-family: var(--font-hero); font-weight: 800; font-size: clamp(1.9rem, 6.5vw, 5.4rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--bone); pointer-events: none; } .hero__hi .hi-line { display: block; overflow: hidden; } .hero__hi .hi-line > span { display: inline-block; will-change: transform; } .hero__foot { margin-top: 1.9rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2.5rem; flex-wrap: wrap; } .hero__role { font-family: var(--font-body); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--bone); max-width: 55ch; } .hero__scroll { display: flex; align-items: center; gap: 0.6rem; color: rgba(234,229,218,0.75); white-space: nowrap; } .hero__scroll:hover { color: var(--bone); } .hero__scroll svg { animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} } .reveal-line { overflow: hidden; display: inline-block; } .reveal-line > span { display: inline-block; } .hero__credit { position: absolute; z-index: 3; right: 0.55rem; bottom: 8.5rem; writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(234,229,218,0.5); font-size: 0.58rem; letter-spacing: 0.14em; } @media (max-width: 600px) { .hero__credit { display: none; } } /* ============ SECTIONS ============ */ .section { padding: clamp(5rem, 12vh, 9rem) var(--pad); position: relative; } .section__head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); } .section__num { color: var(--glacier); } .section__name { color: var(--bone-dim); } .section__rule { flex: 1; height: 1px; background: var(--line); transform-origin: left; } /* ============ PROFILE ============ */ .profile__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .profile__statement { font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.22; letter-spacing: -0.01em; } .profile__statement .w { display: inline-block; opacity: 0.12; } .profile__photo { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); max-width: 26rem; justify-self: end; margin-right: 1.5rem; } .profile__photo img { width: 100%; height: auto; display: block; filter: saturate(0.95); transition: scale 0.9s cubic-bezier(.2,.8,.2,1); scale: 1.02; } .profile__photo:hover img { scale: 1.07; } @media (max-width: 900px) { .profile__grid { grid-template-columns: 1fr; } } /* ============ EXPERIENCE ============ */ .exp__list { border-top: 1px solid var(--line); } .exp__row { display: grid; grid-template-columns: 8.5rem 1fr 10rem; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; padding: 2.4rem 0.5rem; border-bottom: 1px solid var(--line); transition: padding-left 0.45s cubic-bezier(.2,.8,.2,1), background-color 0.45s; } .exp__row:hover { padding-left: 1.6rem; background: rgba(127,224,209,0.03); } .exp__logo { width: 8.5rem; height: 5.6rem; padding: 0.8rem; } .exp__logo img { width: 100%; height: 100%; object-fit: contain; } .exp__role { font-size: clamp(1.5rem, 2.8vw, 2.4rem); margin-bottom: 0.3rem; } .exp__title { color: var(--bone); font-size: 0.98rem; margin-bottom: 0.55rem; } .exp__company { color: var(--bone); font-size: 0.98rem; margin-bottom: 0.3rem; } .exp__type, .exp__loc { color: var(--glacier); } .exp__loc { font-size: 0.78rem; margin-bottom: 0.55rem; } .exp__desc { color: var(--bone-dim); font-size: 0.92rem; max-width: 58ch; } .exp__years { color: var(--glacier); justify-self: end; text-align: right; } @media (max-width: 900px) { .exp__row { grid-template-columns: 4.6rem 1fr; } .exp__logo { width: 4.2rem; height: 4.2rem; padding: 0.5rem; } .exp__years { grid-column: 2; justify-self: start; text-align: left; } } /* ============ PROJECTS ============ */ .projects__label { color: var(--glacier); margin-bottom: 1.6rem; } .projects__label--journey { margin-top: clamp(3.5rem, 8vh, 6rem); } .projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); } .pcard { background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 1.7rem; display: flex; flex-direction: column; gap: 0.7rem; transition: border-color 0.4s, transform 0.4s cubic-bezier(.2,.8,.2,1); } .pcard:hover { border-color: rgba(127,224,209,0.45); transform: translateY(-4px); } .pcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .pcard__mark { width: 3.4rem; height: 3.4rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--glacier); font-size: 0.95rem; } .pcard__mark--img { border: none; padding: 0.45rem; } .pcard__status { color: var(--glacier); display: flex; align-items: center; gap: 0.5em; } .pcard h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); } .pcard__desc { color: var(--bone-dim); font-size: 0.92rem; flex: 1; } .pcard__tags { color: var(--glacier-deep); } @media (max-width: 900px) { .projects__grid { grid-template-columns: 1fr; } } .projects__journey { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.8rem); } .jcard { border: 1px dashed var(--line); border-radius: 6px; padding: 1.7rem; transition: border-color 0.4s, background-color 0.4s; } .jcard:hover { border-color: rgba(127,224,209,0.4); background: rgba(127,224,209,0.02); } .jcard__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .jcard__mark { width: 3.4rem; height: 3.4rem; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--bone-dim); font-size: 0.95rem; } .jcard__mark--img { border: none; padding: 0.45rem 0.7rem; width: 9.5rem; height: 3rem; } .jcard__mark--img img { width: 100%; height: 100%; } .jcard h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); } .jcard__meta { color: var(--bone-dim); display: block; margin-top: 0.3rem; } .jcard__desc { color: var(--bone-dim); font-size: 0.92rem; margin-bottom: 1rem; } .jcard__lesson { font-size: 0.95rem; border-top: 1px solid var(--line); padding-top: 1rem; } .jcard__lesson .mono { color: var(--glacier); margin-right: 0.5em; } @media (max-width: 900px) { .projects__journey { grid-template-columns: 1fr; } } /* ============ BUILDS ============ */ .builds { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .builds__intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: end; margin-bottom: clamp(3rem, 7vh, 5rem); } .builds__title { font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -0.015em; } .builds__title > span { display: block; overflow: hidden; } .builds__title > span > span { display: inline-block; } .builds__title em { color: var(--glacier); } .builds__note { color: var(--bone-dim); max-width: 38ch; font-size: 0.95rem; } .builds__gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1rem; } .btile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--ink); transition: border-color 0.4s, transform 0.4s cubic-bezier(.2,.8,.2,1); } .btile:hover { border-color: rgba(127,224,209,0.45); transform: translateY(-4px); } .btile--tall { grid-row: span 2; } .btile--wide { grid-column: span 2; grid-row: span 2; } .btile__chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--ink-3); flex-shrink: 0; } .btile__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--bone-dim); opacity: 0.4; } .btile__chrome i:first-child { background: #e0655a; opacity: 0.8; } .btile__chrome i:nth-child(2) { background: #e0b25a; opacity: 0.8; } .btile__chrome i:nth-child(3) { background: #6fce7e; opacity: 0.8; } .btile__chrome .mono { margin-left: 0.5rem; color: var(--bone-dim); font-size: 0.62rem; } .btile__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.2rem; min-height: 0; } .btile__body--light { background: #f2efe8; } .btile__body--light img { max-height: 70%; max-width: 60%; object-fit: contain; } .btile__body--light .btile__wordmark { max-width: 82%; } .btile__body--code { background: #0d1117; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem; padding: 1.6rem; font-family: var(--font-mono); font-size: clamp(0.7rem, 1.1vw, 0.85rem); color: var(--bone); } .btile__body--code b { color: var(--glacier); font-weight: 400; } .btile__body--code i { color: #e0b25a; font-style: normal; } .cl--dim { color: var(--bone-dim); opacity: 0.6; } .btile__body--grid { flex-direction: column; gap: 1rem; text-align: center; background: linear-gradient(rgba(127,224,209,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,224,209,0.05) 1px, transparent 1px); background-size: 22px 22px; } .btile__body--grid .mono { width: 3.4rem; height: 3.4rem; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--glacier); } .btile__body--grid p { color: var(--bone-dim); font-size: 0.85rem; max-width: 24ch; } .btile__body--self { background: radial-gradient(120% 120% at 50% 120%, rgba(43,127,116,0.35) 0%, var(--ink) 65%); font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.7rem); text-align: center; line-height: 1.15; } .btile__body--self em { color: var(--glacier); } .btile figcaption { padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); color: var(--bone-dim); flex-shrink: 0; } @media (max-width: 900px) { .builds__intro { grid-template-columns: 1fr; } .builds__gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; } .btile--wide { grid-column: span 2; } } /* ============ CONTACT ============ */ .contact { text-align: center; padding-bottom: 3rem; } .contact__kicker { color: var(--glacier); margin-bottom: 2rem; } .contact__cta { display: inline-block; } .contact__cta-line { display: block; overflow: hidden; font-family: var(--font-display); font-size: clamp(4rem, 15vw, 13rem); line-height: 0.95; letter-spacing: -0.02em; } .contact__cta-line .char { display: inline-block; transition: color 0.3s; } .contact__cta-line--em em { color: transparent; -webkit-text-stroke: 1.5px var(--bone); transition: all 0.4s; } .contact__cta:hover .contact__cta-line--em em { color: var(--glacier); -webkit-text-stroke-color: var(--glacier); } .contact__sub { color: var(--bone-dim); margin-top: 1.6rem; font-style: italic; } .contact__meta { margin-top: clamp(4rem, 10vh, 7rem); padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.8rem; align-items: center; } .contact__link { font-size: 1rem; border-bottom: 1px solid transparent; transition: all 0.3s; } .contact__link:hover { color: var(--glacier); border-color: var(--glacier); } .contact__fine { color: var(--bone-dim); opacity: 0.6; text-transform: none; letter-spacing: 0.03em; } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { .hero__grain, .hero__scroll svg, .dot { animation: none !important; } .nav, .nav__pill { animation: none !important; opacity: 1; } * { transition-duration: 0.01ms !important; } }