/* ───────────────────────────────────────────────────────────────────────────── Marcel Pater — portfolio page Same "desk at night" theme as the landing page, but a normal scrolling page: about → interactive toolkit "studio" → skill highlights. The page background crossfades per section (dots → plain → grid) via data-bg on , set by main.js with an IntersectionObserver. Mobile-first; ≥ 920px places the studio panels left/right of the artboard. ───────────────────────────────────────────────────────────────────────────── */ /* Theme core — tokens, reset, body base, .grain, #trail — lives in ../theme.css (linked first). This file adds the portfolio-only tokens and all layout. */ :root { --panel: rgba(255, 255, 255, 0.035); --panel-edge: rgba(255, 255, 255, 0.08); } html { scroll-behavior: smooth; } body { /* always-on base: soft lighting + paper grain (the dot/grid layers sit in fixed .bg divs so they can crossfade) */ background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.35) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fineNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fineNoise)' opacity='0.015'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='coarseNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23coarseNoise)' opacity='0.008'/%3E%3C/svg%3E"); background-attachment: fixed; } /* ── crossfading section backgrounds ── */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; } .bg-dots { background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px); background-size: 16px 16px; } .bg-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; } body[data-bg="dots"] .bg-dots { opacity: 1; } body[data-bg="grid"] .bg-grid { opacity: 1; } /* data-bg="plain" leaves both layers off */ /* .grain and #trail live in ../theme.css */ main, .topbar, .foot { position: relative; z-index: 2; } /* ── shared bits ── */ .stamp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } .sec { min-height: 70svh; padding: 64px 22px 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sec-head { text-align: center; margin-bottom: 54px; } h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); } h1 { font-size: clamp(44px, 7vw, 64px); margin-top: 14px; } h2 { font-size: clamp(36px, 5.5vw, 52px); margin-top: 14px; } .hand-note { font-family: var(--hand); font-weight: 600; font-size: clamp(22px, 3vw, 26px); color: var(--accent); margin-top: 14px; rotate: -2deg; } /* scroll reveal */ .reveal { opacity: 0; translate: 0 20px; transition: opacity 0.7s ease, translate 0.7s ease; } .reveal.in { opacity: 1; translate: 0 0; } /* ── topbar ── */ .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; } .topbar .home { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; } .topbar .home:hover { color: var(--accent); } /* ── 01 · about ── */ .about-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px 72px; max-width: 980px; } .photo { position: relative; rotate: -2.5deg; flex: 0 0 auto; background: #efe9db; padding: 12px 12px 40px; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.8); } .photo img { display: block; width: min(264px, 64vw); height: auto; } .photo figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--hand); font-weight: 600; font-size: 21px; color: #4a443a; rotate: -1deg; } /* washi tape = the sticker_01.svg graphic (rough edges + color baked in). Per-tape look (rotation/size) is set in each tape's own rule below — add `scale: 1.2` to a rule to resize that piece. */ .tape { position: absolute; width: 96px; height: 40px; background: url("../svg/sticker_01.svg") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35)); z-index: 2; } .tape-l { left: -46px; top: -16px; rotate: -48deg; } .tape-r { right: -36px; top: -16px; rotate: 36deg; } .about-text { max-width: 460px; } .squiggle { display: block; margin-top: 8px; pointer-events: none; } .lede { font-family: var(--hand); font-weight: 600; font-size: clamp(24px, 3.4vw, 29px); color: var(--accent); margin-top: 12px; rotate: -1deg; } .about-text .body { font-family: var(--serif); font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 18px; } .scroll-hint { font-family: var(--hand); font-weight: 700; font-size: 26px; color: var(--accent); margin-top: 70px; rotate: -3deg; } /* ── 02 · studio (interactive toolkit) ── */ .studio { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 1100px; } .col { display: flex; flex-direction: column; align-items: center; gap: 26px; } /* artboard — the portrait "open in the editor" */ .center { display: flex; flex-direction: column; align-items: center; } .artwrap { position: relative; perspective: 900px; transform-style: preserve-3d; } .filetab { position: absolute; top: -27px; left: -1px; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--panel-edge); border-bottom: none; border-radius: 8px 8px 0 0; padding: 5px 14px 7px; } .artboard { position: relative; outline: 1.5px dashed rgba(98, 169, 210, 0.55); outline-offset: 7px; transform: rotateY(var(--ry, 0deg)); transition: transform 0.25s ease; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.85); } .artboard img { display: block; width: min(300px, 70vw); height: auto; transition: filter 0.45s ease; } .artboard[data-tone="blueprint"] img { filter: grayscale(1) sepia(1) hue-rotate(165deg) saturate(2.4) brightness(0.92); } .artboard[data-tone="warm"] img { filter: sepia(0.45) saturate(1.35) contrast(1.05); } .artboard[data-tone="mono"] img { filter: grayscale(1) contrast(1.12); } .handle { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1.5px solid var(--accent); z-index: 1; } .h-tl { top: -12px; left: -12px; } .h-tr { top: -12px; right: -12px; } .h-bl { bottom: -12px; left: -12px; } .h-br { bottom: -12px; right: -12px; } .art-caption { font-family: var(--hand); font-weight: 600; font-size: 21px; color: var(--ink-faint); margin-top: 30px; rotate: -1.5deg; } /* the "generate" lift-and-spin (ai panel) */ @keyframes liftspin { 0% { transform: translateY(0) rotateY(0deg); } 18% { transform: translateY(-46px) rotateY(0deg); } 72% { transform: translateY(-46px) rotateY(720deg); } 88% { transform: translateY(7px) rotateY(720deg); } 100% { transform: translateY(0) rotateY(720deg); } } .artwrap.animating { animation: liftspin 2.6s cubic-bezier(0.45, 0, 0.3, 1); } /* panels — little mock design-tool cards */ .panel { position: relative; width: 230px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 16px 36px -18px rgba(0,0,0,0.7); backdrop-filter: blur(2px); } .phead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } /* .ptool groups the panel tool name + subtitle (same text style as the chips) */ .ptool { display: inline-flex; flex-direction: column; gap: 3px; } /* the action label — small muted tag for the live control */ .phead .pact { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } .prompt { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ink-soft); background: rgba(0,0,0,0.25); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 10px 12px; } .gen { display: block; width: 100%; margin-top: 12px; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: var(--accent); border: none; border-radius: 9px; padding: 10px 0; transition: filter 0.2s ease, transform 0.2s ease; } .gen:hover:enabled { filter: brightness(1.12); transform: translateY(-1px); } .gen:disabled { cursor: default; opacity: 0.55; } .swatches { display: flex; gap: 10px; } .sw { width: 34px; height: 34px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; outline: 1px solid var(--panel-edge); transition: transform 0.2s ease, border-color 0.2s ease; } .sw:hover { transform: translateY(-2px); } .sw.is-active { border-color: var(--ink); } .sw-original { background: linear-gradient(135deg, #e8b48d 0%, #5d7da0 100%); } .sw-blueprint { background: #3f7fa8; } .sw-warm { background: #c29460; } .sw-mono { background: #8d8d8d; } .panel-rotate input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; } /* floating chips — the rest of the software list */ /* .chip — a software item: tool name + a short subtitle */ .chip { position: relative; display: inline-flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 10px 16px; white-space: nowrap; transition: border-color 0.25s ease, transform 0.25s ease; } .chip-name { font-family: var(--mono); font-weight: 400; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .chip-sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--ink-faint); } .chip:hover, .panel:hover { border-color: var(--accent); transform: translateY(-3px); z-index: 10; } .chip:hover .chip-name, .panel:hover .chip-name { color: var(--accent); } /* hover tooltip — one line of extra context per tool. Floats above the card, never shifts layout (absolute + pointer-events:none) and never blocks the panel controls. Text comes from each element's data-tip attribute — edit or remove that attribute in index.html to change/drop a tip. Hover-capable pointers only, so it stays out of the way on touch. */ @media (hover: hover) { .chip[data-tip]::after, .panel[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 8px; width: max-content; max-width: 230px; white-space: normal; text-align: left; font-family: var(--serif); font-size: 13.5px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink-soft); background: #1c1a17; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 13px; box-shadow: 0 14px 32px -12px rgba(0,0,0,0.9); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, translate 0.22s ease; } .chip[data-tip]:hover::after, .panel[data-tip]:hover::after { opacity: 1; translate: -50% 0; } } /* gentle bob on the scattered bits (desktop & mobile) */ @keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } } .col .panel, .col .chip { animation: bob 5.2s ease-in-out infinite alternate; } .col .chip { animation-duration: 6.4s; } .col-l .panel { animation-delay: -1.2s; } .col-l .chip:nth-of-type(1) { animation-delay: -3s; } .col-l .chip:nth-of-type(2) { animation-delay: -0.6s; } .col-r .chip { animation-delay: -2.2s; } .col-r .panel-palette { animation-delay: -4s; } .col-r .panel-rotate { animation-delay: -1.7s; } /* mobile: artboard first, then the controls */ .studio .center { order: -1; } .col { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; } /* ── 03 · core pillars (Innovation / Conceptual / Engineering) ── three big stacked feature blocks: a framed hero image + heading, tagline, description and keyword chips. Rows alternate image-left / image-right on desktop; on mobile the image stacks on top. */ .pillars { display: flex; flex-direction: column; gap: clamp(56px, 8vh, 96px); width: 100%; max-width: 1060px; } .pillar { display: flex; flex-direction: column; align-items: center; gap: 28px; } /* framed hero image — a scrapbook photo on the desk (cream mat + tape) */ .pillar-img { position: relative; align-self: center; width: min(440px, 100%); background: #efe9db; padding: 12px; box-shadow: 0 20px 44px -18px rgba(0,0,0,0.85); rotate: -1.6deg; } .pillar:nth-child(even) .pillar-img { rotate: 1.6deg; } .pillar-img img { display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain; border-radius: 2px; } .pillar-img .tape { left: 50%; top: -16px; translate: -50% 0; rotate: -3deg; } /* text side */ .pillar-body { width: 100%; max-width: 520px; } .pillar .idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-faint); } .pillar h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.0; color: var(--ink); margin-top: 6px; } .pillar-line { font-family: var(--hand); font-weight: 600; font-size: clamp(22px, 2.6vw, 27px); color: var(--accent); margin-top: 8px; rotate: -1deg; } .pillar-desc { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin-top: 16px; } .pillar-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); background: rgba(98, 169, 210, 0.1); border: 1px solid rgba(98, 169, 210, 0.45); border-radius: 999px; padding: 7px 14px; white-space: nowrap; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .tag:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); } /* desktop: two columns, alternating sides */ @media (min-width: 760px) { .pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 76px); align-items: center; } .pillar-img { width: 100%; justify-self: center; } .pillar:nth-child(even) .pillar-img { order: 2; } .pillar:nth-child(even) .pillar-body { order: 1; } } /* ── 04 · contact / closing ── */ .sec-close { text-align: center; } .sec-close .squiggle { margin: 6px auto 0; } .close-lede { font-family: var(--serif); font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--ink-soft); margin-top: 22px; max-width: 520px; } .close-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; } .btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 10px; padding: 14px 26px; transition: filter 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn-primary { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); } .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--panel-edge); } .btn-ghost:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } /* ── footer ── */ .foot { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 26px 20px 60px; font-family: var(--hand); font-weight: 600; font-size: 24px; } .foot a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .foot a:hover { color: var(--accent); } .foot .sep { color: var(--ink-faint); } /* ── desktop studio: panels scattered left/right of the artboard ── */ @media (min-width: 920px) { .studio { display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center; } .studio .center { order: 0; } .col { flex-direction: column; flex-wrap: nowrap; gap: 34px; } .col-l { align-items: flex-end; } .col-r { align-items: flex-start; } .col-l .panel-animate { rotate: -2deg; margin-right: 26px; } .col-l .chip:nth-of-type(1) { margin-right: 66px; rotate: 1.5deg; } .col-l .chip:nth-of-type(2) { margin-right: 10px; rotate: -1deg; } .col-r .chip { margin-left: 48px; rotate: 2deg; } .col-r .panel-palette { rotate: 1.5deg; margin-left: 14px; } .col-r .panel-rotate { rotate: -1.5deg; margin-left: 56px; } } /* reduced motion: no bobbing, no spin, instant reveals */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .col .panel, .col .chip { animation: none; } .artwrap.animating { animation: none; } .reveal { opacity: 1; translate: 0 0; transition: none; } }