app-theme.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">

<style is="custom-style">

  /*
   Polymer includes a shim for CSS Custom Properties that we can use for application theming.
   Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
   with changing the colors used or generate your own palette of colours at MaterialPalette.com.

   See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
   for further information on custom CSS properties.
   */

  /* Application theme */
    @font-face {
        font-family: Indieflower;
        src: url(../fonts/IndieFlower.ttf);
    }
    @font-face {
        font-family: Lato;
        src: url(../fonts/Lato-Regular.ttf);
    }

    @font-face {
        font-family: Latoitalic;
        src: url(../fonts/Lato-Italic.ttf);
    }


 :root {

    /* COLORS */
    --primary-theme-color: #B9E6AA;
    --secondary-theme-color: #2192DE;
    --third-theme-color: #D95D5D;
    --fourth-theme-color: #D9BA5D;
    --pink-theme-color: #EBAFA0;
    --pinktwee-theme-color: #D18E7D;
    --black-firsttint:rgba(0,0,0,0.7);
    --black-secondtint:rgba(0,0,0,0.5);
    --black-thirdtint:rgba(0,0,0,0.2);
    --black-fourthtint:rgba(0,0,0,0.05);


    /* COLOR BGS */
    --primary-bgcolor: {
      background-color: var(--primary-theme-color);
    };
    --secondary-bgcolor: {
      background-color: var(--secondary-theme-color);
    };
    --third-bgcolor: {
      background-color: var(--third-theme-color);
    };
    --fourth-bgcolor: {
      background-color: var(--fourth-theme-color);
    };
    --pink-bgcolor: {
      background-color: var(--pink-theme-color);
    };   

    /* BTN COLORS */
    --btns-normalcolors: {
      background-color: var(--black-firsttint);
      color: white;
    };    
    --btns-hovercolors: {
      background-color: rgba(0,0,0,1);
    }; 

    --btns-altcolors: {
      background-color: var(--black-fourthtint);
      color: black;
    };    
    --btns-hoveraltcolors: {
      background-color: var(--black-thirdtint);
    }; 

    /* BTNS STUFF */
    --clean-btn: {
      border: none;
      outline: 0; 
      margin: 5px 5px 5px 0px;
      box-sizing:border-box;
      border-radius: 8px;
      cursor: pointer;
      @apply(--theme-font-button);
    };

    --main-btn: {
      @apply(--clean-btn);
      @apply(--btns-normalcolors);
      padding: 20px;
      font-size: 24px;
    };


    --main2-btn: {
      @apply(--clean-btn);
      @apply(--btns-altcolors);
      padding: 20px;
      font-size: 24px;
    };

    --medium-btn: {
      @apply(--clean-btn);
      @apply(--btns-normalcolors);
      padding: 20px;
      font-size: 16px;      
    };

    --small-btn: {
      @apply(--clean-btn);
      @apply(--btns-altcolors);
      padding: 15px;
      font-size: 12px;      
    };



    --canvas-primary: {
      @apply(--total-canvas);
      @apply(--primary-bgcolor);
    };
    --canvas-secondary: {
      @apply(--total-canvas);
      @apply(--secondary-bgcolor);
    };
    --canvas-third: {
      @apply(--total-canvas);
      @apply(--third-bgcolor);
    };
    --canvas-fourth: {
      @apply(--total-canvas);
      @apply(--fourth-bgcolor);
    };
    --canvas-pink: {
      @apply(--total-canvas);
      @apply(--pink-bgcolor);
    };







    /* TYPO */

    /* when using fonts locally stored */
    /* @font-face {
          font-family: OpensansLight;
          src: url(../fonts/OpenSans-Light.ttf);
    }*/
    --theme-font-general: {
      font-family: Indieflower;
      -webkit-font-smoothing: antialiased;
    };

/*    --theme-font-nowrap: {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    };
*/

    --theme-font-title: {
      @apply(--theme-font-general);
      @apply(--theme-font-nowrap);
      font-size: 50px;
      font-weight: 500;
      line-height: 52px;
      @apply(--no-edges);
    };

    --theme-font-subhead: {
      @apply(--theme-font-general);
      @apply(--theme-font-nowrap);

      font-size: 30px;
      font-weight: 400;
      line-height: 34px;
    };

    --theme-font-body1: {
/*      @apply(--theme-font-general);*/
      font-family: Lato;
      -webkit-font-smoothing: antialiased;
      font-size: 14px;
      font-weight: 300;
      line-height: 22px;
      margin: 0px;
    };

    --theme-font-body2: {
      @apply(--theme-font-general);
      font-size: 18px;
      font-weight: 500;
      line-height: 30px;
    };

    --theme-font-menu: {
      @apply(--theme-font-general);
      @apply(--theme-font-nowrap);
      font-size: 13px;
      font-weight: 500;
      line-height: 24px;
    };

    --theme-font-button: {
      @apply(--theme-font-general);
      @apply(--theme-font-nowrap);
    };




    /* GENERAL */
    --total-canvas: {
      width: 100vw;
      min-height: 100vh;
      overflow-y: scroll;
    };

    --no-edges: {
      padding: 0px;
      margin: 0px; 
    };


  }


  /* General styles */

  body {
    @apply(--layout-fullbleed);
    @apply(--layout-vertical);
    height: 100%;
  }

  neon-animated-pages {
    height: 100%;
  }




  /* SPECIFIC styles */

    .canvaspink {
      @apply(--total-canvas);
      @apply(--pink-bgcolor);

    }
    .whiteback {
      background-color: white;
    }

    .darkback {
      background-color: rgba(0,0,0,0.075);
    }

     .darkerback {
      background-color: rgba(0,0,0,0.095);
    }   

    .blackback {
      background-color: rgba(0,0,0,0.90);
      color: white;
    }

    h1 {
      @apply(--theme-font-title);
      margin: 0px;
    }

    h2 {
      @apply(--theme-font-subhead);
      margin: 10px 0px 10px 0px;
    }

    p {
      @apply(--theme-font-body1);
      font-weight: 300;
      font-size: 18px;
      line-height: 28px;
    }

    a {
      color: black;
      font-weight: 400;
      @apply(--theme-font-body1);
      font-size: 18px;
      line-height: 28px;
    }


    small {
      color: white;
      font-weight: 400;
      @apply(--theme-font-general);
      font-size: 16px;      
    }

    .underlined {
      text-decoration: underline;
    }

    .bolder {
      font-weight: 700;
    }

    .contentsectie {
      width: 100vw;
      @apply(--layout-vertical);
      @apply(--layout-center-center);
    }




    /*  SECTIE 1: header  */

    .headertje {
      width: 100vw;
      min-height: 70vh;
      box-sizing:border-box;
      padding: 0px 0px 35px 0px;
      background: 
        radial-gradient(
        rgba(0, 0, 0, 0.4), 
        rgba(0, 0, 0, 0.6)
        ),
        url(../images/IMG_3175.jpg);

      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      @apply(--layout-vertical);
      @apply(--layout-center);
      }

