@charset "UTF-8"; /** Imports, variables, mixins, etc... **/ /** Font Stack */ /** Colours */ /** https://github.com/sass-mq/sass-mq Convert pixels to rems. @param {Number} $px - value to convert @param {Number} $base-font-size ($base-font-size) - `` font size @example scss $font-size-in-rems: px2rem(16px); p { font-size: px2rem(16px); } @requires $base-font-size @returns {Number} */ /** Same as above but for ems */ /* Converts pixels to rems based on the base font size */ /*Font size and line height px to rems*/ /** Fonts */ /** Colours */ /** Typography */ /** Globals **/ /** Normal **/ @font-face { font-family: 'Adelle Sans'; src: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-regular-webfont.woff2") format("woff2"), url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: fallback; } @font-face { font-family: 'Adelle Sans'; src: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-bold-webfont.woff2") format("woff2"), url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } @font-face { font-family: 'Adelle Sans'; src: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-italic-webfont.woff2") format("woff2"), url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/adellesans-italic-webfont.woff") format("woff"); font-weight: 400; font-style: italic; font-display: fallback; } @font-face { font-family: 'Gilroy'; src: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/gilroy-bold-webfont.woff2") format("woff2"), url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/gilroy-bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } /** Black/Heavy **/ @font-face { font-family: 'Gilroy'; src: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/gilroy-black-webfont.woff2") format("woff2"), url("/National_Library/20170827070107oe_/https://clearleft.com/assets/fonts/gilroy-black-webfont.woff") format("woff"); font-weight: 800; font-style: normal; font-display: fallback; } *, *::before, *::after { box-sizing: border-box; } html { color: #333333; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: normal; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ } body { font-size: 1rem; line-height: 1.625; margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } article, aside, footer, header, nav, section, figcaption, figure, main { display: block; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } a { color: #006FF5; text-decoration: none; border-bottom: #EA215A 0.125rem solid; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; } p { margin-top: 0; } ul { padding: 0; } a:hover, a:active, a:focus { color: #e71651; } blockquote { margin: 0; } img { max-width: 100%; border-style: none; /*Remove the border on images inside links in IE 10-.*/ } button { border: 0; } svg:not(:root) { overflow: hidden; } [hidden] { display: none; } @media screen and (min-width: 50em) { body { font-size: 1.125rem; line-height: 1.77778; } } .Heading { color: #333333; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin-top: 0; -webkit-font-smoothing: antialiased; } a.Heading, .Heading a, a .Heading { border-bottom: none; } a.Heading:hover, a.Heading:focus, a.Heading:active, .Heading a:hover, .Heading a:focus, .Heading a:active, a .Heading:hover, a .Heading:focus, a .Heading:active { color: #505050; } .Heading a { color: inherit; } .Heading--main { font-size: 3rem; line-height: 1.08333; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 800; letter-spacing: -1.04px; } .Heading--secondary { font-size: 2.4375rem; line-height: 1.07692; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 800; letter-spacing: -0.42px; } .Heading--medium { font-size: 1.9375rem; line-height: 1.09677; font-weight: 700; letter-spacing: -0.44px; } .Heading--small { font-size: 1.5625rem; line-height: 1.24; font-weight: 700; letter-spacing: -0.31px; } .Heading--bump { font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.27px; } .Heading--body { font-size: 1rem; line-height: 1.5625; font-weight: 700; letter-spacing: -0.22px; } .Heading--context { font-size: 0.75rem; line-height: 1.25; text-transform: uppercase; color: #656565; font-weight: 700; letter-spacing: 1px; } .Heading--inverted { color: #FFFFFF; } a.Heading--inverted:hover, a.Heading--inverted:focus, .Heading--inverted a:hover, .Heading--inverted a:focus, a .Heading--inverted:hover, a .Heading--inverted:focus { color: inherit; } @media screen and (min-width: 36.25em) { .Heading:not(:last-child) { margin-bottom: 1rem; } .Heading--main { font-size: 5.625rem; line-height: 0.93333; } .Heading--secondary { font-size: 4.25rem; line-height: 1.10294; } .Heading--medium { font-size: 2.6875rem; line-height: 1.16279; font-weight: 700; } .Heading--small { font-size: 2.1875rem; line-height: 1.14286; font-weight: 700; } .Heading--bump { font-size: 1.75rem; line-height: 0.96429; font-weight: 700; } .Heading--body { font-size: 1.375rem; line-height: 1.22727; font-weight: 700; } } /** Old fluid calc-based 'impact' header font styles. Useful stuff. Maybe used later. */ .l-space-before { margin-top: 2rem; } .l-space-after { margin-bottom: 2rem; } .l-pad-before { padding-top: 2rem; } .l-pad-after { padding-bottom: 2rem; } .l-space-before--half { margin-top: 1rem; } .l-space-after--half { margin-bottom: 1rem; } .l-pad-before--half { padding-top: 1rem; } .l-pad-after--half { padding-bottom: 1rem; } .l-space-before--double { margin-top: 4rem; } .l-space-after--double { margin-bottom: 4rem; } .l-pad-before--double { padding-top: 4rem; } .l-pad-after--double { padding-bottom: 4rem; } .l-space-before--mega { margin-top: 5rem; } .l-space-after--mega { margin-bottom: 5rem; } .l-pad-before--mega { padding-top: 5rem; } .l-pad-after--mega { padding-bottom: 5rem; } @media screen and (min-width: 42.5em) { .l-space-before--mega { margin-top: 7rem; } .l-space-after--mega { margin-bottom: 7rem; } .l-pad-before--mega { padding-top: 7rem; } .l-pad-after--mega { padding-bottom: 7rem; } } .l-pad-around { padding: 1.25rem 1.5rem 1rem 1.5rem; } .l-vh, .InfoList-term[class*="InfoList-term--"] span { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .l-img-con { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .u-center { text-align: center; } .u-vertical-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .u-hide-sm { display: none; } @media screen and (min-width: 42.5em) { .u-hide-sm { display: block; display: unset; } } .Prose { -webkit-font-smoothing: antialiased; color: #505050; } .Prose h1, .Prose h2, .Prose h3, .Prose h4, .Prose h5, .Prose h6 { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; color: #333333; margin-top: 2rem; margin-bottom: 1rem; } .Prose h1 { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h2 { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h3 { font-size: 1.75rem; line-height: 1.17857; letter-spacing: -0.025rem; } .Prose h4 { font-size: 1.375rem; line-height: 1.22727; letter-spacing: -0.01875rem; } .Prose h5 { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01875rem; } .Prose h6 { font-size: 1rem; line-height: 1.6875; letter-spacing: -0.01875rem; } .Prose p { margin-bottom: 1rem; margin-top: 1rem; } .Prose blockquote { max-width: 42.5rem; position: relative; margin: 2.5rem auto 1.25rem auto; padding: 1rem; } .Prose blockquote:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/quote-open.svg"); background-repeat: no-repeat; content: ' '; width: 3.75rem; height: 2.8125rem; display: block; position: absolute; top: -1rem; background-size: 65%; } .Prose ol, .Prose ul { padding-left: 2rem; } .Prose li { margin: 0; } .Prose dd { margin-left: 0; padding-left: 2rem; } .Prose abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } .Prose mark { background-color: #ff0; color: #000; } .Prose table { border-collapse: collapse; border-spacing: 0; font-size: 0.875rem; line-height: 1.71429; width: 100%; } .Prose th { background: #dce0d9; font-weight: 400; padding: 0.5rem; text-align: left; } .Prose td { border-bottom: 1px solid #dce0d9; padding: 0.5rem; } .Prose sub, .Prose sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .Prose sub { bottom: -0.25em; } .Prose sup { top: -0.5em; } .Prose code { font-family: 'Monaco', 'Consolas', 'Menlo', monospace; font-size: 0.875em; } .Prose--inverted { color: #fff; } .Prose--inverted h1, .Prose--inverted h2, .Prose--inverted h3, .Prose--inverted h4, .Prose--inverted h5, .Prose--inverted h6, .Prose--inverted a { color: #fff; } @media screen and (max-width: 30em) { .Table--narrow th:last-child, .Table--narrow td:last-child { display: none; } } @media screen and (min-width: 31.25em) { .Prose h1 { font-size: 2.6875rem; line-height: 1.16279; letter-spacing: -0.02875rem; } .Prose h2 { font-size: 2.6875rem; line-height: 1.16279; letter-spacing: -0.02875rem; } .Prose h3 { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h4 { font-size: 1.75rem; line-height: 1.17857; letter-spacing: -0.025rem; } .Prose h5 { font-size: 1.375rem; line-height: 1.22727; letter-spacing: -0.01875rem; } .Prose h6 { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01875rem; } } .Texture--home { background-attachment: fixed; background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/dots/texture_corners-diamond-grey.png"); background-position: calc(50% + 50vw) calc(540px - 70vw); background-repeat: no-repeat; background-size: 45rem; } @media screen and (min-width: 31.25em) { .Texture--home { background-position: calc(50% + 50vw) 7.5rem; background-size: auto; } } @media screen and (min-width: 56.875em) { .Texture--home { background-position: calc(50% + 50vw) 20rem; } } @media screen and (min-width: 73.75em) { .Texture--home { background-position: calc(57vw) 20rem; } } .u-border-top { border-top: 1px solid #e1e1e1; } .u-border-top-n2:not(:first-child) { border-top: 1px solid #e1e1e1; } /** Components **/ .Author { max-width: 12.5rem; padding: 0.25rem; text-align: center; display: inline-block; } .Author-image { margin: 0 auto; display: block; } .Author-name { color: #505050; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.21429; font-weight: 700; letter-spacing: 1px; margin-top: 0.5rem; margin-bottom: 0.5rem; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .Author-meta { color: #656565; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.21429; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .Background { background-color: #FFFFFF; } .Background--grey { background-color: #F3F2F2; color: #333333; } .Background--grey a:not([class]):hover, .Background--grey a:not([class]):active, .Background--grey a:not([class]):focus { color: #d8144c; } .Background--brandeis-blue { background-color: #006FF5; color: #FFFFFF; } .Background--brandeis-blue a { color: #FFFFFF; } .Background--carribean-green { background-color: #00D494; color: #FFFFFF; } .Background--carribean-green a { color: #FFFFFF; } .Background--lapis-lazuli-blue { background-color: #1F6B9C; color: #FFFFFF; } .Background--lapis-lazuli-blue a { color: #FFFFFF; } .Background--orange-yellow { background-color: #FFDA69; } .Background--plum { background-color: #973B8A; color: #FFFFFF; } .Background--plum a { color: #FFFFFF; } .Background--sea-serpent-blue { background-color: #56CBE6; } .Background--frill { box-shadow: 0 -2px 0 0 #DAE1E8, 0 2px 0 0 #DAE1E8; } .Banner-content { max-width: 72.5rem; margin-left: auto; margin-right: auto; padding: 1.875rem 1rem; text-align: center; } .Banner-caption { font-size: 0.875rem; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; color: #e71651; font-weight: 700; letter-spacing: 0.0625rem; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .Banner-body { margin-left: auto; margin-right: auto; max-width: 37.5rem; } .Banner-link { margin-top: 1rem; } .Banner--inverted .Banner-caption, .Banner--inverted .Banner-headline, .Banner--inverted .Banner-body { color: #FFFFFF; } .Banner--notice { color: #333333; background-color: #F3F2F2; } .Banner--notice .Banner-caption { color: #1F6B9C; } .Banner--plain .Banner-caption { color: #505050; } .Banner--decorated { background-color: #e71651; color: #FFFFFF; } .Banner--decorated .Banner-caption { color: #FFFFFF; } .Banner--decorated .Banner-headline { color: #FFFFFF; } @media only screen and (min-width: 37.5em) { .Banner-headline { margin-bottom: 1rem; } .Banner-caption { margin-bottom: 1rem; } .Banner-content { padding-top: 3.75rem; padding-bottom: 3.75rem; } } .Bar:before { content: ""; display: block; margin-bottom: 1rem; width: 3.375rem; height: 0.625rem; background-color: currentColor; } /*Bar colours*/ .Bar--inverted:before { background-color: #FFFFFF; } .Bar--purple:before { background-color: #973B8A; } .Bar--red:before { background-color: #EA215A; } .Bar--blue:before { background-color: #1F6B9C; } .Bar--yellow:before { background-color: #FFDA69; } .Bar--lightBlue:before { background-color: #56CBE6; } .Bar--green:before { background-color: #00D494; } .BlogArticle-intro { margin-top: -3.125rem; } .BlogArticle { max-width: 42.5rem; margin: 1rem auto 2rem auto; } @media only screen and (min-width: 40em) { .BlogArticle { position: relative; } .BlogArticle-intro { margin-top: -5.625rem; } } .Breadcrumb { width: 100%; margin-bottom: 1rem; line-height: 1.2; } .Breadcrumb-item { border-bottom: none; text-transform: uppercase; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.10938rem; color: #333333; opacity: 0.5; } .Breadcrumb-item:hover, .Breadcrumb-item:active, .Breadcrumb-item:focus { color: #d8144c; } .Breadcrumb-item--first { opacity: 1; } .Breadcrumb-item--first:before { content: "←"; color: currentColor; } .Breadcrumb-separator { opacity: 0.5; } .Breadcrumb--inverted { color: #FFFFFF; } .Breadcrumb--inverted .Breadcrumb-item { color: #FFFFFF; } .Button { color: #006FF5; background-color: #FFFFFF; display: inline-block; border-bottom: 0; border-radius: 1.5rem; padding: 0.75rem 1.5rem; text-decoration: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.17647; } .Card { color: #333333; } .Card-title { color: #333333; font-size: 1.75rem; line-height: 1.17857; font-weight: 700; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin: 0 0 1rem 0; -webkit-font-smoothing: antialiased; } .Card-category { color: #333333; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.21429; margin-bottom: 0.125rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .Card-meta { color: #656565; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.21429; margin: 0 0 1rem 0; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .Card-description { color: #505050; font-size: 1.125rem; line-height: 1.77778; margin: 0; } .Card-description:not(:last-child) { margin-bottom: 1rem; } .Card-author { max-width: 6.0625rem; } /***************************** Variations */ .Card--background { background-color: #FFFFFF; padding: 1rem; } .Card--border { border: 1px solid #DAE1E8; } .Card--home { background-color: #FFFFFF; padding: 2rem; } .Card--home .Card-logo { margin-bottom: 1rem; } .Card--home .Card-title { font-size: 1.5625rem; line-height: 1.24; letter-spacing: -0.36px; } .Card--home ul { list-style-position: inside; } .Card--vibrant { padding-top: 1.5rem; padding-bottom: 3rem; padding-left: 1rem; padding-right: 1rem; } .Card--logo img { max-height: 5.3125rem; max-width: 12.5rem; } /***************************** Media Queries */ @media screen and (min-width: 31.25em) { .Card-title { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.5px; margin: 0 0 1.5rem 0; } .Card--vibrant { padding-left: 1.5rem; padding-right: 1.5rem; } .Card--home .Card-title { font-size: 1.9375rem; line-height: 1.09677; font-weight: 700; letter-spacing: -0.44px; } } @media screen and (min-width: 50em) { .Card--home { padding: 3.5rem 2rem; } .Card--home .Card-title { font-size: 2.6875rem; line-height: 1.16279; } } @media screen and (min-width: 60em) { .Card--home { padding: 3.5rem 10%; } } .Ch4DisplayCase { position: relative; background-color: #F2F7FB; box-shadow: 0 -2px 0 0 #DAE1E8, 0 2px 0 0 #DAE1E8; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/work/ch4/display-case/logo-background.png"); background-repeat: no-repeat; background-position: bottom right; } .Ch4DisplayCase .TextBlock { max-width: 38.75rem; } .Ch4DisplayCase-wrapper { margin: 0 auto; margin-top: 12rem; max-width: 65rem; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/work/ch4/display-case/dots.svg"); background-repeat: no-repeat; background-position: 100% -1px; padding-bottom: 1rem; } .Ch4DisplayCase-chimney { margin-top: -10rem; } @media screen and (min-width: 37.5em) { .Ch4DisplayCase-wrapper { margin-top: 13rem; margin-bottom: 3.625rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (min-width: 56.25em) { .Ch4DisplayCase-wrapper { margin-top: 16rem; } .Ch4DisplayCase-chimney { margin-top: -13rem; } } .Ch4Project { color: #FFFFFF; background-color: #7A0A98; } .Ch4Project-wrapper { max-width: 56.25em; margin: 0 auto; padding: 1.25rem; -webkit-font-smoothing: antialiased; } .Ch4Project-question { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; } .Ch4Project-title { margin-top: 1.5rem; max-width: 25rem; } .Ch4Project-description { max-width: 21.875em; } .Ch4Project-logo { display: block; margin-top: 2.25rem; width: 3.375rem; } @media screen and (min-width: 18.75em) { .Ch4Project { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/channel4-kyle-crop-sm.jpg"); background-position: 100% 50%; background-repeat: no-repeat; background-size: 55%; } .Ch4Project-wrapper { padding-right: 6rem; } .Ch4Project-content { max-width: 33.75rem; } } @media screen and (min-width: 31.25em) { .Ch4Project { background-size: 414px; } .Ch4Project-wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; } .Ch4Project-title { max-width: none; } } @media screen and (min-width: 34.375em) { .Ch4Project-title { letter-spacing: -0.09062rem; font-size: 4.5rem; line-height: 1.06944; } } @media screen and (min-width: 50em) { .Ch4Project { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/channel4-kyle-crop-med.jpg"); background-position: 100% 50%; background-size: 40rem; } .Ch4Project-wrapper { padding-top: 7.5rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; } } /**************************** Variations */ /* -- tall */ @media screen and (min-width: 67.5em) { .Ch4Project--tall { background-size: 52rem; } } /* --stage */ .Ch4Project--stage .Ch4Project-wrapper { padding-top: 0; } .Ch4Project--stage .Ch4Project-question { display: none; } @media screen and (min-width: 18.75em) { .Ch4Project--stage { background-position: 100% 9rem; } .Ch4Project--stage .Ch4Project-wrapper { padding-right: 1rem; } .Ch4Project--stage .Ch4Project-title { padding-right: 5rem; } .Ch4Project--stage .Ch4Project-description { margin-top: 2rem; } } @media screen and (min-width: 31.25em) { .Ch4Project--stage .Ch4Project-wrapper { padding-top: 1rem; padding-bottom: 2rem; } } @media screen and (min-width: 43.75em) { .Ch4Project--stage .Ch4Project-breadcrumb { padding: 0 1.5rem; } } @media screen and (min-width: 50em) { .Ch4Project--stage .Ch4Project-wrapper { padding: 2rem 1.5rem 2rem 1.5rem; } } @media screen and (min-width: 68.75em) { .Ch4Project--stage { background-position: 20vw 50%; background-size: 75rem; } } @media screen and (min-width: 87.5em) { .Ch4Project--stage { background-position: 35vw 50%; } } .CodeBlock { border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; } .CodeBlock code { font-family: 'Monaco', 'Consolas', 'Menlo', monospace; font-size: 0.75rem; } .ContactCard { color: #505050; background-color: #FFFFFF; margin-top: 1.5rem; font-size: 1rem; line-height: 1.75; max-width: 26.25em; -webkit-font-smoothing: antialiased; margin-bottom: 1.5rem; } @media screen and (min-width: 36.25em) { .ContactCard { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.0625rem; line-height: 1.76471; margin-top: 1.875rem; margin-bottom: 1.875rem; } .ContactCard-item { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .Contact-group { margin-top: -0.375rem; } } .EventCard { padding: 2rem 1.5rem; } .EventCard-context { color: #EA215A; font-size: 0.875rem; line-height: 1.21429; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; -webkit-font-smoothing: antialiased; } .EventCard-eventName { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; font-size: 1.875rem; line-height: 1.16667; margin-bottom: 1.25rem; } .EventCard-image { margin-bottom: 1rem; } .EventCard-section { margin-bottom: 1rem; } .EventCard-list { margin: 0; } .EventCard-listItem { display: inline-block; list-style: none; margin-right: 0.125rem; -webkit-font-smoothing: antialiased; } .EventCard-listItem:not(:last-child):after { content: '\00200b,\00a0'; margin-left: -.13em; } .EventCard--inverted * { color: #FFFFFF; } @media screen and (min-width: 53.125em) { .EventCard { padding: 2.75rem; } .EventCard-eventName { font-size: 1.875rem; line-height: 1.3; } .EventCard-image { margin-bottom: 2rem; } .EventCard-image + .EventCard-eventName { margin-top: -1.25rem; } } @media screen and (min-width: 62.5em) { .EventCard { padding: 4.625rem; } .EventCard-eventName { font-size: 2.5rem; line-height: 1.225; } } .EvoDisplayCase { position: relative; background-color: #EAE5D9; } .EvoDisplayCase .TextBlock { max-width: 38.75rem; } .EvoDisplayCase-wrapper { margin: 0 auto; margin-top: 6rem; max-width: 65rem; padding-bottom: 1rem; } .EvoDisplayCase-chimney { margin-top: -5rem; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (min-width: 37.5em) { .EvoDisplayCase-wrapper { margin-top: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .EvoDisplayCase-chimney { margin-top: -8rem; } } @media screen and (min-width: 56.25em) { .EvoDisplayCase-wrapper { margin-top: 18rem; padding-bottom: 4rem; } .EvoDisplayCase-chimney { margin-top: -16rem; max-width: 50rem; } .EvoDisplayCase .ImageBlock { margin-top: 1.25rem; margin-bottom: 1.25rem; } } .EvoProject { color: #FFFFFF; background-color: #000; } .EvoProject-wrapper { max-width: 56.25em; margin: 0 auto; padding: 1.25rem; -webkit-font-smoothing: antialiased; } .EvoProject-question { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; } .EvoProject-title { margin-top: 0.5rem; max-width: 25rem; } .EvoProject-description { max-width: 21.875em; } .EvoProject-logo { display: block; margin-top: 2.25rem; width: 3.375rem; } @media screen and (min-width: 18.75em) { .EvoProject { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/evo-kyle-crop-sm.jpg"); background-position: 100% 50%; background-repeat: no-repeat; background-size: 55%; } .EvoProject-wrapper { padding-right: 6rem; } .EvoProject-content { max-width: 33.75rem; } } @media screen and (min-width: 31.25em) { .EvoProject { background-size: 414px; } .EvoProject-wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; } .EvoProject-title { max-width: none; } } @media screen and (min-width: 34.375em) { .EvoProject-title { letter-spacing: -0.09062rem; font-size: 4.5rem; line-height: 1.06944; } } @media screen and (min-width: 50em) { .EvoProject { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/evo-kyle-crop-med.jpg"); background-position: 30vw 50%; background-size: 40rem; } .EvoProject-wrapper { padding-top: 6.25rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; } .EvoProject-logo { margin-top: 5.625rem; width: 5rem; } } /**************************** Variations */ /* --tall */ @media screen and (min-width: 67.5em) { .EvoProject--tall { background-position: 100% 50%; background-size: 56.25rem; } } /* --stage */ .EvoProject--stage .EvoProject-wrapper { padding-top: 0; } .EvoProject--stage .EvoProject-question { display: none; } @media screen and (min-width: 18.75em) { .EvoProject--stage { background-position: 100% 3rem; } .EvoProject--stage .EvoProject-wrapper { padding-right: 1rem; } .EvoProject--stage .EvoProject-title { padding-right: 5rem; } .EvoProject--stage .EvoProject-description { margin-top: 2rem; } } @media screen and (min-width: 31.25em) { .EvoProject--stage .EvoProject-wrapper { padding-top: 1rem; padding-bottom: 2rem; } } @media screen and (min-width: 43.75em) { .EvoProject--stage .EvoProject-breadcrumb { padding: 0 1.5rem; } } @media screen and (min-width: 50em) { .EvoProject--stage .EvoProject-wrapper { padding: 2rem 1.5rem 2rem 1.5rem; } } @media screen and (min-width: 68.75em) { .EvoProject--stage { background-position: 20vw 50%; background-size: 75rem; } } @media screen and (min-width: 87.5em) { .EvoProject--stage { background-position: 35vw 50%; } } .Extension { padding: 2rem 0 3rem 0; max-width: 65em; margin: 0 auto; position: relative; } .Extension-headline { text-align: center; margin-top: 4rem; margin-bottom: 4rem; } .Extension:before { display: block; content: ""; width: 4.4375rem; height: 4.4375rem; background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-lightbulb.svg") no-repeat center; position: absolute; top: -2rem; left: calc(50% - 35px); margin-bottom: 2rem; } .Extension--clock:before { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-clock.svg") no-repeat center; } .FeaturedCard { color: #333333; background-color: #FFFFFF; padding: 1rem; box-shadow: 0 8px 10px rgba(50, 50, 50, 0.3); } .FeaturedCard-title { margin: 0 0 1.125rem 0; } .FeaturedCard-category { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.21429; margin: 0.5rem 0 1rem 0; color: #656565; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .FeaturedCard-description { max-width: 38em; } .FeaturedCard-secondary { max-width: 6.25rem; } @media only screen and (min-width: 30em) { .FeaturedCard { padding: 1.5rem; } .FeaturedCard { display: -webkit-box; display: -ms-flexbox; display: flex; } .FeaturedCard-primary { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .FeaturedCard-secondary { -webkit-box-flex: 0; -ms-flex: 0 10rem; flex: 0 10rem; } } @media only screen and (min-width: 50em) { .FeaturedCard { padding: 5.3125rem; } .FeaturedCard-secondary { max-width: none; } } .Form { margin-top: 1.5rem; margin-bottom: 1.5rem; } .Form-end { margin-top: 1.5rem; margin-bottom: 1rem; text-align: center; display: block; } .FormUnit { margin-top: 1.375rem; margin-bottom: 1.125rem; } .FormUnit-label { -webkit-font-smoothing: antialiased; font-size: 1.0625rem; line-height: 1.47059; } .FormUnit-field { color: #333333; background-color: #FFFFFF; border: 0; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; -webkit-font-smoothing: antialiased; font-size: 0.875rem; padding: 0.75rem 0.625rem; border-radius: 0.3125rem; border: 0.125rem solid #DAE1E8; width: 100%; } .GreenDots { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/green-dots.svg") 80% -14rem no-repeat; padding-top: 1rem; } @media screen and (min-width: 50em) { .GreenDots { background-position-x: 70%; padding-top: 7.8125rem; } } .GreyDots { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/grey-dots-circle.svg") -28rem center no-repeat; } @media screen and (min-width: 100em) { .GreyDots { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/grey-dots-circle.svg") left center no-repeat; } } .HeaderImage { margin: 0 auto; display: block; width: 65em; } @media screen and (min-width: 700px) { .HeaderImage { margin-top: 1.5rem; margin-bottom: 1.5rem; } } .Hello { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/dots/texture_dots-circle-grey.png"); background-repeat: no-repeat; background-position: 100% 50%; background-color: #973B8A; background-size: 37.5rem; color: #FFFFFF; padding: 1rem; } .Hello-container { margin: 0 auto; max-width: 50rem; } .Hello-title { margin-bottom: 1.25rem; margin-top: 1rem; } .Hello-body a { color: #fff; } .Hello-image { max-width: 8.75rem; } .Hello-image figcaption { color: #FFFFFF; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.75rem; line-height: 1.25; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 1px; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 31.25rem) { .Hello { background-position: 120% -12.5rem; background-size: 30rem; padding: 2.375rem 2rem 4.5rem 2rem; } .Hello-body { margin-left: 2.375rem; } .Hello-image figcaption { font-size: 0.875rem; line-height: 1.07143; } .Hello-title { font-size: 2.1875rem; line-height: 1.14286; } } @media screen and (min-width: 42.5rem) { .Hello { background-position: 80% 50%; background-size: 38.75rem; padding: 3rem 2rem 3rem 2rem; } .Hello-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .Hello-image { -ms-flex-negative: 0; flex-shrink: 0; } .Hello-title { margin-top: 0; } } .Hello--plum { background-color: #973B8A; } .Hello--carribean-green { background-color: #00D494; } .Hello--sea-serpent-blue { background-color: #56CBE6; } .Hello--orange-yellow { background-color: #FFDA69; } .Hello--crayola-red { background-color: #EA215A; } .Hello--crayola-red .Hello-body a { border-bottom: #FFDA69 0.125rem solid; } .Hello--lapis-lazuli-blue { background-color: #1F6B9C; } .Hello--brandeis-blue { background-color: #006FF5; } .Icon:before { content: ''; width: 1rem; height: 1rem; background-repeat: no-repeat; display: inline-block; margin-right: 0.375rem; } .Icon--close:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/close.svg"); } .ImageBlock { padding: 0.5rem 1rem; display: table; margin: 0 auto; max-width: 100%; } .ImageBlock img { display: block; margin: 0 auto; } .ImageBlock-item { color: #656565; font-size: 0.8125rem; line-height: 1.23077; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; letter-spacing: 0.0625rem; margin-top: 0.5rem; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .ImageBlock--rightCaption .ImageBlock-item { text-align: right; } .ImageBlock--short { padding-bottom: 0; } .ImageBlock--first { padding-top: 1rem; } @media screen and (min-width: 31.25em) { .ImageBlock { padding-top: 2rem; padding-bottom: 2rem; } .ImageBlock--short { padding-bottom: 0; } .ImageBlock--first { padding-top: 1rem; } } .ImageGallery { max-width: 58.75em; margin: 1rem auto 4rem auto; overflow: hidden; } .ImageGallery-image { float: left; padding: 0.4375rem; } @media screen and (min-width: 18.75em) { .ImageGallery-group { float: left; } .ImageGallery-group--wide .ImageGallery-image { width: 100%; } .ImageGallery-group--pair .ImageGallery-image { width: 50%; } .ImageGallery-image--quadSmall { width: 33.3%; } .ImageGallery-image--quadWide { width: 66.6%; } } @media only screen and (min-width: 42.5em) { .ImageGallery { max-width: 45em; } .ImageGallery-group { width: 50%; } } @media only screen and (min-width: 61.25em) { .ImageGallery { max-width: 58.75em; } .ImageGallery-group--quad { max-height: none; } } @media only screen and (min-width: 75em) { .ImageGallery { max-width: 65em; } .ImageGallery-image { padding: 0.625rem; } .ImageGallery-group--wide .ImageGallery-image { height: 308px; } } .IndexCard { display: inline-block; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; border: 1px solid #DAE1E8; } .IndexCard-details { background-color: #FFFFFF; border-top: 1px solid #DAE1E8; padding: 1rem; } .IndexCard-image { display: block; max-width: 100%; min-height: 3.125rem; } .IndexCard-name { font-size: 1.375rem; line-height: 0.77273; color: #333333; font-weight: 700; line-height: 1; letter-spacing: -0.3px; margin: 0; } .IndexCard-info { color: #656565; display: block; font-size: 0.75rem; line-height: 1.16667; letter-spacing: 0.0625rem; margin-top: 0.5rem; text-transform: uppercase; } .IndexCard--profile { border: none; } .IndexCard--profile .IndexCard-details { border: none; display: block; text-transform: uppercase; } .IndexCard--profile .IndexCard-name { color: #656565; font-size: 0.875rem; line-height: 1; letter-spacing: 0.0625rem; text-align: center; } .InfoBlock { list-style: none; margin-bottom: 1.5rem; } .InfoBlock-link { border-bottom: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; line-height: 1.5rem; } .InfoBlock-image { -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; flex-basis: auto; margin-right: 1rem; margin-bottom: 1.5rem; } .InfoBlock-group { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .InfoBlock-title { margin-top: 0; margin-bottom: 0.25rem; color: #505050; font-size: 1.0625rem; } .InfoBlock-sub { text-transform: uppercase; font-size: 0.875rem; color: #ADADAD; letter-spacing: 1px; } .InfoList { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: bold; -webkit-font-smoothing: antialiased; } .InfoList > * { display: inline; } .InfoList-term:not([class*="InfoList-term--"]):after { content: ':'; margin-right: .3em; } .InfoList-term[class*="InfoList-term--"] + .InfoList-description:before { display: inline-block; content: ''; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; width: 1.25em; height: 1.25em; margin-right: .3em; margin-bottom: -.3em; } .InfoList-term--date + .InfoList-description:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-calendar.svg"); } .InfoList-term--location + .InfoList-description:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-map-pin.svg"); } .InfoList-description { margin-left: 0px; margin-right: 1em; display: inline-block; } .InfoList--inverted * { color: #FFFFFF; } .InfoList--inverted .InfoList-term[class*="InfoList-term--"] + .InfoList-description:before { -webkit-filter: brightness(200%) saturate(0%) opacity(70%); filter: brightness(200%) saturate(0%) opacity(70%); } .InfoSection { padding: 0.5rem 1rem; } .InfoSection > *:first-child { margin-top: 0; } .InfoSection--small { font-size: 0.875rem; } .InfoSection--small .InfoSection-heading { font-size: 1em; text-transform: uppercase; margin-bottom: .5em; } @media screen and (min-width: 31.25em) { .InfoSection { padding-top: 1rem; padding-bottom: 1rem; } } .InputGroup { margin-bottom: 0.25rem; max-width: 28rem; } .InputGroup-field { color: #333333; background-color: #FFFFFF; border: 1px solid #DAE1E8; border-radius: 0.125rem; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-size: 0.875rem; padding: 0.625rem 0.5rem; width: 100%; -webkit-font-smoothing: antialiased; } .InputGroup-submit { background-color: #973B8A; border-radius: 0.125rem; color: #FFFFFF; display: block; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; font-size: 0.875rem; margin-top: 0.5rem; padding: 0.625rem 0.5rem; text-align: left; width: 100%; -webkit-font-smoothing: antialiased; } .InputGroup-label { display: block; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 0.625rem; -webkit-font-smoothing: antialiased; } .InputGroup-microcopy { text-transform: uppercase; font-size: 0.8125rem; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; } @media screen and (min-width: 26.25em) { .InputGroup-field { font-size: 1rem; } .InputGroup-submit { padding: 0.75rem 1.125rem; font-size: 1.0625rem; } .InputGroup-combo { display: -webkit-box; display: -ms-flexbox; display: flex; } .InputGroup-combo .InputGroup-field { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.3125rem; border-bottom-left-radius: 0.3125rem; width: 50%; } .InputGroup-combo .InputGroup-submit { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.3125rem; border-bottom-right-radius: 0.3125rem; width: auto; margin-top: 0; } } .InputGroup--prominent { margin: 0 auto; } .InputGroup--prominent .InputGroup-submit { background-color: #FFDA69; color: #333333; } .InputGroup--highlight { margin: 2rem auto; max-width: 51.875rem; } .InputGroup--highlight .InputGroup-submit { background-color: #EA215A; } .InputGroup--highlight .InputGroup-label { text-align: center; } .InputGroup--highlight .InputGroup-microcopy { text-align: center; display: inline-block; width: 100%; } .InputGroup--highlight .InputGroup-microcopy > a[href] { border-bottom: none; } @media screen and (min-width: 26.25em) { .InputGroup--highlight .InputGroup-field { padding: 0.75rem 0.75rem; } .InputGroup--highlight .InputGroup-submit { padding: 0.875rem 1.5rem; } } .Intro { margin: 0 auto; max-width: 56.25em; padding: 1.5rem 1rem; } .Intro-text { font-size: 2.4375rem; line-height: 1.07692; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin: 0; padding: 0; max-width: 42rem; } @media screen and (min-width: 37.5em) { .Intro { padding: 4rem 4%; } } .Jobs { margin-top: 0.5rem; max-width: 52.5em; margin: 0 auto; padding: 2.5rem 1.25rem; } @media screen and (min-width: 700px) { .Jobs { padding-top: 3.75rem; padding-bottom: 3.75rem; } .Jobs-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .Jobs-section { padding: 1rem 0; } .Jobs-section--side { padding-right: 3rem; width: 28%; } .Jobs-section--main { width: 75%; } } .Lead { font-size: 1.125rem; line-height: 1.55556; padding: 1.25rem 1.5rem 1rem 1.5rem; } .Lead--wrapper { color: #333333; background-color: #FFFFFF; border: 0.0625rem solid #E2EBF1; } .Lead--wrapper a { color: #006FF5; } .Lead--wrapper a:hover, .Lead--wrapper a:focus, .Lead--wrapper a:active { color: #EA215A; } .Lead--inverted { color: #FFFFFF; } .Lead--inverted a { color: #FFFFFF; } .Lead--inverted a:hover, .Lead--inverted a:focus, .Lead--inverted a:active { color: #DAE1E8; } @media screen and (min-width: 32.5em) { .Lead { font-size: 1.25rem; line-height: 1.7; } .Lead--wrapper { padding: 2rem 2rem 2.375rem 2rem; margin-bottom: 0.5rem; } .Lead-content { width: 95%; } } @media screen and (min-width: 61.5625em) { .Lead--wrapper { padding: 2.625rem 4rem 2.375rem 4rem; } .Lead { font-size: 1.4375rem; line-height: 1.56522; } } .List { display: inline-block; padding-left: 0; margin: 0.5rem 0; } .List-item { font-weight: 700; list-style: none; margin-bottom: 0.5rem; -webkit-font-smoothing: antialiased; } .List--styled { list-style: none; } .List--styled svg { display: inline-block; margin-right: 0.5rem; } .List--inline .List-item { display: inline-block; } @media screen and (min-height: 43.75em) { .List--tall .List-item { margin-top: 0.625rem; margin-bottom: 0.625rem; } } .Logo { border-bottom: none; display: inline-block; } .Logo--inverted .Logo-text { fill: #FFFFFF; } .Logo--plum .Logo-streak { fill: #973B8A; } .Logo--carribean-green .Logo-streak { fill: #00D494; } .Logo--sea-serpent-blue .Logo-streak { fill: #56CBE6; } .Logo--orange-yellow .Logo-streak { fill: #FFDA69; } .Logo--crayola-red .Logo-streak { fill: #EA215A; } .Logo--lapis-lazuli-blue .Logo-streak { fill: #1F6B9C; } .Logo--brandeis-blue .Logo-streak { fill: #006FF5; } @media only screen and (max-width: 21.25em) { .Logo svg { width: 8.125rem; } } .Map { width: 100%; } .Masthead-primary { padding: 1rem 1rem 1.5rem 1rem; position: relative; z-index: 1; } .Masthead-primary .Heading { margin: 0; } .Masthead-primary .Masthead-sub--contextLarge { font-size: 1.25rem; line-height: 1.25; } .Masthead-primary .Masthead-sub { margin-top: 1rem; } .Masthead-secondary { padding: 1rem 1rem 0 1rem; position: relative; } .Masthead-third { padding: 0 1rem 1rem 1rem; } .Masthead--full { padding: 1rem 1rem 1.5rem 1rem; min-height: calc(100vh - 2.5rem); } .Masthead--chimney { padding-bottom: 3.75rem; } @media screen and (min-width: 50em) { .Masthead--chimney { padding-bottom: 6.25rem; } } @media screen and (min-width: 53.125em) { .Masthead-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: auto; max-width: 58.125em; padding: 1.875rem 1.25rem 2.5rem 1.25rem; } .Masthead-primary { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 85%; } .Masthead-primary .Masthead-sub--contextLarge { font-size: 1.75rem; line-height: 0.96429; } .Masthead-secondary { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 15%; } .Masthead-lead { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .Masthead-description { max-width: 33.125rem; } .Masthead-descriptionSecondary { -ms-flex-preferred-size: 48%; flex-basis: 48%; font-size: 1rem; padding: 0.5em 2em; } .Masthead--arrows .Masthead-secondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; } .Masthead--arrows a[rel="next"] { margin-right: 0; } .Masthead--chimney { padding-bottom: 6.25rem; } .Masthead--combo .Masthead-primary { width: 55%; } .Masthead--combo .Masthead-secondary { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; text-align: right; width: 15%; padding: 2.1875rem 0 0 0; } .Masthead--combo .Masthead-third { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 30%; padding-top: 2.1875rem; } .Masthead--combo .Masthead-third .Heading--context { margin: 0; } } @media screen and (min-height: 55em) { .Masthead--full { min-height: calc(70vh - 24px - 16px); } } .MegaLink { position: relative; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; -webkit-font-smoothing: antialiased; } .MegaLink--inverted { color: #FFFFFF; border-color: #FFFFFF; } .MegaLink--super { font-size: 1.375rem; line-height: 1.22727; } .MegaLink--button { color: #006FF5; border-bottom: #EA215A 0.125rem solid; font-weight: 700; padding-left: 0; background: transparent; } .MegaLink--inverted { color: #FFFFFF; } .MegaLink--inverted:hover, .MegaLink--inverted:focus, .MegaLink--inverted:active { color: #FFFFFF; } .MegaLink--block { border: 1px solid transparent; font-size: 1.25rem; line-height: 1.2; text-align: center; padding: 1rem 2rem; display: block; background-color: #EA215A; color: #FFFFFF; } .MegaLink--block:hover, .MegaLink--block:focus, .MegaLink--block:active { color: #FFFFFF; } .MegaLink--block.MegaLink--inverted { background-color: rgba(255, 255, 255, 0.1); } .MegaLink--block.MegaLink--inverted:hover, .MegaLink--block.MegaLink--inverted:focus { background-color: rgba(255, 255, 255, 0.15); } .Menu-item { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 1rem; } .Menu-item--current { color: #656565; border-bottom: none; } .Metadata { font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; margin-top: 0.5rem; margin: 0.5rem 1rem 1.5rem 0; } .Metadata-heading { font-size: 0.8125rem; line-height: 1.23077; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; color: #505050; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; } .Metadata-description { font-size: 0.875rem; line-height: 1.57143; color: #656565; margin: 0; } .Nextprev-link { border-bottom: none; display: inline-block; margin-right: 0.625rem; } .Nextprev-link:hover, .Nextprev-link:focus, .Nextprev-link:active { opacity: 0.7; } .OffCanvas { background-color: #00D494; height: 100vh; padding: 1rem; width: 100%; z-index: 20; } .OffCanvas-header { text-align: right; } .OffCanvas-close { display: none; background-color: transparent; color: #FFFFFF; font-size: 1.125rem; line-height: 1.5; font-weight: 700; text-transform: uppercase; } .OffCanvas-listItem { list-style: none; } .OffCanvas-link { border: none; color: #FFFFFF; display: block; font-size: 2.5rem; line-height: 1.175; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 800; letter-spacing: -0.58px; padding: 0.125em 1rem; text-align: center; -webkit-font-smoothing: antialiased; } .OffCanvas-link:hover, .OffCanvas-link:focus, .OffCanvas-link:active { color: #FFFFFF; } @media screen and (max-height: 25em) { .OffCanvas-list { margin-top: 0; } .OffCanvas-link { font-size: 9vh; } } @media screen and (min-width: 31.25em) and (min-height: 31.25em) { .OffCanvas-close { font-size: 1.75rem; line-height: 1.17857; } .OffCanvas-link { font-size: 4.25rem; line-height: 1.10294; } } .PageLead-secondary { padding: 0.5em 1em; } @media screen and (min-width: 42.5em) { .PageLead { padding: 2rem 1rem 0 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 73.75em; margin-left: auto; margin-right: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .PageLead-primary { -ms-flex-preferred-size: 52%; flex-basis: 52%; } .PageLead-secondary { -ms-flex-preferred-size: 48%; flex-basis: 48%; font-size: 1rem; padding: 0.5em 2em; } .PageLead-secondary .Heading { margin-bottom: 0; } .PageLead-primary { margin-bottom: -1.5rem; position: relative; z-index: 3; } .PageLead--pinch .PageLead-primary { margin-bottom: -6.25rem; } .PageLead--presents { max-width: 68.375rem; } .PageLead--presents .PageLead-primary { -webkit-box-flex: 1; -ms-flex: 1 0 60%; flex: 1 0 60%; } .PageLead--presents .PageLead-secondary { -webkit-box-flex: 1; -ms-flex: 1 0 40%; flex: 1 0 40%; } } .PageLead--image .PageLead-primary { width: auto; -ms-flex-preferred-size: auto; flex-basis: auto; margin: -3rem auto 1.5rem; } .PageLead-image { border: #ADADAD solid 0.5px; } @media screen and (min-width: 43.75em) { .PageLead--image .PageLead-primary { margin-top: -5.625rem; margin-bottom: 0; } } @media screen and (min-width: 50em) { .PageLead { padding: 1rem 1rem 0 1rem; } } @media screen and (min-width: 75em) { .PageLead { padding: 0; max-width: 65em; } } .Pagination { overflow: hidden; margin: 0 auto; max-width: 65em; padding: 0 1.5rem 3rem 1.5rem; } .Pagination-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin-top: 0.375rem; margin-bottom: 0.375rem; padding: 0; width: 100%; } .Pagination-item { font-family: "Gilroy", "Helvetica Neue", sans-serif; font-weight: 700; color: #ADADAD; border-bottom: none; font-size: 1.25rem; padding: 0.25rem 0.625rem; margin-left: 0.375rem; margin-right: 0.375rem; } .Pagination-item--current { color: #505050; } .Pagination-move { position: relative; } .Pagination-move--prev { padding-left: 1.5rem; } .Pagination-move--next { padding-right: 1.5rem; } .Pagination-move--next:after { content: ''; position: absolute; top: 0.5rem; right: 0; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-arrow-right.svg"); background-repeat: no-repeat; width: 1rem; height: 0.75rem; margin-right: 0; } .Pagination-move--prev:before { content: ''; position: absolute; top: 0.5rem; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-arrow-left.svg"); background-repeat: no-repeat; width: 1rem; height: 0.75rem; margin-left: -1.5rem; } @media screen and (min-width: 37.5rem) { .Pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .Pagination-list { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .Pagination-move { font-size: 1.875rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; } .Pagination-item { font-size: 1.875rem; } } .Panel[hidden] { display: none; } .Peek { color: #f4f4f4; font-size: 20vw; line-height: 1; margin: 0; padding: 0; position: absolute; left: 5%; z-index: -1; } @media screen and (min-width: 50em) { .Peek { left: 8%; } } @media screen and (min-width: 57.5em) { .Peek { font-size: 11.875rem; } } .PenguinDisplayCase { position: relative; background-color: #FCF9F2; box-shadow: 0 -2px 0 0 #E5DECF, 0 2px 0 0 #E5DECF; background-repeat: no-repeat; background-position: bottom right; } .PenguinDisplayCase .TextBlock { max-width: 38.75rem; } .PenguinDisplayCase-wrapper { margin: 0 auto; margin-top: 18rem; max-width: 53rem; background-repeat: no-repeat; background-position: 100% -1px; padding-bottom: 1rem; } .PenguinDisplayCase-chimney { margin-top: -17rem; margin-bottom: 0.625rem; } .PenguinDisplayFont-wrapper { display: table; width: 100%; } .PenguinDisplayFont-wrapper:after { content: ''; } .PenguinDisplayFont { padding: 1.25rem; background-color: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25); border-radius: 10px; width: 47%; display: inline-block; float: left; margin-bottom: 1.25rem; margin-top: 1.25rem; } .PenguinDisplayFont img { display: block; margin-left: auto; margin-right: auto; margin-top: 0.625rem; max-height: 6.25rem; } .PenguinDisplayFont--left { margin-right: 1.5%; } .PenguinDisplayFont--right { margin-left: 1.5%; } .PenguinDisplayCase-example1 { text-align: center; } .PenguinDisplayCase-example2 { position: relative; } @media screen and (min-width: 37.5em) { .PenguinDisplayCase-wrapper { margin-top: 20rem; padding-bottom: 2.5rem; } } .PenguinProject { color: #FFFFFF; background-color: #FF6600; } .PenguinProject-wrapper { max-width: 56.25em; margin: 0 auto; padding: 1.25rem; -webkit-font-smoothing: antialiased; } .PenguinProject-question { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; } .PenguinProject-title { margin-top: 0.5rem; max-width: 25rem; } .PenguinProject-description { max-width: 21.875em; } .PenguinProject-logo { display: block; margin-top: 2.25rem; width: 2.875rem; } @media screen and (min-width: 18.75em) { .PenguinProject { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/penguin-kyle-crop-sm.jpg"); background-position: 100% 50%; background-repeat: no-repeat; background-size: 20rem; } .PenguinProject-wrapper { padding-right: 6rem; } .PenguinProject-content { max-width: 33.75rem; } } @media screen and (min-width: 31.25em) { .PenguinProject { background-size: 28.125rem; } .PenguinProject-wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; } .PenguinProject-title { max-width: none; } } @media screen and (min-width: 34.375em) { .PenguinProject-title { font-size: 4.5rem; line-height: 1.06944; letter-spacing: -0.09062rem; } } @media screen and (min-width: 50em) { .PenguinProject { background-image: url("https://web-archive.nli.org.il/National_Library/20170827070107oe_/https://clearleft-v5.s3.amazonaws.com/penguin-kyle-crop-med.jpg"); background-position: calc(100% + 3rem) 50%; background-size: 50rem; } .PenguinProject-wrapper { padding-top: 6.25rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; } .PenguinProject-logo { margin-top: 5.625rem; width: 4rem; } } /**************************** Variations */ /* --tall */ @media screen and (min-width: 67.5em) { .PenguinProject--tall { background-position: 100% 50%; background-size: 62.5rem; } } /* --stage */ .PenguinProject--stage .PenguinProject-wrapper { padding-top: 0; } .PenguinProject--stage .PenguinProject-question { display: none; } @media screen and (min-width: 18.75em) { .PenguinProject--stage { background-position: 100% 3rem; background-size: 17.5rem; } .PenguinProject--stage .PenguinProject-wrapper { padding-right: 1rem; } .PenguinProject--stage .PenguinProject-title { padding-right: 5rem; } .PenguinProject--stage .PenguinProject-description { margin-top: 2rem; } } @media screen and (min-width: 31.25em) { .PenguinProject--stage { background-size: 60%; } .PenguinProject--stage .PenguinProject-wrapper { padding-top: 1rem; padding-bottom: 2rem; } } @media screen and (min-width: 43.75em) { .PenguinProject--stage .PenguinProject-breadcrumb { padding: 0 1.5rem; } } @media screen and (min-width: 50em) { .PenguinProject--stage { background-size: 80%; } .PenguinProject--stage .PenguinProject-wrapper { padding: 2rem 1.5rem 2rem 1.5rem; } } @media screen and (min-width: 67.5em) { .PenguinProject--stage { background-position: 11vw 50%; background-size: 87.5rem; } } @media screen and (min-width: 87.5em) { .PenguinProject--stage { background-position: 24vw 50%; } } .Pill { color: #FFFFFF; background-color: #006FF5; border-radius: 1.125rem; padding: 0.125rem 0.5rem; margin-right: 0.25rem; margin-bottom: 0.25rem; font-weight: 700; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; display: inline-block; white-space: nowrap; } .PrimaryNavigation-menu { display: none; color: #333; background-color: transparent; border: 2px solid #333; border-radius: 1.5rem; font-size: 0.875rem; line-height: 1.14286; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; padding: 0.375rem 0.75rem; text-decoration: none; } .PrimaryNavigation-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .PrimaryNavigation-listItem { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .PrimaryNavigation-link { padding: 0.5rem; color: #333; font-size: 0.9375rem; line-height: 1.2; font-weight: 700; border-bottom: none; } .PrimaryNavigation-link:hover, .PrimaryNavigation-link:active, .PrimaryNavigation-link:focus { color: #d8144c; } .PrimaryNavigation-link.is-active::after { content: ''; display: block; width: 100%; height: 5px; border-radius: 5px; background-color: #00D494; } .PrimaryNavigation--inverted { color: #FFFFFF; } .PrimaryNavigation--inverted .PrimaryNavigation-menu { border-color: #FFFFFF; color: #FFFFFF; } .PrimaryNavigation--inverted .PrimaryNavigation-link { color: #FFFFFF; } .PrimaryNavigation--inverted .PrimaryNavigation-link:hover, .PrimaryNavigation--inverted .PrimaryNavigation-link:active, .PrimaryNavigation--inverted .PrimaryNavigation-link:focus { color: #FFFFFF; } /*Streak colours*/ .PrimaryNavigation--plum .PrimaryNavigation-link.is-active::after { background-color: #973B8A; } .PrimaryNavigation--carribean-green .PrimaryNavigation-link.is-active::after { background-color: #00D494; } .PrimaryNavigation--sea-serpent-blue .PrimaryNavigation-link.is-active::after { background-color: #56CBE6; } .PrimaryNavigation--orange-yellow .PrimaryNavigation-link.is-active::after { background-color: #FFDA69; } .PrimaryNavigation--crayola-red .PrimaryNavigation-link.is-active::after { background-color: #EA215A; } .PrimaryNavigation--lapis-lazuli-blue .PrimaryNavigation-link.is-active::after { background-color: #1F6B9C; } .PrimaryNavigation--brandeis-blue .PrimaryNavigation-link.is-active::after { background-color: #006FF5; } @media only screen and (min-width: 17.5em) and (max-width: 44.9375em) { .PrimaryNavigation-menu { position: absolute; right: 1rem; top: 1.5rem; display: block; } .PrimaryNavigation-list { display: none; } } @media only screen and (min-width: 50em) { .PrimaryNavigation-link { padding: 0.5rem 0.25rem; margin-right: 1rem; margin-left: 1rem; } } .OffCanvas { opacity: 0; transition: opacity 0.2s ease; } .OffCanvas.isActive { display: block; opacity: 1; } .Propositions { max-width: 61.25rem; margin-left: auto; margin-right: auto; } .Proposition { padding: 1rem; } .Proposition--bgGreen .Proposition-primary { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/green-diagonal-streak.svg") 50% 100% no-repeat; padding-bottom: 2rem; } .Proposition--bgPurple .Proposition-primary { background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/purple-diagonal-streak.svg") 50% 100% no-repeat; padding-bottom: 2rem; } .Proposition-title { margin: 0 0 2rem 0; } .Proposition-primary { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .Proposition-secondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .Proposition-list { -webkit-column-count: 2; column-count: 2; list-style-type: none; padding: 0; } .Proposition-listItem { padding: 1rem; } .Proposition:nth-child(even) .Proposition-secondary { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .Proposition:nth-child(even) .Proposition-primary { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media screen and (min-width: 43.75em) { .Proposition { margin-bottom: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 55em) { .Proposition-secondary, .Proposition-primary { padding: 1rem; } } .Quote { max-width: 42.5rem; position: relative; margin: 2.5rem auto 1.25rem auto; padding: 1rem; } .Quote:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/quote-open.svg"); background-repeat: no-repeat; content: ' '; width: 3.75rem; height: 2.8125rem; display: block; position: absolute; top: -1rem; background-size: 65%; } .Quote-citation { text-transform: uppercase; color: #333333; font-size: 0.8125rem; line-height: 1.23077; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; letter-spacing: 0.0625rem; margin-top: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .Quote-avatar { border: 0.125rem solid #1E6B9C; margin-right: 1rem; } .Quote-job { display: block; text-indent: 0.0625rem; margin-top: 0.25rem; color: #656565; } .Quote-author { display: inline-block; margin-top: 0.5rem; } .Quote-author > * { display: block; } @media screen and (min-width: 17.5em) { .Quote-citation { display: -webkit-box; display: -ms-flexbox; display: flex; } .Quote-author { margin-top: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media screen and (min-width: 31.25em) { .Quote { margin-top: 5rem; padding-bottom: 1.5625rem; padding-top: 0.625rem; } .Quote:before { top: -3rem; background-size: 100%; } } .Quote--event { margin: 0; padding: 2em 0 1em 0; } .Quote--event:before { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/quote-bg.svg"); width: 5.875rem; height: 5.125rem; top: 0px; } .Quote--event .Quote-avatar { border-radius: 50%; border: none; } .Quote--event .Quote-authorrole { color: #d8144c; } .Scene { margin: 0 auto; padding: 1rem; max-width: 47.5em; } .Scene-heading { margin-top: 0; } .Scene--basic { padding-bottom: 0; } .Scene--basic .Scene-heading { margin-top: 0; } @media screen and (min-width: 31.25em) { .Scene--basic { margin-bottom: -1.5625rem; } } @media screen and (min-width: 43.75em) { .Scene { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 3.375rem; padding-bottom: 2rem; } .Scene-heading { letter-spacing: -0.04rem; margin-bottom: 1.875rem; margin-top: 0.9375rem; } .Scene-main { padding-right: 1.25rem; width: 66%; } .Scene-side { padding-left: 1.25rem; width: 34%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media screen and (min-width: 50em) { .Scene { max-width: 45em; } .Scene--basic { max-width: 36em; padding-left: 4.375rem; padding-bottom: 0; } } @media screen and (min-width: 80.625em) { .Scene { max-width: 56em; padding-left: 9rem; padding-bottom: 2.5rem; } .Scene-heading { margin-left: -3.25rem; } .Scene--basic { max-width: 63.5em; padding-left: 18.75rem; padding-bottom: 0; } .Scene--basic .Scene-heading { margin-left: 0; } } .Selector-trigger { color: #ADADAD; background-color: transparent; border-bottom: none; } .Selector-trigger:hover, .Selector-trigger:focus, .Selector-trigger:active { color: #656565; } .Selector-trigger::after { content: ''; display: inline-block; margin-left: 1.3125rem; max-width: 1.3125rem; width: 1em; height: 1em; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-select-down.svg"); background-repeat: no-repeat; background-position: 0 75%; } .Selector-trigger[aria-expanded="true"]::after { background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-select-up.svg"); } .Selector-target { border-radius: 0.3125rem; margin: 1rem 0 0 0; } .Selector-list { list-style: none; padding: .5em 0; margin: 0; } .Selector-listLink { font-size: 1.875rem; line-height: 1.33333; letter-spacing: -0.58px; border-bottom: none; color: #333333; } .Selector-listLink:hover, .Selector-listLink:active, .Selector-listLink:focus { color: #656565; } /* Positioning and display styles should only be applied when JavaScript is available */ .hasJS .Selector { position: relative; } .hasJS .Selector-target { position: absolute; } .hasJS .Selector-target[aria-hidden="true"] { display: none; } .hasJS .Selector-target[aria-hidden="false"] { display: block; } @media screen and (min-width: 31.25em) { .Selector-target { box-shadow: 0 2px 10px rgba(20, 20, 20, 0.6); } .Selector-listLink { font-size: 3rem; line-height: 1.25; } } .Showcase--tall { padding-bottom: 2rem; } .Showcase-title { margin-top: 1.875rem; } .Showcase-wrapper { max-width: 56.25rem; margin: 0 auto; padding: 1rem 1rem 0 1rem; -webkit-font-smoothing: antialiased; } .Showcase-primary { max-width: 38.75rem; } .Showcase-description { max-width: 33.125rem; } .Showcase-image { text-align: center; margin: 3rem auto 0 auto; display: block; } .Showcase-logo { margin-top: 2rem; margin-bottom: 2rem; } .Showcase--blue { color: #FFFFFF; background-color: #1F6B9C; } .Showcase--blue .Showcase-title { color: #FFFFFF; } .Signpost { padding: 1rem; } .Signpost-link { border-bottom: none; display: block; font-size: 1.125rem; line-height: 1.27778; } .Signpost-link--prev:before { content: ''; display: inline-block; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-arrow-left.svg"); background-repeat: no-repeat; width: 1rem; height: 0.75rem; margin-right: 1rem; } .Signpost-link--next:after { content: ''; display: inline-block; background-image: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/icons/icon-arrow-right.svg"); background-repeat: no-repeat; width: 1rem; height: 0.75rem; margin-left: 1rem; } .Signpost-item { margin-bottom: 1rem; } @media screen and (min-width: 37.5rem) { .Signpost { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 65em; margin: 0 auto; padding: 3rem 1rem; } .Signpost-item { margin-bottom: 0; } .Signpost-link { font-size: 1.375rem; line-height: 1.22727; } .Signpost-link--next { text-align: right; } .Signpost-prevContext { margin-left: 2rem; } .Signpost-nextContext { margin-right: 2rem; } } .SiteFooter { background-color: #000; color: #FFFFFF; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin-left: auto; margin-right: auto; padding-top: 1.5rem; } .SiteFooter .Heading { color: #FFFFFF; } .SiteFooter-container { margin: 0 auto; max-width: 65em; } .SiteFooter-navigationLinks { list-style: none; margin: 0; padding: 0; } .SiteFooter-navigationLink { border-bottom: none; display: inline-block; font-size: 0.875rem; line-height: 1.14286; font-weight: 700; -webkit-font-smoothing: antialiased; padding-bottom: 0.5rem; color: #FFFFFF; } .SiteFooter-small { font-size: 0.625rem; line-height: 1.7; text-transform: uppercase; } .SiteFooter-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 1rem 0 0 0; padding: 0; } .SiteFooter-icon { list-style: none; padding: 0.3125rem; margin-bottom: 0.5rem; margin-right: 0.5rem; } .SiteFooter-iconLink { border-bottom: none; display: block; } .SiteFooter-iconLink img { display: inline-block; } @media only screen and (min-width: 21.875em) { .SiteFooter-navigationLinks { -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 34.375em) { .SiteFooter-navigationLinks { -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 42.5em) { .SiteFooter-navigationLinks { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; } } @media only screen and (min-width: 55em) { .SiteFooter-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; } .SiteFooter-navigationLinks { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .SiteFooter-small { margin-top: 2rem; } .SiteFooter-icons { margin: 0; max-width: 6.25rem; } .SiteFooter-icon { margin-bottom: 0; } } .SiteHeader { position: relative; padding: 0.5rem 0.5rem; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; } @media only screen and (min-width: 17.5em) { .SiteHeader { padding: 1rem 1rem; } } @media only screen and (min-width: 45em) { .SiteHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 65em; margin-left: auto; margin-right: auto; padding: 1.5rem 1rem; } } .SocialMedia { padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; margin-top: 0.5rem; } .SocialMedia-item { list-style: none; margin-right: 1rem; } .SocialMedia-link { border: none; } .SocialMedia--dark .SocialMedia-link { color: #FFFFFF; background-color: #006FF5; border-radius: 0.25rem; width: 1.6875rem; height: 1.6875rem; padding: 0.125rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .SpeechBubble { background-color: #fff; border: 0.0625rem solid #ADADAD; padding: 1rem; position: relative; text-align: left; } .SpeechBubble:after { content: ''; background: url("/National_Library/20170827070107oe_/https://clearleft.com/assets/img/quote-triangle.svg") 0 0 no-repeat; bottom: -0.6875rem; left: 1rem; display: block; position: absolute; height: 0.6875rem; width: 0.5625rem; } .Splash { margin: 0 auto; max-width: 73.75rem; padding: 1rem; } .Splash-header { font-size: 3rem; line-height: 1.08333; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 800; letter-spacing: -1.04px; margin: 0; -webkit-font-smoothing: antialiased; } .Splash-subHeader { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; } .Splash-subHeader a { font-weight: 800; border-bottom: 0.125rem solid #FFDA69; } @media only screen and (min-width: 17.5em) { .Splash { padding: 3rem 1rem; } } @media only screen and (min-width: 40.625em) { .Splash-header { font-size: calc( 54px + ( 90 - 68 ) * ( (100vw - 300px) / ( 1200 - 300) )); } } @media only screen and (min-width: 56.875em) { .Splash { padding: 8rem 10% 6rem 2%; } .Splash-header { font-size: 5.625rem; line-height: 1.04444; } } .Stat { text-align: center; padding: 0; margin: 0; } .Stat-heading { margin-bottom: .1em; color: #EA215A; } @media screen and (min-width: 36.25em) { .Stat-heading:not(:last-child) { margin-bottom: .1em; } } .Stats { margin: 2rem 1rem; text-align: center; } .Stats > * { display: inline-block; margin-right: 3rem; margin-bottom: 1rem; } .Stats > *:last-child { margin-right: 0; } @supports ((display: -ms-grid) or (display: grid)) { .Stats { display: -ms-grid; display: grid; grid-gap: 10px; -ms-grid-columns: (minmax(150px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .Stats > *, .Stats > *:last-child { margin-right: 0; margin-bottom: 0; } } .Tab { border: 1px solid #006FF5; font-size: 1.25rem; line-height: 1; padding: .75em 1em; font-weight: normal; display: inline-block; } .Tab:hover { border-color: #EA215A; outline: none; } .Tab[aria-selected], .Tab:focus, .Tab[aria-selected]:focus { outline: none; color: #FFFFFF; background-color: #006FF5; border-color: transparent; } .Tab[aria-selected]:hover { background-color: #EA215A; border-color: transparent; color: #FFFFFF; } @media only screen and (max-width: 31.25em) { .Tablist .Tab { display: block; } } @media only screen and (min-width: 31.25em) { .Tab { text-align: center; } } .Tablist { list-style: none; } .Tablist li { display: block; } @media only screen and (min-width: 31.25em) { .Tablist { display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .Tablist li { display: -webkit-box; display: -ms-flexbox; display: flex; } } .TextBlock { padding: 0 1rem; margin: 0 auto; max-width: 32em; } .TextBlock--wide { max-width: 42em; } .TextBlock-author { max-width: 7.5rem; } .TextBlock--author { padding-bottom: 0; } @media screen and (min-width: 22.5em) { .TextBlock-author { float: left; margin-right: 1rem; margin-top: 0.5rem; } } @media screen and (min-width: 31.25em) { .TextBlock--author { padding-bottom: 0; } } @media screen and (min-width: 50rem) { .TextBlock-author { margin-left: -8.5rem; } .TextBlock--image { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 42em; } .TextBlock--image figure { -webkit-box-flex: 1; -ms-flex: 1 0 45%; flex: 1 0 45%; } } .TicketTiers { border-collapse: collapse; } .TicketTiers:not(:only-child), .TicketTiers:not(:last-child) { margin-bottom: 1rem; } .TicketTiers--three-quarters { min-width: 75%; } .TicketTiers--full { width: 100%; } .TicketTiers--inverted * { color: #FFFFFF; } .Tier { font-size: .9em; } .Tier + .Tier { border-top: 1px solid rgba(51, 51, 51, 0.2); } .Tier-cell { padding: .3em .5em; vertical-align: middle; } .Tier-cell--price { text-align: right; } .Tier-cell:first-child { padding-left: 1px; } .Tier-price { -webkit-font-smoothing: antialiased; } .Tier-price--soldout { color: rgba(51, 51, 51, 0.7); } .Tier-soldout { font-size: .6667em; text-transform: uppercase; color: #e71651; border: 1px solid currentColor; border-radius: 2px; padding: .3em .5em; font-weight: bold; display: inline-block; margin-left: 0.3125rem; } .TicketTiers--inverted .Tier-soldout { color: rgba(241, 103, 142, 0.8); } .TicketTiers--inverted .Tier-price--soldout { color: rgba(255, 255, 255, 0.5); } .TicketTiers--inverted .Tier + .Tier { border-top: 1px solid rgba(243, 242, 242, 0.2); } @media screen and (min-width: 31.25rem) { .Tier-soldout { margin-left: 0.625rem; } } .Trio { padding-top: 1.5rem; padding-bottom: 1.5rem; } .Trio-wrapper { max-width: 60em; margin-left: auto; margin-right: auto; } .Trio-item { padding: 1rem; } .Trio-title { margin: 1rem; } /*Stats are currently on the Evo variation*/ .Trio-stats { padding: 1rem; } .Trio-statsHeading { font-size: 1.5625rem; line-height: 1.4; font-weight: 700; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin-top: 0; margin-bottom: 1rem; } .Trio-statsFigure { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 1.875rem; line-height: 1.4; } .Trio-statsSupporting { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-size: 0.875rem; line-height: 1.64286; width: 90%; } /*Invert text colours to white */ .Trio--inverted { background-color: #333333; color: #FFFFFF; } .Trio--inverted .Trio-title, .Trio--inverted .Trio-itemHead { color: #FFFFFF; } /*Trio for the featued Channel 4 case study */ .Trio--channel4 { background-color: #651C98; background-image: linear-gradient(-179deg, #651C98 3%, #4D1574 71%, #4D1574 84%); position: relative; z-index: 5; margin-top: -1.0625rem; } /*Trio for the featued Penguin case study */ .Trio--penguin { background-color: #FF6601; } /*Trio for the featued Evo case study */ .Trio--evo { background-color: #050505; } .Trio--evo .Trio-statsFigure { color: #957F44; } @media screen and (min-width: 31.25rem) { .Trio-statsHeading { font-size: 2.6875rem; line-height: 1.16279; margin-bottom: 1.5rem; } .Trio-statsFigure { font-size: 3.125rem; line-height: 1.2; } .Trio--channel4 { margin-top: -2.625rem; } } @media screen and (min-width: 45rem) { .Trio { padding-top: 2rem; padding-bottom: 2rem; } .Trio-collection { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 2rem; } .Trio-item { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 33.3%; padding: 1.75rem; } .Trio-stats { margin-left: 5rem; } .Trio-statsFigure { font-size: 5.625rem; line-height: 0.88889; margin-top: 1rem; margin-bottom: 1rem; } .Trio-statsSupporting { font-size: 1.0625rem; line-height: 1.70588; } .Trio-item--rebel { margin-top: 5rem; } .Trio--stacked .Trio-collection { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: 1rem; } .Trio--stacked .Trio-item { width: 90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0; max-width: 43.75rem; } .Trio--stacked .Trio-item--rebel { margin-left: 5rem; } .Trio--stacked .Trio-description { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; } } @media screen and (min-width: 61.25rem) { .Trio { padding-top: 3.4375rem; padding-bottom: 1.25rem; } } /** Fonts */ /** Colours */ /** Typography */ .Voice { margin: 0 auto; max-width: 56.25em; padding: 2rem 1rem; } .Voice-cite { margin-top: 1rem; margin-bottom: 0; } .Voice-description { font-size: 1rem; line-height: 1.6875; } .Voice-description blockquote { quotes: '“' '”' '‘' '’'; } .Voice-description blockquote:before { content: open-quote; margin-left: -0.6ch; } .Voice-description blockquote:after { content: close-quote; } .Voice-person { max-width: 6.25rem; } @media screen and (min-width: 18.75em) { .Voice-person { float: left; margin-right: 1rem; } } @media screen and (min-width: 37.5em) { .Voice { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 3.125rem 0.5rem; } .Voice-person { float: none; width: 30%; margin-right: 0; padding: 0.5rem; } .Voice-description { width: 70%; padding: 1rem 0.5rem; } } @media screen and (min-width: 50em) { .Voice-person { width: 20%; max-width: none; } .Voice-description { font-size: 1.375rem; line-height: 1.5; width: 65%; } .Voice-cite { margin-top: 1.125rem; } .Voice--tall { padding-top: 9.0625rem; } } .WorkshopBlock { padding: 1rem; } .WorkshopBlock + .WorkshopBlock { margin-top: 1rem; } @media only screen and (min-width: 45em) { .WorkshopBlock { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 3rem; } .WorkshopBlock-primary { -webkit-box-flex: 1; -ms-flex: 1 0 40%; flex: 1 0 40%; } .WorkshopBlock-secondary { -webkit-box-flex: 1; -ms-flex: 1 0 60%; flex: 1 0 60%; } .WorkshopBlock + .WorkshopBlock { margin-top: 3rem; } } /** Layout **/ .BlogGrid { color: #333333; background-color: #FFFFFF; margin: -1.875rem auto 1.5rem auto; max-width: 67.5em; } .BlogGrid-container { margin-top: 1.25rem; margin-left: auto; margin-right: auto; padding: 1rem; max-width: 61.25em; } .BlogGrid-item { padding-bottom: 1.5rem; } @media screen and (min-width: 43.75em) { .BlogGrid { margin: -3.125rem auto 1.5rem auto; } .BlogGrid-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .BlogGrid-item { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 50%; padding: 1.5rem; } } @media screen and (min-width: 56.25em) { .BlogGrid { margin: -4.375rem auto 1.5rem auto; } .BlogGrid-container { padding: 0; } .BlogGrid-item { padding: 3rem; } } .Casestudy-grid { padding: 0 1rem; max-width: 73.75rem; margin: 0 auto; } .Casestudy-gridItem + .Casestudy-gridItem { margin-top: 1rem; } @media only screen and (min-width: 50em) { .Casestudy-gridItem + .Casestudy-gridItem { margin-top: 2rem; } } .Cols-item { padding: 0.5rem 1rem; } @supports ((display: -ms-grid) or (display: grid)) { .Cols { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .Cols--gap { grid-row-gap: 1rem; grid-column-gap: 1rem; } .Cols--constrained { max-width: 73.75rem; margin: 0 auto; } .Cols--dense { grid-auto-flow: dense; } @media screen and (min-width: 42.5em) { .Cols--reverse > *:first-child { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .Cols--half { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .Cols--one-third { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .Col--pull { grid-column: 2/3; } } @media screen and (min-width: 60em) { .Cols--gap { grid-row-gap: 2rem; grid-column-gap: 2rem; } } } .ContactInfo { margin: 0 auto; max-width: 65em; } .ContactInfo-info { margin-bottom: -3.125rem; padding: 1rem; position: relative; z-index: 5; } .ContactInfo-title { margin-bottom: 1.25rem; } .ContactInfo-wrapper { position: relative; line-height: 0; margin-bottom: 2.625rem; } .ContactInfo-background { position: relative; height: 500px; } @media screen and (min-width: 31.25em) { .ContactInfo-info { width: 80%; margin-bottom: -12.5rem; } } @media screen and (min-width: 42.5em) { .ContactInfo-title { margin-bottom: 2.5rem; max-width: 5rem; } .ContactInfo-info { margin-bottom: -10rem; width: 75%; } } @media screen and (min-width: 56.25em) { .ContactInfo { padding: 0 1rem; } .ContactInfo-wrapper { min-height: 1040px; } .ContactInfo-background { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; padding-bottom: 80%; } .ContactInfo-info { position: relative; z-index: 2; width: 50%; top: 3.75rem; left: 5rem; } .ContactInfo-title { margin-bottom: 2.5rem; max-width: 5rem; } } .Container { padding-left: 2%; padding-right: 2%; } .Container:before, .Container:after { content: " "; display: table; clear: both; } .Container--constrained { margin: auto; max-width: 90rem; } .Container--paddedLarge { padding-top: 4rem; padding-bottom: 4rem; } .Cols.Container:before, .Cols.Container:after { content: none; } .Container--mastheadAlign { margin: 0 -.25rem 0 -.25rem; padding-left: 0; padding-right: 0; } @media screen and (min-width: 53.125em) { .Container--mastheadAlign { padding-left: 1.25rem; padding-right: 1.25rem; } } @media screen and (min-width: 60em) { .Container { padding-left: 5%; padding-right: 5%; } .Container--paddedLarge { padding-top: 8rem; padding-bottom: 8rem; } .Container--mastheadAlign { padding-left: 1.25rem; padding-right: 1.25rem; } } @media screen and (min-width: 65.375em) { .Container--mastheadAlign { margin-left: 10%; margin-left: calc((100% - (58.125em + 2*1.25rem)) * .5); padding-left: 2.25rem; padding-right: 1.25rem; max-width: 65em; } } .Home-grid { margin: 0 auto; max-width: 78.75rem; padding: 1rem 1%; } .Home-gridItem + .Home-gridItem { margin-top: 1rem; } @media only screen and (min-width: 50em) { .Home-grid { display: -webkit-box; display: -ms-flexbox; display: flex; } .Home-gridItem { -webkit-box-flex: 1; -ms-flex: 1 0 33.33%; flex: 1 0 33.33%; padding: 0 1rem; } .Home-gridItem + .Home-gridItem { margin-top: 0; } } .LayoutAlternate { padding: 1rem; margin-top: 1rem; max-width: 68.5rem; } .LayoutAlternate--chimney { margin-top: -4.375rem; } .LayoutAlternate-image { width: 100%; border: #DAE1E8 solid 0.5px; } .LayoutAlternate-solo { padding: 1rem 1rem 0 1rem; } .LayoutAlernate-item--leadSecondary { margin-top: -2rem; margin-left: -1rem; margin-right: -1rem; position: relative; z-index: -1; } @media screen and (min-width: 39.375em) { .LayoutAlternate { margin-left: auto; margin-right: auto; margin-bottom: 1.25rem; overflow: auto; padding: 0; } .LayoutAlternate-left { float: left; } .LayoutAlternate-right { float: right; } .LayoutAlternate-item { width: 50%; padding: 1rem; } .LayoutAlternate-solo { padding: 0 4rem; } .LayoutAlernate-item--leadPrimary { margin-top: 2rem; width: 55%; position: relative; padding: 0; z-index: 2; padding: 0; } .LayoutAlernate-item--leadSecondary { z-index: 1; margin-top: 0; margin-right: 0; margin-left: -4rem; padding: 0; } } @media screen and (min-width: 43.125em) { .LayoutAlternate-solo { padding: 1rem 1rem 0 1rem; } } @media screen and (min-width: 46.875em) { .LayoutAlternate--chimney { margin-top: -2.625rem; } .LayoutAlernate-item--leadPrimary { margin-top: 2.5rem; } } @media screen and (min-width: 56.25em) { .LayoutAlternate-item { padding-left: 4rem; padding-right: 4rem; } .LayoutAlternate-solo { padding: 1rem 4rem 0 4rem; } .LayoutAlernate-item--leadSecondary, .LayoutAlernate-item--leadPrimary { padding: 0; } } @media screen and (min-width: 56.25em) { .LayoutAlternate--chimney { margin-top: -4.375rem; } } @media only screen and (min-width: 45em) { .PresentsGrid { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 65rem; margin: auto; } .PresentsGrid-primary { -webkit-box-flex: 1; -ms-flex: 1 0 60%; flex: 1 0 60%; } .PresentsGrid-secondary { -webkit-box-flex: 1; -ms-flex: 1 0 40%; flex: 1 0 40%; } } .TeamGrid { margin: auto; margin-bottom: 1rem; max-width: 17.5rem; } .TeamGrid-item .IndexCard { display: block; height: 100%; } .TeamGrid-item .IndexCard-profile, .TeamGrid-item .IndexCard-image { width: 100%; } @media only screen and (min-width: 18.75em) { .TeamGrid { max-width: 45rem; } .TeamGrid-item { display: inline-block; width: 49%; vertical-align: top; } } @media only screen and (min-width: 30em) { .TeamGrid-item { width: 32%; } } @media only screen and (min-width: 42.5em) { .TeamGrid { padding-left: 5em; margin-bottom: 1rem; } } @media only screen and (min-width: 61.25em) { .TeamGrid { max-width: 58.75rem; padding-left: 7.0625rem; } .TeamGrid-item { width: 24%; } } @media only screen and (min-width: 75em) { .TeamGrid { max-width: 72.5rem; padding-left: 100px; margin-top: -1rem; } } @media only screen and (min-width: 85em) { .TeamGrid { max-width: 78.75rem; padding-left: 7.875rem; } } @supports ((display: -ms-grid) or (display: grid)) { .TeamGrid { display: -ms-grid; display: grid; } .TeamGrid-item { width: 100%; } @media only screen and (min-width: 18.75em) { .TeamGrid { -ms-grid-columns: (50%)[2]; grid-template-columns: repeat(2, 50%); } } @media only screen and (min-width: 30em) { .TeamGrid { -ms-grid-columns: (33.333%)[3]; grid-template-columns: repeat(3, 33.333%); } } @media only screen and (min-width: 42.5em) and (max-width: 61.1875em) { .TeamGrid-item:nth-child(6n-2), .TeamGrid-item:nth-child(6n-1), .TeamGrid-item:nth-child(6n) { -webkit-transform: translateX(-5em); transform: translateX(-5em); } } @media only screen and (min-width: 61.25em) { .TeamGrid { -ms-grid-columns: (25%)[4]; grid-template-columns: repeat(4, 25%); } .TeamGrid-item:nth-child(8n-3), .TeamGrid-item:nth-child(8n-2), .TeamGrid-item:nth-child(8n-1), .TeamGrid-item:nth-child(8n) { -webkit-transform: translateX(-6.25em); transform: translateX(-6.25em); } } } .Work { max-width: 73.75rem; margin-top: -1.25rem; } @media screen and (min-width: 45rem) { .Work-grid { padding: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 57.5rem; margin: 0 auto; } .Work-gridItem { width: 50%; } } @media screen and (min-width: 45em) { .Work { margin: -4.6875rem auto 0; } .Work-gridItem:nth-child(4n-3) { margin-left: -2%; } .Work-featured { padding: 1rem 0; } } @media screen and (min-width: 68.75em) { .Work-gridItem:nth-child(4n-3) { margin-left: -6rem; } .Work-featured { padding: 2rem 0; } } /** Misc **/ /* Atom One Light by Daniel Gamage Original One Light Syntax theme from https://github.com/atom/one-light-syntax base: #fafafa mono-1: #383a42 mono-2: #686b77 mono-3: #a0a1a7 hue-1: #0184bb hue-2: #4078f2 hue-3: #a626a4 hue-4: #50a14f hue-5: #e45649 hue-5-2: #c91243 hue-6: #986801 hue-6-2: #c18401 */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #383a42; background: #fafafa; } .hljs-comment, .hljs-quote { color: #a0a1a7; font-style: italic; } .hljs-doctag, .hljs-keyword, .hljs-formula { color: #a626a4; } .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e45649; } .hljs-literal { color: #0184bb; } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { color: #50a14f; } .hljs-built_in, .hljs-class .hljs-title { color: #c18401; } .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #986801; } .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #4078f2; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .hljs-link { text-decoration: underline; } /** Print **/ @media print { *, *:before, *:after, p:first-letter, div:first-letter, blockquote:first-letter, li:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /** Custom **/ .PrimaryNavigation, .Pagination, .Breadcrumb, .Nextprev, .ImageGallery { display: none; } .Card { page-break-inside: avoid; } .Card .Author-image { display: none; } .SiteFooter .Cols-half { display: none; } .Logo--inverted .Logo-text { fill: #000; } .IndexCard-image { width: 7.5rem; } .Job { display: block !important; padding-bottom: 3rem; page-break-inside: avoid; } } /*# sourceMappingURL=all.css.map */