Permalink
Fetching contributors…
Cannot retrieve contributors at this time
| @import "less/lib/bootstrap/bootstrap"; | |
| @import "less/lib/prefixer"; | |
| //css3 animations | |
| //@import "less/lib/animate"; | |
| // Global variables | |
| @img-root: "../img"; | |
| @nav-height-desktop: 74px; | |
| @nav-height-small: 54px; | |
| // Breakpoints | |
| @screen-mega-above: ~"screen and (min-width: 1440px)"; | |
| @screen-large-above: ~"screen and (min-width: 1201px)"; | |
| @screen-large: ~"screen and (min-width: 1200px)"; | |
| @screen-medium-above: ~"screen and (min-width: 992px)"; | |
| @screen-medium: ~"screen and (max-width: 991px)"; | |
| @screen-small-above: ~"screen and (min-width: 768px)"; | |
| @screen-small: ~"screen and (max-width: 767px)"; | |
| @screen-tiny-above: ~"screen and (min-width: 481px)"; | |
| @screen-tiny: ~"screen and (max-width: 480px)"; | |
| // General styles | |
| //html { overflow-y: scroll; } //force scrollbar | |
| body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { | |
| font-family: "Gotham SSm", helvetica, arial, sans-serif; | |
| } | |
| a { color: #51A09E; } | |
| a:hover, a:focus { | |
| color: #51A09E; | |
| opacity: 0.7; | |
| text-decoration: none; | |
| } | |
| body { background-color: #000; } | |
| section { background-color: #fff; } | |
| #top { } | |
| //wrapper | |
| .layer { | |
| visibility: hidden; | |
| display: none; | |
| &.show { | |
| visibility: visible; | |
| display: block; | |
| } | |
| } | |
| // Animations | |
| .animated { | |
| .animation-fill-mode(both); | |
| .animation-duration(1s); | |
| } | |
| .slideInUp { | |
| /* keyframes for this are defined in app.js */ | |
| .animation-name(slideInUp); | |
| .animation-duration(0.1s); | |
| @media @screen-small-above { | |
| .animation-duration(0.5s); | |
| } | |
| } | |
| .slideOutDown { | |
| /* keyframes for this are defined in app.js */ | |
| .animation-name(slideOutDown); | |
| .animation-duration(0.1s); | |
| @media @screen-small-above { | |
| .animation-duration(0.5s); | |
| } | |
| } | |
| .fadeIn { | |
| /* keyframes for this are defined in app.js */ | |
| .animation-name(fadeIn); | |
| } | |
| //navigation | |
| .backer, | |
| .video-wrapper.backer { | |
| @media @screen-small-above { | |
| display: block; | |
| } | |
| } | |
| nav .nav-item-wrapper.backer { | |
| display: block; | |
| } | |
| //touch navigation | |
| .touch .backer, | |
| .touch nav .nav-item-wrapper.backer { | |
| display: block; | |
| } | |
| //primary navigation | |
| nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| .touch & { | |
| .clearfix(); | |
| @media @screen-small {bottom: auto; top: 0;} | |
| } | |
| width: 100%; | |
| background: #000; | |
| color: #fff; | |
| display: block; | |
| z-index: 100; | |
| overflow: hidden; | |
| -webkit-transform: translateZ(0); | |
| .nav-wrapper { padding: 0 20px 5px 20px; } | |
| .nav-upper-wrapper { | |
| overflow: hidden; | |
| position: relative; | |
| height: @nav-height-small; | |
| @media @screen-small-above { | |
| height: @nav-height-desktop; | |
| } | |
| } | |
| .nav-item-wrapper { | |
| display: none; | |
| position: relative; | |
| } | |
| a, a:link, a:visited { color: #fff; } | |
| h3 { | |
| font-size: 12px; | |
| float: right; | |
| margin: 0; | |
| line-height: 34px; | |
| text-transform: uppercase; | |
| opacity: 0.7; | |
| @media @screen-small-above { | |
| opacity: 1; | |
| font-size: 14px; | |
| line-height: @nav-height-desktop; | |
| } | |
| &.btn-chapter { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 10; | |
| overflow: hidden; | |
| line-height: @nav-height-small; | |
| @media @screen-small-above { | |
| line-height: @nav-height-desktop; | |
| } | |
| } | |
| &#nav-chapter-title { | |
| float: left; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| visibility: hidden; | |
| @media @screen-small-above { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| line-height: @nav-height-desktop; | |
| body.scrolling & { | |
| visibility: visible; | |
| .animation-fill-mode(both); | |
| .animation-duration(1s); | |
| .animation-name(fadeIn); | |
| } | |
| body.scrolling-off & { visibility: hidden; } | |
| } | |
| } | |
| &:hover { | |
| cursor: pointer; | |
| opacity: 1; | |
| } | |
| } | |
| #nav-chapter-title-prompt { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| visibility: hidden; | |
| body.scrolling & { visibility: hidden; } | |
| body.scrolling-off & { | |
| visibility: visible; | |
| .animation-fill-mode(both); | |
| .animation-duration(1s); | |
| .animation-name(fadeIn); | |
| } | |
| h4 { | |
| padding: 18px 0 8px 0; | |
| line-height: 1; | |
| font-size: 20px; | |
| font-weight: normal; | |
| color: #ddd; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: none; | |
| @media @screen-small-above {display: block;} | |
| &:hover { | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| } | |
| h5 { | |
| font-size: 12px; | |
| color: #ccc; | |
| text-transform: uppercase; | |
| max-width: 200px; | |
| margin: 20px auto 0 auto; | |
| @media @screen-small-above {margin-top: 0;} | |
| display: none; | |
| .chapter-cotton & {display: block;} | |
| .chapter-machines & {display: block;} | |
| .chapter-people & {display: block;} | |
| .chapter-boxes & {display: block;} | |
| .chapter-you & {display: block;} | |
| } | |
| .ico-chevron { | |
| display: inline-block; | |
| background: transparent url('@{img-root}/small-chevron.png') no-repeat center center; | |
| width: 35px; | |
| height: 16px; | |
| vertical-align: text-top; | |
| } | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none; | |
| &#nav-secondary { | |
| float: left; | |
| border-bottom: 1px solid #ddd; | |
| padding-bottom: 5px; | |
| margin-bottom: 10px; | |
| @media @screen-small-above { | |
| float: right; | |
| position: absolute; | |
| top: -@nav-height-desktop; | |
| right: 0px; | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| border-bottom: none; | |
| } | |
| > li { | |
| float: left; | |
| font-size: 11px; | |
| margin-right: 12px; | |
| .touch & { | |
| float: none; | |
| font-size: 12px; | |
| margin-right: 5px; | |
| color: #888; | |
| @media @screen-small-above {color: #fff;} | |
| } | |
| @media @screen-small-above { | |
| padding-top: 0; | |
| display: inline-block; | |
| margin-bottom: 0; | |
| line-height: @nav-height-desktop; | |
| color: #fff; | |
| } | |
| a { | |
| .touch & { | |
| color: #888; | |
| @media @screen-small-above { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| &:hover { | |
| cursor: pointer; | |
| opacity: 0.7; | |
| } | |
| } | |
| } | |
| &#nav-primary { | |
| clear: both; | |
| > li { | |
| &:hover { cursor: pointer; } | |
| p { text-transform: uppercase; } | |
| } | |
| @media @screen-small-above { | |
| display: table; | |
| width: 100%; | |
| .clearfix(); | |
| > li { | |
| display: table-cell; | |
| width: 20%; | |
| background-color: #333; | |
| .background-size(cover); | |
| background-position: 50% 50%; | |
| text-align: center; | |
| padding-top: 100px; | |
| border-left: 2px solid #000; | |
| height: 100px; | |
| &:first-child { border-left: none; } | |
| &:hover { cursor: pointer; } | |
| p { | |
| background-color:rgba(0,0,0,0.5); | |
| margin: 0; | |
| padding: 10px 0; | |
| } | |
| } | |
| } | |
| li { | |
| @media @screen-large-above { | |
| border-left: 20px solid #000; | |
| background-position: 0 0; | |
| } | |
| @media @screen-mega-above { | |
| border-left: 40px solid #000; | |
| } | |
| } | |
| } | |
| } | |
| &.slideInUp { | |
| h3#nav-chapter-title, | |
| #nav-chapter-title-prompt { | |
| display: none; | |
| } | |
| } | |
| } | |
| .ico-hamburger { | |
| background: transparent url('@{img-root}/hamburger.png') no-repeat center center; | |
| width: 14px; | |
| height: 12px; | |
| display: inline-block; | |
| margin-right: 6px; | |
| vertical-align: center; | |
| @media @screen-small-above { | |
| margin-right: 11px; | |
| } | |
| .slideInUp & { background-image: url('@{img-root}/close.png'); } | |
| .slideOutDown & { background-image: url('@{img-root}/hamburger.png'); } | |
| } | |
| .ico-down-arrow { | |
| display: inline-block; | |
| background: transparent url('@{img-root}/down-square.png') no-repeat center center; | |
| width: 23px; | |
| height: 22px; | |
| margin-left: 11px; | |
| vertical-align: text-top; | |
| } | |
| .ico-right-arrow { | |
| display: inline-block; | |
| background: transparent url("@{img-root}/arrow.png") no-repeat; | |
| width: 18px; | |
| height: 16px; | |
| margin-left: 11px; | |
| vertical-align: text-top; | |
| } | |
| // Chapter navigation thumbnails | |
| @media @screen-small-above { | |
| .nav-cotton { background: url('@{img-root}/nav-cotton-thumb.jpg'); } | |
| .nav-machines { background: url('@{img-root}/nav-machines-thumb.jpg'); } | |
| .nav-people { background: url('@{img-root}/nav-people-thumb.jpg'); } | |
| .nav-boxes { background: url('@{img-root}/nav-boxes-thumb.jpg'); } | |
| .nav-you { background: url('@{img-root}/nav-you-thumb.jpg'); } | |
| } | |
| .home { | |
| position: absolute; | |
| top: 27px; | |
| left: 0; | |
| background: transparent url('@{img-root}/home.png') no-repeat; | |
| width: 15px; | |
| height: 16px; | |
| display: block; | |
| @media @screen-small {display: none;} | |
| } | |
| .about { | |
| position: absolute; | |
| top: 27px; | |
| left: 0; | |
| background: transparent url('@{img-root}/tshirt.png') no-repeat; | |
| width: 18px; | |
| height: 19px; | |
| display: block; | |
| @media @screen-small {display: none;} | |
| } | |
| .buy { | |
| position: absolute; | |
| top: 27px; | |
| left: 0; | |
| background: transparent url('@{img-root}/buy.png') no-repeat; | |
| width: 18px; | |
| height: 19px; | |
| display: block; | |
| @media @screen-small {display: none;} | |
| } | |
| //footer navigation | |
| .next-chapter-label, | |
| .btn-explainer-prompt { | |
| cursor: pointer; | |
| } | |
| .next-chapter:hover, | |
| .btn-explainer-prompt:hover { | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| .btn-next-chapter, | |
| .btn-explainer-prompt { | |
| cursor: pointer; | |
| //opacity: .8; | |
| } | |
| .btn-next-chapter:hover, | |
| .btn-explainer-prompt:hover { | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| .btn-next-chapter { | |
| background-color: #000000; | |
| .background-size(cover); | |
| background-position: 50% 0%; | |
| position: relative; | |
| height: 130px; | |
| @media @screen-small-above{height: 360px;} | |
| border-top: 4px solid #000; | |
| overflow: hidden; | |
| position: relative; | |
| z-index: 200; | |
| .chapter-cotton & { | |
| background-image: url('@{img-root}/footer-machines.jpg'); | |
| } | |
| .chapter-machines & { | |
| background-image: url('@{img-root}/footer-people.jpg'); | |
| } | |
| .chapter-people & { | |
| background-image: url('@{img-root}/footer-boxes.jpg'); | |
| } | |
| .chapter-boxes & { | |
| background-image: url('@{img-root}/footer-you.jpg'); | |
| } | |
| } | |
| .next-chapter { | |
| background: rgba(0, 0, 0, 0.5); | |
| width: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .next-chapter .next-chapter-label { | |
| color: #fff; | |
| text-align: right; | |
| @media @screen-small-above { padding: 30px 40px 30px 0; } | |
| margin: 0 20px 0 0; | |
| height: 130px; | |
| @media @screen-small-above { height: auto; } | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| font-size: 36px; | |
| position: relative; | |
| } | |
| .next-chapter .arrow-right { | |
| @media @screen-small-above { | |
| background: transparent url("@{img-root}/arrow.png") no-repeat; | |
| width: 18px; | |
| height: 16px; | |
| display: block; | |
| position: absolute; | |
| top: 40px; | |
| right: 10px; | |
| } | |
| } | |
| .next-chapter-label em { | |
| font-style: normal; | |
| font-size: 18px; | |
| line-height: 8px; | |
| position: relative; | |
| top: -5px; | |
| font-weight: normal; | |
| } | |
| .nav-title, | |
| .nav-about, | |
| .buy-shirt { | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| @media @screen-small-above { | |
| position: relative; | |
| padding-left: 23px; | |
| overflow: hidden; | |
| } | |
| } | |
| .buy-shirt { | |
| display: none; | |
| @media @screen-small-above {display: block;} | |
| } | |
| //body.chapter-title nav ul#nav-secondary > li.nav-title { display: none; } | |
| .footer-video { | |
| width: 100%; | |
| margin-top: -300px; | |
| .touch & { display: none; } | |
| } | |
| .filmstrip1-outer-wrapper { | |
| width: 100%; | |
| margin-bottom: 1em; | |
| .filmstrip1-wrapper { | |
| width: 720px; | |
| height: 528px; | |
| } | |
| .filmstrip1 { | |
| width: 100%; | |
| height: 100%; | |
| background-size: 100% 2500%; | |
| background-image: url('@{img-root}/filmstrip-cotton-archive-480.jpg'); | |
| @media @screen-small-above { | |
| background-image: url('@{img-root}/filmstrip-cotton-archive.jpg'); | |
| } | |
| .backface-visibility(hidden); | |
| &.animated { | |
| .animation(filmstrip 4s infinite); | |
| } | |
| } | |
| } | |
| // Explainer text | |
| .explainer { | |
| background-color: #fff; | |
| padding-top: 33px; | |
| body.chapter-about & { | |
| padding-top: 0; | |
| .how-header { | |
| img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| p { | |
| display: none; | |
| @media @screen-small-above { | |
| display: block; | |
| padding: 5px; | |
| margin: 0; | |
| font-size: 11px; | |
| color: #888; | |
| text-align: right; | |
| background-color: #222; | |
| } | |
| } | |
| .touch & { | |
| p {display: none;} | |
| } | |
| } | |
| .about-callout { | |
| width: 240px; | |
| margin: 10px 0; | |
| border-bottom: 3px solid #000; | |
| p { | |
| margin-top: 5px; | |
| font-size: 11px; | |
| } | |
| @media @screen-small-above { | |
| float: right; | |
| margin: 10px 0 40px 40px; | |
| p { | |
| font-size: 16px; | |
| } | |
| } | |
| } | |
| } | |
| body.chapter-you & { | |
| padding-bottom: 99px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| background-color: #121212; | |
| h2 { | |
| color: #e2e2e2; | |
| margin-bottom: 0.25em; | |
| max-width: 750px; | |
| } | |
| p { | |
| color: #ccc; | |
| margin-bottom: 2em; | |
| font-size: 16px; | |
| strong { color: #e2e2e2; } | |
| } | |
| } | |
| @media @screen-tiny { padding-top: 22px; } | |
| @media @screen-small-above { | |
| body.chapter-about & { | |
| padding-bottom: 88px; | |
| } | |
| } | |
| h2 { | |
| padding-bottom: 20px; | |
| font-size: 17px; | |
| line-height: 1.1; | |
| font-weight: bold; | |
| @media @screen-small-above { | |
| font-size: 36px; | |
| font-weight: 700; | |
| margin-bottom: .75em; | |
| line-height: 1.5; | |
| color: #121212; | |
| padding-bottom: 0; | |
| } | |
| } | |
| h3 { | |
| padding-bottom: 20px; | |
| font-size: 17px; | |
| @media @screen-small-above { | |
| margin: 2.6em 0 1.5em 0; | |
| padding-bottom: 0; | |
| line-height: 1.5; | |
| color: #121212; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| } | |
| h4 { | |
| margin: 0 0 1.5em; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: #121212; | |
| @media @screen-small-above { | |
| font-size: 16px; | |
| } | |
| } | |
| p, | |
| dl { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: #444; | |
| @media @screen-small-above { | |
| margin: 0 0 1.5em 0; | |
| font-size: 20px; | |
| } | |
| &.promo-link { | |
| font-size: 14px; | |
| font-weight: bold; | |
| border-left: 4px solid #e2e2e2; | |
| padding-left: 15px; | |
| margin-bottom: 2em; | |
| a { padding-left: 6px; } | |
| } | |
| } | |
| dt { | |
| margin-top: 1.5em; | |
| &:first-child { margin-top: 0; } | |
| } | |
| ul.toc { | |
| margin-bottom: 22px; | |
| > li { | |
| margin-left: -1.25em; | |
| margin-bottom: 11px; | |
| @media @screen-small-above { font-size: 16px; } | |
| } | |
| } | |
| .credits { | |
| p { font-size: 14px; } | |
| } | |
| .date { | |
| color: #999; | |
| font-size: 80%; | |
| white-space: nowrap; | |
| } | |
| .graphic { | |
| margin: 1.25em 0 2.75em 0; | |
| border-top: 1px solid #eee; | |
| border-bottom: 1px solid #eee; | |
| padding: 1.25em 0; | |
| clear: right; | |
| dl { | |
| margin: 0; | |
| dt { | |
| margin: 1.5em 0 .5em 0; | |
| font-size: 16px; | |
| &:first-child { margin-top: 0; } | |
| } | |
| dd { | |
| font-size: 16px; | |
| line-height: 1.5; | |
| } | |
| } | |
| h5 { | |
| font-weight: normal; | |
| color: #666; | |
| margin: -1.0em 0 1.5em 0; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| } | |
| h6 { | |
| font-size: 14px; | |
| line-height: 1.4; | |
| font-weight: bold; | |
| color: #333; | |
| margin: 0 0 1.5em 0; | |
| } | |
| img { | |
| display: block; | |
| margin-bottom: 1em; | |
| &.chart { | |
| max-width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| table { | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| width: 100%; | |
| margin-bottom: 1.5em; | |
| td, | |
| th { | |
| padding: 10px; | |
| text-align: left; | |
| border-bottom: 2px solid #eee; | |
| &.amt { text-align: right; } | |
| } | |
| th { | |
| border-bottom: 2px solid #ccc; | |
| padding-top: 0; | |
| } | |
| tr { | |
| vertical-align: top; | |
| &.shadedrow td { | |
| background-color: #f7f7f7; | |
| font-weight: bold; | |
| } | |
| } | |
| @media @screen-tiny { | |
| font-size: 12px; | |
| &.shipping-costs { | |
| display: block; | |
| th { display: none; } | |
| td { | |
| display: block; | |
| padding: 2px 10px; | |
| text-align: left; | |
| white-space: normal; | |
| border: none; | |
| &:empty { display: none; } | |
| &.amt { text-align: left; } | |
| &:nth-child(1) { | |
| padding-top: 10px; | |
| border-top: 2px solid #eee; | |
| } | |
| &:nth-child(4) { | |
| padding-bottom: 10px; | |
| } | |
| } | |
| th[data-title]:before, | |
| td[data-title]:before { | |
| content: attr(data-title) ":\00A0"; | |
| font-weight: bold; | |
| display: inline-block; | |
| width: 70px; | |
| } | |
| tfoot { | |
| td { display: none; } | |
| td[data-title='TOTAL'] { | |
| display: block; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border-top: 2px solid #eee; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .credit { | |
| font-size: 12px; | |
| color: #999; | |
| margin-bottom: 0; | |
| a { font-weight: bold; } | |
| } | |
| .footnote { | |
| font-size: 12px; | |
| color: #999; | |
| margin-bottom: 11px; | |
| a { font-weight: bold; } | |
| } | |
| &.d3-chart { | |
| svg { | |
| font-family: Arial, Helvetica, sans-serif; | |
| margin-bottom: 1em; | |
| } | |
| .axis { | |
| font-size: 12px; | |
| color: #666; | |
| path, | |
| line { | |
| fill: none; | |
| stroke: #666; | |
| shape-rendering: crispEdges; | |
| } | |
| &.y path { display: none; } | |
| &.y .tick line { display: none; } | |
| } | |
| .grid { | |
| path { display: none; } | |
| .tick { | |
| stroke: #ccc; | |
| stroke-dasharray: 1px 3px; | |
| stroke-width: 1px; | |
| shape-rendering: crispEdges; | |
| } | |
| } | |
| .key { | |
| font-family: Arial, Helvetica, sans-serif; | |
| margin: 0 0 1em 0; | |
| padding: 0; | |
| list-style-type: none; | |
| .key-item { | |
| display: inline-block; | |
| margin: 0 18px 0 0; | |
| padding: 0; | |
| line-height: 15px; | |
| b { | |
| display: inline-block; | |
| width: 15px; | |
| height: 15px; | |
| margin-right: 6px; | |
| float: left; | |
| } | |
| label { | |
| white-space: nowrap; | |
| font-size: 12px; | |
| color: #333; | |
| font-weight: normal; | |
| } | |
| } | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #333; | |
| stroke-width: 3px; | |
| } | |
| .bars rect { fill: #8BC0BF; } | |
| .country text, | |
| .amounts text { | |
| font-weight: normal; | |
| font-size: 12px; | |
| fill: #333; | |
| } | |
| #apparel-wages-d3 { | |
| .amounts text.bangladesh, | |
| .country text.bangladesh { | |
| font-weight: bold; | |
| } | |
| .bars rect.bangladesh { | |
| fill: #11605E; | |
| } | |
| } | |
| .key-0 b { background-color: #d1e6e5; } | |
| .key-1 b { background-color: #74b3b2; } | |
| .key-2 b { background-color: #17807e; } | |
| .key-3 b { background-color: #0e4d4c; } | |
| .line-0 { stroke: #d1e6e5; } | |
| .line-1 { stroke: #74b3b2; } | |
| .line-2 { stroke: #17807e; } | |
| .line-3 { stroke: #0e4d4c; } | |
| } | |
| &.cotton-rating { | |
| ul { | |
| display: block; | |
| margin: 0; | |
| padding: 22px; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,.5); | |
| @media @screen-tiny-above { | |
| padding: 0; | |
| height: auto; | |
| display: table; | |
| background: none; | |
| } | |
| > li { | |
| display: block; | |
| width: auto; | |
| margin-bottom: .5em; | |
| text-align: right; | |
| color: #eee; | |
| @media @screen-tiny-above { | |
| display: table-cell; | |
| width: 25%; | |
| vertical-align: top; | |
| text-align: center; | |
| } | |
| b { | |
| display: inline-block; | |
| width: 100px; | |
| font-size: 14px; | |
| text-align: left; | |
| float: left; | |
| @media @screen-tiny-above { | |
| display: block; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| color: #fff; | |
| width: auto; | |
| text-align: center; | |
| float: none; | |
| } | |
| } | |
| i { | |
| display: inline-block; | |
| font-size: 14px; | |
| font-style: normal; | |
| @media @screen-tiny-above { | |
| display: block; | |
| font-size: 26px; | |
| color: #8BC0BF; | |
| } | |
| } | |
| span { | |
| display: inline-block; | |
| font-style: normal; | |
| font-size: 12px; | |
| padding-left: 3px; | |
| @media @screen-tiny-above { | |
| display: block; | |
| font-style: italic; | |
| font-size: 12px; | |
| color: #999; | |
| } | |
| } | |
| } | |
| } | |
| .cotton-sample { | |
| background: url('@{img-root}/gr-plants-rating-480.jpg') center bottom; | |
| background-size: cover; | |
| .clearfix(); | |
| margin-bottom: 11px; | |
| @media @screen-tiny-above { | |
| background-image: url('@{img-root}/gr-plants-rating-768.jpg'); | |
| padding: 33px 11px 400px 11px; | |
| } | |
| @media @screen-small-above { | |
| background-image: url('@{img-root}/gr-plants-rating-992.jpg'); | |
| } | |
| @media @screen-medium-above { | |
| background-image: url('@{img-root}/gr-plants-rating-1200.jpg'); | |
| } | |
| } | |
| } | |
| &.cotton-subsidies { | |
| b { | |
| display: block; | |
| background: url('@{img-root}/ico-subsidies.png') no-repeat; | |
| height: 100px; | |
| width: 100px; | |
| float: left; | |
| margin-top: 5px; | |
| @media @screen-tiny { | |
| float: right; | |
| margin-left: 22px; | |
| } | |
| } | |
| .crop-insurance b { background-position: 0 0; } | |
| .prices-fall b { background-position: 0 -100px; } | |
| .cotton b { background-position: 0 -200px; } | |
| dl { | |
| margin-bottom: 2em; | |
| } | |
| dt { | |
| border-top: 1px dotted #eee; | |
| padding-top: 1.5em; | |
| &:first-child { | |
| border-top: none; | |
| padding-top: 0; | |
| } | |
| } | |
| dd { | |
| margin-left: 122px; | |
| @media @screen-tiny { margin-left: 0; } | |
| } | |
| strong { | |
| display: block; | |
| margin-left: 122px; | |
| @media @screen-tiny { margin-left: 0; } | |
| } | |
| } | |
| &.cotton-yields { | |
| table { | |
| th { | |
| color: #17807E; | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| padding-bottom: 5px; | |
| @media @screen-tiny-above { | |
| font-size: 14px; | |
| padding-bottom: 11px; | |
| } | |
| } | |
| tr th:first-child, | |
| tr td:first-child { | |
| padding-left: 0; | |
| } | |
| tr th:nth-child(2), | |
| tr td:nth-child(2) { | |
| padding-right: 0; | |
| } | |
| } | |
| .totals { | |
| @media @screen-tiny { | |
| margin-bottom: 1em; | |
| .clearfix(); | |
| } | |
| h6 { | |
| border-bottom: 2px solid #ccc; | |
| padding-bottom: 5px; | |
| margin-bottom: 8px; | |
| color: #17807E; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| @media @screen-tiny-above { | |
| font-size: 14px; | |
| padding-bottom: 11px; | |
| } | |
| } | |
| p { | |
| font-size: 12px; | |
| line-height: 1.6; | |
| margin-bottom: .5em; | |
| @media @screen-tiny { | |
| &:nth-child(2) { | |
| width: 50%; | |
| float: left; | |
| } | |
| &:nth-child(3) { | |
| width: 45%; | |
| float: right; | |
| } | |
| } | |
| @media @screen-tiny-above { font-size: 14px; } | |
| strong { | |
| font-size: 12px; | |
| color: #11605E; | |
| @media @screen-tiny-above { | |
| font-size: 18px; | |
| white-space: nowrap; | |
| } | |
| } | |
| &.key { | |
| position: absolute; | |
| bottom: 0; | |
| left: 15px; | |
| text-align: left; | |
| font-size: 9px; | |
| color: #999; | |
| i { | |
| display: block; | |
| float: left; | |
| margin-right: 3px; | |
| width: 12px; | |
| height: 12px; | |
| background: url('@{img-root}/ico-shirt.gif') no-repeat 50% 50%; | |
| } | |
| } | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| } | |
| } | |
| &.shipping-container { | |
| h6 { | |
| .clearfix(); | |
| text-align: center; | |
| @media @screen-tiny-above { | |
| margin-left: 72px; | |
| text-align: left; | |
| } | |
| strong { color: #17807E; } | |
| b { | |
| width: 50px; | |
| height: 50px; | |
| display: block; | |
| background-image: url('@{img-root}/ico-boxes.png'); | |
| background-repeat: no-repeat; | |
| margin: 0 auto 5px auto; | |
| @media @screen-tiny-above { | |
| float: left; | |
| margin: 2px 0 0 -72px; | |
| } | |
| } | |
| &.boxes b { background-position: 0 -100px; } | |
| &.shirts b { background-position: 0 0; } | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| &.shipping-costs { | |
| .shipping-costs-graph { | |
| background: url('@{img-root}/gr-costs-axis.gif') no-repeat top left; | |
| height: 527px; | |
| overflow: hidden; | |
| margin-bottom: 1em; | |
| padding-left: 38px; | |
| } | |
| .shipping-costs-graph-inner { | |
| background: url('@{img-root}/gr-costs-graph.gif') no-repeat top right; | |
| min-width: 200px; | |
| max-width: 350px; | |
| height: 100%; | |
| } | |
| } | |
| &.shipping-cotton { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| &.yarn-types { | |
| .row { | |
| b { | |
| background-size: cover; | |
| background-position: 50% 50%; | |
| background-repeat: no-repeat; | |
| display: block; | |
| height: 150px; | |
| border-radius: 10px; | |
| } | |
| &.denim b { background-image: url('@{img-root}/yarn-denim-480.jpg'); } | |
| &.hanes b { background-image: url('@{img-root}/yarn-hanes-480.jpg'); } | |
| &.jockey b { background-image: url('@{img-root}/yarn-jockey-480.jpg'); } | |
| &.sock b { background-image: url('@{img-root}/yarn-sock-480.jpg'); } | |
| &.woven b { background-image: url('@{img-root}/yarn-woven-480.jpg'); } | |
| @media @screen-small { | |
| .col-sm-4 { margin-bottom: 1em; } | |
| } | |
| } | |
| h6 { | |
| margin-bottom: .5em; | |
| color: #444; | |
| font-size: 16px; | |
| } | |
| p { | |
| font-size: 16px; | |
| line-height: 1.5; | |
| margin: 0; | |
| color: #444; | |
| } | |
| } | |
| .filmstrip-outer-wrapper { | |
| width: 100%; | |
| margin-bottom: 1em; | |
| .filmstrip-wrapper { | |
| width: 720px; | |
| height: 528px; | |
| } | |
| .filmstrip { | |
| width: 100%; | |
| height: 100%; | |
| background-size: 100% 2500%; | |
| background-image: url('@{img-root}/filmstrip-cotton-archive-480.jpg'); | |
| @media @screen-small-above { | |
| background-image: url('@{img-root}/filmstrip-cotton-archive.jpg'); | |
| } | |
| .backface-visibility(hidden); | |
| &.animated { | |
| .animation(filmstrip 4s infinite); | |
| } | |
| } | |
| } | |
| } | |
| .photo-row { | |
| margin-bottom: 2em; | |
| h4 { | |
| margin-bottom: 11px; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| @media @screen-medium-above { margin: 0 auto;} | |
| display: block; | |
| } | |
| .caption { | |
| display: block; | |
| color: #787878; | |
| strong { | |
| color: #555; | |
| margin-right: 5px; | |
| } | |
| } | |
| img + .caption, | |
| a + .caption { | |
| margin-top: 11px; | |
| } | |
| body.chapter-about & { | |
| .photo1, | |
| .photo2 { | |
| display: none; | |
| @media @screen-medium-above { display: block; } | |
| } | |
| } | |
| &.yarn-spinning-photos { | |
| margin-bottom: 0; | |
| div:nth-child(1), | |
| div:nth-child(2) { margin-bottom: 1.5em; } | |
| } | |
| .left { margin-bottom: 11px; } | |
| @media @screen-tiny-above { | |
| .left { | |
| float: left; | |
| width: 50%; | |
| margin-bottom: 0; | |
| .caption { padding-right: 22px; } | |
| } | |
| .right { | |
| float: right; | |
| width: 50%; | |
| } | |
| } | |
| } | |
| .related { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-top: 4px; | |
| @media @screen-small-above { | |
| &.left { | |
| padding-right: 22px; | |
| float: left; | |
| } | |
| &.right { | |
| padding-left: 22px; | |
| float: right; | |
| } | |
| } | |
| @media @screen-large { | |
| &.left { margin-left: -15%; } | |
| &.right { margin-right: -15%; } | |
| } | |
| p { | |
| border-top: 1px solid #eee; | |
| border-bottom: 1px solid #eee; | |
| padding: 1em 0; | |
| .clearfix(); | |
| @media @screen-small-above { | |
| border-top: none; | |
| padding-top: 0; | |
| } | |
| span { | |
| margin-left: 50%; | |
| display: block; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| font-weight: bold; | |
| @media @screen-tiny-above { | |
| margin-left: 25%; | |
| font-size: 16px; | |
| } | |
| @media @screen-small-above { | |
| margin-left: 0; | |
| font-size: 16px; | |
| } | |
| } | |
| em { | |
| display: block; | |
| font-style: normal; | |
| color: #999; | |
| font-size: 12px; | |
| margin-bottom: 3px; | |
| } | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| float: left; | |
| width: 50%; | |
| margin-right: 22px; | |
| @media @screen-tiny-above { | |
| width: 25%; | |
| } | |
| @media @screen-small-above { | |
| width: auto; | |
| float: none; | |
| margin: 0 0 11px 0; | |
| } | |
| } | |
| } | |
| .table-of-contents { | |
| font-size: 14px; | |
| a { font-weight: bold; } | |
| dt { | |
| margin-bottom: 1em; | |
| text-transform: uppercase; | |
| color: #4F5057; | |
| } | |
| li { margin-bottom: 1em; } | |
| } | |
| } | |
| #seedtoselfie { | |
| .clearfix(); | |
| @media @screen-tiny-above { | |
| position: relative; | |
| padding-bottom: 200px; | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| .photo { | |
| margin-bottom: 11px; | |
| width: 33%; | |
| float: left; | |
| @media @screen-tiny-above { | |
| width: 20%; | |
| opacity: 0.5; | |
| } | |
| @media @screen-small-above { width: 20%; } | |
| @media @screen-medium-above { width: 16.6%; } | |
| @media @screen-large-above { width: 12.5%; } | |
| img { padding-right: 11px; } | |
| } | |
| } | |
| #selfie-tooltip { | |
| position: absolute; | |
| cursor: pointer; | |
| visibility: hidden; | |
| display: none; | |
| width: 40%; | |
| @media @screen-small-above { width: 35%; } | |
| @media @screen-medium-above { width: 30%; } | |
| @media @screen-large-above { width: 30%; } | |
| &.animated { | |
| .animation-duration(0.5s); | |
| visibility: visible; | |
| display: block; | |
| } | |
| p { | |
| font-size: 13px; | |
| text-align: center; | |
| background: #333; | |
| background: rgba(40, 40, 40, .9); | |
| padding: 6px; | |
| } | |
| @media @screen-tiny { | |
| .touch & { display: none; } | |
| } | |
| } | |
| #selfie-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 1000; | |
| background: #333; | |
| background: rgba(40, 40, 40, .95); | |
| color: #e2e2e2; | |
| cursor: pointer; | |
| visibility: hidden; | |
| padding: 11px; | |
| &.animated { | |
| .animation-duration(0.5s); | |
| visibility: visible; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| p { | |
| font-size: 13px; | |
| line-height: 1.4; | |
| text-align: center; | |
| margin: 11px 0 0 0; | |
| &.prompt { | |
| font-style: italic; | |
| font-size: 12px; | |
| color: #666; | |
| } | |
| } | |
| @media @screen-tiny-above { | |
| .no-touch & { | |
| display: none; | |
| visibility: hidden; | |
| } | |
| } | |
| } | |
| //titlecard | |
| .title-video { opacity: .5; } | |
| .titlecard { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| display: block; | |
| h1 { | |
| color: #fff; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.5); | |
| @media @screen-small-above { | |
| font-size: 70px; | |
| margin: 50px 0 0 0; | |
| } | |
| @media @screen-medium-above { | |
| font-size: 90px; | |
| margin: 110px 0 0 0; | |
| } | |
| @media @screen-large { | |
| font-size: 120px; | |
| margin: 150px 0 0 0; | |
| } | |
| @media @screen-mega-above { | |
| font-size: 140px; | |
| } | |
| #title & { | |
| font-size: 28px; | |
| margin: 0 auto; | |
| @media @screen-small-above { | |
| font-size: 60px; | |
| } | |
| @media @screen-medium-above { | |
| font-size: 70px; | |
| max-width: 700px; | |
| } | |
| } | |
| } | |
| h2 { | |
| font-size: 16px; | |
| color: #fff; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.5); | |
| max-width: 500px; | |
| margin: 5px auto; | |
| @media @screen-small-above { | |
| margin: 0 auto 44px auto; | |
| font-size: 28px; | |
| line-height: 1.2; | |
| margin-bottom: 33px; | |
| } | |
| @media @screen-medium-above { | |
| font-size: 48px; | |
| max-width: 700px; | |
| } | |
| #title & { | |
| @media @screen-small-above { | |
| margin: 10px auto 33px auto; | |
| font-size: 32px; | |
| text-transform: none; | |
| max-width: 540px; | |
| } | |
| @media @screen-medium-above { | |
| font-size: 32px; | |
| } | |
| } | |
| } | |
| .btn.btn-play { | |
| border-radius: 0; | |
| background-color: #fff; | |
| text-transform: uppercase; | |
| font: bold 14px "Gotham SSm", helvetica, arial, sans-serif; | |
| padding: 0 10px; | |
| margin-top: 10px; | |
| line-height: 30px; | |
| @media @screen-small-above { | |
| font-size: 18px; | |
| padding: 0 22px; | |
| margin-top: 0; | |
| line-height: 44px; | |
| } | |
| &:hover { | |
| background-color: #000; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| } | |
| } | |
| .video-wrapper { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 9; | |
| background-color: #000; | |
| height: 100%; | |
| width: 100%; | |
| margin-top: -10000px; | |
| overflow: hidden; | |
| .video-inner-wrapper { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| margin: auto; | |
| } | |
| iframe { } | |
| .video-loaded & { | |
| iframe { visibility: hidden; } | |
| } | |
| .video-playing & { | |
| margin-top: 0; | |
| iframe { visibility: visible; } | |
| } | |
| } | |
| .layer-media { | |
| width: 100%; | |
| height: 100%; | |
| background-color: #000; | |
| .background-size(cover); | |
| background-position: 50% 50%; | |
| overflow: hidden; | |
| .chapter-title & { | |
| .firefox &{ | |
| background-image: url('@{img-root}/home-title-ff.jpg'); | |
| } | |
| } | |
| .chapter-cotton & { | |
| .firefox &{ | |
| background-image: url('@{img-root}/cotton-title-ff.jpg'); | |
| } | |
| } | |
| .chapter-machines & { | |
| .firefox &{ | |
| background-image: url('@{img-root}/machines-title-ff.jpg'); | |
| } | |
| } | |
| .chapter-people & { | |
| .firefox &{ | |
| background-image: url('@{img-root}/people-title-ff.jpg'); | |
| } | |
| } | |
| .chapter-boxes & { | |
| .firefox &{ | |
| background-image: url('@{img-root}/boxes-title-ff.jpg'); | |
| } | |
| } | |
| .chapter-you & { | |
| .firefox & { | |
| background-image: url('@{img-root}/you-title-ff.jpg'); | |
| } | |
| } | |
| } | |
| //home page | |
| .chapter-title { | |
| .explainer {visibility: hidden; position: absolute; bottom: -100px; left: 0; height: 0;} | |
| } | |
| .npr-logo { | |
| width: 70px; | |
| margin: 10px 0; | |
| @media @screen-small-above { | |
| width: 100px; | |
| margin: 50px 0 15px 0; | |
| } | |
| } | |
| //home page navigation for touch devices | |
| .index-nav, .touch-title { | |
| display: none; | |
| } | |
| .touch .index-nav, .touch .touch-title { | |
| display: block; | |
| } | |
| .touch { | |
| .layer-media {background-color: #fff;} | |
| #you .layer-media, #you {background-color: #000;} | |
| #top { | |
| section { | |
| padding-top: 150px; | |
| } | |
| #title {padding-top: 0;} | |
| #about { | |
| padding-top: 60px; | |
| @media @screen-small-above { | |
| padding-top: 0; | |
| } | |
| } | |
| } | |
| @media @screen-small-above { | |
| #top section {padding-top: 0;} | |
| } | |
| .titlecard { | |
| height: 140px; | |
| z-index: 10; | |
| padding-top: 65px; | |
| padding-bottom: 20px; | |
| background-color: #eee; | |
| background-image: url('@{img-root}/touch-title-background1.jpg'); | |
| background-position: 20% 60%; | |
| .background-size(cover); | |
| @media @screen-small-above { | |
| padding-top: 20px; | |
| //border-bottom: 4px solid #111; | |
| } | |
| //background-color: #487261; | |
| border-bottom: 2px solid #111; | |
| h1, h2 {text-align: left; margin: 0; color: #aaa;} | |
| h1 { | |
| font-size: 22px; | |
| margin-bottom: 5px; | |
| @media @screen-small-above {font-size: 50px;} | |
| } | |
| h2 { | |
| font-size: 12px; | |
| @media @screen-small-above { | |
| font-size: 19px; | |
| max-width: none; | |
| } | |
| } | |
| border-top: 5px solid #111; | |
| } | |
| .btn-play { display: none; } | |
| .chapter-title { | |
| #chapter-nav {display: none;} | |
| } | |
| .video-wrapper { | |
| background-color: #fff; | |
| margin: 0; | |
| position: relative; | |
| @media @screen-small-above { | |
| padding-top: 160px; | |
| } | |
| .video-inner-wrapper { | |
| width: 95% !important; | |
| margin-top: 0; | |
| position: relative; | |
| //border: 2px solid #333; | |
| } | |
| iframe { visibility: visible; } | |
| } | |
| #you .video-wrapper {background-color: #000;} | |
| .chapter-title .titlecard { | |
| display: block; | |
| } | |
| .chapter-title .video-wrapper { | |
| @media @screen-small-above { | |
| margin-top: 0; | |
| } | |
| } | |
| .title-video { display: none; } | |
| #nav-chapter-title-prompt { | |
| display: none; | |
| } | |
| #nav-chapter-title { | |
| display: none; | |
| &.waypoint-show {display: none;} | |
| } | |
| .layer-media {height: auto;} | |
| .chapter-title .layer-media {height: 100%;} | |
| .chapter-about section {padding-top: 70px;} | |
| .explainer { | |
| padding-top: 0; | |
| } | |
| .explainer h2, .explainer h3 {margin: 15px 0 0 0;} | |
| #title { | |
| padding-top: 0; | |
| .layer-media {overflow: scroll;} | |
| .video-wrapper { | |
| padding-top: 140px; | |
| @media @screen-small-above {padding: 170px 0 30px 0;} | |
| background-color: #000; | |
| background-image: url('@{img-root}/squirrel-background.png'); | |
| background-position: 60% 70%; | |
| .background-size(cover); | |
| } | |
| .titlecard { display: none; } | |
| .explainer { display: none; } | |
| .touch-title { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 120px; | |
| width: 100%; | |
| z-index: 10; | |
| color: #d1d1d1; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.5); | |
| .npr-logo { | |
| width: 40px; | |
| margin: 30px auto 0 auto; | |
| display: block; | |
| text-align: center; | |
| @media @screen-small-above { | |
| width: 75px; | |
| } | |
| } | |
| h2 { | |
| text-transform: uppercase; | |
| font-size: 22px; | |
| font-weight: bold; | |
| text-align: center; | |
| margin: 5px 0 0 0; | |
| padding: 0 40px; | |
| @media @screen-small-above { | |
| margin: 15px 0 0 0; | |
| font-size: 36px; | |
| } | |
| } | |
| h3 { | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| font-weight: bold; | |
| text-transform: none; | |
| font-weight: normal; | |
| margin: 5px 0 0 0; | |
| padding: 0 60px; | |
| text-align: center; | |
| @media @screen-small-above { | |
| font-size: 22px; | |
| } | |
| } | |
| } | |
| } | |
| .index-nav { | |
| color: #fff; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.5); | |
| width: 90%; | |
| margin: 0 auto; | |
| h4 { | |
| margin: 10px 0 0 0; | |
| font-size: 18px; | |
| color: #fff; | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.5); | |
| @media @screen-small-above { | |
| margin-top: 15px; | |
| font-size: 36px; | |
| } | |
| } | |
| ul { | |
| padding: 0; | |
| margin: 10px 0 0 0; | |
| } | |
| li { | |
| font-size: 16px; | |
| margin: 0 0 15px 0; | |
| padding: 10px 5px 3px 5px; | |
| line-height: 1; | |
| text-align: center; | |
| color: #efefef; | |
| text-shadow: none; | |
| background-color: rgba(65,65,65,0.8); | |
| list-style-type: none; | |
| background-image: none !important; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| @media @screen-small-above { | |
| text-align: left; | |
| margin: 0 10px 20px 0px; | |
| padding: 15px 5px 6px 15px; | |
| font-size: 32px; | |
| } | |
| } | |
| } | |
| }// touch |