@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 */ /** Animation */ /** Globals **/ /** Normal **/ @font-face { font-family: 'Adelle Sans'; src: url("../fonts/adellesans-regular-webfont.woff2") format("woff2"), url("../fonts/adellesans-regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: fallback; } @font-face { font-family: 'Adelle Sans'; src: url("../fonts/adellesans-bold-webfont.woff2") format("woff2"), url("../fonts/adellesans-bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } @font-face { font-family: 'Adelle Sans'; src: url("../fonts/adellesans-italic-webfont.woff2") format("woff2"), url("../fonts/adellesans-italic-webfont.woff") format("woff"); font-weight: 400; font-style: italic; font-display: fallback; } @font-face { font-family: 'Gilroy'; src: url("../fonts/gilroy-bold-webfont.woff2") format("woff2"), url("../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("../fonts/gilroy-black-webfont.woff2") format("woff2"), url("../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; } p { margin-top: 0; } ul { padding: 0; } 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; } a:hover, a:active, a:focus { color: #e71651; } blockquote { margin: 0; } img, iframe, video { 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--medium-temp { font-size: 1.75rem; line-height: 1.03571; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; 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, .Heading--micro { font-size: 1rem; line-height: 1.5625; font-weight: 700; letter-spacing: -0.22px; } .Heading--micro { padding: 0 2.5rem; width: 100%; position: relative; color: #ADADAD; } .Heading--micro:after, .Heading--micro:before { content: ""; position: absolute; top: 50%; transform: translateY(-30%); width: 2rem; height: 0.4rem; background-image: url("/assets/img/line.svg"); background-repeat: no-repeat; background-size: 600%; } .Heading--micro:before { right: calc(100% - 2.3rem); background-position: left; } .Heading--micro:after { left: calc(100% - 2.3rem); background-position: right; } .Heading--context { font-size: 0.875rem; line-height: 1.42857; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #EA215A; } .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: 0.5rem; } .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, .Heading--micro { font-size: 1.375rem; line-height: 1.22727; font-weight: 700; } .Heading--micro { padding: 0; width: auto; display: inline-block; position: relative; color: #ADADAD; } .Heading--micro:after, .Heading--micro:before { content: ""; position: absolute; top: 50%; transform: translateY(-30%); width: 4.5rem; height: 0.4rem; background-image: url("/assets/img/line.svg"); background-repeat: no-repeat; background-size: 600%; } .Heading--micro:before { right: calc(100% + 1rem); background-position: left; } .Heading--micro:after { left: calc(100% + 1rem); background-position: right; } } /** 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%; object-fit: cover; } .u-center { text-align: center; } .u-vertical-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .u-constrain-large { max-width: 120rem; margin: auto; } .u-transform-up { transform: translateY(-4.3rem); } .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:not(.Heading), .Prose h2:not(.Heading), .Prose h3:not(.Heading), .Prose h4:not(.Heading), .Prose h5:not(.Heading), .Prose h6:not(.Heading) { 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:not(.Heading) { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h2:not(.Heading) { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h3:not(.Heading) { font-size: 1.75rem; line-height: 1.17857; letter-spacing: -0.025rem; } .Prose h4:not(.Heading) { font-size: 1.375rem; line-height: 1.22727; letter-spacing: -0.01875rem; } .Prose h5:not(.Heading) { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01875rem; } .Prose h6:not(.Heading) { 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("/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:not(.Heading) { font-size: 2.6875rem; line-height: 1.16279; letter-spacing: -0.02875rem; } .Prose h2:not(.Heading) { font-size: 2.6875rem; line-height: 1.16279; letter-spacing: -0.02875rem; } .Prose h3:not(.Heading) { font-size: 2.1875rem; line-height: 1.14286; letter-spacing: -0.03125rem; } .Prose h4:not(.Heading) { font-size: 1.75rem; line-height: 1.17857; letter-spacing: -0.025rem; } .Prose h5:not(.Heading) { font-size: 1.375rem; line-height: 1.22727; letter-spacing: -0.01875rem; } .Prose h6:not(.Heading) { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01875rem; } } .Texture { background-attachment: fixed; background-image: url("https://clearleft-v5.s3.amazonaws.com/dots/texture_corners-diamond-grey.png"); background-repeat: no-repeat; background-size: 45rem; background-position: calc(50% + 50vw) calc(540px - 70vw); } .Texture--right { background-position: calc(30% + 80vw) -6.25rem; } .Texture-border { position: relative; } .Texture-border--top:after { width: 100%; height: 2rem; top: -0.8rem; left: 0; position: absolute; content: ""; -webkit-mask: url(/assets/img/mask.svg) no-repeat 50% 50%; mask: url(/assets/img/mask.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background: inherit; } .Texture-border--bottom:after { width: 100%; height: 2rem; bottom: -0.8rem; left: 0; position: absolute; content: ""; -webkit-mask: url(/assets/img/mask.svg) no-repeat 50% 50%; mask: url(/assets/img/mask.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background: inherit; } @media screen and (min-width: 31.25em) { .Texture { background-position: calc(50% + 50vw) 7.5rem; background-size: auto; } .Texture--right { background-position: calc(40% + 80vw) -12.5rem; } } @media screen and (min-width: 56.875em) { .Texture { background-position: calc(50% + 50vw) 20rem; } .Texture--right { background-position: calc(50% + 62vw) -9.375rem; } } @media screen and (min-width: 73.75em) { .Texture { background-position: calc(57vw) 20rem; } .Texture--right { background-position: calc(50% + 62vw) -9.375rem; } } .u-border-top { border-top: 1px solid #e1e1e1; } .u-border-top-n2:not(:first-child) { border-top: 1px solid #e1e1e1; } .u-underline { background-image: linear-gradient(transparent 60%, #FFDA69 60%, #FFDA69 85%, transparent 85%, transparent 100%); } .u-underline-animated { background-image: linear-gradient(transparent 60%, #FFDA69 60%, #FFDA69 85%, transparent 85%, transparent 100%); background-repeat: no-repeat; background-size: 0% 100%; animation: animatedUnderline 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s forwards paused; } @keyframes animatedUnderline { to { background-size: 100% 100%; } } .u-white { color: #FFFFFF; } .u-brandeis-blue { color: #006FF5; } .u-carribean-green { color: #00D494; } .u-lapis-lazuli-blue { color: #1E6B9C; } .u-orange-yellow { color: #FFDA69; } .u-plum { color: #973B8A; } .u-sea-serpent-blue { color: #56CBE6; } .u-crayola-red { color: #EA215A; } /** Components **/ .Announcement { --backgroundOffset: 20px; position: relative; overflow: visible; color: #333333; background-color: #FFFFFF; transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; display: grid; grid-template-rows: auto auto var(--backgroundOffset); background-repeat: no-repeat; background-position: bottom center; background-size: contain; } .Announcement--image { --backgroundOffset: auto; } .Announcement--image[style] { --backgroundOffset: 180px; } .Announcement:after { pointer-events: none; content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.4; box-shadow: 1px 8px 10px rgba(50, 50, 50, 0.3); transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1) 0.25s; } .Announcement:hover { transform: translateY(-2px); transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.25s; } .Announcement:hover:after { opacity: 1; } .Announcement-highlight { font-size: 0.875rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; justify-self: start; padding: 1rem 2.3rem; background-color: #EA215A; color: #FFFFFF; } .Announcement-content { padding: 1.5rem; } .Announcement-image { padding: 1.5rem; margin: 0; } .Announcement-description { font-size: 1rem; line-height: 2; padding-bottom: 2rem; } @media screen and (min-width: 25em) { .Announcement { background-size: auto 150px; background-position: right bottom; } } @media screen and (min-width: 40em) { .Announcement--image[style] { --backgroundOffset: 100px; } } @media screen and (min-width: 50em) { .Announcement { grid-template-rows: auto auto; grid-template-columns: 1fr; background-position: bottom right; background-size: 40% auto; } .Announcement--image { grid-template-columns: 1.5fr 1fr; } .Announcement-spacer, .Announcement-highlight { grid-column: 1 / span 1; grid-row: 1 / span 1; } .Announcement-content { grid-column: 1 / span 1; grid-row: 2 / span 1; align-self: center; } .Announcement-description { padding: 1rem 0; } .Announcement-image { grid-column: 2 / span 1; grid-row: 2 / span 1; align-self: center; } } .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: #1E6B9C; 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-content > * + * { padding-top: 1.8rem; } .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: #1E6B9C; } .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: #1E6B9C; } .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%; max-width: 64em; margin: 1rem auto; padding-left: 2rem; 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; margin-left: -1rem; } .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; } .Card--springboard .Card-title { color: #1E6B9C; font-weight: 800; font-size: 1.9375rem; line-height: 1.09677; } .Card--springboard ul { margin-left: 1.5rem; color: #1E6B9C; font-weight: 700; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; } /***************************** 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; } .Card--springboard .Card-title { font-size: 2.6875rem; line-height: 1.16279; } } @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("/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("/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: flex; flex-direction: column; 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://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://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: flex; font-size: 1.0625rem; line-height: 1.76471; margin-top: 1.875rem; margin-bottom: 1.875rem; } .ContactCard-item { flex-basis: 50%; } .Contact-group { margin-top: -0.375rem; } } .Dropdown--constrained { margin: auto; max-width: 58.125em; padding: 0 1.25rem 1.875rem 1.25rem; } @media screen and (min-width: 53.125em) { .Dropdown--constrained { padding: 0 2.625rem 1.875rem 2.625rem; } } .Dropdown-inner { position: relative; height: auto; width: 100%; max-width: 19rem; z-index: 1; } .Dropdown-label { font-weight: bold; font-size: 0.75rem; color: #656565; text-transform: uppercase; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; letter-spacing: 1.3px; } .Dropdown-button { position: relative; display: none; width: 100%; padding: 0.6rem 2rem 0.6rem 1rem; margin: 0; background: #FFFFFF; color: #656565; border: none; text-decoration: none; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: normal; font-size: 1rem; text-align: left; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; overflow: hidden; border: rgba(80, 80, 80, 0.2) solid 2px; border-radius: 4px; } .hasJS .Dropdown-button { display: inline-block; } .Dropdown-button:after { content: ""; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.414 0L0 1.414l9.894 9.894a1.006 1.006 0 0 0 1.425 0l9.894-9.894L19.8 0l-9.192 9.192L1.414 0z' fill='%23CCC' fill-rule='evenodd'/%3E%3C/svg%3E"); background-size: 40%; background-repeat: no-repeat; background-position: center; position: absolute; right: 0.5rem; top: 0; height: 100%; width: 40px; pointer-events: none; transition: transform 0.2s ease-out; transform-origin: center; } .Dropdown-button[aria-expanded="true"] { border: 2px solid #EA215A; border-bottom: none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; transition: border 0.2s ease-out; } .Dropdown-button[aria-expanded="true"]:after { filter: invert(0.4) sepia(1) saturate(30) hue-rotate(306deg) brightness(0.89); transform: rotate(0.5turn); } .Dropdown-button[aria-expanded="true"]:focus { outline: none; } .Dropdown-link:focus, .Dropdown-link:hover { color: #656565; background-color: #F3F2F2; outline: none; } .Dropdown-content { position: relative; box-sizing: border-box; width: 100%; list-style: none; padding-left: 0; margin-top: 0; z-index: -1; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .hasJS .Dropdown-content { position: absolute; top: 100%; background-color: #FFFFFF; box-shadow: inset 0 2px 0 0 #F3F2F2; border: 2px solid #e71651; border-top: none; max-height: 230px; overflow: scroll; opacity: 0; transition: opacity 0.2s ease-out, transform 0.3s ease-out; } .Dropdown-content[aria-hidden="true"] { visibility: hidden; transform: translateY(-50px); } .Dropdown-content[aria-hidden="false"] { visibility: visible; opacity: 1; transform: translateY(0); } .Dropdown-item { position: relative; display: block; box-sizing: border-box; width: 100%; height: 3.125rem; padding: 0.6rem 2rem; margin: 0; text-align: left; cursor: pointer; } .Dropdown-link { position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; margin: 0; border-bottom: none; color: #656565; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: normal; font-size: 1rem; line-height: 3.125rem; padding-left: 2rem; cursor: pointer; text-decoration: underline; } .Dropdown-link--active:before { content: ''; position: absolute; height: 1rem; width: 1rem; left: 0.5rem; top: 50%; transform: translateY(-50%); background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64.16 52.5'%3E%3Cpath fill='%23e71651' d='M17.5 52.5L0 35l5.83-5.83L17.5 40.84 58.33 0l5.83 5.84z'/%3E%3C/svg%3E"); } .hasJS .Dropdown-link { text-decoration: none; } .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%; transform: translateX(-50%); } @media screen and (min-width: 37.5em) { .EvoDisplayCase-wrapper { margin-top: 10rem; display: flex; flex-direction: column; 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://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://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 1rem 3rem; max-width: 67em; 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("/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("/assets/img/icons/icon-clock.svg") no-repeat center; } .FeaturedCard { position: relative; overflow: visible; color: #333333; background-color: #FFFFFF; padding: 1rem; transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } .FeaturedCard:after { pointer-events: none; content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.4; box-shadow: 1px 8px 10px rgba(50, 50, 50, 0.3); transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1) 0.25s; } .FeaturedCard:hover { transform: translateY(-2px); transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.25s; } .FeaturedCard:hover:after { opacity: 1; } .FeaturedCard-title { margin: 0 0 1.125rem 0; } .FeaturedCard-title a:hover { color: inherit; } .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: flex; } .FeaturedCard-primary { flex: 1; } .FeaturedCard-secondary { 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("/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("/assets/img/grey-dots-circle.svg") -28rem center no-repeat; } @media screen and (min-width: 100em) { .GreyDots { background: url("/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://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: flex; } .Hello-image { 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: #1E6B9C; } .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("/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 { max-width: 40.5rem; margin: 0.5rem auto; color: #656565; font-size: 0.875rem; line-height: 1.71429; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: 400; -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: flex; 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 { flex-shrink: 0; flex-basis: auto; margin-right: 1rem; margin-bottom: 1.5rem; } .InfoBlock-group { 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("/assets/img/icons/icon-calendar.svg"); } .InfoList-term--location + .InfoList-description:before { background-image: url("/assets/img/icons/icon-map-pin.svg"); } .InfoList-term--time + .InfoList-description:before { background-image: url("/assets/img/icons/icon-clock.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 { 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.625rem; width: 100%; -webkit-font-smoothing: antialiased; } .InputGroup-submit { background-color: #00D494; border-radius: 0.125rem; color: #25333a; 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; flex-basis: 100%; margin-bottom: 0.625rem; -webkit-font-smoothing: antialiased; } .InputGroup-microcopy { font-size: 0.9375rem; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: 100; padding-top: 1.25rem; } @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: flex; } .InputGroup-combo .InputGroup-field { 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: #00D494; color: #25333a; } .InputGroup--highlight .InputGroup-label { margin-bottom: 1.25rem; } .InputGroup--highlight .InputGroup-microcopy { display: inline-block; width: 100%; } .InputGroup--highlight .InputGroup-microcopy > a[href] { font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: 100; border-bottom: none; color: #FFFFFF; } .InputGroup--highlight .InputGroup-microcopy > a[href]:hover, .InputGroup--highlight .InputGroup-microcopy > a[href]:focus { color: #00D494; } @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: flex; } .Jobs-section { padding: 1rem 0; } .Jobs-section--side { padding-right: 3rem; width: 28%; } .Jobs-section--main { width: 75%; } } .Lead { 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; } .Lead-content { font-size: 1.375rem; line-height: 1.45455; } @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 { stroke: #973B8A; } .Logo--carribean-green .Logo-streak { stroke: #00D494; } .Logo--sea-serpent-blue .Logo-streak { stroke: #56CBE6; } .Logo--orange-yellow .Logo-streak { stroke: #FFDA69; } .Logo--crayola-red .Logo-streak { stroke: #EA215A; } .Logo--lapis-lazuli-blue .Logo-streak { stroke: #1E6B9C; } .Logo--brandeis-blue .Logo-streak { stroke: #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-descriptionSecondary { padding: 0 1rem; } .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: flex; flex-wrap: wrap; margin: auto; max-width: 58.125em; padding: 1.875rem 1.25rem 2.5rem 1.25rem; } .Masthead-primary { order: 1; width: 85%; } .Masthead-primary .Masthead-sub--contextLarge { font-size: 1.75rem; line-height: 0.96429; } .Masthead-secondary { order: 2; width: 15%; } .Masthead-lead { align-items: center; display: flex; order: 4; } .Masthead-description { max-width: 50rem; } .Masthead-descriptionSecondary { flex-basis: 48%; font-size: 1rem; padding: 0.5em 2em; } .Masthead--arrows .Masthead-secondary { display: flex; justify-content: flex-end; 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 { order: 3; text-align: right; width: 15%; padding: 2.1875rem 0 0 0; } .Masthead--combo .Masthead-third { order: 2; width: 30%; padding-top: 2.1875rem; } .Masthead--combo .Masthead-third .Heading--context { margin: 0; } .Masthead--inverted { color: #FFFFFF; } .Masthead--minimal .Masthead-description { max-width: 60rem; } } @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); } .MegaLink--springboard { position: relative; padding-left: 2rem; border: none; } .MegaLink--springboard:before { content: ''; position: absolute; background-image: url("/assets/img/arrow.svg"); background-repeat: no-repeat; background-size: contain; background-position: 50% 0.5rem; right: calc(100% - 1.5rem); width: 1.5rem; height: 100%; transition: transform ease-out 0.4s; transform-origin: 50% 50%; } .MegaLink--springboard:hover.MegaLink--springboard:before { transform: translateX(0.35rem) rotate(0.02turn); } .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: 0.5rem 1rem 0.5rem 0; } .Metadata-heading { display: inline; font-size: 0.875rem; line-height: 1.57143; font-weight: 700; color: #505050; } .Metadata-heading::after { content: ':'; } .Metadata-description { display: inline; font-size: 0.875rem; line-height: 1.57143; color: #656565; margin: 0; } .Metadata-description::after { content: ','; } .Metadata-description:last-of-type::after { content: ''; } .Metadata--stacked { display: grid; grid-gap: 0.5rem; } .Metadata--stacked .Metadata-description::after { content: ''; } @media all and (min-width: 31.25rem) { .Metadata--stacked .Metadata-heading { margin-top: 0.5rem; grid-column: span 2; } } .MultiLink { display: flex; flex-direction: column; justify-content: center; align-items: center; } .MultiLink > *:not(.MegaLink--block) + * { margin-top: 1rem; } .MultiLink > .MegaLink--super + * { margin-top: 2rem; } .MultiLink .MegaLink--block { align-self: stretch; } .MultiLink--left { align-items: flex-start; } .Nextprev-link { border-bottom: none; display: inline-block; margin-right: 0.625rem; } .Nextprev-link:hover, .Nextprev-link:focus, .Nextprev-link:active { opacity: 0.7; } .number { height: 150px; flex-shrink: 0; overflow: hidden; } .number-path { animation-duration: 1s; animation-play-state: paused; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-fill-mode: forwards; } .number-path--1 { stroke-dasharray: 263; stroke-dashoffset: 0; animation-name: drawOne; } .number-path--2 { stroke-dasharray: 320; stroke-dashoffset: 0; animation-name: drawTwo; } .number-path--3 { stroke-dasharray: 376; stroke-dashoffset: 0; animation-name: drawThree; } @keyframes drawOne { from { stroke-dashoffset: 263; } to { stroke-dashoffset: 0; } } @keyframes drawTwo { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } } @keyframes drawThree { from { stroke-dashoffset: 376; } to { stroke-dashoffset: 0; } } .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: flex; max-width: 73.75em; margin-left: auto; margin-right: auto; align-items: center; } .PageLead-primary { flex-basis: 52%; } .PageLead-secondary { 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 { flex: 1 0 60%; } .PageLead--presents .PageLead-secondary { flex: 1 0 40%; } } .PageLead--image .PageLead-primary { width: 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: flex; 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("/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("/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: flex; align-items: center; } .Pagination-list { justify-content: center; } .Pagination-move { font-size: 1.875rem; 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://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://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; } .Point-group { list-style: none; } .Point-group > * + * { margin-top: 2rem; } @media all and (min-width: 43.75rem) { .Point-group > * + * { margin-top: 0; } .Point-group { display: grid; grid-template-columns: 3.5fr 2fr 3.5fr; grid-row-gap: 4rem; } .Point-group-item:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 1 / span 1; } .Point-group-item:nth-of-type(2) { grid-column: 2 / span 2; grid-row: 2 / span 1; } .Point-group-item:nth-of-type(3) { grid-column: 1 / span 2; grid-row: 3 / span 1; } } @media all and (min-width: 56.25rem) { .Point-group { grid-row-gap: 8rem; } } .Point { display: flex; flex-direction: row; } .Point svg { height: 94px; } .Point-content { text-align: left; padding-left: 1rem; transform: translateY(-0.6rem); } .Point-title { color: #00D494; margin-bottom: 0.5rem; } @media screen and (min-width: 50em) { .Point svg { height: 150px; } .Point-content { padding-left: 2rem; } } .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: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .PrimaryNavigation-listItem { display: inline-flex; } .PrimaryNavigation-link { position: relative; display: block; padding: 0.5rem; color: #333; font-size: 0.9375rem; line-height: 1.2; font-weight: 700; border-bottom: none; } .PrimaryNavigation-link::after { position: absolute; left: 0; right: 100%; height: 4px; bottom: 0px; content: ""; } .PrimaryNavigation-link:hover::after, .PrimaryNavigation-link:active::after, .PrimaryNavigation-link:focus::after { left: 0; right: 0; } .PrimaryNavigation-link:hover, .PrimaryNavigation-link:active, .PrimaryNavigation-link:focus { color: #d8144c; } .PrimaryNavigation-link.is-active::after { left: 0; right: 0; } .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 .PrimaryNavigation-link.is-active::after, .PrimaryNavigation .PrimaryNavigation-link::after { background-color: #00D494; } .PrimaryNavigation--plum .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--plum .PrimaryNavigation-link::after { background-color: #973B8A; } .PrimaryNavigation--carribean-green .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--carribean-green .PrimaryNavigation-link::after { background-color: #00D494; } .PrimaryNavigation--sea-serpent-blue .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--sea-serpent-blue .PrimaryNavigation-link::after { background-color: #56CBE6; } .PrimaryNavigation--orange-yellow .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--orange-yellow .PrimaryNavigation-link::after { background-color: #FFDA69; } .PrimaryNavigation--crayola-red .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--crayola-red .PrimaryNavigation-link::after { background-color: #EA215A; } .PrimaryNavigation--lapis-lazuli-blue .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--lapis-lazuli-blue .PrimaryNavigation-link::after { background-color: #1E6B9C; } .PrimaryNavigation--brandeis-blue .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--brandeis-blue .PrimaryNavigation-link::after { background-color: #006FF5; } .PrimaryNavigation--inverted .PrimaryNavigation-link.is-active::after, .PrimaryNavigation--inverted .PrimaryNavigation-link::after { background-color: #FFFFFF; } @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; } .PrimaryNavigation-link { transition: color 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); } .PrimaryNavigation-link:hover, .PrimaryNavigation-link:focus { transition: color 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); } .PrimaryNavigation-link::after { transition: 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transform: translate3d(0, 0, 0); } .Propositions { max-width: 61.25rem; margin-left: auto; margin-right: auto; } .Proposition { padding: 1rem; } .Proposition--bgGreen .Proposition-primary { background: url("/assets/img/green-diagonal-streak.svg") 50% 100% no-repeat; padding-bottom: 2rem; } .Proposition--bgPurple .Proposition-primary { background: url("/assets/img/purple-diagonal-streak.svg") 50% 100% no-repeat; padding-bottom: 2rem; } .Proposition-title { margin: 0 0 2rem 0; } .Proposition-primary { flex-basis: 50%; } .Proposition-secondary { display: flex; align-items: center; justify-content: center; } .Proposition-list { column-count: 2; list-style-type: none; padding: 0; } .Proposition-listItem { padding: 1rem; } .Proposition:nth-child(even) .Proposition-secondary { order: 1; } .Proposition:nth-child(even) .Proposition-primary { order: 2; } @media screen and (min-width: 43.75em) { .Proposition { margin-bottom: 2rem; display: flex; flex-wrap: wrap; } } @media screen and (min-width: 55em) { .Proposition-secondary, .Proposition-primary { padding: 1rem; } } .Quote { max-width: 42.5rem; position: relative; padding: 1rem; margin: 1.25rem auto; } .Quote-text { border-left: 0.4375rem solid black; padding-left: 1.5rem; font-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-weight: 400; } .Quote-citation { padding-left: 1.9375rem; color: #333333; font-size: 0.8125rem; line-height: 1.23077; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; } .Quote-avatar { border: none; border-radius: 50%; max-width: 4.375rem; max-height: 4.375rem; margin-right: 1rem; } .Quote-author { display: inline-block; margin-top: 0.5rem; } .Quote-author > * { display: block; } .Quote-authorrole { display: block; margin-top: 0.5rem; color: #656565; } @media screen and (min-width: 17.5em) { .Quote-citation { display: flex; } .Quote-author { margin-top: 0; flex: 1; } } @media screen and (min-width: 31.25em) { .Quote-text { font-size: 1.375rem; } .Quote-citation { font-size: 1.125rem; } } .Quote--event { margin: 0; padding: 2em 0 1em 0; } .Quote--event:before { background-image: url("/assets/img/quote-bg.svg"); background-repeat: no-repeat; content: " "; width: 5.875rem; height: 5.125rem; display: block; position: absolute; top: 0px; } .Quote--event .Quote-text { border-left: none; padding-left: 0; } .Quote--event .Quote-citation { padding-left: 0; text-transform: uppercase; 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; } .Quote--event .Quote-authorrole { color: #d8144c; } @media screen and (min-width: 31.25em) { .Quote--event .Quote-text { font-size: inherit; } .Quote--event .Quote-citation { font-size: 0.8125rem; line-height: 1.23077; } } .Quote--standalone { color: inherit; margin: 0; padding: 2em 0 1em 0; } .Quote--standalone .Quote-marks { width: 2.5rem; display: block; position: absolute; top: 0px; } .Quote--standalone .Quote-text { font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; color: inherit; border-left: none; font-size: 1.6875rem; line-height: 1; padding-left: 0; padding-top: 1rem; } .Quote--standalone .Quote-citation { padding-left: 0; color: inherit; } .Quote--standalone .Quote-author > * { font-size: 1.1875rem; line-height: 1.57895; display: inline; color: inherit; } .Quote--standalone .Quote-author { padding-left: 1.3rem; position: relative; } .Quote--standalone .Quote-author:before { content: "—"; position: absolute; left: 0; top: 0.35rem; color: inherit; } @media screen and (min-width: 50em) { .Quote--standalone { max-width: none; margin: 0; padding: 0 0 1em 3.7em; } .Quote--standalone .Quote-marks { width: 3.125rem; top: 1em; left: 0px; } .Quote--standalone .Quote-text { font-size: 2.75rem; line-height: 1; } .Quote--standalone .Quote-citation { font-size: 0.8125rem; line-height: 1.23077; padding-top: 1em; } } .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: flex; 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%; 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("/assets/img/icons/icon-select-down.svg"); background-repeat: no-repeat; background-position: 0 75%; } .Selector-trigger[aria-expanded="true"]::after { background-image: url("/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-wrapper { max-width: 60rem; margin: 1.875rem auto 0; padding: 1rem 1rem 0 1rem; -webkit-font-smoothing: antialiased; } .Showcase-primary { max-width: 38.75rem; } .Showcase-image { text-align: center; margin: 3rem auto 0 auto; display: block; } @media screen and (min-width: 42.5em) { .Showcase-metadata { display: grid; grid-template-columns: 1fr 2fr; } } @media all and (min-width: 64em) { .Showcase { background-position: 105% center; background-repeat: no-repeat; } .Showcase--blue { background-image: url('data:image/svg+xml;utf8,'); } .Showcase--red { background-image: url('data:image/svg+xml;utf8,'); } .Showcase--yellow { background-image: url('data:image/svg+xml;utf8,'); } } .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("/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("/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: flex; justify-content: space-between; 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: #25333a; color: #FFFFFF; font-family: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif; margin-left: auto; margin-right: auto; padding: 1.875rem 0.625rem; } .SiteFooter .Heading { color: #FFFFFF; } .SiteFooter-container { margin: 0 auto; max-width: 65em; display: grid; grid-template-rows: repeat(3, auto); } .SiteFooter-callToAction { text-align: left; } .SiteFooter-navigation { padding-top: 2.5rem; margin-top: 2rem; border-top: #ffffff80 1px solid; grid-row: -1 / span 1; } .SiteFooter-navigationLinks { list-style: none; margin: 0; padding: 0 0 2rem 0; } .SiteFooter-navigationItem { display: inline; padding-right: 0.5rem; } .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-family: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif; font-size: 0.625rem; line-height: 1.7; text-align: center; text-transform: uppercase; opacity: 0.5; text-align: left; } .SiteFooter-icons { display: flex; flex-wrap: wrap; margin: 0; padding: 0; justify-content: flex-start; align-items: flex-start; grid-row: 2 / span 1; padding-top: 0.8rem; } .SiteFooter-icon { list-style: none; margin-bottom: 0.5rem; margin-right: 0.5rem; } .SiteFooter-iconLink { border-bottom: none; display: block; padding: 0 0.3125rem; } .SiteFooter-iconLink:hover, .SiteFooter-iconLink:focus, .SiteFooter-iconLink:active { filter: invert(0.5) sepia(1) saturate(200%) hue-rotate(107deg) brightness(1.25); } .SiteFooter-iconLink img { display: inline-block; } @media only screen and (min-width: 55em) { .SiteFooter-container { grid-template-columns: repeat(2, 1fr); } .SiteFooter-icons { display: flex; justify-content: center; align-items: center; grid-row: 2 / span 1; grid-column: 2 / span 1; grid-row: 1/ span 1; margin-left: 2rem; } .SiteFooter-navigation { grid-column: 1 / span 2; } } .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: flex; justify-content: space-between; max-width: 65em; margin-left: auto; margin-right: auto; padding: 1.5rem 1rem; } } .SkipToContent-link { left: -999px; position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999; border: 2px solid #505050; 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; } .SkipToContent-link:focus, .SkipToContent-link:active { left: 14px; top: 24px; width: auto; height: auto; z-index: 50; color: #505050; outline: transparent; background-color: #FFFFFF; } .SocialMedia { padding-left: 0; display: flex; flex-wrap: wrap; margin-bottom: -1rem; margin-top: 0.5rem; } .SocialMedia-item { list-style: none; margin-right: 1rem; margin-bottom: 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: flex; align-items: 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("/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; } } .Spotlight { background-color: #EA215A; padding: 3rem 2rem; } .Spotlight-heading, .Spotlight-content, .Spotlight-link { color: #FFFFFF; } .Spotlight-content { display: flex; justify-content: space-between; align-items: center; flex-direction: column; color: #FFFFFF; } .Spotlight-body { margin: 0.625rem 0; } .Spotlight-link { position: relative; margin-top: 1.875rem; position: relative; text-decoration: none; display: inline-block; padding: 0 1px; transition: color ease 0.3s; border-bottom: none; } .Spotlight-link:hover { color: #ffffff; } .Spotlight-link::before, .Spotlight-link::after { content: ''; position: absolute; background-color: #ffffff; height: 8%; } .Spotlight-link::before { width: 0%; left: 0; bottom: -2px; transition: width cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s; } .Spotlight-link::after { width: 100%; left: 0; bottom: -2px; transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.6s; } .Spotlight-link:hover::before { width: 100%; } .Spotlight-link:hover::after { left: 100%; width: 0%; transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; } .Spotlight--plum { background-color: #973B8A; } .Spotlight--lazuli-blue { background-color: #1E6B9C; } .Spotlight--blue { background-color: #006FF5; } .Spotlight--green { background-color: #00D494; } .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: grid) { .Stats { display: grid; grid-gap: 10px; 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: flex; justify-content: center; } .Tablist li { display: flex; } } .TextBlock { padding: 0 1rem; margin: 0 auto; max-width: 42.5rem; } .TextBlock--brush { background-color: #F3F2F2; padding: 0; margin: 0; max-width: none; } .TextBlock--brush > * { padding: 0 1rem; margin: 0 auto; max-width: 42.5rem; } .TextBlock--brush::before, .TextBlock--brush::after { content: ' '; display: block; width: 100%; background-color: #fff; background-repeat: no-repeat; } .TextBlock--brush::before { height: 63px; background-position: bottom; background-size: 100% 100%; background-image: var(--topbrushstroke); } .TextBlock--brush::after { height: 109px; background-position: top; background-size: 100% 100%; background-image: var(--bottombrushstroke); } .TextBlock--connected::after { content: ' '; display: block; height: 97px; background-repeat: no-repeat; background-position: bottom; background-size: 29px 97px; background-image: var(--downwardarrow); } .TextBlock--brush.TextBlock--connected::after { height: 109px; background-position: bottom, top; background-size: 29px 97px, 100% 100%; background-image: var(--downwardarrow), var(--bottombrushstroke); } .TextBlock--wide { max-width: 45rem; } .TextBlock--author { padding-bottom: 0; } .TextBlock-author { max-width: 7.5rem; } @media screen and (min-width: 22.5em) { .TextBlock-author { float: left; margin-right: 1rem; margin-top: 0.5rem; } } @media screen and (min-width: 53.75rem) { .TextBlock-author { margin-left: -8.5rem; } .TextBlock--image { display: flex; max-width: 42.5rem; } .TextBlock--image figure { flex: 1 0 45%; } } :root { --topbrushstroke: url('data:image/svg+xml;utf8,'); --bottombrushstroke: url('data:image/svg+xml;utf8,'); --downwardarrow: url('data:image/svg+xml;utf8,'); } .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: flex; flex-wrap: wrap; margin-top: 2rem; } .Trio-item { 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 { flex-direction: column; margin-left: 1rem; } .Trio--stacked .Trio-item { width: 90%; display: flex; flex-direction: row; align-items: center; margin-top: 0; max-width: 43.75rem; } .Trio--stacked .Trio-item--rebel { margin-left: 5rem; } .Trio--stacked .Trio-description { 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: flex; 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: flex; padding: 3rem; } .WorkshopBlock-primary { flex: 1 0 40%; } .WorkshopBlock-secondary { 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: flex; flex-wrap: wrap; } .BlogGrid-item { 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: grid) { .Cols { display: grid; 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 { order: 2; } .Cols--half { grid-template-columns: 1fr 1fr; } .Cols--one-third { grid-template-columns: 1fr 1fr 1fr; } .Cols--two-thirds { grid-template-columns: 1fr 2fr; } .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--small { margin: auto; max-width: 62.5rem; } .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: 2rem; padding-right: 2rem; } .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; } } .flex { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .flex > * { margin: 0.5rem; flex: 1; min-width: 380px; width: 100%; max-width: 600px; } .flex--center { justify-content: center; } @media screen and (min-width: 800px) { .flex > * { max-width: calc(50% - 1rem); } } .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: flex; } .Home-gridItem { 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--leadPrimary { position: relative; z-index: 2; } .LayoutAlernate-item--leadSecondary { margin-top: -2rem; margin-left: -1rem; margin-right: -1rem; position: relative; } @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: 1rem 4rem 0; } .LayoutAlernate-item--leadPrimary { margin-top: 2rem; width: 55%; 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; } } .is-panel-event .ImageBlock--fullwidth { margin: 0; padding: 0; width: 100%; } .is-panel-event .panel { margin-bottom: 3rem; } .is-panel-event .panel-image { flex-shrink: 0; max-width: 300px; } .is-panel-event .panel-image p { margin-bottom: 0; } .is-panel-event .ImageBlock--panel { width: 300px; height: 300px; object-fit: cover; margin: 0; padding: 0; } .is-panel-event .agenda { list-style: none; } .is-panel-event .ContactInfo-background { position: relative; height: 100%; min-height: 400px; } @media (min-width: 53.125em) { .is-panel-event .Masthead-primary .Masthead-sub--contextLarge { line-height: 1.3; } } @media (min-width: 900px) { .is-panel-event .t-grid-offset { display: grid; grid-template-columns: repeat(9, 1fr); } .is-panel-event .t-grid-offset > div:nth-child(odd) { justify-self: start; grid-column: 1 / span 7; } .is-panel-event .t-grid-offset > div:nth-child(even) { justify-self: start; grid-column: 3 / span 7; } .is-panel-event .panel-image { margin-right: 2rem; } .is-panel-event .panel { display: flex; } } @media only screen and (min-width: 45em) { .PresentsGrid { display: flex; max-width: 65rem; margin: auto; } .PresentsGrid-primary { flex: 1 0 60%; } .PresentsGrid-secondary { 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: grid) { .TeamGrid { display: grid; } .TeamGrid-item { width: 100%; } @media only screen and (min-width: 18.75em) { .TeamGrid { grid-template-columns: repeat(2, 50%); } } @media only screen and (min-width: 30em) { .TeamGrid { 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) { transform: translateX(-5em); } } @media only screen and (min-width: 61.25em) { .TeamGrid { 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) { transform: translateX(-6.25em); } } } .Work { max-width: 73.75rem; margin-top: -1.25rem; } @media screen and (min-width: 45rem) { .Work-grid { padding: 1rem; display: flex; 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 */