/* ========================================================================== DMMBS Portfolio — "Industrial Blueprint" design system No page builder, no framework. Plain CSS, custom properties, real math. ========================================================================== */ :root { --bg: #0b0c0f; --bg-alt: #111318; --surface: #16181d; --surface-2: #1c1f26; --border: #262a31; --border-strong: #383e47; --text: #eceef1; --text-dim: #9aa1ab; --text-faint: #565c66; --accent: #ff6a1a; --accent-cyan: #2dd4bf; --grid-line-1: rgba(255,255,255,.035); --grid-line-2: rgba(255,255,255,.06); --sticky-bg: rgba(11,12,15,.85); --container: 1180px; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-body: 'Inter', system-ui, sans-serif; } /* Light theme — "blueprint on paper" rather than a straight color inversion. Toggled by adding data-theme="light" to (see header.php inline script + main.js). Dark, defined above, is the site's default identity. */ :root[data-theme="light"] { --bg: #f6f5f2; --bg-alt: #eeece5; --surface: #ffffff; --surface-2: #f2f0ea; --border: #ddd7c9; --border-strong: #c3bcac; --text: #17181b; --text-dim: #4d5058; --text-faint: #82858c; --accent: #e35f16; --accent-cyan: #0d8f83; --grid-line-1: rgba(0,0,0,.035); --grid-line-2: rgba(0,0,0,.07); --sticky-bg: rgba(246,245,242,.88); } /* ---- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.15; font-weight: 600; } p { margin: 0 0 1em; } button, input, select, textarea { font-family: inherit; font-size: 1rem; } ::selection { background: var(--accent); color: #0b0c0f; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; background: var(--accent); color: #0b0c0f; padding: 10px 16px; font-family: var(--font-mono); } .wrap { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } /* ---- Blueprint grid backdrop ---------------------------------------- */ .blueprint-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line-1) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-1) 1px, transparent 1px), linear-gradient(var(--grid-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); } /* ---- Reveal-on-scroll ------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.is-visible { opacity: 1; transform: none; } /* Icons draw in only when scoped inside a .reveal container that animates them on scroll. An icon with no .reveal ancestor (header buttons, footer, marquee cards) must render fully visible immediately — it has no scroll trigger to ever reveal it otherwise. */ .reveal .dmmbs-icon path, .reveal .dmmbs-icon circle, .reveal .dmmbs-icon rect { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 900ms ease 150ms; } .reveal.is-visible .dmmbs-icon path, .reveal.is-visible .dmmbs-icon circle, .reveal.is-visible .dmmbs-icon rect { stroke-dashoffset: 0; } /* ---- Buttons / links -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease; } .btn svg { width: 16px; height: 16px; transition: transform .25s ease; } .btn:hover { transform: translateY(-2px); } .btn:hover svg { transform: translateX(3px); } .btn--accent { background: var(--accent); border-color: var(--accent); color: #0b0c0f; font-weight: 600; } .btn--accent:hover { box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .text-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); transition: color .2s ease; } .text-link:hover { color: var(--accent); } .text-link svg { width: 14px; height: 14px; } .eyebrow { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 1em; } .section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); } .section-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } /* ---- Header ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--sticky-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .site-header__actions { display: flex; align-items: center; gap: 28px; } .site-logo { display: flex; align-items: center; flex-shrink: 0; } /* The logo's lettering is white, so it needs a permanent dark chip behind it — without one it nearly disappears against the light theme's near-white background. */ .site-logo img { height: 52px; width: auto; background: #0b0c0f; padding: 6px 10px; border-radius: 4px; } .site-nav { display: flex; align-items: center; gap: 24px; } .site-nav__list { display: flex; align-items: center; gap: 32px; } .site-nav__list a { font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); position: relative; padding-bottom: 4px; transition: color .2s ease; } .site-nav__list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .25s ease; } .site-nav__list a:hover { color: var(--text); } .site-nav__list a:hover::after { right: 0; } .smlg-switcher--inline { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; flex-shrink: 0; } .smlg-switcher--inline li { display: flex; align-items: center; gap: 10px; } .smlg-switcher--inline li + li::before { content: '/'; color: var(--border-strong); } .smlg-switcher--inline a { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); transition: color .2s ease; } .smlg-switcher--inline a:hover { color: var(--text); } .smlg-switcher--inline li.is-current a { color: var(--accent); } .smlg-switcher--dropdown { position: relative; flex-shrink: 0; } .smlg-switcher__toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); transition: color .2s ease; } .smlg-switcher__toggle:hover { color: var(--text); } .smlg-switcher__toggle svg { transition: transform .2s ease; flex-shrink: 0; } .smlg-switcher--dropdown.is-open .smlg-switcher__toggle svg { transform: rotate(180deg); } .smlg-switcher__menu { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 14px); right: 0; min-width: 120px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px -20px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 10; } .smlg-switcher--dropdown.is-open .smlg-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0); } .smlg-switcher__menu a { display: block; padding: 8px 10px; font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); transition: color .2s ease, background .2s ease; } .smlg-switcher__menu a:hover { color: var(--text); background: var(--surface-2); } .smlg-switcher__menu li.is-current a { color: var(--accent); } .nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); color: var(--text); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle svg { width: 18px; height: 18px; } .nav-toggle .icon-close { display: none; } body.nav-open .nav-toggle .icon-open { display: none; } body.nav-open .nav-toggle .icon-close { display: block; } .theme-toggle { display: flex; background: none; border: 1px solid var(--border-strong); color: var(--text); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, color .2s ease; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } @media (max-width: 860px) { .nav-toggle { display: flex; } .site-nav { position: fixed; inset: 72px 0 0 0; background: var(--bg); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; flex-direction: column; align-items: flex-start; } .site-nav__list { flex-direction: column; align-items: flex-start; padding: 40px 24px 0; gap: 24px; } .site-nav__list a { font-size: 1.4rem; } .smlg-switcher--dropdown { padding: 0 24px; width: 100%; } .smlg-switcher__toggle { display: none; } .smlg-switcher__menu { display: flex; gap: 20px; position: static; opacity: 1; visibility: visible; transform: none; background: none; border: none; box-shadow: none; padding: 0; min-width: 0; } .smlg-switcher__menu a { padding: 0; font-size: 1rem; } body.nav-open .site-nav { opacity: 1; transform: none; pointer-events: auto; } /* .site-header's backdrop-filter creates a new containing block for any position:fixed descendant — .site-nav's "inset: 72px 0 0 0" then resolves against the header's own ~72px box instead of the viewport, collapsing it to near-zero height. The menu links still render (overflowing, unclipped) but with no background painted behind them, so the panel looks transparent. Drop the filter only while the menu is open, so this containing-block effect goes away right when it matters — the header's blur is unaffected at every other time.*/ body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ---- Hero --------------------------------------------------------------- */ .hero { position: relative; padding: 120px 0 80px; overflow: hidden; } .hero__schematic { position: absolute; top: 50%; right: -8%; width: min(52vw, 700px); transform: translateY(-50%); color: var(--accent-cyan); opacity: .16; z-index: 0; } .schematic-lines path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw-schematic 2.6s ease forwards .2s; } .schematic-nodes circle { opacity: 0; animation: node-in .6s ease forwards; } .schematic-nodes circle:nth-child(1) { animation-delay: .3s; } .schematic-nodes circle:nth-child(2) { animation-delay: .6s; } .schematic-nodes circle:nth-child(3) { animation-delay: .9s; } .schematic-nodes circle:nth-child(4) { animation-delay: 1.2s; } .schematic-nodes circle:nth-child(5) { animation-delay: 1.5s; } .schematic-nodes circle:nth-child(6) { animation-delay: 1.8s; } .schematic-nodes circle:nth-child(7) { animation-delay: 2.1s; } .schematic-nodes circle:nth-child(8) { animation-delay: 2.3s; } .schematic-nodes circle:nth-child(9) { animation-delay: 2.5s; } @keyframes draw-schematic { to { stroke-dashoffset: 0; } } @keyframes node-in { to { opacity: 1; } } .hero__terminal-slot { position: absolute; top: 0; bottom: 0; right: 4%; width: 40%; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero__terminal { width: min(36vw, 480px); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 40px 90px -30px rgba(0,0,0,.65); overflow: hidden; } .hero__terminal-bar { display: flex; gap: 7px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .terminal-dot { width: 10px; height: 10px; border-radius: 50%; } .terminal-dot--red { background: #ff5f56; } .terminal-dot--yellow { background: #ffbd2e; } .terminal-dot--green { background: #27c93f; } .hero__terminal-body { padding: 24px 22px; font-family: var(--font-mono); font-size: .92rem; line-height: 2; min-height: 240px; } .terminal-line { white-space: nowrap; overflow: hidden; } .terminal-line--cmd .terminal-prompt { color: var(--accent); } .terminal-line--ok .terminal-prompt { color: var(--accent-cyan); } .terminal-line--ok span:not(.terminal-prompt) { color: var(--text-dim); } .terminal-cursor { display: inline-block; width: 8px; height: 1.1em; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: cursor-blink 1s step-end infinite; } @keyframes cursor-blink { 50% { opacity: 0; } } @media (max-width: 1100px) { .hero__terminal-slot { display: none; } } .hero__title { font-size: clamp(2.4rem, 5.6vw, 4.4rem); max-width: 16ch; } .hero__lede { max-width: 620px; color: var(--text-dim); font-size: 1.15rem; line-height: 1.7; } .hero__lede:first-of-type { margin-bottom: 0; } .hero__lede-list { max-width: 620px; margin: 14px 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, auto); gap: 10px 28px; } .hero__lede-list li { position: relative; padding-left: 20px; color: var(--text); font-family: var(--font-mono); font-size: .95rem; } .hero__lede-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--accent); } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 32px 0 56px; } @media (max-width: 480px) { .hero__lede-list { grid-template-columns: 1fr; } } .stat-strip { display: grid; grid-template-columns: repeat(4, auto); gap: 40px; padding-top: 32px; border-top: 1px dashed var(--border-strong); width: fit-content; max-width: 100%; } .stat-block { display: flex; flex-direction: column; gap: 4px; } .stat-number { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--text); } .stat-label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } @media (max-width: 640px) { .hero { padding: 90px 0 56px; } .hero__schematic { opacity: .1; } .stat-strip { grid-template-columns: repeat(2, auto); gap: 28px 40px; } } /* ---- Journey (timeline + capabilities) ------------------------------------- */ .journey { position: relative; padding: 88px 0; background: var(--bg-alt); border-block: 1px solid var(--border); overflow: hidden; } .journey__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line-1) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-1) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); } .journey .wrap { position: relative; z-index: 1; } .journey .section-title { max-width: 18ch; margin-bottom: 48px; } .journey-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; } .timeline-card { position: relative; padding: 26px 22px 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .3s ease, border-color .3s ease; } .timeline-card:hover { transform: translateY(-4px); border-color: var(--accent); } .timeline-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .timeline-card__index { position: absolute; top: 10px; right: 16px; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--text); opacity: .06; } .timeline-card__year { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; margin-bottom: 8px; } .timeline-card__caption { display: block; font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); } .journey-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1080px) { .journey-capabilities { grid-template-columns: repeat(2, 1fr); } } .capability-card { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .capability-card:hover { transform: translateY(-4px); border-color: var(--accent-cyan); box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--accent-cyan) 60%, transparent); } .capability-card__index { position: absolute; top: 8px; right: 16px; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--text); opacity: .06; } .capability-card__icon { width: 26px; height: 26px; color: var(--accent-cyan); margin-bottom: 16px; } .capability-card h3 { font-size: 1.1rem; margin-bottom: 10px; } .capability-card p { color: var(--text-dim); font-size: .92rem; line-height: 1.65; margin: 0; } @media (max-width: 860px) { .journey { padding: 64px 0; } .journey-timeline, .journey-capabilities { grid-template-columns: 1fr; } } /* ---- Domain tiles --------------------------------------------------------- */ .domains { padding: 64px 0; } .domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 32px; } .domain-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .domain-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .domain-tile:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--accent) 60%, transparent); } .domain-tile:hover::before { transform: scaleX(1); } .domain-tile__icon { width: 30px; height: 30px; color: var(--accent); } .domain-tile__label { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; } .domain-tile__count { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } /* ---- Project grid / cards -------------------------------------------------- */ .featured, .project-index { padding: 32px 0 96px; } .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .project-card { position: relative; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .project-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--accent) 65%, transparent); } .project-card__bar { height: 4px; background: var(--accent); } .project-card__body { padding: 22px 22px 20px; } .project-card__domain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 12px; } .project-card__group-badge { margin-left: auto; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-dim); padding: 2px 8px; border-radius: 999px; font-size: .64rem; letter-spacing: .04em; } .project-card__api-badge { margin-left: auto; background: var(--surface-2); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 2px 8px; border-radius: 999px; font-size: .64rem; letter-spacing: .04em; } .project-card__ai-badge { background: var(--accent); border: 1px solid var(--accent); color: var(--bg); padding: 2px 8px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .04em; } .project-card__icon { width: 15px; height: 15px; } .project-card__title { font-size: 1.2rem; margin-bottom: 8px; } .project-card__title a:hover { color: var(--accent); } .project-card__excerpt { color: var(--text-dim); font-size: .92rem; } .project-card__clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin-bottom: 14px; } .project-card__clients li { position: relative; padding-left: 12px; font-size: .82rem; color: var(--text-dim); } .project-card__clients li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 1px; background: var(--accent); } .project-card__role { font-family: var(--font-mono); font-size: .78rem; color: var(--text-faint); margin-bottom: 14px; } .project-card__stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .project-card__stack li { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); border: 1px solid var(--border); padding: 3px 9px; } .project-card__links { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed var(--border); } .project-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); transition: color .2s ease; } .project-card__link:hover { color: var(--accent); } .project-card__link svg { width: 14px; height: 14px; } .project-card__link--ext { color: var(--text-faint); } .rivet { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); opacity: .8; } .rivet--tl { top: 6px; left: 6px; } .rivet--tr { top: 6px; right: 6px; } .rivet--bl { bottom: 6px; left: 6px; } .rivet--br { bottom: 6px; right: 6px; } /* ---- Filter bar ------------------------------------------------------------ */ .archive-hero { padding: 96px 0 40px; } .archive-hero h1 { display: flex; align-items: center; gap: 14px; font-size: clamp(2rem, 4vw, 3rem); } .archive-hero__icon { width: 34px; height: 34px; color: var(--accent); } .project-filter-bar { position: sticky; top: 72px; z-index: 40; background: var(--sticky-bg); backdrop-filter: blur(8px); border-block: 1px dashed var(--border-strong); padding: 20px 0; margin-bottom: 8px; } .filter-bar__toggle { display: none; } /* On narrow screens the domain pills + up to 24 stack tags wrap into far more rows than on desktop — tall enough that this sticky bar can exceed the viewport itself, permanently pinning the screen and never letting the project grid scroll into view underneath it. Collapse the pills behind a toggle instead of always showing them expanded. */ @media (max-width: 640px) { .filter-bar__toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; } .filter-bar__toggle-icon { width: 14px; height: 14px; margin-left: auto; transition: transform .2s ease; } .filter-bar__toggle[aria-expanded="true"] .filter-bar__toggle-icon { transform: rotate(90deg); } .filter-bar__toggle-count { background: var(--accent); color: var(--bg); font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: .68rem; } .filter-bar__content { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .filter-bar__content.is-expanded { max-height: 45vh; overflow-y: auto; margin-top: 14px; } } .filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filter-group--stack { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .filter-group__icon { width: 16px; height: 16px; color: var(--text-faint); margin-right: 4px; } .filter-pill, .filter-tag { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); cursor: pointer; border-radius: 999px; transition: all .2s ease; white-space: nowrap; } .filter-pill:hover, .filter-tag:hover { border-color: var(--accent); color: var(--text); } .filter-pill.is-active { background: var(--accent); border-color: var(--accent); color: #0b0c0f; font-weight: 600; } .filter-tag.is-active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #0b0c0f; font-weight: 600; } .project-index__empty { text-align: center; color: var(--text-faint); font-family: var(--font-mono); padding: 60px 0; } /* ---- Single project ---------------------------------------------------------- */ .single-project__hero { padding: 96px 0 40px; border-bottom: 1px solid var(--border); } .single-project__domain { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 16px; } .single-project__icon { width: 16px; height: 16px; } .single-project__hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20ch; } .single-project__meta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--border-strong); } .meta-block { display: flex; flex-direction: column; gap: 8px; } .meta-block__label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .meta-block__value { font-size: 1.05rem; } .meta-block__value--link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-cyan); } .meta-block__value--link svg { width: 14px; height: 14px; } .meta-block__stack { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; } .meta-block__stack li { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; border: 1px solid var(--border); padding: 3px 9px; color: var(--text-dim); } .meta-block__stack--apis li { border-color: var(--accent-cyan); color: var(--accent-cyan); } .api-tag__ai-badge { display: inline-block; margin-left: 6px; padding: 1px 5px; background: var(--accent); color: var(--bg); font-size: .62rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; } .single-project__body { display: flex; gap: 40px; align-items: flex-start; padding-block: 48px; } .single-project__visual { flex: 0 0 200px; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); } .single-project__visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .single-project__visual svg { width: 88px; height: 88px; color: var(--accent); } .single-project__body-text { flex: 1 1 auto; min-width: 0; max-width: 780px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.75; } .single-project__body-text h2, .single-project__body-text h3 { color: var(--text); margin-top: 1.4em; } .single-project__body-text ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; } .single-project__body-text li { margin-bottom: .4em; } @media (max-width: 640px) { .single-project__body { flex-direction: column; gap: 24px; } .single-project__visual { flex-basis: auto; width: 140px; } .single-project__visual svg { width: 64px; height: 64px; } } .single-project__clients { padding-block: 8px 40px; } .single-project__client-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; margin-top: 16px; max-width: 760px; } .single-project__client-list li { position: relative; padding: 10px 14px 10px 20px; background: var(--surface); border: 1px solid var(--border); font-size: .95rem; } .single-project__client-list li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .single-project__cta { padding-block: 40px 88px; text-align: center; border-top: 1px dashed var(--border); } /* ---- Page hero (About/Contact) ------------------------------------------------- */ .page-hero { padding: 110px 0 56px; } .page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 18ch; } .page-hero__lede { max-width: 680px; color: var(--text-dim); font-size: 1.1rem; line-height: 1.7; } /* ---- Practice / skills / languages (About) -------------------------------------- */ .practice, .skills, .languages { padding: 48px 0; } .practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; margin-top: 28px; } .practice-card { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; } .practice-card__index { position: absolute; top: 8px; right: 16px; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--text); opacity: .06; } .practice-card h3 { font-size: 1.05rem; margin-bottom: 10px; } .practice-card p { color: var(--text-dim); font-size: .92rem; margin: 0; } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 28px; margin-top: 28px; } .skill-group h3 { font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 14px; } .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; } .skill-tags li { font-family: var(--font-mono); font-size: .74rem; border: 1px solid var(--border); padding: 5px 11px; color: var(--text-dim); } .language-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 480px; } .language-row { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 16px; } .language-row__name { font-family: var(--font-display); font-size: .95rem; } .language-row__gauge { display: flex; gap: 5px; } .gauge-seg { width: 22px; height: 8px; background: var(--border); clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); } .gauge-seg.is-filled { background: var(--accent); } .language-row__label { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); text-align: right; } /* ---- Contact --------------------------------------------------------------------- */ .contact-section { padding: 16px 0 96px; } .contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } .contact-form { background: var(--surface); border: 1px solid var(--border); padding: 36px; } .form-row { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .form-row label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .form-row input, .form-row select, .form-row textarea { background: var(--bg-alt); border: 1px solid var(--border-strong); color: var(--text); padding: 12px 14px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-flash { font-family: var(--font-mono); font-size: .82rem; padding: 12px 16px; margin-bottom: 20px; border: 1px solid; } .form-flash--success { border-color: var(--accent-cyan); color: var(--accent-cyan); } .form-flash--error { border-color: #ef4444; color: #ef4444; } .contact-aside { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; } .contact-aside__block { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: .95rem; } .contact-aside__icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } } /* ---- Testimonials ------------------------------------------------------------------ */ .testimonials { padding: 24px 0 80px; } .testimonials__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .testimonials__stat { font-family: var(--font-mono); font-size: .82rem; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .testimonials__stat strong { color: var(--text); font-family: var(--font-display); font-size: 1.1rem; } .testimonial-marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .testimonial-marquee { display: flex; gap: 20px; width: max-content; will-change: transform; } /* Motion itself is driven by JS (main.js) via requestAnimationFrame — plain CSS @keyframes proved unreliable (Firefox in particular would sometimes never start the animation on a masked, continuously-transformed parent). The reduced-motion fallback below still applies when JS leaves it alone. */ @media (prefers-reduced-motion: reduce) { .testimonial-marquee { flex-wrap: wrap; } } .testimonial-card { flex: 0 0 340px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); padding: 26px; } .testimonial-card__quote-icon { width: 26px; height: 26px; color: var(--accent); opacity: .7; } .testimonial-card__stars { display: flex; gap: 3px; } .star-icon { width: 14px; height: 14px; color: var(--border-strong); } .star-icon.is-filled { color: var(--accent); } .testimonial-card__text { margin: 0; color: var(--text-dim); font-size: .93rem; line-height: 1.65; font-style: italic; } .testimonial-card__meta { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); } .testimonial-card__name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; } .testimonial-card__location, .testimonial-card__source { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .testimonial-card__project { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-cyan); margin-top: 4px; } .testimonial-card__project svg { width: 12px; height: 12px; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: stretch; } /* Each card is wrapped in a .reveal div for the scroll-in animation — that wrapper, not the card, is the actual grid item Grid stretches to match the row height. Without this, the wrapper matches but the card inside still sizes to its own content, so the visible boxes end up uneven. */ .testimonial-grid > .reveal { display: flex; } .testimonial-grid .testimonial-card { flex: 1 1 auto; flex-basis: auto; } .single-project__testimonial { padding-block: 8px 48px; } .single-project__testimonial .testimonial-card { max-width: 640px; } /* ---- Footer ----------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding: 72px 0 32px; margin-top: 64px; } .site-footer__logo { display: block; height: 56px; width: auto; margin: 0 auto 40px; background: #0b0c0f; padding: 8px 14px; border-radius: 6px; } .site-footer__cta { text-align: center; margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .site-footer__cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 16ch; } .site-footer__meta { display: flex; justify-content: center; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .78rem; color: var(--text-faint); } .site-footer__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); } /* ---- Chat widget ------------------------------------------------------------------- */ .chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; } .chat-widget__toggle { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--accent); color: #0b0c0f; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); } .chat-widget__toggle .icon-open, .chat-widget__toggle .icon-close { width: 24px; height: 24px; } .chat-widget__toggle .icon-close { display: none; } .chat-widget.is-open .chat-widget__toggle .icon-open { display: none; } .chat-widget.is-open .chat-widget__toggle .icon-close { display: block; } .chat-panel[hidden] { display: none; } .chat-panel { position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 40px)); height: min(520px, calc(100vh - 140px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 60px -15px rgba(0,0,0,.55); } .chat-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); } .chat-panel__header strong { display: block; font-family: var(--font-display); font-size: .95rem; } .chat-panel__header span { display: block; font-size: .76rem; color: var(--text-dim); margin-top: 2px; } .chat-panel__close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; } .chat-panel__close svg { width: 16px; height: 16px; } .chat-panel__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .87rem; line-height: 1.5; } .chat-msg--assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 2px; } .chat-msg--user { align-self: flex-end; background: var(--accent); color: #0b0c0f; border-bottom-right-radius: 2px; } .chat-msg--error { border-color: #ef4444; color: #ef4444; } .chat-msg--typing { display: flex; align-items: center; gap: 4px; padding: 12px; } .chat-msg--typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); animation: dmmbs-chat-typing 1.1s infinite ease-in-out; } .chat-msg--typing span:nth-child(2) { animation-delay: .15s; } .chat-msg--typing span:nth-child(3) { animation-delay: .3s; } @keyframes dmmbs-chat-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } .chat-panel__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--border); } .chat-panel__input { flex: 1; resize: none; max-height: 120px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: .87rem; padding: 9px 11px; border-radius: 8px; } .chat-panel__input:focus { outline: none; border-color: var(--accent); } .chat-widget.is-busy .chat-panel__input { opacity: .6; } .chat-panel__send { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; border: none; background: var(--accent); color: #0b0c0f; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-panel__send svg { width: 16px; height: 16px; } @media (max-width: 480px) { .chat-widget { right: 14px; bottom: 14px; } .chat-panel { right: -6px; width: calc(100vw - 20px); } }