.intro {
  width: 100%;
      min-height: 55vh;

/*  height: 100%;
      min-height: 70vh;*/

        @apply(--layout-vertical);
      @apply(--layout-center-center);
}

    .introvak {
/*      margin: 0px 0px 35px 0px;
*/
      color: white;
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      @apply(--layout-start);
      @apply(--layout-wrap);
      width: 85%;
    }

    .introprent {
      width: 100%;
      height: 30%;
      background: 
      url(../images/introprent.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center; 
    }

    #titel {
      @apply(--layout-vertical);
      @apply(--layout-start);
    }

    .introvak img {
      height: 70px;
      width: 70px;
      margin-right: 25px;
    }

    .maintitle {
      @apply(--theme-font-title);
      font-size: 88px;
      margin: 15px 0px 30px 0px;
    }

    .subtitle {
      @apply(--theme-font-subhead);
      @apply(--no-edges);
      text-align: center;
      font-size: 48px;
    }

    .joinvlak {
      @apply(--layout-vertical);
      @apply(--layout-start);      
      margin: 50px 0px 0px 0px;
      max-width: 1050px;
    }

    .joinvlak p {
      @apply(--theme-font-body2);
      margin: 0px;
      font-weight: 400;
      font-size: 24px;
      color: var(--pink-theme-color);
      max-width: 890px;    
    }

    .joinbtn {
      text-decoration: none;
      @apply(--clean-btn);
      background-color: var(--pink-theme-color);
      @apply(--layout-end-justified);
      padding: 20px 25px 20px 25px;
      font-size: 28px;
      margin: 40px 0px 0px 0px;
      text-align: center;
    }
    .joinbtn:hover {
      background-color: var(--pinktwee-theme-color);
    }




    /*  SECTIE 2: wat is een poezenclub?  */
    .watis {
      width: 85%;
      max-width: 1050px;
      margin: 5vh 0px 5vh 0px;
    }

    .onderdeel {
      width: 100%;
      @apply(--layout-horizontal);
      @apply(--layout-start);
      @apply(--layout-center-center);
      @apply(--layout-wrap);
    }

    .onderdeeltxt {
      max-width: 750px;
      @apply(--layout-vertical);
      @apply(--layout-start);
    }

    .onderdeelbtn {
      outline: 0; 
      margin: 5px 5px 5px 0px;
      box-sizing:border-box;
      border-radius: 8px;
      cursor: pointer;
      @apply(--theme-font-button);
      background-color: transparent;
      border: none;
      color: var(--pinktwee-theme-color);
      padding: 0px;
      font-size: 18px;
      font-weight: 700;
      margin: 10px 0px 0px 0px;
      @apply(--layout-horizontal);
      @apply(--layout-center);
      text-decoration: underline;
    }

    .onderdeelbtn img {
      width: 16px;
      margin-right: 10px;
    }

    .onderdeelbtn:hover {
      background-color: transparent;
      color: black;
    }



    .onderdeel img {
      width: 290px;
    }


    /*  SECTIE 3: Lees de volledige whitepaper  */

    .fullink {
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      width: 85%;
      max-width: 1050px;
      margin: 5vh 0px 5vh 0px;
    }

    .fullink a {
      @apply(--clean-btn);
      text-decoration: none;
      background-color: transparent;
      padding: 30px 35px 30px 35px;
      font-size: 28px;
      border: 1px solid black;
      color: black;
    }

    .fullink a:hover {
      background-color: var(--pinktwee-theme-color);
    }



    /*  SECTIE 4: Hoe werkt zo'n poezenclub?  */

    .technisch {
      width: 100%;
      max-width: 1050px;
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      @apply(--layout-wrap);
    }

    .hoewerkt {
      width: 85%;
      max-width: 1050px;
      margin: 5vh 0px 5vh 0px;
      @apply(--layout-vertical);
      @apply(--layout-start);
    }

    .hoewerktonderdeel {
      max-width: 760px;
      @apply(--layout-horizontal);
      @apply(--layout-start);
      @apply(--layout-wrap);
    }


    .hoewerktonderdeeltxt {
/*      max-width: 760px;*/
      width: 100%;
      @apply(--layout-horizontal);
      @apply(--layout-start);
      @apply(--layout-wrap);
      padding: 35px 0px 35px 0px;
      border-bottom: 2px dashed rgba(0,0,0,0.15);
    }

    .hoewerktallessamen {
      width: 100%;
      @apply(--layout-horizontal);
      @apply(--layout-start);      
      @apply(--layout-wrap);
   
    }

    .hoewerktonderdeeltxt p {
      max-width: 690px;
    }

    .hoewerktondertitel {
      font-size: 18px;
    }

    .hoewerkt img {
      width: 290px;
    }

    .nmbr {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px; 
      background-color: rgba(0,0,0,0.05);
      padding: 0px;
/*      text-align: center;*/
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
    }

    .nmbr h2 {
      font-size: 28px;
      margin: 0px;
    }




    /*  SECTIE 5: Einde  */

    .einde {
      width: 85%;
      max-width: 1050px;
      margin: 5vh 0px 5vh 0px;
      @apply(--layout-vertical);
      @apply(--layout-center-center);

      text-align: center;
    }

    .einde h1 {
      margin: 20px 0px 20px 0px;
    }

    .einde a {
      color: white;
      font-weight: 700;
    }

    .semitransparant {
      opacity: 0.35;
    }

    .contact {
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      @apply(--layout-wrap);
      margin: 0px 0px 40px 0px;
    }

    .contact a {
      font-size: 14px;
      text-decoration: none;
      font-weight: 700;
    }

    .contact a:hover {
      color: var(--pink-theme-color);
    }

    .contactlogo {
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
       margin: 5px 0px 5px 0px;

    }

    .contactlogo img {
      width: 25px;
      height: 25px;
      margin: 0px 10px 0px 0px;
    }

    .tussenschot {
      margin: 0px 15px 0px 15px;
    }

    .eindtxt {
      width: 100%;
    }


    .technisch {
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      height: 100%;
      width: 100%;
      box-sizing:border-box;
      padding: 0px;
    }

    .technisch a {
      outline: 0; 
      margin: 5px 15px 5px 15px;
      box-sizing:border-box;
      border-radius: 8px;
      cursor: pointer;
      @apply(--theme-font-button);
      background-color: transparent;
      border: none;
      color: black;
      padding: 30px;
      font-size: 22px;
      font-weight: 700;
      @apply(--layout-horizontal);
      @apply(--layout-center);
      text-decoration: underline;
      background-color: rgba(0,0,0,0.05);
    }


    .technisch a:hover {
      background-color: rgba(0,0,0,0.075);
    }

    .technisch a img {
      width: 16px;
      margin-right: 10px;
    }




    /*  WHITEPAPER SECTIE  */
  .whitepaper {
    width: 100vw;
    max-width: 1050px;
    box-sizing:border-box;
    padding: 50px;
    @apply(--layout-vertical);
    @apply(--layout-start);
  }

  .whitepaper ul,li {
      font-family: Lato;
      font-weight: 300;
      font-size: 18px;
      line-height: 25px;
  }
  .whitepaper ul {
    margin: 0px;
  }

  paper-toolbar button {
    margin: 0px 0px 0px 10px;
      border: none;
      outline: 0; 
      box-sizing:border-box;
      padding: 6px 12px 6px 12px;
      border-radius: 8px;
      cursor: pointer;
      @apply(--theme-font-button);
      background-color: var(--pinktwee-theme-color);
  }

  paper-toolbar button:hover {
      background-color: rgba(0,0,0,0.35);
  }

  .whitepaper li {
    margin: 10px 0px 10px 0px;
  }

  .whitepaper h1 {
      font-family: Lato;
  }
  .whitepaper h2 {
      font-family: Lato;
  }

  paper-toolbar {
/*    @apply(--layout-horizontal);
    @apply(--layout-center-center);*/
    @apply(--pink-bgcolor);
  }

  paper-toolbar a {
    font-family: Indieflower;
    text-decoration: none;
  }

  .italic {
    font-family: Latoitalic;
  }


  .logotje {
    width: 50px;
    height: 50px;
    opacity: 0.35;
    margin: 0px 0px 20px 0px;
  }


  .languagepicker {
    width: 100vw;
    background: transparent;
    margin: 0px 0px 35px 0px;
    box-sizing:border-box;
    padding: 0px 40px 0px 0px;
    @apply(--layout-horizontal);
    @apply(--layout-end-justified);
  }

  .languagepickersel {
    height: 100%;
    @apply(--layout-horizontal);
    @apply(--layout-center);
  }

  .languagepickersel .iron-selected {
    background-color: rgba(0,0,0,1);
    text-decoration: underline;
    color: var(--pinktwee-theme-color);
  }

  .language {
    @apply(--layout-horizontal);
    @apply(--layout-center-center);
    color: var(--pink-theme-color);
    width: 50px;
    height: 40px;
    border-radius: 0px 0px 10px 10px;
    padding: 0px;
    cursor: pointer;

  }



  .language h2 {
    font-size: 16px;
  }

  /* Tablet+ */
  @media (min-width: 601px) {
  }

  /* Material Design Adaptive Breakpoints */
  /*
    Below you'll find CSS media queries based on the breakpoint guidance
    published by the Material Design team. You can choose to use, customise
    or remove these breakpoints based on your needs.

    http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
   */

  /* mobile-small */
  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) {

    .maintitle {
      font-size: 52px;
      text-align: center;
      margin: 10px 0px 15px 0px;
    }
    .subtitle {
      font-size: 28px;
    }
    .introvak img {
      margin-right: 0px;
    }
    .joinvlak p {
      width: 100%;   
      text-align: center;
    }
    .joinbtn {
      width: 100%;    
    }
  }


  /* mobile-large */
  @media all and (min-width: 361px) and (orientation: portrait) {
    .maintitle {
      font-size: 52px;
      text-align: center;
      margin: 10px 0px 15px 0px;
    }
    .subtitle {
      font-size: 28px;
    }
    .introvak {
      box-sizing:border-box;
      padding: 15vw 0vw 15vw 0vw;
    }
    .introvak img {
      margin-right: 0px;
    }

    .joinvlak {
      margin: 30px 0px 0px 0px;
    }

    .joinvlak p {
      width: 100%;
      font-size: 18px;   
      text-align: center;
    }
    .joinbtn {
      width: 100%;    
    }

    .fullink button {
      background-color: transparent;
      padding: 20px 25px 20px 25px;
      font-size: 20px;
    }

    .contact a {
      font-size: 14px;
    }


  }
  /* mobile-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* mobile-large-landscape */
  @media all and (min-width: 481px) and (orientation: landscape) { }
  /* tablet-small-landscape */
  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
  /* tablet-large-landscape */
  @media all and (min-width: 961px) and (orientation: landscape) { }
  /* tablet-small */
  @media all and (min-width: 600px) and (orientation: portrait) { }
  /* tablet-large */
  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
  /* desktop-x-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* desktop-x-small */
  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
  /* desktop-small-landscape */
  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
  /* desktop-small */
  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
  /* desktop-medium-landscape */
  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
  /* desktop-medium */
  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
  /* desktop-large */
  @media all and (min-width: 1281px) and (max-width: 1600px) { }
  /* desktop-xlarge */
  @media all and (min-width: 1601px) and (max-width: 1920px) { }
</style>