styles.scss

// Use external font CSS
@import '/assets/fonts/fonts.css';

// Mixins & Utilities
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  #{$property}: $value;
}

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &::-moz-placeholder {@content}
  &:-moz-placeholder {@content}
  &:-ms-input-placeholder {@content}  
}

@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';
    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};
        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {@content;}
    @-moz-keyframes #{$animationName} {@content;}
    @-o-keyframes #{$animationName} {@content;}
    @keyframes #{$animationName} {@content;}
}


// Media Queries (use by nesting like "@include md { some-style: only-applies-at-medium-size }")
$xs-width: 480px;
$sm-width: 768px;
$md-width: 992px;
$lg-width: 1200px;
@mixin xs { @media (max-width: #{$sm-width - 1px}) { @content; } }
@mixin sm { @media (min-width: $sm-width) and (max-width: #{$md-width - 1px}) { @content; } }
@mixin md { @media (min-width: $md-width) and (max-width: #{$lg-width - 1px}) { @content; } }
@mixin lg { @media (min-width: $lg-width) { @content; } }
@mixin sm-up { @media (min-width: $sm-width) { @content; } }
@mixin md-up { @media (min-width: $md-width) { @content; } }
@mixin sm-down { @media (max-width: #{$md-width - 1px}) { @content; } }
@mixin md-down { @media (max-width: #{$lg-width - 1px}) { @content; } }


// Colors
$tactic: #ff9200;       
$methodology: #b700c2; 
$principle: #166ce3;    
$theory: #f93732;       
$story: #08eb8c;        
//$gray: #606162;
//$gray: #b3b3b3;         
//$lightgray: #afafaf;
$gray: #828486;
$lightgray: #959595;
$lightergray: #f7f7f7;
$darkgray: #333;
.type-story { 
    svg * { fill: $story; }
}
.type-theory { 
    svg * { fill: $theory; }
}
.type-tactic { 
    svg * { fill: $tactic; }
}
.type-principle { 
    svg * { fill: $principle; }
}
.type-methodology { 
    svg * { fill: $methodology; }
}
a {
    text-decoration: underline;
}
a:link, a:visited, a:hover, a:active {
    &.tactic { color: $tactic; }
    &.methodology { color: $methodology }
    &.principle { color: $principle; }
    &.theory { color: $theory; }
    &.story { color: $story; }
    &.black { color: black; }
    &.gray { color: $gray; }
}
.tactic { color: $tactic; }
.methodology { color: $methodology }
.principle { color: $principle; }
.theory { color: $theory; }
.story { color: $story; }
.white { color: white; }
.black { color: black; }
.gray { color: $gray; }
.pattern {
    svg * { fill: none; } 
    &.tactic svg { line, polyline, circle { stroke: $tactic; }} 
    &.methodology svg { line, polyline, circle { stroke: $methodology; }} 
    &.principle svg { line, polyline, circle { stroke: $principle; }} 
    &.theory svg { line, polyline, circle { stroke: $theory; }} 
    &.story svg { line, polyline, circle { stroke: $story; }} 
    &.black svg { line, polyline, circle { stroke: black; }} 
    &.gray svg { line, polyline, circle { stroke: $gray; }} 
}


// General
$margin: 6px;
$transition: 0.1s;

html {
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    color: black;
    font-family: 'Avenir';
    font-size: 14px;
    line-height: 22px;
    height: 100%;
    @include xs {
        font-size: 11px;
        line-height: 16px;
    }
    @include sm {
        font-size: 12px;
        line-height: 18px;
    }
}
a:link, a:visited, a:hover, a:active { 
    color: $gray; 
} 
.hr {
    position: relative;
    padding: 4*$margin 0;
}
.hr::after {
    content: '';
    border: 1px solid black;
    left: 15px; right: 15px;
    position: absolute;
}
h3, .h3, .module-title {
    font-family: 'KnockoutBantam';
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: normal !important;
    @include xs {
        font-size: 22px;
        line-height: 19px;
    }
}
h4 {
    font-family: 'Avenir';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
}
blockquote {
    font-family: 'PaintHand';
    font-size: 20px;
    text-transform: uppercase;
    border-left: none;
    position: relative;
    line-height: 30px;
    margin-bottom: 0;
    margin-right: 12px;
    p {
        padding-top: 3 * $margin;
    }
    &.pull-quote {
        width: 50%;
        float: left;
        quotes: "“ " " ”" "‘ " " ’";
    }
    &.pull-quote p::before {
        content: open-quote;
    }
    &.pull-quote p::after {
        content: close-quote;
    }
    @include xs {
        padding-left: 0;
    }
}
blockquote::before {
    position: absolute;
    content: "";
    width: 42px;
    border-top: 2px solid black;
}
.module-type {
    font-family: 'PaintHand';
    text-transform: uppercase;
    font-size: 20px;
    line-height: 22px;
    @include xs {
        font-size: 16px
    }
}

svg * {
    @include prefix(transition, fill $transition linear, webkit moz);
    fill: $lightgray;
}
svg-inline.selected * {
    fill: black !important;
}
.selected {
    font-weight: bold;
    text-decoration: none !important;
    svg-inline * {
        fill: black;
    }
}
.clickable {
    cursor: pointer;
}
.disabled {
    pointer-events: none;
    opacity: .3;
}
.border-top {
    border-top: 2px solid black;
    padding-top: 2 * $margin;
    padding-bottom: 2 * $margin;
}
.border-bottom {
    border-bottom: 2px solid black;
    padding-top: 12px;
    padding-bottom: 6px;
}
.nop > p { // For [innerHTML] bindings where you don't want markdown's surrounding <p> tag
    display: inline;
}


// Background
.background {
    display: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
}


// Fixed header
$nav-height: 90px;
$nav-height-small: 72px;
$overlay-z: 1500;
.fixed-container-wrapper {
    position: fixed;
    z-index: 500; // XXX: How high is necessary?
    width: 100%;
}
#fixed-nav {
    top: 0;
    background: white;
    z-index: 1050;
    height: $nav-height;
    @include xs { height: $nav-height-small; }
}
.overlay {
    opacity: 0;
    background: $lightgray;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: $overlay-z;
    position: fixed;
    @include prefix(transition, opacity 2s linear, webkit moz);
}
.overlay.visible {
    opacity: .75;
}


// Content area (everything below the nav)
.content-area {
    position: relative;
    @include prefix(transition, right $transition linear, webkit moz);
    right: 0;
    margin-top: $nav-height;
    @include xs { margin-top: $nav-height-small; }
}


// Tools
$tab-height: 62px;
tools {
    position: fixed;
    top: $nav-height;
    width: 100%;
    z-index: 550;
    pointer-events: none;
    .container {
        margin: auto;
    }
    .master {
        position: relative;
        left: 101%;
        margin-left: 0px;
        pointer-events: initial;
        height: 100vh;
        padding-bottom: $nav-height + 24px;
        @include prefix(transition, margin-left $transition linear, webkit moz);
    }
    .icon-panel, .main-panel {
        height: 100%;
        overflow-x: hidden;
    }
    .icon-panel {
        border: 2px solid black;
        min-height: 300px;
        max-width: 76px;
    }
    .news-icon, .tools-icon {
        text-align: center;
        .button {
            padding-top: 12px;
            height: 100px;
        }
        .title {
            font-weight: bold;
            text-transform: uppercase;
            color: $lightgray;
            margin: 0 -12px;    // Gives more space for spanish
        }
        &.active {
            .title {
                color: black;
            }
            svg * { fill: black; }
        }
    }
    .arrow {
        text-align: center;
        .button { 
            padding: 12px 0;
        }
        svg-inline {
            display: inline-block;
            transform: translate(-2px,6px) rotate(0deg);
            @include prefix(transition, transform $transition linear, webkit moz);
        }
        &.active {
            svg-inline {
                transform: translate(0,0) rotate(180deg);
            }
            svg * { fill: black; }
        }
    }
    .tabs {
        border: 2px solid black;
        text-align: center;
        height: $tab-height;
        background: white;
        z-index: 1;
        position: absolute;
        left: -2px;
    }
    .tab {
        margin: 12px 0;
        .button {
            display: inline-block;
            width: 100%;
            height: 36px;
            &.active {
                .title { color: black; }
                svg * { fill: black; }
                svg path { fill: black !important; }
            }
        }
    }
    .twitter-tab, .pdf-tab {
        border-right: 2px solid black;
    }
    .button {
        cursor: pointer;
    }
    .main-panel {
        position: relative;
        left: -2px; top: -1px; // Not sure I understand the top positioning required here
        border: 2px solid black;
        overflow-y: scroll;
    }
    .content {
        margin-top: $tab-height;
        padding: 24px 18px;
    }
    .pdf, .email {
        h3 { 
            border-bottom: 2px solid black; 
            padding-bottom: 18px;
            margin-top: 0;
            margin-bottom: 24px;
        }
    }
    .tool {
        padding-top: 24px;
        overflow: hidden;
        .module-title {
            border-top: 2px solid black;
            padding-bottom: 12px;
            padding-top: 24px;
            color: black !important;
            position: relative;
        }
        .module-title::after {
            position: absolute;
            transform: scale(.75) translate(-10px, -5px);
        }
        .module-title.story::after { content: url(/assets/patterns/1row/story.svg); }
        .module-title.tactic::after { content: url(/assets/patterns/1row/tactic.svg); }
        .module-title.theory::after { content: url(/assets/patterns/1row/theory.svg); }
        .module-title.principle::after { content: url(/assets/patterns/1row/principle.svg); }
        .module-title.methodology::after { content: url(/assets/patterns/1row/methodology.svg); }
        &.first {
            padding-top: 0;
            .module-title {
                padding-top: 0;
                border-top: none;
            }
        }
        .module-unsave, .module-share {
            svg-inline {
                display: inline-block;
                vertical-align: bottom;
                height: 20px;
            }
            text-transform: uppercase;
            font-weight: bold;
            color: $lightgray;
        }
    }
    .subheading {
        font-weight: bold;
    }
}


// Menu
$menu-heading-size: 74px;
navbar {
    .fixed-container-wrapper .container {
        position: relative;
    }
    .close-icon, .logo-wrapper, .language-switcher {
        position: relative;
        z-index: 3;
        top: 15px;
    }
    .logo-wrapper {
        display: inline-block;
        @include xs { left: -18px; }
        @include md-up { left: -10px; }
        &.shifted {
            @include sm { left: -48px; }
        }
    }
    .logo-wrapper.has-background::after {
        //opacity: 0;
        content: "";
        position: absolute;
        z-index: -1;
        background: white;
        top: 0; bottom: 0;
        left: 0; right: 0;
    }
    .logo-wrapper.has-background.modified-background::after {
        @include lg { right: 52px; }
        @include md { right: 86px; }
    }
    .logo {
        @include xs { 
            max-width: 200px;
        }
    }
    .language-switcher {
        float: right;
        position: relative;
        top: 20px;
        div {
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: underline;
            text-align: right;
            color: $gray;
            @include sm-up {
                display: inline-block;
                padding: 0 10px;
                border-left: 2px solid black;
            }
        }
        div:first-of-type {
            border-left: none;
        }
        div.selected {
            text-decoration: none;
            color: black;
        }
    }
    .menu-toggle {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        position: relative;
        top: 20px;
        h4 {
            margin-top: 0;
        }
    }
    .overlay {
        z-index: 1;
    }
    .menu-outer {
        height: 100vh;
        border: 2px solid black;
        background: white;
        border-bottom: none; // This border is added to the inner
        padding: 0;
        overflow-x: hidden;
        z-index: 2;
        position: absolute;
        top: 0;
    }
    .menu {
        height: 100%;
        width: 106%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .menu-heading {
        position: absolute;
        width: 100%;
        height: $menu-heading-size;
        background: white;
        z-index: 1;
        .home, .close-icon, .spacer {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .menu-sections {
        padding-top: $menu-heading-size - 18px;
        @include xs {
            padding-top: $menu-heading-size -12px;
        }
        @include sm {
            padding-top: $menu-heading-size;
        }
    }
    .menu-section, .menu-heading {
        padding: 24px 24px 18px 24px;
        border-bottom: 2px solid black;
        em {
            color: $lightgray;
            font-size: 13px;
            display: inline-block;
        }
        h3 { 
            margin-top: 0; 
        }
        input {
            outline: none;
        }
        p {
            font-size: 12px;
        }
        p:first-of-type {
            margin-top: 20px;
        }
        p.clickable {
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: underline;
            color: $gray;
            margin-bottom: 12px;
        }
        .email {
            display: block;
            padding: 12px 0;
        }
        p.subscribe {
            margin: 12px 0 6px 0;
        }
        svg-inline {
            position: relative;
            top: 6px;
            margin-right: 18px;
        }
        .form { 
            position: relative;
            border: 2px solid black;
            margin-bottom: 18px;
            width: 95%;
            input {
                padding: 5px 70px 5px 10px;
                width: 100%;
                border: 0px solid;
            }
            .submit {
                color: $gray;
                position: absolute;
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: underline;
                right: 8px; top: 6px;
            }
        }
        .form-message p {
            margin-top: 6px;
            width: 95%;
        }
        .form-message.error p {
            color: $theory;
        }
    }
}


// Footer
.footer {
    margin-top: 36px;
    text-align: center;
    color: $gray;
    font-style: italic;
    font-size: 10px;
    line-height: 1.75;
    .hr {
        padding-bottom: 0;
    }
    img {
        padding: 2 * $margin;
    }
}


// Search
$search-height: 50px;
.search-box {
    padding: $margin * 2;
    padding-top: $margin * 4;
    width: 100%;
    height: $search-height;
    border: 2px solid black;
    outline: none;
    @include placeholder {
        font-style: italic;
    }
    @include xs {
        height: initial;
        padding: 6px 12px;
        padding-top: 12px;
    }
}

// Types
.type-representation {
    text-align: left;
    > div { 
        padding-top: $margin; 
    }
    svg { 
        max-width: 100%; 
    }
    &.first p.definition { 
        padding-top: 7*$margin; 
    }
    &.expanded h3 { 
        padding-top: 3*$margin; 
    }
    h3 {
        margin-top: 0;
        margin-bottom: 2px;
    }
    .definition {
        p { padding-top: $margin; }
    }
    @include xs {
        > div { 
            padding-top: 0; 
        }
        svg-inline.onerow { 
            position: absolute;
        }
        svg-inline.tworows svg { 
            height: 40px;
        }
        h3 { 
            padding-top: 6px; 
        }
        .definition p { 
            font-size: 10px;
            line-height: 15px;
            margin-left: -6px;
            margin-right: -12px;
            padding-top: 12px;
        }
    }
}
.pattern-container-wrapper {
    z-index: 0;
    .outside-pattern {
        height: 265px;
    }
    .pattern {
        position: absolute;
        opacity: .3;
        bottom: 0;
        width: 95%;
        svg {
            width: 100%;
            height: auto;
        }
    }
}
.module-types {
    //@include prefix(transition, height $transition linear, webkit moz);
    border: 2px solid black;
    border-top: 0;
    text-align: center;
    background: white;
    position: relative;
    padding: 2*$margin 0;
    @include sm {
        padding: 2*$margin;
    }
    > div {
        overflow: hidden;
        height: 100%;
    }
    .loader-wrapper {
        min-height: 100px;
    }
    &.expanded::before {
        content: '';
        position: absolute;
        border-left: 1px solid black;
        height: 40px; width: 0;
        left: 49.7%; top: 95%;
    }
    // Styles for selected 
    .type-list, .type-description {
        text-align: left;
        padding: 2 * $margin 22px;
        .expanded {
            padding: 4 * $margin 22px;
        }
        svg-inline {
            display: inline-block;
        }
    }
    .type-list {
        position: relative;
        z-index: 100;
        .h3 {
            color: black;
            margin-top: -3px; //margin-top: 0; /* compensate for change in baseline */
        }
        .type-link {
            font-weight: bold;
            text-transform: uppercase;
            display: inline-block;
            margin-right: 2 * $margin;
        }
        .regions {
            display: inline-block;
            vertical-align: top;
        }
        .expanded {
            &.type-link {
                padding: $margin 0;
                display: block;
                * { 
                    opacity: 1.0;
                    @include prefix(transition, opacity $transition linear, webkit moz);
                    &.selected { opacity: 0; }
                }
                &.selected {
                    opacity: 0;
                }
                @include xs {
                    display: inline-block;
                }
            }
        }
    }
    .regions {
        @include sm-down {
            svg { width: 36px; }
            padding: 0 !important;
        }
    }
    .type-pattern {
        h3 {
            font-size: 50px;
            position: absolute;
            z-index: 50;
            right: 4px; top: 30px;
        }
        svg-inline {
            position: absolute;
            right: 0; top: 18px;
            width: 100%;
            max-height: 160px;
            overflow-y: hidden;
            @include sm {
                width: 200%;
            }
            svg {
                width: 100%;
                height: auto;
                opacity: .3;
            }
        }
    }
    .type-description {
        p { margin-right: 50px; }
        h3 {
            border-bottom: 2px solid black;
            padding-bottom: 4px;
            margin-bottom: 36px;
            width: 50%;
            @include sm-down {
                margin-bottom: 12px;
            }
        }
        h3::before {
            content: '';
            position: relative;
            border-left: 1px solid black;
            height: 30px; width: 0;
            left: 75%; top: 25px;
        }
    }
    .arrow {
        position: absolute;
        z-index: 1000;
        bottom: 0; right: 0;
        padding: 2 * $margin + 2 4 * $margin;
        display: inline-block;
        @include prefix(transition, transform $transition linear, webkit moz);
        transform: rotate(180deg);
        svg * { fill: $lightgray; }
    }
    .arrow.selected {
        transform: rotate(270deg);
        svg * { fill: black; }
    }
}

// Gallery
.gallery {
    padding-top: $search-height;
    display: flex;
    //@include prefix(transition, margin-top $transition linear, webkit moz);
}
.gallery-sort {
    text-align: center;
    .sort-by {
        color: $gray;
        font-weight: bold;
        text-transform: uppercase;
    }
    .sort-by div {
        text-decoration: underline;
    }
    .sort-by .selected {
        color: black;
    }
    .view-as, .sort-by {
        margin-bottom: 8 * $margin;
    }
    .gallery-clear {
        padding-top: 6 * $margin;
    }
    .tag.selected {
        color: black;
    }
    @include sm-down {
        text-align: initial;
        h3 { 
            display: inline-block; 
        }
        h3, span {
            padding-right: 6px;
        }
        svg {
            width: 18px;
            position: relative;
            top: 6px;
            margin-right: 6px;
        }
    }
}
.gallery-sort, .gallery-list, .gallery-info {
    padding-top: 2 * $margin;
}
.gallery-clear {
    font-weight: bold;
    padding-right: 4 * $margin;
    text-transform: uppercase;
    .icon {
        font-size: 150%;
    }
}
.gallery-module-grid-wrapper {
    // Compensate for some wonky bootstrap margin situation
    @include md-down { 
        margin-right: 9px;
    }
    @include sm-down {
        margin-left: 9px;
    }
}
.gallery-module-grid {
    .make-it-square {
        margin-top: 110%;
    }
    .module-save {
        padding: 12px 12px 12px 0;
        width: 50px;
    }
    .region-icon {
        position: absolute;
        top: 2 * $margin; 
        right: 0;
        height: 32px;
        svg * { fill: $story; }
        svg { height: 100%; }
    }
    .module-title {
        color: white;
        padding-right: 15px;
        &.story {
            padding-right: 60px;
        }
    }
    .module-content {
        overflow: hidden;
        padding: 2 * $margin;
        z-index: 100;
        position: relative;
        top: 50%;
    }
    .module-content-inner {
        height: 100%; // forcing the flexbox thing to work
    }
    .offset {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .module-image {
        background-size: cover;
        background-position: 50% 50%;
        opacity: 0;
        @include prefix(transition, opacity .5s ease-in, webkit moz);
    }
    .module-overlay {
        background: black;
        opacity: 0.5;
        z-index: 50;
    }
    .module-content, .module-overlay, .module-image, {
        position: absolute;
        top: 4 * $margin; bottom: 0;
        left: 10px; right: 15px; // Just as bootstrap grid would do
        @include md-down {
            top: 12px;
            left: 6px; right: 6px;
        }
    }
    .module-snapshot {
        position: absolute;
        top: 2 * $margin; bottom: 2 * $margin;
        left: 2 * $margin; right: 2 * $margin;
        font-weight: bold;
        z-index: -1;
        opacity: 0;
    }
    .module-snapshot, .module-content-inner, .module-overlay {
        @include prefix(transition, opacity $transition linear, webkit moz);
    }
}
.gallery-module-list {
    .module-type-accent {
        padding-top: 4 * $margin;
        margin-bottom: 2 * $margin;
        width: 15%;
        border-bottom: 2px solid black;
    }
    .module-content {
        height: 240px;
        @include lg { height: 216px; }
        @include xs { height: initial; }
    }
    .module-snapshot {
        padding-top: 3 * $margin;
    }
}
.es .gallery-module-list {
    .module-content {
        height: 255px;
        @include md { height: 275px; }
        @include sm { height: 250px; }
        @include xs { height: 180px; }
    }
}


// Detail
detail {
    .module-image {
        padding-top: 35%;
        background-size: cover;
        background-position: 50% 35%;
        position: relative;
        margin-bottom: 32px;
        @include xs {
            min-height: 200px;
        }
        .pattern {
            position: relative;
            svg-inline {
                position: absolute;
                z-index: 100;
                margin: -25% 0 0 0;
                right: 95%;
            }
            @include sm-down {
                svg { height: 100px; width: auto; }
            }
        }
        .pattern-hover {
            width: 264px;   // Matches the pattern width
        }
        .pattern-hover-inner {
            z-index: 1000;
            position: absolute;
            top: 10%;
            text-align: center;
            border: 2px solid black;
            background: white;
            display: inline-block;
            padding: 2px 6px;
            .hover-unit, .pattern-unit, .plus {
                display: inline-block;
                height: 100%;
            }
            .plus {
                position: relative;
                bottom: 32px;
            }
            .title.first {
                text-decoration: underline;
            }
        }
        .pattern-snapshot {
            background-repeat: no-repeat;
            position: absolute;
            top: 0; bottom: 0;
            left: 0; right: 0;
            opacity: .5;
        }
        .overlay {
            position: absolute;
            top: 0; bottom: 0;
            left: 0; right: 0;
            z-index: 0;
            background: black;
            opacity: .5;
        }
        .module-header, .module-image-caption {
            position: absolute;
            top: 18%; bottom: 0;
            left: 7%; right: 4%;
            color: white;
            z-index: 100;
        }
        .module-image-caption {
            top: initial; 
            p::before {
                content: "/";
                position: absolute;
                left: -2 * $margin;
            }
        }
        .module-type {
            font-size: 40px;
            @include md { font-size: 30px; }
            @include sm-down { font-size: 22px; }
        }
        .module-title {
            margin-top: 10px;
            font-size: 80px;
            @include xs { 
                margin-top: 0;
                font-size: 30px;
                line-height: 28px;
            }
            @include sm { 
                margin-top: 6px;
                font-size: 42px; 
            }
            @include md { font-size: 60px; }
        }
        .module-save, .module-share {
            display: inline-block;
            text-transform: uppercase;
            font-weight: bold;
            svg-inline {
                display: inline-block;
                position: relative;
                top: 8px;
                width: 35px;
            }
            svg * { fill: white; }
            @include xs { font-size: 10px; }
        }
        .story-extra {
            position: absolute;
            top: -2*$margin;
            right: 0; 
            text-align: right;
            font-weight: bold;
            text-transform: uppercase;
            svg-inline {
                height: 40px;
                position: absolute;
                right: 0;
                svg { height: 100%; }
            }
        }
    }
    h3.bigger {
        padding-top: 0;
        padding-bottom: 0;
        color: black;
        font-size: 40px;
        line-height: 36px;
        margin-top: 0;
        margin-bottom: 7px;
        @include sm-down {
            margin-top: 36px;
            font-size: 30px;
            line-height: 26px;
        }
    }
    h4 {
        padding: $margin 0;
        font-size: 19px;
        line-height: 22px;
        @include sm-down {
            font-size: 16px;
            line-height: 18px;
        }
    }
    h5.button {
        text-transform: uppercase;
        padding: $margin 2 * $margin;
        border: 2px solid black;
        cursor: pointer;
        font-weight: bold;
        display: inline-block;
    }
    .contributed-by {
        @include sm-down {
            margin-bottom: 24px !important;
            margin-top: 0 !important;
        }
    }
    .contributor-image {
        width: 100%;
        height: 165px;
        border: 2px solid black;
        background-size: cover;
        background-position: 50% 30%;
        @include md-up {
            margin-top: 10px;
        }
    }
    .contributor-name {
        position: relative;
        .first { 
            margin-bottom: 0; 
            padding-bottom: 0;
        }
        .last { 
            margin-top: 0; 
            padding-top: 0;
        }
        @include sm {
            h4 { 
                margin-top: 0;
                padding-top: 0; 
            }
        }
    }
    .contributor-bio {
        margin-bottom: 24px;
    }
    .anon {
        width: 60%;
        position: relative;
        @include xs { 
            max-width: 100px;
            width: 30%; 
        }
        @include sm { width: 20%; }
        @include md { width: 50%; }
    }
    .your-arrow {
        position: absolute;
        left: 100%;
        top: -65%;
        @include sm {
            transform: rotateY(180deg) rotateZ(90deg);
            left: 0; right: 100%;
            top: 50%;
        }
    }
    .tag {
        color: $gray;
    }
    .related {
        padding: 24px;
        padding-top: $margin;
        background: $lightergray;
        h3 {
            padding-left: 22px;
        }
        ul { 
            list-style-type: square;
            text-transform: uppercase;
        }
        li {
            font-weight: bold;
            padding: 2px 0;
        }
        @include xs {
            padding: 6px 24px 24px 0;
        }
    }
    .content {
        //margin-top: 32px;
        h3 {
            margin-top: 0;
            margin-bottom: 2 * $margin;
        }
        img {
            max-width: 100%;
        }
        hr.footnotes-sep {
            display: none;
        }
        .module-type {
            margin-top: 3 * $margin;
        }
        .epigraphs {
            margin: 0 2*$margin 2*$margin 2*$margin;
            .attribution * { 
                display: inline;
                color: $gray; 
            }
            .attribution::before { 
                content: "—"; 
                color: $gray; 
            }
        }
        .learn-more {
            padding-bottom: 36px;
            h4 {
                margin: 36px 0 12px 0;
            }
            a {
                color: $gray;
                font-weight: bold;
                text-decoration: underline;
            }
        }
        .key-heading, .how-to-use, .why-worked-or-failed {
            margin-top: 6*$margin;
        }
        .contribute-message {
            margin-bottom: 36px;
        }
    }
    .risks, .examples {
        .heading {
            border-bottom: $margin solid black;
            margin-bottom: $margin * 2;
            svg-inline, h3 {
                display: inline-block;
            }
            h3 {
                margin-left: $margin;
                margin-bottom: 7px;
                @include xs {
                    margin-bottom: 0;
                }
            }
            .arrow {
                @include prefix(transition, transform $transition linear, webkit moz);
                transform: scale(0.75) translate(5px,-10px) rotate(180deg);
                svg * { fill: $lightgray; }
            }
            .arrow.selected {
                svg * { fill: black; }
                transform: scale(0.75) translate(6px,-6px) rotate(270deg);
            }
        }
    }
    .risks {
        margin-bottom: 36px;
        &.clickable {
            text-decoration: none;
        }
        @include sm {
            p { padding-left: 50px }
        }
        @include sm-down {
            h3.bigger { // Check this carefully before changing it
                margin-bottom: 0;
            }
        }
    }
    .examples {
        .heading {
            margin-bottom: 24px;
            svg-inline {
                position: relative;
                top: 3px;
                svg .circle { fill: black; }
                @include sm { 
                    top: 0; 
                    vertical-align: bottom;
                }
                @include xs { top: -3px; }
            }
            h3 {
                max-width: 80%;
                @include sm {
                    margin-bottom: 0;
                }
                vertical-align: top;
                transform: scale(1) translate(0,0) rotate(0deg);
            }
            h3.after-arrow::after {
                display: inline-block;
                content: url('/assets/img/arrow.svg');
                transform: scale(0.75) translate(10px,0px) rotate(180deg);
                @include prefix(transition, transform $transition linear, webkit moz);
            }
            h3.after-arrow.selected::after {
                content: url('/assets/img/arrow-black.svg');
                transform: scale(0.75) translate(6px,0px) rotate(270deg);
            }
        }
        .example {
            position: relative;
        }
        .example-wrapper {
            @include sm {
                padding-left: 50px;
            }
        }
        .caption-wrapper {
            min-height: 200px;
            .caption {
                position: absolute;
                left: 25%; right: 0;
                bottom: 24px;
                background: white;
                border: 2px solid black;
                padding: 10px 12px 0 12px;
                line-height: 18px;
                a {
                    text-decoration: initial;
                    color: black;
                }
                h5 {
                    font-weight: bold;
                    margin: 2px 0 6px 0;
                    text-transform: uppercase;
                }
                .description {
                    font-style: italic;
                }
            }
            &.staggered {
                .caption {
                    bottom: initial;
                    top: 0;
                    left: 0; right: 25%;
                }
            }
        }
        .image {
            position: absolute;
            top: 0; bottom: 48px;
            left: 24px; right: 24px;
            padding-left: 10%;
            padding-right: 10%;
            z-index: -1;
            //background: $lightergray;
            opacity: .5;
            background-repeat: no-repeat;
            background-position-y: 25%;
            background-position-x: 100%;
            &.staggered {
                top: 24px; bottom: 24px;
                background-position-x: 0%;
            }
            &.shifted {
                background-position-x: 50%;
            }
        }
        .contribute {
            h4 { 
                margin-bottom: 0; 
            }
            input, textarea {
                border: 2px solid black;
                border-bottom: none;
                display: block;
                width: 100%;
                padding: 5px 10px;
                &.missing {
                    background: pink;
                }
            }
            textarea {
                border-bottom: 2px solid black;
                max-width: 100%;
                padding-right: 70px;
                margin-bottom: 12px;
            }
            textarea::-webkit-input-placeholder, 
            textarea::-moz-placeholder,
            textarea:-ms-input-placeholder,
            textarea:-moz-placeholder
            input::-webkit-input-placeholder, 
            input::-moz-placeholder,
            input:-ms-input-placeholder,
            input:-moz-placeholder {
                font-style: italic;
            }
            textarea:focus, input:focus { 
                outline: none;
            }
            .textarea-wrapper {
                position: relative;
            }
            .submit {
                color: $gray;
                position: absolute;
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: underline;
                right: 12px; bottom: 6px;
            }
            .recaptcha {
                padding-top: 12px;
            }
        }
    }
    .edit-link {
        position: fixed;
        bottom: 0; right: 0;
        text-decoration: none;
        z-index: 2000;
        opacity: 0;
        width: 20px; height: 20px;
        &:hover { 
            opacity: 1; 
            width: initial; height: initial;
            padding: 10px;
        }
    }
}


// Pages & modal window (about)
modal {
    .fixed-container-wrapper {
        padding-top: 50px;
        padding-bottom: 100px;
        top: 0; bottom: 0;
        left: 0;
        z-index: 1900;
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: rgba($lightgray, .75);
        width: initial;
    }
    .inner {
        background: white;
        border: 2px solid black;
        position: relative;
    }
    .upper, .lower { 
        padding: 30px 60px; 
        @include sm-down {
            padding: 20px;
        }
    }
    .lower { padding-bottom: 12*$margin; }
    .upper {
        color: white;
        position: relative;
        h3 { font-size: 40px; }
        .logo { top: 0; }
    }
    .banner {
        background-image: url('/assets/img/modal.jpg');
        background-size: cover;
        background-position: 50% 50%;
        position: absolute;
        top: 0; bottom: 0;
        left: 15px; right: 15px;
        &::after {
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            content: "";
            position: absolute;
        }
    }
    .close-icon {
        position: absolute;
        right: -25px; top: 25px;
        @include sm-down {
            right: 25px;
        }
    }
    .dismiss p {
        position: relative;
        display: inline-block;
        width: 210px;
        bottom: 42px;
        padding: 2*$margin 4*$margin;
        border: 2px solid black;
        background: white;
        text-transform: uppercase;
        font-weight: bold;
    }
    .dismiss {
        text-align: center;
        height: 0;
    }
}
.page {
    @include xs {
        padding-top: 12px;
    }
}
.page, .accordion {
    .page-heading {
        text-align: center;
        h3 { font-size: 48px; }
    }
    h4.heading { 
        color: black;
        font-size: 19px;
        border-bottom: 2px solid black;
        padding: 3 * $margin 2 * $margin;
        margin-bottom: 10 * $margin;
    }
    section {
        padding-bottom: 12 * $margin;
        .content {
            padding-right: 3 * $margin;
            padding-left: 3 * $margin;
        }
    }
    .overline::before {
        position: absolute;
        content: "";
        width: 42px;
        border-top: 2px solid black;
        margin-top: -2 * $margin;
    }
    h5 {
        text-transform: uppercase;
        font-weight: bold;
        margin-top: $margin;
    }
    .links {
        font-weight: bold;
        text-transform: uppercase;
        color: $gray;
    }
}
.about {
    h4.heading svg-inline { display: none; }
    &.accordion {
        h4.heading svg-inline { 
            display: inline-block; 
            vertical-align: bottom;
            @include prefix(transition, transform $transition linear, webkit moz);
            transform: rotate(180deg) scale(0.5);
            svg * { fill: $lightgray; }
        }
        h4.heading.expanded svg-inline {
            transform: rotate(270deg) scale(0.5);
            svg * { fill: black; }
        }
        h4.heading { 
            margin: 0;
        }
        section {
            padding: 0;
            .content { padding: 4 * $margin 3 * $margin; }
        }
    }
    .person {
        height: 500px;  // TODO: make responsive;
        @include xs { 
            height: initial; 
            margin-bottom: 36px;
        }
        p {
            margin-top: 4 * $margin;
            margin-right: 4 * $margin;
        }
    }
    .person-image {
        width: 40%;
        padding-top: 40%;
        border: 2px solid black;
        background-position: 50% 50%;
        background-size: cover;
        margin-bottom: 6 * $margin;
    }
    .process {
        .subheading {
            margin-top: 6 * $margin;
            margin-bottom: 4 * $margin;
            text-align: center;
        }
        .steps p {
            padding-left: 2 * $margin; 
        }
        .workshop-list ul {
            list-style-type: decimal; 
            font-size: 12px;
            line-height: 20px;
            padding-left: 4*$margin;
        }
        .img-wrapper { 
            width: 100%;
            height: 140px;
            padding: 12px 0;
            margin-bottom: 40px;
            img { max-height: 120px; }
            @include sm-down { margin-top: 36px; }
        }
        .step-circle {
            width: 65%; padding-top: 65%;
            border: 2px solid black;
            border-radius: 50%;
            position: relative;
            svg-inline {
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%,-50%);
                z-index: 1;
                svg * { fill: black; }
            }
            @include sm-down {
                margin-right: 17.5%;
                margin-left: 17.5%;
            }
        }
        .step-circle::after {
            @include sm-down { display: none; }
            content: "";
            border: 1px solid black;
            position: absolute;
            top: 50%; 
            width: 125%; right: -77%;
        }
        .step-circle.last::after {
            content: initial;
        }
        .steps .description {
            margin-bottom: 36px;
        }
    }
    .values, .faq {
        p { padding-left: 10%; }
        .content h4 { 
            font-size: 19px;
            padding-top: $margin; 
        }
        .disclaimer { margin-top: 10 * $margin; }
        .disclaimer-text { color: gray; }
    }
    .advisory-network, .team {
        .network-members { margin-top: 3 * $margin; }
        .content h4 { 
            font-size: 19px; 
            margin-bottom: 0;
        }
    }
    .beautiful-trouble-and-action-aid {
        .blurb { 
            min-height: 12 * $margin; 
            margin-top: 36px;
        }
        .introduction { 
            margin-bottom: 36px;
            text-align: center; 
        }
    }
    .partners {
        .partner {
            padding-bottom: 36px;
        }
        .partner-logo {
            height: 160px;
            background-size: 160px;
            background-repeat: no-repeat;
            background-position-y: 50%;
            margin-bottom: 10px;
        }
    }
    .faq {
        .question { padding-bottom: 3 * $margin; }
    }
}
.platforms, .contribute, .resources {
    .page-heading {
        margin-bottom: 6 * $margin;
    }
}
.platforms {
    .platform {
        padding-right: 24px;
    }
    .platform-image {
        padding-top: 40%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        @include sm-down {
            padding-top: 80%;
        }
    }
    .subheading {
        line-height: 22px;
    }
    .title { 
        font-size: 48px; 
    }
    svg-inline { 
        float: right;   //TODO: fix for bidirectional site
        position: relative;
        top: 28px;
        svg * { fill: $darkgray !important; }
        @include sm-down {
            float: none;
            top: -6px;
        }
    }
    .what, .how, .links {
        padding-top: 2 * $margin;
        h4 { padding-bottom: $margin; }
    }
    .overline::before {
        margin-top: -6px;
        @include xs {
            margin-top: -18px;
        }
    }
    .pdf {
        pointer-events: none;
        opacity: .25;
    }
}
.contribute {
    .how-it-works {
        text-align: center;
    }
    .instructions-heading {
        padding-top: 6 * $margin;
    }
    svg {
        max-width: 100%;
    }
    .types {
        text-align: left;
        .description { 
            display: none; 
            width: 100%;
            position: relative;
            margin-top: 6 * $margin;
        }
        .description::before {
            content: "";
            position: absolute;
            top: -8 * $margin;
            left: 50%;
            height: 6 * $margin;
            border-left: 1px solid black;
        }
        .active.description { 
            display: inline-block; 
        }
        @include sm-down {
            >div { height: 250px; }
            //.description::before { display: none; }
        }
    }
}
.resources {
    h3.bigger {
        font-size: 40px;
        line-height: 36px;
    }
    .training {
        h4 { 
            text-decoration: underline;
            color: $gray;
            margin: 24px 0;
            &.selected {
                text-decoration: none;
                color: black;
            }
        }
        h3 {
            margin-top: 0;
        }
        h4 {
            position: relative;
            line-height: 22px;
        }
        h4.selected::after {
            content: "";
            width: 40px;
            border-top: 1px solid black;
            position: absolute;
            right: -90px;
            top: 50%;
        }
        img {
            padding-bottom: 36px;
            @include sm-down {
                padding-top: 36px;
            }
        }
        @include md-up {
            .inner {
                width: 80%;
                padding-right: 60px;
                border-right: 2px solid black;
            }
        }
    }
    .resources {
        h3 {
            padding-bottom: 36px;
        }
        h4.overline {
            font-size: 19px;
        }
        .resource-type {
            padding-bottom: 60px;
        }
        .resource {
            a {
                display: inline-block;
                margin: 6px 0;
                font-weight: bold;
            }
            p { 
                font-style: italic;
                font-size: 12px;
                line-height: 18px;
            }
        }
    }
}
.bar-center {
    position: relative;
    height: 90px;
}
.bar-center::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0;
    left: 50%;
    border-left: 1px solid black;
}


// Development styles
.module-share {
    cursor: not-allowed !important;
    color: #ddd !important;
    svg * {
        fill: #ddd !important;
    }
}


// Animation
@include keyframes(pulse) {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.pulse {
    @include animation('pulse 1s');
}

@include keyframes(fade-in) {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fade-in {
    @include animation('fade-in 1s');
}