/* ============================================================ Marcos Carvalho — Portfolio v2 Design tokens + full layout. See PLANO-SITE.md for the spec. ============================================================ */ @font-face{font-family:"Jakob";src:url("../fonts/dTJakob_Th.otf") format("opentype");font-weight:200;font-display:block} @font-face{font-family:"Jakob";src:url("../fonts/dTJakob_Rg.otf") format("opentype");font-weight:400;font-display:block} @font-face{font-family:"Jakob";src:url("../fonts/dTJakob_Lg.otf") format("opentype");font-weight:500;font-display:block} @font-face{font-family:"Jakob";src:url("../fonts/dTJakob_Sb.otf") format("opentype");font-weight:600;font-display:block} @font-face{font-family:"Jakob";src:url("../fonts/dTJakob_Bd.otf") format("opentype");font-weight:700;font-display:block} /* Pacaembu (primary typeface) — 4 weights; 200/600 fall back to nearest */ @font-face{font-family:"Pacaembu";src:url("../fonts/Pacaembu-Regular.otf") format("opentype");font-weight:400;font-display:block} @font-face{font-family:"Pacaembu";src:url("../fonts/Pacaembu-Medium.otf") format("opentype");font-weight:500;font-display:block} @font-face{font-family:"Pacaembu";src:url("../fonts/Pacaembu-Bold.otf") format("opentype");font-weight:700;font-display:block} @font-face{font-family:"Pacaembu";src:url("../fonts/Pacaembu-Black.otf") format("opentype");font-weight:900;font-display:block} :root{ --blk:#050505; --wht:#f5f4f0; --gray:#8d8d88; /* ---- morphing theme ---- site INVERTED: default is now LIGHT (white bg, black elements). --bg/--fg flip per [data-theme] on ; everything that should morph reads these instead of hardcoded blk/wht. */ --bg:#f5f4f0; --fg:#050505; --dim:#cbcac5; /* faint unrevealed manifesto text on light */ --line-th:rgba(5,5,5,.16); --gray-th:#6a6a66; } :root[data-theme="light"]{ --bg:#f5f4f0; --fg:#050505; --dim:#cbcac5; --line-th:rgba(5,5,5,.16); --gray-th:#6a6a66; } :root[data-theme="dark"]{ --bg:#050505; --fg:#f5f4f0; --dim:#3a3a38; --line-th:rgba(245,244,240,.16); --gray-th:#8d8d88; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} /* the whole page morphs between themes over .5s (Huge duration-500) */ html,body{ background:var(--bg);color:var(--fg); transition:background-color .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1); } body{ font-family:"Pacaembu","Jakob",system-ui,sans-serif;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; cursor:none; } a{color:inherit;text-decoration:none} b{font-weight:600} ::selection{background:var(--fg);color:var(--bg)} img{max-width:100%;display:block} /* ---- loading state: hide content until fonts+loader ready ---- */ html:not(.fonts-ready) body{cursor:auto} /* ---- fixed 3D canvas, lives behind everything, whole page ---- */ #gl{position:fixed;inset:0;z-index:0;display:block;background:var(--bg); transition:background-color .5s cubic-bezier(.4,0,.2,1)} /* ---- hero intro montage (Huge introFastImages: a rapid full bleed flash of frames right as the hero settles, then it clears) ---- */ #hero-montage{ position:fixed;inset:0;z-index:150;pointer-events:none; background:var(--bg);opacity:0; } #hero-montage.playing{opacity:1} #hero-montage figure{ position:absolute;inset:0;margin:0;opacity:0; display:flex;align-items:center;justify-content:center; } #hero-montage figure img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(1.02); } #hero-montage figure.sym img{ width:min(46vh,46vw);height:auto;object-fit:contain;filter:none; } /* film grain overlay */ #grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } /* ---- loader ---- */ #loader{ position:fixed;inset:0;z-index:200;background:var(--bg); display:flex;align-items:center;justify-content:center;overflow:hidden; } #loader .wordmark{ font-weight:700;font-size:clamp(20px,3.4vw,40px);letter-spacing:.02em; position:relative;z-index:2;transition:opacity .5s ease, transform .6s ease; } #loader .pct{ position:absolute;bottom:2vh;right:3vw;font-weight:200; font-size:clamp(90px,18vw,320px);line-height:.78;color:#e6e5e0; z-index:1;font-variant-numeric:tabular-nums; } #loader-wipe{ position:fixed;inset:0;z-index:199;background:var(--bg); clip-path:inset(0 0 0 0); } /* ---- nav ---- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;justify-content:space-between;align-items:center; padding:24px 32px;font-size:12px;letter-spacing:.05em;text-transform:uppercase; mix-blend-mode:difference;color:var(--wht); transition:transform .5s cubic-bezier(.22,.61,.36,1); } .nav.nav-hidden{transform:translateY(-120%)} .nav .brand{font-weight:700;letter-spacing:.02em} .nav .right{font-size:11px;letter-spacing:.08em;color:var(--gray)} /* ---- content layer ---- */ .content{position:relative;z-index:10} section{position:relative} .pad{padding-left:32px;padding-right:32px} .max{max-width:1600px;margin:0 auto} /* reading sections morph with the theme (bg + fg follow [data-theme]) */ .solid{background:var(--bg)} .invert{background:var(--bg);color:var(--fg);padding-top:clamp(28px,4vw,60px);padding-bottom:clamp(28px,4vw,60px)} .invert .gray{color:var(--gray-th)} /* everything carrying a theme colour morphs together over .5s (Huge duration-500); without this the sections snap instantly while the page bg lags behind */ .solid,.invert,.craft,.contact, .lbl,.proj,.row .m,.contact .cta a,.contact .meta,.contact .meta a{ transition:background-color .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1); } /* ---- reveal primitives (JS toggles .is-in) ---- */ .rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,.84,.36,1), transform .9s cubic-bezier(.16,.84,.36,1)} .rv.is-in{opacity:1;transform:translateY(0)} .rv-line{overflow:hidden} .rv-line > *{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,.84,.36,1)} .rv-line.is-in > *{transform:translateY(0)} /* label with growing hairline */ .lbl{ display:flex;align-items:center;gap:14px; font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray-th); margin-bottom:40px; } .lbl::before{ content:"";flex:0 0 40px;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,.84,.36,1) .1s; } .lbl.is-in::before{transform:scaleX(1)} /* ---- hero ---- */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 32px 44px;pointer-events:none} .hero .btm{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap} /* centred scroll cue: a down arrow that bobs to invite the scroll */ .hero .scroll-cue{ position:absolute;left:50%;bottom:40px; font-size:24px;line-height:1;color:var(--fg); animation:scroll-bob 1.8s cubic-bezier(.45,0,.55,1) infinite; } @keyframes scroll-bob{ 0%,100%{transform:translate(-50%,0);opacity:.45} 50%{transform:translate(-50%,12px);opacity:1} } @media (prefers-reduced-motion:reduce){ .hero .scroll-cue{animation:none;transform:translate(-50%,0);opacity:.7} } /* both bottom blocks share one type style + spacing; only alignment differs */ .hero .lead, .hero .side{ font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--fg);font-weight:500;line-height:1.7;margin:0;padding:0; } .hero .side{text-align:right} /* ---- interstitial (transparent window onto the 3D tunnel) ---- */ .inter{height:50vh;position:relative;background:transparent;pointer-events:none;display:flex;align-items:center;justify-content:flex-start;padding-left:32px} .inter .chapter-label{ display:flex;flex-direction:column;align-items:flex-start;gap:32px;text-align:left; opacity:0;transform:translateY(24px); transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,.84,.36,1); mix-blend-mode:difference; } .inter .chapter-label .num{ font-weight:200;font-size:clamp(100px,16vw,260px);line-height:.8;color:var(--wht); } .inter .chapter-label .txt{ font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--wht);opacity:.7; } .inter.is-active .chapter-label{opacity:1;transform:translateY(0)} /* ---- manifesto (word reveal) ---- */ .manifesto{padding:20vh 32px 0} .manifesto p{ font-weight:600;font-size:clamp(25.2px,5.04vw,79.2px);line-height:1.06;letter-spacing:-.02em; max-width:23ch;margin:0 0 1.1em; /* left-aligned editorial, Huge style; -10% */ } .manifesto p:last-child{margin-bottom:0} .manifesto .w{color:var(--dim);transition:color .1s linear} .manifesto .w.hot{font-weight:700} /* ---- what I do ---- */ /* the section keeps a page-coloured bg (covers the canvas) with breathing room; the content itself sits in a self-contained panel whose bg hugs only the content + padding (not full bleed) and is left aligned */ .whatido{padding:32px 32px clamp(56px,9vh,130px)} .whatido .max{ /* self-contained inverted panel, independent of the page theme */ --bg:#050505; --fg:#f5f4f0; --dim:#3a3a38; --line-th:rgba(245,244,240,.16); --gray-th:#8d8d88; width:fit-content;max-width:min(1000px,100%);margin:0; /* left aligned, shrink to content */ background:var(--bg);color:var(--fg); padding:clamp(28px,4vw,60px); } .caps{border-top:1px solid var(--line-th)} /* stacked: title on top, description directly under it */ .cap{ border-bottom:1px solid var(--line-th);padding:44px 0; } .cap h3{font-weight:600;font-size:clamp(26px,3.6vw,50px);line-height:1;margin-bottom:22px} .cap p{font-weight:200;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:color-mix(in srgb, var(--fg) 68%, var(--bg));max-width:60ch} .cap .proof{margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)} /* ---- solvefy teaser ---- */ .feat{padding:12vh 32px 14vh} .feat .kick{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)} .feat h2{ font-weight:700;font-size:clamp(56px,15vw,240px);line-height:.82;letter-spacing:-.03em; margin:24px 0 28px;padding-bottom:.08em; /* clearance for descenders */ } .feat .desc{font-weight:200;font-size:clamp(17px,2vw,25px);line-height:1.4;max-width:42ch;color:#d6d5cf;margin-bottom:56px} .feat .chapters{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:48px} .feat .chapters span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)} .feat .open{ display:inline-flex;align-items:center;gap:10px;border:1px solid var(--wht); border-radius:100px;padding:16px 30px;font-size:13px;letter-spacing:.08em;text-transform:uppercase; transition:background .3s ease, color .3s ease; } .feat .open:hover{background:var(--wht);color:var(--blk)} /* ---- selected work / brand & art (line lists) ---- */ /* borders read the themed hairline so they flip with the morph */ .proj{border-top:1px solid var(--line-th)} .row{ display:flex;justify-content:space-between;align-items:baseline; padding:30px 0;position:relative;cursor:none; border-bottom:1px solid var(--line-th); transition:padding-left .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease, color .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1); } .row .t{font-weight:500;font-size:clamp(24px,4vw,54px);letter-spacing:-.01em;display:flex;align-items:center;gap:16px} .row .t .arrow{opacity:0;transform:translateX(-8px);transition:opacity .35s ease, transform .35s ease;font-weight:400} .row:hover{padding-left:36px} .row:hover .t .arrow{opacity:1;transform:translateX(0)} .row .m{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gray-th)} .row.sec .t{font-weight:500} /* ---- thumb follower ---- */ #thumb{ position:fixed;z-index:60;width:300px;height:210px;pointer-events:none;opacity:0; transform:translate(-50%,-50%) scale(.92);transition:opacity .25s ease; overflow:hidden;background:#111; } #thumb.on{opacity:1} /* two stacked layers crossfade between hover images: visibly "running" like a gif, and full colour (no grayscale filter) */ #thumb .tlayer{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .5s ease; } #thumb .tlayer.show{opacity:1} #thumb .fallback{ width:100%;height:100%;display:flex;flex-direction:column;justify-content:center; padding:22px;background:#111;position:relative; } #thumb .fallback .fmark{position:absolute;top:16px;right:18px;width:22px;height:22px;opacity:.5;filter:invert(1)} #thumb .fallback .fname{font-family:"Pacaembu","Jakob";font-weight:700;font-size:22px;color:var(--wht);text-transform:lowercase} #thumb .fallback .fcat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:8px} /* ---- craft photo (full bleed B&W) ---- */ .craft{height:100vh;display:flex;align-items:center;overflow:hidden;position:relative} .craft .imgwrap{position:absolute;inset:0;overflow:hidden} .craft .imgwrap img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(1.05);opacity:.55; transform:scale(1.15);transition:transform 1.2s cubic-bezier(.16,.84,.36,1); } .craft.is-in .imgwrap img{transform:scale(1)} .craft .grad{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 6%,transparent 62%)} .craft .txt{position:relative;padding:0 32px;max-width:920px} .craft h2{font-weight:700;font-size:clamp(32px,6vw,100px);line-height:.98;letter-spacing:-.02em} /* ---- about ---- */ .about{padding:16vh 32px} .about .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center} .about p{font-weight:200;font-size:clamp(19px,2.4vw,34px);line-height:1.3;min-width:0} .about .dim{color:var(--dim)} .about .portrait{overflow:hidden;background:#111;min-width:0;aspect-ratio:4/5} .about .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)} /* ---- contact ---- */ .contact{padding:14vh 32px 70px;border-top:1px solid var(--line-th)} .contact .cta{font-weight:700;font-size:clamp(38px,9vw,150px);line-height:.9;letter-spacing:-.02em} .contact .cta a{ border-bottom:2px solid var(--line-th);transition:border-color .3s ease; display:inline-block; } .contact .cta a:hover{border-color:var(--fg)} .contact .meta{margin-top:64px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-th)} .contact .meta a:hover{color:var(--fg)} /* ---- custom cursor ---- */ #cursor{position:fixed;top:0;left:0;z-index:100;pointer-events:none;mix-blend-mode:difference} #cursor .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--wht);transform:translate(-50%,-50%)} #cursor .ring{ position:absolute;width:36px;height:36px;border-radius:50%;border:1px solid var(--wht); transform:translate(-50%,-50%);transition:width .25s ease,height .25s ease; } #cursor.big .ring{width:64px;height:64px} @media (hover:none){#cursor{display:none}body{cursor:auto}} /* ---- page transition overlay ---- */ #page-transition{ position:fixed;inset:0;z-index:300;background:var(--fg);pointer-events:none; clip-path:inset(100% 0 0 0); } /* ---- craft wall (loose Pinterest-style masonry) ---- */ .craftwall{padding-top:clamp(36px,6vh,80px);padding-bottom:clamp(70px,13vh,150px)} .craftwall .lbl{margin-bottom:32px} .wall{column-count:2;column-gap:12px} @media (min-width:640px){.wall{column-count:3}} @media (min-width:1000px){.wall{column-count:4}} @media (min-width:1500px){.wall{column-count:5}} .tile{ display:block;width:100%;margin:0 0 12px;padding:0;border:0;background:#e7e6e1; break-inside:avoid;cursor:pointer;overflow:hidden;position:relative;line-height:0; } .tile img{width:100%;height:auto;display:block; transition:transform .6s cubic-bezier(.16,.84,.36,1)} .tile::after{content:"";position:absolute;inset:0;background:var(--blk);opacity:0;transition:opacity .3s} .tile:hover img{transform:scale(1.045)} .tile:hover::after{opacity:.05} /* ---- lightbox (tap a tile to open it big) ---- */ #lightbox{ position:fixed;inset:0;z-index:400;display:none; align-items:center;justify-content:center; background:rgba(5,5,5,.95);backdrop-filter:blur(6px); } #lightbox.open{display:flex} .lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px} #lb-img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain; box-shadow:0 40px 100px rgba(0,0,0,.55);cursor:pointer} #lb-cap{color:var(--wht);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.65} .lb-close,.lb-nav{ position:fixed;background:none;border:0;color:var(--wht);cursor:pointer; z-index:401;opacity:.7;transition:opacity .2s ease, transform .2s ease; line-height:1;padding:12px;font-weight:300; } .lb-close:hover,.lb-nav:hover{opacity:1} .lb-close{top:16px;right:22px;font-size:24px} .lb-nav{top:50%;transform:translateY(-50%);font-size:56px} .lb-prev{left:10px}.lb-next{right:10px} .lb-prev:hover{transform:translateY(-50%) translateX(-3px)} .lb-next:hover{transform:translateY(-50%) translateX(3px)} @media (max-width:600px){.lb-nav{font-size:40px}#lb-img{max-height:74vh}} @media (prefers-reduced-motion:reduce){.tile img{transition:none}.tile:hover img{transform:none}#lightbox{backdrop-filter:none}} /* ---- responsive ---- */ @media (max-width:900px){ .cap{grid-template-columns:1fr;gap:10px} .about .grid{grid-template-columns:1fr} .nav .right{display:none} } @media (max-width:767px){ .inter { height:auto; padding:120px 20px; flex-direction:column; align-items:flex-start; pointer-events:auto; } .inter .chapter-label { transform:translateY(0); opacity:1; mix-blend-mode:normal; } .inter .chapter-label .num { color:var(--fg); font-size:clamp(60px,16vw,100px); } .inter .chapter-label .txt { color:var(--gray-th); } } @media (max-width:600px){ .hero{padding:100px 20px 30px} .pad,.hero,.manifesto,.feat,.about,.contact{padding-left:20px;padding-right:20px} #thumb{display:none} } @media (prefers-reduced-motion:reduce){ .rv,.rv-line>*,.craft .imgwrap img,.lbl::before{transition:none !important} html,body,#gl{transition:none !important} #hero-montage{display:none} }