02dc082958
* Adds Facebook svg button, and adds Facebook link type to models * CSS work from takeflight, 30 June 2016 * Adds drop-down menus for navigation * Adds mobile menus for navigation * Minor tweak to mobile nav headings * Makes the logo a link back to the homepage * Updates the footer to the current version, removing sponsor logos for the moment.
1569 lines
29 KiB
CSS
1569 lines
29 KiB
CSS
@charset "UTF-8";
|
||
/**
|
||
* Media Queries - *Try* and make everything fit within these - use @from/to/between
|
||
*/
|
||
/**
|
||
* Font definitions
|
||
*/
|
||
/**
|
||
* Transitions
|
||
*/
|
||
/**
|
||
* Padding
|
||
* Usage: padding: $padding-rythm*2
|
||
*/
|
||
/*
|
||
* Colours
|
||
*/
|
||
/**
|
||
* Purpose-based colors
|
||
*/
|
||
/**
|
||
* z-index stack
|
||
*/
|
||
/**
|
||
* Misc
|
||
*/
|
||
/* ---------------------------------------------------------------------------
|
||
|
||
Content-first media queries
|
||
===========================
|
||
|
||
Taken from Dominic Whittle with permission by Jonny Scholes
|
||
|
||
@TODO make these media query wrappers work as described.
|
||
|
||
from( n ) { ... }
|
||
Styles elements from (and inclusive) of n.
|
||
Useful for adding complexity as viewport size increases.
|
||
|
||
to( n ) { ... }
|
||
Styles elements up to but not including n.
|
||
Effectively, max-width n-1
|
||
Useful for the occasional small screen only style.
|
||
|
||
n must be unitless CSS pixels; e.g., 768 or 1024
|
||
It gets converted to em.
|
||
|
||
from-to( x, y ) { ... }
|
||
|
||
|
||
All take an additional $legacy parameter.
|
||
|
||
|
||
// Examples
|
||
|
||
@include to( $BreakpointSmall ) {
|
||
// max-width( 320/16em )
|
||
.nav {}
|
||
}
|
||
|
||
@include from-to( $BreakpointMedium, 1280, legacy ) {
|
||
// min-width( 320/16em ), max-width( 1280-1 )
|
||
.nav {}
|
||
}
|
||
|
||
@include from( 1280 ) {
|
||
// min-width 1280
|
||
.nav {}
|
||
}
|
||
--------------------------------------------------------------------------- */
|
||
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
|
||
max-width: 1746px;
|
||
margin: 0 40px;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
|
||
margin: 0 70px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
|
||
margin: 0 160px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80em) {
|
||
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
|
||
margin: 0 200px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1946px) {
|
||
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.panel--content, .l-speaker-page {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-ms-flex-align: start;
|
||
align-items: flex-start;
|
||
-ms-flex-wrap: wrap;
|
||
flex-wrap: wrap;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.panel--content, .l-speaker-page {
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.panel--1-3, .l-speaker-page--portrait, .l-footer--text {
|
||
-ms-flex-order: 1;
|
||
order: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.panel--1-3, .l-speaker-page--portrait, .l-footer--text {
|
||
-ms-flex-order: 0;
|
||
order: 0;
|
||
width: auto;
|
||
-ms-flex-preferred-size: calc((100% / 3) - 1.25rem * 2);
|
||
flex-basis: calc((100% / 3) - 1.25rem * 2);
|
||
}
|
||
}
|
||
|
||
.panel--2-3, .l-speaker-page--content, .l-footer--logos {
|
||
-ms-flex-order: 2;
|
||
order: 2;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.panel--2-3, .l-speaker-page--content, .l-footer--logos {
|
||
-ms-flex-order: 0;
|
||
order: 0;
|
||
width: auto;
|
||
-ms-flex-preferred-size: calc(((100% / 3) * 2) - 1.25rem * 2);
|
||
flex-basis: calc(((100% / 3) * 2) - 1.25rem * 2);
|
||
}
|
||
}
|
||
|
||
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
|
||
/* ==========================================================================
|
||
HTML5 display definitions
|
||
========================================================================== */
|
||
/**
|
||
* Correct `block` display not defined in IE 8/9.
|
||
*/
|
||
article,
|
||
aside,
|
||
details,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
main,
|
||
nav,
|
||
section,
|
||
summary {
|
||
display: block;
|
||
}
|
||
|
||
/**
|
||
* Correct `inline-block` display not defined in IE 8/9.
|
||
*/
|
||
audio,
|
||
canvas,
|
||
video {
|
||
display: inline-block;
|
||
}
|
||
|
||
/**
|
||
* Prevent modern browsers from displaying `audio` without controls.
|
||
* Remove excess height in iOS 5 devices.
|
||
*/
|
||
audio:not([controls]) {
|
||
display: none;
|
||
height: 0;
|
||
}
|
||
|
||
/**
|
||
* Address styling not present in IE 8/9.
|
||
*/
|
||
[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Base
|
||
========================================================================== */
|
||
/**
|
||
* 1. Set default font family to sans-serif.
|
||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||
* user zoom.
|
||
*/
|
||
html {
|
||
font-family: sans-serif;
|
||
/* 1 */
|
||
-ms-text-size-adjust: 100%;
|
||
/* 2 */
|
||
-webkit-text-size-adjust: 100%;
|
||
/* 2 */
|
||
}
|
||
|
||
/**
|
||
* Remove default margin.
|
||
*/
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Links
|
||
========================================================================== */
|
||
/**
|
||
* Address `outline` inconsistency between Chrome and other browsers.
|
||
*/
|
||
a:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/**
|
||
* Improve readability when focused and also mouse hovered in all browsers.
|
||
*/
|
||
a:active,
|
||
a:hover {
|
||
outline: 0;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Typography
|
||
========================================================================== */
|
||
/**
|
||
* Address variable `h1` font-size and margin within `section` and `article`
|
||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||
*/
|
||
h1 {
|
||
font-size: 2em;
|
||
margin: 0.67em 0;
|
||
}
|
||
|
||
/**
|
||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||
*/
|
||
abbr[title] {
|
||
border-bottom: 1px dotted;
|
||
}
|
||
|
||
/**
|
||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||
*/
|
||
b,
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/**
|
||
* Address styling not present in Safari 5 and Chrome.
|
||
*/
|
||
dfn {
|
||
font-style: italic;
|
||
}
|
||
|
||
/**
|
||
* Address differences between Firefox and other browsers.
|
||
*/
|
||
hr {
|
||
box-sizing: content-box;
|
||
height: 0;
|
||
}
|
||
|
||
/**
|
||
* Address styling not present in IE 8/9.
|
||
*/
|
||
mark {
|
||
background: #ff0;
|
||
color: #000;
|
||
}
|
||
|
||
/**
|
||
* Correct font family set oddly in Safari 5 and Chrome.
|
||
*/
|
||
code,
|
||
kbd,
|
||
pre,
|
||
samp {
|
||
font-family: monospace, serif;
|
||
font-size: 1em;
|
||
}
|
||
|
||
/**
|
||
* Improve readability of pre-formatted text in all browsers.
|
||
*/
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/**
|
||
* Set consistent quote types.
|
||
*/
|
||
q {
|
||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||
}
|
||
|
||
/**
|
||
* Address inconsistent and variable font size in all browsers.
|
||
*/
|
||
small {
|
||
font-size: 80%;
|
||
}
|
||
|
||
/**
|
||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||
*/
|
||
sub,
|
||
sup {
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Embedded content
|
||
========================================================================== */
|
||
/**
|
||
* Remove border when inside `a` element in IE 8/9.
|
||
*/
|
||
img {
|
||
border: 0;
|
||
}
|
||
|
||
/**
|
||
* Correct overflow displayed oddly in IE 9.
|
||
*/
|
||
svg:not(:root) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Figures
|
||
========================================================================== */
|
||
/**
|
||
* Address margin not present in IE 8/9 and Safari 5.
|
||
*/
|
||
figure {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Forms
|
||
========================================================================== */
|
||
/**
|
||
* Define consistent border, margin, and padding.
|
||
*/
|
||
fieldset {
|
||
border: 1px solid #c0c0c0;
|
||
margin: 0 2px;
|
||
padding: 0.35em 0.625em 0.75em;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct `color` not being inherited in IE 8/9.
|
||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||
*/
|
||
legend {
|
||
border: 0;
|
||
/* 1 */
|
||
padding: 0;
|
||
/* 2 */
|
||
}
|
||
|
||
/**
|
||
* 1. Correct font family not being inherited in all browsers.
|
||
* 2. Correct font size not being inherited in all browsers.
|
||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||
*/
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font-family: inherit;
|
||
/* 1 */
|
||
font-size: 100%;
|
||
/* 2 */
|
||
margin: 0;
|
||
/* 3 */
|
||
}
|
||
|
||
/**
|
||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||
* the UA stylesheet.
|
||
*/
|
||
button,
|
||
input {
|
||
line-height: normal;
|
||
}
|
||
|
||
/**
|
||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||
* All other form control elements do not inherit `text-transform` values.
|
||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||
*/
|
||
button,
|
||
select {
|
||
text-transform: none;
|
||
}
|
||
|
||
/**
|
||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||
* and `video` controls.
|
||
* 2. Correct inability to style clickable `input` types in iOS.
|
||
* 3. Improve usability and consistency of cursor style between image-type
|
||
* `input` and others.
|
||
*/
|
||
button,
|
||
html input[type="button"],
|
||
input[type="reset"],
|
||
input[type="submit"] {
|
||
-webkit-appearance: button;
|
||
/* 2 */
|
||
cursor: pointer;
|
||
/* 3 */
|
||
}
|
||
|
||
/**
|
||
* Re-set default cursor for disabled elements.
|
||
*/
|
||
button[disabled],
|
||
html input[disabled] {
|
||
cursor: default;
|
||
}
|
||
|
||
/**
|
||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||
* 2. Remove excess padding in IE 8/9.
|
||
*/
|
||
input[type="checkbox"],
|
||
input[type="radio"] {
|
||
box-sizing: border-box;
|
||
/* 1 */
|
||
padding: 0;
|
||
/* 2 */
|
||
}
|
||
|
||
/**
|
||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||
* (include `-moz` to future-proof).
|
||
*/
|
||
input[type="search"] {
|
||
-webkit-appearance: textfield;
|
||
/* 1 */
|
||
/* 2 */
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
/**
|
||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||
* on OS X.
|
||
*/
|
||
input[type="search"]::-webkit-search-cancel-button,
|
||
input[type="search"]::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/**
|
||
* Remove inner padding and border in Firefox 4+.
|
||
*/
|
||
button::-moz-focus-inner,
|
||
input::-moz-focus-inner {
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/**
|
||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||
* 2. Improve readability and alignment in all browsers.
|
||
*/
|
||
textarea {
|
||
overflow: auto;
|
||
/* 1 */
|
||
vertical-align: top;
|
||
/* 2 */
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Tables
|
||
========================================================================== */
|
||
/**
|
||
* Remove most spacing between table cells.
|
||
*/
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Custom Defaults
|
||
========================================================================== */
|
||
*,
|
||
*:before,
|
||
*:after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-field {
|
||
border: 1px solid #3ab1c9;
|
||
}
|
||
|
||
.form-field input[type='text'], .form-field input[type='tel'], .form-field input[type='number'], .form-field input[type='password'], .form-field input[type='email'] {
|
||
color: #0c486c;
|
||
padding: 10px;
|
||
width: 100%;
|
||
border: 0;
|
||
}
|
||
|
||
.form-field input[type='text']:focus::-webkit-input-placeholder, .form-field input[type='tel']:focus::-webkit-input-placeholder, .form-field input[type='number']:focus::-webkit-input-placeholder, .form-field input[type='password']:focus::-webkit-input-placeholder, .form-field input[type='email']:focus::-webkit-input-placeholder {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.form-field input[type='text']:focus::-moz-placeholder, .form-field input[type='tel']:focus::-moz-placeholder, .form-field input[type='number']:focus::-moz-placeholder, .form-field input[type='password']:focus::-moz-placeholder, .form-field input[type='email']:focus::-moz-placeholder {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.form-field input[type='text']:focus:-ms-input-placeholder, .form-field input[type='tel']:focus:-ms-input-placeholder, .form-field input[type='number']:focus:-ms-input-placeholder, .form-field input[type='password']:focus:-ms-input-placeholder, .form-field input[type='email']:focus:-ms-input-placeholder {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.form-field input[type='text']:focus::placeholder, .form-field input[type='tel']:focus::placeholder, .form-field input[type='number']:focus::placeholder, .form-field input[type='password']:focus::placeholder, .form-field input[type='email']:focus::placeholder {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.form-field input[type='text']::-webkit-input-placeholder, .form-field input[type='tel']::-webkit-input-placeholder, .form-field input[type='number']::-webkit-input-placeholder, .form-field input[type='password']::-webkit-input-placeholder, .form-field input[type='email']::-webkit-input-placeholder {
|
||
opacity: 1;
|
||
color: #0c486c;
|
||
}
|
||
|
||
.form-field input[type='text']::-moz-placeholder, .form-field input[type='tel']::-moz-placeholder, .form-field input[type='number']::-moz-placeholder, .form-field input[type='password']::-moz-placeholder, .form-field input[type='email']::-moz-placeholder {
|
||
opacity: 1;
|
||
color: #0c486c;
|
||
}
|
||
|
||
.form-field input[type='text']:-ms-input-placeholder, .form-field input[type='tel']:-ms-input-placeholder, .form-field input[type='number']:-ms-input-placeholder, .form-field input[type='password']:-ms-input-placeholder, .form-field input[type='email']:-ms-input-placeholder {
|
||
opacity: 1;
|
||
color: #0c486c;
|
||
}
|
||
|
||
.form-field input[type='text']::placeholder, .form-field input[type='tel']::placeholder, .form-field input[type='number']::placeholder, .form-field input[type='password']::placeholder, .form-field input[type='email']::placeholder {
|
||
opacity: 1;
|
||
color: #0c486c;
|
||
}
|
||
|
||
.form-field + .form-field {
|
||
margin-top: 20px;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
body {
|
||
font-size: 16px;
|
||
font-family: "Roboto", sans-serif;
|
||
line-height: 1.4;
|
||
color: #0c486c;
|
||
font-size: 4vw;
|
||
}
|
||
|
||
@media (min-width: 25em) {
|
||
body {
|
||
font-size: 2.2vw;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
body {
|
||
font-size: 2vw;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80em) {
|
||
body {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.lede {
|
||
margin: 30px 0;
|
||
margin: 1.875rem 0;
|
||
font-size: 4.2vw;
|
||
}
|
||
|
||
@media (min-width: 25em) {
|
||
.lede {
|
||
font-size: 3vw;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.lede {
|
||
font-size: 2vw;
|
||
margin: 3.375rem 0;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80em) {
|
||
.lede {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: "Titillium Web", sans-serif;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
line-height: 0.9;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
border-bottom: 1px solid #3ab1c9;
|
||
transition: color 300ms;
|
||
}
|
||
|
||
a:hover, a:focus, a:active {
|
||
color: #3ab1c9;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
ul > li,
|
||
ol > li {
|
||
list-style-position: inside;
|
||
}
|
||
|
||
blockquote {
|
||
margin-left: 0;
|
||
padding-left: 20px;
|
||
padding-left: 1.25rem;
|
||
font-style: italic;
|
||
border-left: 1px solid #3ab1c9;
|
||
}
|
||
|
||
table th {
|
||
font-family: "Titillium Web", sans-serif;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
table th, table td {
|
||
padding: 10px;
|
||
padding: 0.625rem;
|
||
text-align: left;
|
||
}
|
||
|
||
table th:not(:first-of-type), table td:not(:first-of-type) {
|
||
border-left: 1px solid #0c486c;
|
||
}
|
||
|
||
table tr:not(:last-of-type) {
|
||
border-bottom: 1px solid #0c486c;
|
||
}
|
||
|
||
table.alt th {
|
||
font-family: "Titillium Web", sans-serif;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
table.alt th, table.alt td {
|
||
padding: 10px;
|
||
padding: 0.625rem;
|
||
text-align: left;
|
||
}
|
||
|
||
table.alt th:not(:first-of-type), table.alt td:not(:first-of-type) {
|
||
border-left: 1px solid #3ab1c9;
|
||
}
|
||
|
||
table.alt tr:not(:last-of-type) {
|
||
border-bottom: 1px solid #3ab1c9;
|
||
}
|
||
|
||
/*
|
||
* Hide only visually, but have it available for screen readers: h5bp.com/v
|
||
*/
|
||
.visuallyhidden {
|
||
border: 0;
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0 !important;
|
||
position: absolute !important;
|
||
width: 1px;
|
||
}
|
||
|
||
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
|
||
clip: auto;
|
||
height: auto;
|
||
margin: 0;
|
||
overflow: visible;
|
||
position: static;
|
||
width: auto;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
background: transparent;
|
||
color: #0c486c;
|
||
text-decoration: none;
|
||
border: 1px solid #3ab1c9;
|
||
padding: 10px 20px;
|
||
padding: 0.625rem 1.25rem;
|
||
border-radius: 0.625rem;
|
||
transition: all 300ms ease-in-out;
|
||
line-height: normal;
|
||
}
|
||
|
||
.btn:hover, .btn:focus, .btn:active {
|
||
color: #3ab1c9;
|
||
border-color: #3ab1c9;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn__white {
|
||
color: white;
|
||
border-color: white;
|
||
}
|
||
|
||
.btn__white:hover {
|
||
background-color: white;
|
||
border-color: white;
|
||
color: #0c486c;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.btn {
|
||
border: 3px solid #0c486c;
|
||
}
|
||
.btn__white {
|
||
border-color: white;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.btn {
|
||
padding: 0.625rem 2.5rem;
|
||
}
|
||
}
|
||
|
||
.btn__compact {
|
||
padding: 0.625rem 1.25rem;
|
||
border: 1px solid #3ab1c9;
|
||
}
|
||
|
||
.btn__active {
|
||
border: solid #3ab1c9;
|
||
}
|
||
|
||
|
||
.btn-group {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-group > .btn,
|
||
.btn-group > .btn-svg {
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
margin-right: 1.25rem;
|
||
}
|
||
|
||
.btn-svg {
|
||
width: 2em;
|
||
height: 2em;
|
||
position: relative;
|
||
border-bottom: 0;
|
||
display: block;
|
||
}
|
||
|
||
.btn-svg > svg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-svg__alt {
|
||
color: #3ab1c9;
|
||
}
|
||
|
||
.btn-svg__alt:hover {
|
||
color: #0c486c;
|
||
}
|
||
|
||
.select {
|
||
position: relative;
|
||
}
|
||
|
||
.select select {
|
||
outline: 0;
|
||
border: 0;
|
||
width: 100%;
|
||
background-color: white;
|
||
color: #0c486c;
|
||
padding: 10px;
|
||
padding-right: 35px;
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.select select:active {
|
||
background-color: whitesmoke;
|
||
}
|
||
|
||
.select select::-ms-expand {
|
||
display: none;
|
||
}
|
||
|
||
.select:after {
|
||
content: ' ';
|
||
display: block;
|
||
position: absolute;
|
||
border-right: 1px solid #3ab1c9;
|
||
border-bottom: 1px solid #3ab1c9;
|
||
right: 15px;
|
||
top: 9px;
|
||
width: 15px;
|
||
height: 15px;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.boolean-group {
|
||
border: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.boolean-group--row {
|
||
display: block;
|
||
}
|
||
|
||
.boolean-group--row + .boolean-group--row {
|
||
margin-top: 6.666px;
|
||
margin-top: 0.41667rem;
|
||
}
|
||
|
||
.boolean-group--row > label {
|
||
position: relative;
|
||
padding-left: 17px;
|
||
display: block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.boolean-group--row > label:before {
|
||
content: '';
|
||
width: 12px;
|
||
height: 12px;
|
||
display: block;
|
||
position: absolute;
|
||
border: 1px solid #3ab1c9;
|
||
top: calc(50% - 12px / 2);
|
||
left: 0;
|
||
}
|
||
|
||
.boolean-group--row > label:after {
|
||
transition: all 300ms ease-in-out;
|
||
background-color: #0c486c;
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
left: 6px;
|
||
top: calc(50% - 12px / 2 + 4px * 1.5);
|
||
}
|
||
|
||
.boolean-group--row > input {
|
||
display: none;
|
||
}
|
||
|
||
.boolean-group--row > input:checked ~ label:after {
|
||
width: calc(12px - 4px);
|
||
height: calc(12px - 4px);
|
||
left: 2px;
|
||
top: calc(50% - 12px / 2 + (4px / 2));
|
||
}
|
||
|
||
.boolean-group--row > input[type="radio"] ~ label:before, .boolean-group--row > input[type="radio"] ~ label:after {
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.panel {
|
||
padding: 40px 0;
|
||
padding: 2.5rem 0;
|
||
/*
|
||
* Tabbed panel styles
|
||
*/
|
||
}
|
||
|
||
.panel--content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.panel--section-title {
|
||
margin: 4px 0;
|
||
margin: 0.25rem 0;
|
||
}
|
||
|
||
.panel--1-2 {
|
||
margin: 20px 0;
|
||
margin: 1.25rem 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.panel__bg {
|
||
background-color: #0c486c;
|
||
color: white;
|
||
position: relative;
|
||
}
|
||
|
||
.panel--bg {
|
||
position: absolute;
|
||
opacity: 0.3;
|
||
background-position: center;
|
||
background-size: cover;
|
||
background-blend-mode: multiply;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.panel--tabs {
|
||
display: block;
|
||
}
|
||
|
||
.panel--tab-title {
|
||
margin: 20px 0;
|
||
margin: 1.25rem 0;
|
||
}
|
||
|
||
.panel--tab-content {
|
||
display: none;
|
||
-ms-flex-item-align: start;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.panel--tab-content > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.panel--tab-content.is-active {
|
||
display: block;
|
||
}
|
||
|
||
.panel--tab-controls {
|
||
margin-bottom: 20px;
|
||
margin-bottom: 1.25rem;
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.panel--tab-controls-title {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.panel--tab-switch {
|
||
margin-right: 20px;
|
||
margin-right: 1.25rem;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.panel--tab-switch:hover, .panel--tab-switch.is-active {
|
||
cursor: pointer;
|
||
border-bottom: 1px solid #3ab1c9;
|
||
}
|
||
|
||
.panel__compact {
|
||
padding-top: 10px 0;
|
||
padding-top: 0.625rem 0;
|
||
}
|
||
|
||
.panel__compact.panel__last {
|
||
padding-bottom: 10px;
|
||
padding-bottom: 0.625rem;
|
||
}
|
||
|
||
.panel__compact .panel--content {
|
||
-ms-flex-align: start;
|
||
-ms-grid-row-align: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.panel__compact .panel--1-3 {
|
||
width: 100%;
|
||
margin-bottom: 2em;
|
||
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.panel {
|
||
padding: 0;
|
||
}
|
||
.panel--section-title {
|
||
margin: 3.75rem 0;
|
||
}
|
||
.panel--1-2 {
|
||
margin: 0.625rem 0;
|
||
-ms-flex-preferred-size: 46%;
|
||
flex-basis: 46%;
|
||
}
|
||
.panel--1-3, .panel--2-3, .panel--1-2 {
|
||
margin: 0;
|
||
}
|
||
.panel--content {
|
||
height: 700px;
|
||
-ms-flex-align: center;
|
||
-ms-grid-row-align: center;
|
||
align-items: center;
|
||
}
|
||
.panel__compact {
|
||
padding-top: 5rem;
|
||
}
|
||
.panel__compact.panel__last {
|
||
padding-bottom: 2.5rem;
|
||
}
|
||
.panel__compact .panel--content {
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
.illustration {
|
||
width: 35%;
|
||
padding-top: 35%;
|
||
position: relative;
|
||
border-radius: 100%;
|
||
box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5);
|
||
margin-bottom: 20px;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.illustration > svg {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.illustration > img {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.illustration {
|
||
width: 100%;
|
||
padding-top: 100%;
|
||
margin-bottom: 0;
|
||
box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.link-list {
|
||
list-style: none;
|
||
margin-top: 20px;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.link-list--item + .link-list--item {
|
||
margin-top: 10px;
|
||
margin-top: 0.625rem;
|
||
}
|
||
|
||
.link-list--link {
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.link-list {
|
||
margin-top: 0;
|
||
}
|
||
.link-list--item + .link-list--item {
|
||
margin-top: 1.25rem;
|
||
}
|
||
}
|
||
|
||
.portrait {
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 35%;
|
||
border-radius: 100%;
|
||
box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5);
|
||
margin-bottom: 20px;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.portrait:before {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 100%;
|
||
}
|
||
|
||
.portrait--img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.portrait {
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.menu-dropdown {
|
||
position: absolute;
|
||
left: 0;
|
||
padding-top: 20px;
|
||
padding-top: 1.25rem;
|
||
display: none;
|
||
z-index: 50;
|
||
}
|
||
|
||
.menu-dropdown:before {
|
||
position: absolute;
|
||
content: '';
|
||
background: linear-gradient(45deg, #89d0de 50%, transparent 50%);
|
||
width: 20px;
|
||
width: 1.25rem;
|
||
height: 20px;
|
||
height: 1.25rem;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.menu-dropdown__last {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
|
||
.menu-dropdown__last:before {
|
||
background: linear-gradient(-45deg, #89d0de 50%, transparent 50%);
|
||
left: auto;
|
||
right: 0;
|
||
}
|
||
|
||
.menu-dropdown .link-list {
|
||
font-size: 0.8em;
|
||
background-color: #89d0de;
|
||
padding-top: 20px;
|
||
padding-top: 1.25rem;
|
||
}
|
||
|
||
.menu-dropdown .link-list--item {
|
||
margin: 0;
|
||
display: block;
|
||
}
|
||
|
||
.menu-dropdown .link-list--item:hover {
|
||
background-color: #0c486c;
|
||
color: white;
|
||
}
|
||
|
||
.menu-dropdown .link-list--link {
|
||
font-weight: normal;
|
||
border: 0;
|
||
padding: 6.666px 40px 6.666px 20px;
|
||
padding: 0.41667rem 2.5rem 0.41667rem 1.25rem;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.menu-dropdown .link-list--link:hover {
|
||
color: white;
|
||
}
|
||
|
||
.mobile-menu {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: white;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
will-change: opacity;
|
||
transition: all 300ms ease-in-out;
|
||
pointer-events: none;
|
||
z-index: 100;
|
||
display: block;
|
||
margin-bottom: -150%;
|
||
}
|
||
|
||
.mobile-menu--list {
|
||
margin: auto;
|
||
text-align: center;
|
||
margin-top: 20%;
|
||
list-style: none;
|
||
}
|
||
|
||
.mobile-menu--item > a {
|
||
font-size: 2em;
|
||
border: 0;
|
||
}
|
||
|
||
.mobile-menu--item__primary > a {
|
||
font-size: 2.5em;
|
||
font-family: "Titillium Web", sans-serif;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.mobile-menu.is-active {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.mobile-menu {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
.l-header {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
margin-top: 50px;
|
||
margin-top: 3.125rem;
|
||
}
|
||
|
||
.l-header--logo {
|
||
display: inline-block;
|
||
width: 65%;
|
||
}
|
||
|
||
.l-header--logo > svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.l-header--logo > a {
|
||
border: 0;
|
||
}
|
||
|
||
.l-header--menu-opener {
|
||
float: right;
|
||
width: 22px;
|
||
height: 22px;
|
||
position: relative;
|
||
-ms-flex-item-align: start;
|
||
align-self: flex-start;
|
||
border: 0;
|
||
z-index: 101;
|
||
}
|
||
|
||
.l-header--menu-opener:after, .l-header--menu-opener:before {
|
||
transition: all 300ms ease-in-out;
|
||
content: '';
|
||
width: 100%;
|
||
height: 4.4px;
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
transform-origin: center;
|
||
background-color: #0c486c;
|
||
}
|
||
|
||
.l-header--menu-opener:before {
|
||
top: 0;
|
||
box-shadow: 0 8.8px #0c486c;
|
||
}
|
||
|
||
.l-header--menu-opener:after {
|
||
bottom: 0;
|
||
}
|
||
|
||
.l-header--menu-opener.is-active:before {
|
||
transform: translateY(8.8px) rotate(45deg);
|
||
box-shadow: 0 8.8px rgba(12, 72, 108, 0);
|
||
}
|
||
|
||
.l-header--menu-opener.is-active:after {
|
||
transform: translateY(-8.8px) rotate(-45deg);
|
||
}
|
||
|
||
.l-header--links {
|
||
height: 100%;
|
||
-ms-flex-item-align: start;
|
||
align-self: flex-start;
|
||
display: none;
|
||
list-style: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.l-header--nav {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
margin-right: 0.625rem;
|
||
vertical-align: top;
|
||
position: relative;
|
||
}
|
||
|
||
.l-header--nav:hover > .menu-dropdown {
|
||
display: block;
|
||
}
|
||
|
||
.l-header--nav > a {
|
||
vertical-align: top;
|
||
border: 0;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
@media (min-width: 25em) {
|
||
.l-header--logo {
|
||
width: 200px;
|
||
margin-right: 2.5rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.l-header {
|
||
margin-top: 6.25rem;
|
||
}
|
||
.l-header--menu-opener {
|
||
display: none !important;
|
||
}
|
||
.l-header--links {
|
||
display: inline-block;
|
||
}
|
||
.l-header--logo {
|
||
width: 255px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.l-header--logo {
|
||
width: 300px;
|
||
}
|
||
.l-header--nav {
|
||
margin-right: 1.25rem;
|
||
}
|
||
}
|
||
|
||
.l-speaker-page {
|
||
margin-top: 60px;
|
||
margin-top: 3.75rem;
|
||
}
|
||
|
||
.l-speaker-page--portrait {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.l-speaker-page {
|
||
-ms-flex-wrap: nowrap;
|
||
flex-wrap: nowrap;
|
||
margin-top: 5rem;
|
||
}
|
||
.l-speaker-page--content *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.l-speaker-page--portrait {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.l-footer {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-ms-flex-wrap: wrap;
|
||
flex-wrap: wrap;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
margin-top: 100px;
|
||
margin-top: 6.25rem;
|
||
padding: 50px 40px;
|
||
padding: 3.125rem 40px;
|
||
width: 100%;
|
||
}
|
||
|
||
.l-footer--logos {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-ms-flex-wrap: wrap;
|
||
flex-wrap: wrap;
|
||
-ms-flex-pack: distribute;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.l-footer--logo {
|
||
max-width: 100%;
|
||
-ms-flex-preferred-size: 45%;
|
||
flex-basis: 45%;
|
||
}
|
||
|
||
.l-footer--logo > svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.l-footer__alt {
|
||
background-color: #0c486c;
|
||
color: white;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.l-footer {
|
||
padding: 6.25rem 70px;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
}
|
||
.l-footer--logos {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.l-footer {
|
||
padding: 6.25rem 160px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80em) {
|
||
.l-footer {
|
||
padding: 6.25rem 200px;
|
||
}
|
||
.l-footer--logo {
|
||
margin-bottom: 0;
|
||
-ms-flex-preferred-size: auto;
|
||
flex-basis: auto;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1946px) {
|
||
.l-footer {
|
||
padding: 6.25rem auto;
|
||
}
|
||
}
|
||
|
||
.l-content-page {
|
||
margin-top: 80px;
|
||
margin-top: 5rem;
|
||
}
|
||
|
||
.l-content-page--image {
|
||
height: 200px;
|
||
width: 100%;
|
||
margin: 7vw 0;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
@media (min-width: 48em) {
|
||
.l-content-page--image {
|
||
height: 350px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.l-content-page--image {
|
||
height: 500px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80em) {
|
||
.l-content-page--image {
|
||
height: 600px;
|
||
}
|
||
}
|
||
|
||
.l-404 {
|
||
margin-top: 80px;
|
||
margin-top: 5rem;
|
||
}
|
||
|
||
@media (min-width: 64em) {
|
||
.l-404--content {
|
||
max-width: 50%;
|
||
}
|
||
}
|
||
|
||
.styleguide > .black {
|
||
background-color: black;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* ------------------------------------------------------------------------------------------------
|
||
|
||
Shame
|
||
=====
|
||
|
||
1. If it’s a hack, it goes in shame.css.
|
||
2. Document all hacks fully:
|
||
a. What part of the codebase does it relate to?
|
||
b. Why was this needed?
|
||
c. How does this fix it?
|
||
d. How might you fix it properly, given more time?
|
||
3. Do not blame the developer; if they explained why they had to do it then their reasons are
|
||
probably (hopefully) valid.
|
||
4. Try and clean shame.css up when you have some down time.
|
||
|
||
via: http://csswizardry.com/2013/04/shame-css/
|
||
|
||
------------------------------------------------------------------------------------------------ */
|
||
|
||
/*# sourceMappingURL=maps/app.css.map */
|