Anatomical “fugitive sheets” are illustrations of the body designed to display internal organs and structures using paper flaps. Their name arose from the frequency with which the accompanying sheets were torn or misplaced. This site reimagines the fugitive sheet as a misplaced code-snippet, framed within a randomly generated cut-out.
// Prime Labs $pl-white: #F8F7EE; $pl-orange-lite: #FAB188; $pl-orange-bright: #FF6E40; $pl-orange-medium: #F9DAC8; $pl-blue: #4E4E5D; .primelabs > div{ @include col(12); @include omega; h2{ font-size: 2.611111111em; line-height: 1.14893617em; margin-top: 1.14893617em; margin-bottom: 0.57446809em; @include breakpoint(40em){ font-size: 4.25em; line-height: 1.05882em; margin-top: 0.70588em; margin-bottom: 0.35294em } } h3{ text-align: center; } a:hover{ background: none; } } .primelabs .container{ > h2, .content > h2{ text-align: center; } } .primelabs__intro{ background-color: $pl-orange-bright; background: -moz-linear-gradient(top, rgba(233,67,39,0.75) 0%, rgba(233,67,39,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,67,39,0.75)), color-stop(100%,rgba(233,67,39,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%), url("/img/casestudies/primelabs/lab-mobile.jpg"); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(233,67,39,0.3) 0%,rgba(233,67,39,0.3) 100%), url("/img/casestudies/primelabs/lab-mobile.jpg"); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfe94327', endColorstr='#bfe94327',GradientType=0 ); /* IE6-9 */ background-size:cover; background-repeat: no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background: -moz-linear-gradient(top, rgba(233,67,39,0.75) 0%, rgba(233,67,39,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,67,39,0.75)), color-stop(100%,rgba(233,67,39,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%), url("/img/casestudies/primelabs/lab-small@2x.jpg"); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(233,67,39,0.75) 0%,rgba(233,67,39,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(233,67,39,0.3) 0%,rgba(233,67,39,0.3) 100%), url("/img/casestudies/primelabs/lab-small@2x.jpg"); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfe94327', endColorstr='#bfe94327',GradientType=0 ); /* IE6-9 */ background-size:cover; background-repeat: no-repeat; } @include breakpoint(40em){ background: url("/img/casestudies/primelabs/lab.jpg") ; background-size:cover; background-repeat: no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background: url("/img/casestudies/primelabs/lab@2x.jpg") ; background-size:cover; background-repeat: no-repeat; } } background-color: $pl-orange-bright; background-size: cover; background-position: center center; background-size:cover; margin-top: -3.850em; padding-bottom: $base-line-height*2; h1{ margin-top: 0; text-align: center; } a{ color: $pl-white; } } .primelabs__header{ padding-top: $base-line-height*7; color: $pl-orange-medium; h1{ color: $pl-white; } } .primelabs__study-badge{ font-size: .700em; margin-bottom: 0; text-align: center; span{ padding: .2em .9em; text-transform: uppercase; color: $pl-orange-lite; border-color: $pl-orange-lite; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; // font-weight: 700; font-style: italic; } &:before{ content: " "; background-image: url("/img/casestudies/primelabs/icon.svg"); background-size: 100%; background-repeat: no-repeat; width: 35px; height: 35px; display: inline-block; margin-bottom: -.5em; margin-right: -.4em } } .primelabs__modular{ background-color: #FF9E40; color: $pl-blue; overflow: hidden; h2{ color: $pl-white; } } #modularboxes__demo{ @include col(12); -webkit-transform: translateZ(0); margin-top: $base-line-height*2; } #modularboxes__description{ @include col(7); animation-duration: 1s; animation-fill-mode: both; transform: translate3d(3000px, 0, 0); border-bottom:1px solid #f0f0f0; } #modularboxes__ingredients{ @include col(5); @include omega; animation-duration: 1s; animation-fill-mode: both; transform: translate3d(3000px, 0, 0); animation-delay: .5s; border-bottom:1px solid #f0f0f0; } .primelabs__details{ background-color: darken($pl-blue, 5%); padding: 2em 0; li{ &:not(:last-of-type){ margin-bottom: $base-line-height; } @include breakpoint(40em){ @include col(4); &:not(:last-of-type){ margin-bottom: 0; } &:last-of-type{ @include omega; } } } img{ width: 100%; max-width:256px; margin: 0 auto; } } .primelabs__roundabout{ background-color: $pl-white; padding-bottom: $base-line-height*2; border-bottom: 2px solid lighten($pl-white, 10%); } .primelabs__backstory{ background: #F8F7EE; padding-bottom: $base-line-height*2; color: lighten($black, 35%); h2{ color: lighten($black, 15%); } a{ color: $pl-orange-bright; } } .whatis__backdrop{ background-image: url("/img/casestudies/primelabs/papers.jpg"); background-size:cover; -webkit-transform: translateZ(0); position: fixed; height: 100%; margin-top: -3.85em; z-index: -2; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background-image: url("/img/casestudies/primelabs/papers@2x.jpg"); } @include breakpoint(50em){ // background-attachment: fixed; } } .primelabs__whatis{ // background-color: $pl-white; padding-bottom: $base-line-height*2; } #primelabs__problems{ background: $pl-blue; color: $pl-white; padding-bottom: $base-line-height*2; .wide_text{ font-style: italic; } &.fadeIn{ li{ @extend %fin; } } h2{ color: $pl-white; text-align: center; } ol{ list-style: none; counter-reset: problems; padding-left: 0; } li{ padding: $base-line-height/2 0; -webkit-perspective: 1000; // margin-left: 1em; opacity: 0; animation-duration: 1s; animation-fill-mode: both; text-align: center; @include breakpoint(40em) { text-align: left; } &:nth-child(2n){ animation-delay: .2s; } &:nth-child(3n){ animation-delay: .2s; } &:nth-child(4n){ animation-delay: .2s; } &:before{ content: counter(problems) ". "; counter-increment: problems; color: $pl-orange-lite; font-weight: 700; font-size: $h2-font-size; display: block; @include breakpoint(40em) { margin-right: .5em; margin-left: -1.5em; display: inline; } } &:not(:last-of-type){ border-bottom: 1px solid rgba($pl-orange-lite, .5); } } } .primelabs__daylife{ width: 100px; background: $pl-blue; padding-bottom: $base-line-height*2; color: darken($pl-white, 6%); @include breakpoint(50em){ background-position: left center; background-image: url("/img/casestudies/primelabs/pills.png"); background-size: 40%; background-repeat: no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background-image: url("/img/casestudies/primelabs/pills@2x.png"); } } h2{ color: $pl-white; @include breakpoint(20em){ text-align: center; } @include breakpoint(50em){ text-align: left; } } } .primelabs__collab{ margin-top: $base-line-height; @include breakpoint(40em){ margin-bottom: $base-line-height; } } .primelabs__gracefulgrowth{ background: #EDEDEE; color: lighten($black, 15%); h2{ color: $black; } } .primelabs__shopify{ color: lighten($black, 15%); // background-image: url("/img/casestudies/primelabs/graphy.png"); background-color: $pl-white; padding-bottom: $base-line-height*2; img{ padding: 1em; } h2{ color: $black; } a{ color: $pl-orange-bright; &:visited{ color: $pl-orange-bright; } } } .primelabs__aesthetics{ background-color: $pl-blue; background: linear-gradient(to bottom, rgba(36,59,81,0.85) 0%,rgba(78,78,93,0.85) 100%), url("/img/casestudies/primelabs/cards-small.jpg"); /* Old browsers */ background-repeat: no-repeat; background-size: cover; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background: linear-gradient(to bottom, rgba(36,59,81,0.85) 0%,rgba(78,78,93,0.85) 100%), url("/img/casestudies/primelabs/cards.jpg"); /* Old browsers */ background-repeat: no-repeat; background-size: cover; } @include breakpoint(70em){ background: linear-gradient(to right, rgba(36,59,81,0.85) 0%,rgba(78,78,93,0.85) 100%), url("/img/casestudies/primelabs/cards-small.jpg"); /* Old browsers */ background-repeat: no-repeat; background-size: cover; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background: linear-gradient(to right, rgba(36,59,81,0.85) 0%,rgba(78,78,93,0.85) 100%), url("/img/casestudies/primelabs/cards.jpg"); /* Old browsers */ background-repeat: no-repeat; background-size: cover; } } background-repeat: no-repeat; background-size:cover; // background-attachment: fixed; background-position: bottom center; text-align: center; position: relative; color: lighten($black, 70%); .container{ text-align: left; @include breakpoint(70em){ display: inline-block; position: relative; padding-bottom: $base-line-height*3; } height: 100%; } h2{ color: $pl-white; @include breakpoint(30em){ text-align: center; } @include breakpoint(70em){ text-align: left; } } } .primelabs__iphone{ @include col(8); margin: 0 auto; float: none; @include breakpoint(35em){ @include col(6); margin: 0 auto; float: none; clear:both; } @include breakpoint(45em){ @include col(4); margin: 0 auto; float: none; } @include breakpoint(70em){ @include col(3); @include push(3, left); margin-bottom: -6px; position: absolute; bottom: 0; right: 0; } } .primelabs__draft{ background-color: $pl-orange-bright; background-color: darken($pl-blue, 5%); p{ font-style: italic; text-align: center; color: rgba($pl-white, .7); } h3{ color: $pl-white; } } .primelabs__standard{ @include col(12); @include omega; background-color: #1E3A4C; color: rgba($pl-white, .6); h2{ color: $pl-white; } a{ color: white; &:visited{ color: white; } } } #videoresize__file{ margin-top: $base-line-height; display:block; } .wide_text{ text-align: center; font-size: $h2-font-size; margin: $base-line-height*2 0 $base-line-height; span{ color: #F8B18B; } } .primelabs__reflections{ padding-bottom: $base-line-height*2; background-color: $pl-white; color: darken($pl-blue, 5%); h2{ color: $black; } .wide_text{ margin: $base-line-height 0; font-style: italic; line-height: 1.4; color: $pl-orange-bright; } } .prime-labs__wantone{ text-align: center; @include col(12); @include omega; padding-bottom: $base-line-height*2; background: #f8f7ee; /* Old browsers */ background: -moz-linear-gradient(top, #f8f7ee 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f7ee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f8f7ee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f8f7ee 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f8f7ee 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #f8f7ee 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f7ee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ h2 { color: $pl-blue; text-transform: none; span{ color: $pl-orange-bright; } } .button{ background-color: $pl-orange-bright; border: none; display: inline-block; float: none; border-radius: 6px; } }