www/styles.css

/* base CSS */
* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

html, body {
  padding: 0;
  margin: 0;
}
body {
  color: #324150;
  background: #fff;
  font-family: sans-serif;
  font-size: 70%;
}

a {
  color: #0d8ba1;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  text-decoration: none;
}
  a:visited {
    color: #1a4159;
  }
  a:hover, a:focus {
    color: #0599c2;
    text-decoration: underline;
  }
abbr {
  border: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.01em;
}
header {
  height: 230px;
  padding: 20px 0 70px 0;

  background: #2d4b63 50% 0 url(fond_titre.png) no-repeat; /* old IE fallback */

  background-attachment: fixed, scroll;
  background-image: url(electronic.png), url(fond_titre.png);
  background-position: 0 0, 0 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  text-align: center;
}


h1, h2 {
  padding: 0 10%;
  margin: 0;
  color: #fff;
  font-weight: normal;
}
h1 {
  padding-top: 0;
  padding-bottom: 5px;
  border-bottom: none;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 4em;
  text-transform: uppercase;
}
h1::before {
  display: inline-block;
  position: relative;
  top: 20px;
  content: "";
  width: 50px;
  height: 50px;
  margin: -20px 20px 10px -10px;
  background: url(logo_a-lec.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.8;
}
h2 {
  display: block;
  padding-top: 5px;
  padding-bottom: 30px;
  border-top: none;
  color: rgba(255,255,255,0.6);
  font-size: 2em;
  font-style: italic;
}
h2::before {
  content: " ";
  padding: 50px;
}
h3 {
  margin: 2em 0 0 0;
  color: #2e394c;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: uppercase;
}
p {
  margin: 0.75em 0;
  line-height: 2;
}


.page-wrapper {
  position: relative;
}
.summary, .preamble {
  width: 80%;
  margin: 0 auto;
}
.supporting h3, .supporting p {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.summary {
  padding-top: 2em;
}


/* introduction block links -- download HTML/CSS */
.introduction a, .introduction a:visited {
  position: relative;
  display: inline-block;
  padding: 1px 10px 1px 32px;
  margin: -1px -10px -1px -6px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  color: #7e8e9b;
  font-family: 'Julius Sans One', sans-serif;
  text-transform: uppercase;
}
.introduction a:hover, .introduction a:focus {
  z-index: 2;
  color: #fff;
  background: #3d8a9f;
  text-decoration: none;
}

.introduction a::before {
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 2px;
  color: #b9b795;
  background: #f1f4ed;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;

  content: "D";
  font-size: 16px;
  text-indent: 0;


  /* icomoon.io defaults */
  font-family: sans-serif;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
  .introduction a:hover::before {
    color: #fff;
    background: #357d93;
  }


/* coloured cutoff */
div.apropos, div.apropossuite {
  background-attachment: scroll, scroll, fixed;
  background-color: #dcd0a8;
  background-image: url(contours-opaque.png), url(gridlines-opaque.png), url(bamboo.png);
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
}
/* extra padding at the cutoffs */
div.apropos {
  padding: 3em 0;
  margin-top: 3em;
}
div.apropossuite {
  padding-bottom: 3em;
  margin-bottom: 3em;
}
div.apropos h3, div.apropossuite h3 {
  margin-top: 0;
}
div.apropos p, div.apropossuite p {
  margin-bottom: 0;
}


/* sidebar base styles */
.sidebar {
  background: #eadde4;
}
.sidebar h3 {
  display: none;
}
.sidebar a {
  color: #685655;
  text-decoration: none;
}
  .sidebar a:hover, .sidebar a:focus {
    color: #385d74;
  }
.sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}


/* shared sidebar styling */
.latest-articles ul, .a-lec-resources ul {
  margin: 0;
}
.latest-articles li, .a-lec-resources li {
  float: left;
  width: 50%;
  padding: 1.5em 10%;
  border-top: solid 1px #e3d9e0;
  color: #cac3c0;
  font-style: italic;
}
  .latest-articles li:hover, .latest-articles li:focus {
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* W3C */
  }
.latest-articles li:nth-child(2n+1), .a-lec-resources li:nth-child(2n+1) {
  clear: left;
}
.latest-articles .design-name, .a-lec-resources a, li.viewall a {
  display: block;
  margin-bottom: 0.25em;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.2em;
  font-style: normal;
  text-transform: uppercase;
}


/* select a design */
.latest-articles h3 {
  display: none;
}
.latest-articles .designer-name {
  color: #576168;
  font-size: 0.9em;
  font-style: normal;
}

/* resources */
.a-lec-resources {
  overflow: hidden;
  background-color: #fafafa;
  background-image: url(bamboo.png);
}
.a-lec-resources li {
  border-top: solid 1px #a0b9ad;
  font-style: normal;
}
.a-lec-resources li:last-child {
  float: none;
  width: auto;
  border-bottom: solid 1px #a0b9ad;
}


/* busting out the credits block */
.adhesion p:nth-child(5) {
  padding-bottom: 2em;
}
.supporting .adhesion {
  float: none;
  clear: both;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.supporting .adhesion a {
  text-decoration: none;
}
  .supporting .adhesion a:hover, .supporting .adhesion a:focus {
    text-decoration: underline;
  }
.supporting .adhesion h3 {
  padding-top: 0;
}
.adhesion p:last-child {
  width: auto;
  padding: 1em 12%;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  background: #3e5d67;

  background-attachment: fixed, scroll;
  background-image: url(electronic.png), url(fond_titre.png);
  background-position: 0 0, 0 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;

  font-size: 1.15em;
  font-style: italic;
  text-align: center;
}
.adhesion p:last-child a {
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
}



/* main footer */
footer {
  clear: both;
  padding: 3em 10%;
  color: #fff;
  background: #324150;
  text-align: center;
}
footer a {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  padding: 40px 0 0 0;
  margin: 0 0.5em;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  -moz-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
}
footer a:hover, footer a:focus {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
footer a:visited {
  color: rgba(255, 255, 255, 0.2);
}
footer a::before {
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  overflow: visible;
  font-size: 36px;
  text-indent: 0;

  /* icomoon.io defaults */
  font-family: sans-serif;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
  footer a.a-lec-validate-html::before {content: "5";}
  footer a.a-lec-validate-html:hover::before, footer a.a-lec-validate-html:focus::before {content: "%";}
  footer a.a-lec-validate-css::before {content: "3";}
  footer a.a-lec-validate-css:hover::before, footer a.a-lec-validate-css:focus::before {content: "#";}
  footer a.a-lec-license::before {content: "c";}
  footer a.a-lec-license:hover::before, footer a.a-lec-license:focus::before {content: "C";}
  footer a.a-lec-accessibility::before {content: "a";}
  footer a.a-lec-accessibility:hover::before, footer a.a-lec-accessibility:focus::before {content: "A";}
  footer a.a-lec-github::before {content: "g";}
  footer a.a-lec-github:hover::before, footer a.a-lec-github:focus::before {content: "G";}



/* low-res CSS */
@media only screen and (max-width: 600px) {

  /* these download links make approximately zero sense
     on a phone without a user-accessible file system. */
  .summary p:last-child {
    display: none;
  }

  /* type adjustments */
  h1 {
    margin-top: 30px;
    font-size: 2.5em;
  }
  h1::before {
    width: 50px;
    height: 50px;
  }
  h2::before {
    padding: 25px;
  }

  .adhesion p:last-child {
    padding: 1em 6%;
  }

}


@media only screen and (max-width: 500px) {

  header {
    height: 250px;
    padding-top: 0;
  }
  h1 {
    margin: 0;
  }
  h1::before {
    display: block;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: 0 0 0 -25px;
    padding: 0 0 35px 0;
  }
  h2::before {
    padding: 0;
  }
}

@media only screen and (max-width: 320px) {

    /* adjusting the site header type size */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.3em;
    }

    /* linearizing the design list on small screens */
    .latest-articles li, .a-lec-resources li {
        float: none;
        width: 100%;
    }

    /* adjusting footer type, icons */
    .adhesion p:last-child {
        font-size: 1.4em;
    }
    footer {
        padding: 2em 5%;
    }
    footer a {
        width: 35px;
        height: 35px;
        padding: 35px 0 0 0;
        margin: 0 0.5em;
    }
    footer a::before {
        font-size: 32px;
    }

}


/* mid-res CSS */
@media only screen and (max-width: 1132px) {
  header {
    border-top: solid 10px rgba(19, 67, 71, 0.9);
  }
  p, li {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 500px) and (max-width: 1150px) {

  .adhesion p:last-child {
    padding-bottom: 2em;
    padding-top: 2em;
  }

  /* page footer */
  footer {
    padding: 3em 0;
  }
  footer a {
    width: 52px;
    height: 52px;
    padding: 52px 0 0 0;
    margin: 0 2em;
  }
  footer a::before {
    font-size: 48px;
  }
}


/* high-res CSS */
@media only screen and (min-width: 1132px) {
  body {
    background: #ffffff;
    background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 66%, #fafafa 66%, #fafafa 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#fafafa), color-stop(100%,#fafafa));
    background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
    background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
    background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
    background: linear-gradient(to right,  #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
    font-size: 100%;
  }
  header {
    width: 100%;
    height: 310px;
    padding: 0 10%;
    border-top: solid 12px rgba(19, 67, 71, 0.8);
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
    vertical-align: middle;
    text-align: left;
  }

  header::before, header::after {
    display: block;
    content: " ";
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 0;
    width: 100%;
    height: 7px;
    background: rgba(0, 39, 43, 0.2);
  }
  header::after {
    top: 306px;
    height: 4px;
    background: rgba(0, 39, 43, 0.075);
  }
  h1 {
    display: inline-block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 60px 0 5px 0;
  }
  h1::before {
    display: inline-block;
    position: relative;
    top: 65px;
    content: "";
    width: 125px;
    height: 125px;
    margin: -65px 40px 0 0;
    background: url(logo_a-lec.svg);
    background-size: 100%;
    opacity: 0.8;

    -webkit-animation: koan 36000s infinite alternate;
    -moz-animation: koan 36000s infinite alternate;
    animation: koan 36000s infinite alternate;
  }
  h2 {
    display: block;
    margin: 0;
    padding: 5px 0 60px 70px;
  }
  p {
    font-size: 1em;
  }

  /* main layout blocks */
  nav, .supporting {
    display: inline;
  }
  .summary, .preamble, .supporting div, .adhesion h3, .adhesion p {
    float: left;
    clear: left;
    width: 66%;
    padding: 1em 5% 1em 10%;
  }
  .explanation h3, .explanation p,
  .apropos h3, .apropos p,
  .apropossuite h3, .apropossuite p {
    width: 100%;
  }
  .summary {
    padding-top: 3.25em;
  }
  .adhesion h3, .adhesion p {
    margin: 0;
    padding-bottom: 0;
  }


  /* coloured cutoff */
  div.apropos, div.apropossuite {
    width: 100%;
    padding-left: 10%;
    padding-right: 38%;
    margin: 0;
  }
  /* extra padding at the cutoffs */
  div.apropos, div.adhesion {
    width: 100%;
    padding-top: 4em;
  }
  div.explanation, div.apropossuite {
    padding-bottom: 4em;
  }
  .adhesion p:nth-child(5) {
    padding-bottom: 4em;
  }


  .introduction h3, .supporting h3 {
    margin-top: 0;
  }
  .introduction p:last-child, .supporting p:last-child {
    margin-bottom: 0;
  }


  .adhesion p:last-child {
    padding-bottom: 3em;
    padding-top: 3em;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
  }


  /* sidebar styling */
  .latest-articles, .a-lec-resources {
    position: absolute;
    top: 360px;
    right: 0;
    width: 33.3%;
    padding: 0 0 20px 0;
    margin: 0;
    overflow: visible;
    background: transparent;
  }
  .sidebar li {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 0 25.4% 0 12.7%; /* 0 10% 0 5% of total width */
  }


  /* select a design */
  .latest-articles li:first-child {
    border-top: 0;
  }
  .latest-articles li:hover, .latest-articles li:focus {
    background: none;
  }

  /* resources navigation */
  .a-lec-resources {
    position: absolute;
    top: 1310px;
    right: 0;
    width: 34%;
    background: transparent;
  }
  .a-lec-resources h3 {
    display: none;
  }
  .a-lec-resources ul {
    width: 55.9%;
    margin: 0 29.4% 0 14.7%;
  }
  .a-lec-resources li {
    padding: 1.5em 0 1.25em 0;
    margin: 0;
  }

}


@media only screen and (min-width: 1150px) {
  /* page footer */
  footer a {
    width: 76px;
    height: 76px;
    padding: 76px 0 0 0;
    margin: 0 3em;
  }
  footer a::before {
    font-size: 72px;
  }
}

/*
  Okay, look, I feel rather awful about this. But due to source order it
  seems like the only way to pull off the separated sidebar. Perhaps
  flexbox is the way forward here, once the syntax settles down a bit.
*/
@media only screen and (min-width: 1120px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1240px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1260px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1320px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1370px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1520px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1812px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 1848px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 2015px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 2115px) {.a-lec-resources {top: 1370px;}}
@media only screen and (min-width: 2400px) {/* you're kidding, right? */}


@-webkit-keyframes koan {
    from {
      -webkit-transform: scale(1);
    opacity: 1;
    }
    to {
      -webkit-transform: scale(3);
    opacity: 0;
    }
}
@-moz-keyframes koan {
    from {
      -moz-transform: scale(1);
    opacity: 1;
    }
    to {
      -moz-transform: scale(3);
    opacity: 0;
    }
}
@keyframes koan {
    from {
      transform: scale(1);
    opacity: 1;
    }
    to {
      transform: scale(3);
    opacity: 0;
    }
}

/* high-DPI adjustments */
@media
    (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3 / 2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    header {
        background-image: url(electronic.png), url(fond_titre.png);
        background-size: 50% ,cover;
    }

    .adhesion p:last-child {
        background-image: url(electronic.png), url(fond_titre.png);
        background-size: 50% cover;
    }
}