API tools faq
paste
Advertisement
Guest User

_cannacribs.scss

a guest
Dec 12th, 2018
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.67 KB | None | 0 0
raw download clone embed print report
  1.  
  2. .cannacribs-header {
  3.     margin-top: -50px;
  4.     margin-bottom: 75px;
  5.     .cannacribs-headline {
  6.         font-family: Arc;
  7.         font-size: 60px;
  8.         font-weight: bold;
  9.         color: #142030;
  10.         letter-spacing: 1px;
  11.     }
  12. }
  13.  
  14. .section-featured-episode {
  15.     position: relative;
  16.     padding-left: 80px;
  17.     padding-right: 80px;
  18.  
  19.     .featured-episode-description {
  20.         .featured-episode-headline {
  21.             margin-top: 20px;
  22.             margin-bottom: 0;
  23.         }
  24.         .featured-episode-title {
  25.             line-height: 1.2;
  26.         }
  27.         hr {
  28.             background-image: linear-gradient(90deg, #fff 25%, #444 25%, #444 50%, #fff 50%, #fff 75%, #444 75%, #444 100%);
  29.             background-size: 5px;
  30.             border-bottom: none;
  31.             height: 6px;
  32.         }
  33.     }
  34.  
  35.     .featured-episode-preview {
  36.         position: relative;
  37.         &.vertical-offset > * {
  38.             position: relative;
  39.             top: -100px;
  40.         }
  41.         .featured-episode-image {
  42.             margin: 30px -20px 30px 20px;
  43.  
  44.             img {
  45.                 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.33);
  46.                 position: relative;
  47.                 z-index: 10;
  48.             }
  49.  
  50.             &.detached-border::before {
  51.                 content: " ";
  52.                 position: absolute;
  53.                 top: -30px;
  54.                 right: -30px;
  55.  
  56.                 z-index: 5;
  57.                 border: 20px solid black;
  58.                 height: 100%;
  59.                 width: 100%;
  60.             }
  61.         }
  62.         .featured-episode-topics-list {
  63.  
  64.         }
  65.     }
  66.  
  67.     .cannacribs-featured-products {
  68.         margin-top: 0px;
  69.         margin-bottom: 40px;
  70.  
  71.         .featured-products-headline {
  72.             margin-top: 30px;
  73.             margin-bottom: 30px;
  74.         }
  75.         .featured-product {
  76.             @include grid-column(1 of 5);
  77.             padding-top: 20px;
  78.             padding-bottom: 20px;
  79.             img {
  80.                 margin: 0 auto;
  81.             }
  82.         }
  83.     }
  84. }
  85.  
  86. .section-other-episodes {
  87.     .other-episodes-headline {
  88.         font-weight: 900;
  89.         font-family: "Wigrum-black", sans-serif;
  90.         font-size: 80px;
  91.     }
  92.     .link-box {
  93.         border: 1px solid black;
  94.         font-size: 25px;
  95.         text-transform: uppercase;
  96.     }
  97.     div.link-box {
  98.         display: inline-block;
  99.         padding: 0 15px;
  100.         span {
  101.             float: left;
  102.             margin-right: 25px;
  103.             font-weight: 900;
  104.             font-family: "Wigrum-black", sans-serif;
  105.         }
  106.         .high-times {
  107.             font-family: "Countach", sans-serif;
  108.             letter-spacing: 5px;
  109.         }
  110.     }
  111.     ul.link-box {
  112.         list-style: none;
  113.         margin: 0;
  114.         padding: 0;
  115.         display: flex;
  116.         li {
  117.             float: left;
  118.             clear: right;
  119.             border-right: 1px solid black;
  120.             padding: 0 5px;
  121.             width: 50px;
  122.             text-align: center;
  123.  
  124.             &:first-child {
  125.                 display: block;
  126.                 font-weight: 900;
  127.                 font-family: "Wigrum-black", sans-serif;
  128.                 padding: 0 15px;
  129.                 width: auto;
  130.             }
  131.             &:last-child {
  132.                 border-right: 0;
  133.             }
  134.         }
  135.     }
  136. }
  137.  
  138. .cannacribs-slider {
  139.     position: relative;
  140.     margin-top: 50px;
  141.     margin-bottom: 50px;
  142.     .prev, .next {
  143.         position: absolute;
  144.         top: 50%;
  145.         transform: translateY(-50%);
  146.         z-index: 20;
  147.  
  148.         border: 1px solid black;
  149.         cursor: pointer;
  150.         padding: 8px 24px;
  151.         font-size: 20px;
  152.     }
  153.     .prev {
  154.         left: -35px;
  155.     }
  156.     .next {
  157.         right: -40px;
  158.     }
  159.     .glide__track {
  160.         z-index: 10;
  161.     }
  162. }
  163.  
  164. .section-dark {
  165.     background-color: #1c1c1c;
  166.     background-image: url('../images/common/geo_pattern_dark_rotated.svg');
  167.     background-repeat: repeat;
  168.     background-size: 75%;
  169.     color: #fff;
  170.     .cannacribs-slider {
  171.         .prev, .next {
  172.             border: 1px solid white;
  173.             color: white;
  174.         }
  175.     }
  176. }
  177.  
  178. .section-industry-insight {
  179.     padding-top: 80px;
  180.     padding-bottom: 80px;
  181.  
  182.     .section-headline {
  183.         font-size: 32px;
  184.     }
  185. }
  186.  
  187. .section-about-cannacribs {
  188.     padding-top: 80px;
  189.     padding-bottom: 0px;
  190.  
  191.     .section-subheadline {
  192.         margin-top: 20px;
  193.         margin-bottom: 0px;
  194.     }
  195.     .section-headline {
  196.         line-height: 1.1;
  197.         letter-spacing: 7px;
  198.         margin-bottom: 20px;
  199.         font-size: 50px;
  200.         font-weight: 800;
  201.     }
  202.     .headline-getting-featured {
  203.         margin-top: 50px;
  204.         margin-bottom: 50px;
  205.         font-size: 60px;
  206.     }
  207.     .headline-cast-and-crew {
  208.         margin-left: 80px;
  209.     }
  210.     .headline-above-content {
  211.         margin-bottom: 20px;
  212.     }
  213.     .image-frame {
  214.         position: relative;
  215.  
  216.         img {
  217.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.33);
  218.             position: relative;
  219.             z-index: 10;
  220.             width: 100%;
  221.         }
  222.  
  223.         &.detached-border {
  224.             margin: 60px 20px 60px 60px;
  225.             &::before {
  226.                 content: " ";
  227.                 position: absolute;
  228.                 top: -30px;
  229.                 right: -30px;
  230.  
  231.                 z-index: 5;
  232.                 border: 20px solid black;
  233.                 height: 100%;
  234.                 width: 100%;
  235.             }
  236.         }
  237.         &.attached-border {
  238.             margin: 10px;
  239.             &::before {
  240.                 content: " ";
  241.                 position: absolute;
  242.                 top: 20px;
  243.                 left: 20px;
  244.  
  245.                 z-index: 5;
  246.                 background-color: black;
  247.                 height: 100%;
  248.                 width: 100%;
  249.             }
  250.         }
  251.  
  252.         &.slight-transparency img {
  253.             opacity: .95;
  254.         }
  255.     }
  256. }
  257.  
  258. form.form-getting-featured {
  259.     margin: 30px;
  260.     border: 2px solid black;
  261.     border-radius: 5px;
  262.     position: relative;
  263.  
  264.     .gform_heading {
  265.         border-bottom: 2px solid black;
  266.         padding: 5px 20px;
  267.  
  268.         .gform_description {
  269.             text-transform: uppercase;
  270.             font-family: Countach, "sans-serif";
  271.             font-size: 16px;
  272.             font-weight: 600;
  273.             letter-spacing: 2.9px;
  274.         }
  275.     }
  276.  
  277.     .gform_body {
  278.         padding: 20px 20px 25px 20px;
  279.         .gform_fields {
  280.             margin-bottom: 0;
  281.         }
  282.         .gfield {
  283.             font-family: Countach, "sans-serif";
  284.             .gfield_label {
  285.                 @extend .screen-reader-text;
  286.             }
  287.             input {
  288.                 border-radius: 5px;
  289.                 box-shadow: inset -2px 3.5px 5px 0 rgba(0, 0, 0, 0.19), inset 2.7px -3px 5px 0 rgba(0, 0, 0, 0.19);
  290.                 background-image: linear-gradient(122deg, #3e3e40, #303135);
  291.                 padding: 20px 10px;
  292.                 &:focus {
  293.                     border: none;
  294.                 }
  295.             }
  296.             &:last-of-type input {
  297.                 margin-bottom: 0;
  298.             }
  299.         }
  300.     }
  301.  
  302.     .gform_footer {
  303.         position: absolute;
  304.         top: 100%;
  305.         width: 100%;
  306.         transform: translateY(-50%);
  307.         input[type="submit"] {
  308.             display: block;
  309.             margin: 0 auto;
  310.             padding: 8px 20px 8px 20px;
  311.             position: relative;
  312.             width: 50%;
  313.  
  314.             background-color: #f0f0f0;
  315.             border: 2px solid #00b09b;
  316.             color: black;
  317.             font-family: Countach, "sans-serif";
  318.             font-size: 20px;
  319.             font-weight: 400;
  320.             letter-spacing: 3.15px;
  321.             text-align: center;
  322.             text-transform: uppercase;
  323.  
  324.             //&:after {
  325.             //    content: "\f178";
  326.             //    font-family: FontAwesome;
  327.             //    position: absolute;
  328.             //    top: 0;
  329.             //    right: 0;
  330.             //}
  331.         }
  332.         &::before {
  333.             content: " ";
  334.             position: absolute;
  335.             top: -7px;
  336.             left: 30%;
  337.  
  338.             background-color: black;
  339.             height: 2px;
  340.             width: 20%;
  341.             transition: transform 200ms ease-in-out;
  342.         }
  343.         &::after {
  344.             content: " ";
  345.             position: absolute;
  346.             top: calc(100% + 5px);
  347.             right: 30%;
  348.  
  349.             background-color: black;
  350.             height: 2px;
  351.             width: 20%;
  352.             transition: transform 200ms ease-in-out;
  353.         }
  354.         &:hover::before {
  355.             transform: translateX(-10px);
  356.         }
  357.         &:hover::after {
  358.             transform: translateX(10px);
  359.         }
  360.     }
  361.  
  362.     // hide honeypot
  363.     .gform_validation_container {
  364.         display: none;
  365.     }
  366. }
  367.  
  368. .gn-newsletter-signup {
  369.     position: relative;
  370.     margin-top: 50px;
  371.     margin-bottom: 50px;
  372.     height: 380px;
  373.  
  374.     .newsletter-background {
  375.         background-repeat: no-repeat;
  376.         background-size: auto;
  377.         background-position: center;
  378.  
  379.         padding-top: 100px;
  380.         padding-bottom: 100px;
  381.  
  382.         .newsletter-background-text {
  383.             font-family: "Wigrum-black", Helvetica, sans-serif;
  384.             line-height: .75;
  385.             margin-bottom: 0;
  386.         }
  387.         .newsletter-background-subheadline {
  388.             font-size: 83px;
  389.         }
  390.         .newsletter-background-headline {
  391.             font-size: 120px;
  392.         }
  393.     }
  394.  
  395.     .form-panel {
  396.         position: absolute;
  397.         bottom: 0;
  398.         width: 100%;
  399.         display: flex;
  400.  
  401.         background-color: rgba(0,0,0,.9);
  402.         border-radius: 5px;
  403.         box-shadow: 0px 5px 12px 0 rgba(0, 0, 0, 0.4);
  404.         overflow: hidden;
  405.         .form-image {
  406.             width: 25%;
  407.             flex-basis: 25%;
  408.             float: left;
  409.  
  410.             background-repeat: no-repeat;
  411.             background-size: cover;
  412.             background-position: center;
  413.         }
  414.         .form-container {
  415.             width: 75%;
  416.             flex-basis: 75%;
  417.             float: left;
  418.             clear: right;
  419.         }
  420.     }
  421. }
  422.  
  423. form.form-newsletter-signup {
  424.     padding: 25px 40px;
  425.     position: relative;
  426.  
  427.  
  428.     .gform_heading {
  429.         margin-bottom: 5px;
  430.         .gform_description {
  431.             color: white;
  432.             font-family: Countach, "sans-serif";
  433.             font-size: 32px;
  434.         }
  435.     }
  436.     .gform_body {
  437.         .gfield {
  438.             .gfield_label {
  439.                 @extend .screen-reader-text;
  440.             }
  441.             input {
  442.                 box-shadow: -15.6px 15.6px 51px 0 rgba(0, 0, 0, 0.39), inset -0.7px -0.7px 8px 0 rgba(48, 76, 107, 0.88), inset 3.3px 2.3px 10px 0 rgba(5, 19, 34, 0.44);
  443.                 background-image: linear-gradient(122deg, #00b09b, #96c93d);
  444.                 color: white;
  445.                 padding: 20px 40px 20px 20px;
  446.                 &:focus {
  447.                     border: none;
  448.                 }
  449.             }
  450.             .validation_message {
  451.                 position: absolute;
  452.                 bottom: 15px;
  453.                 left: 40px;
  454.                 color: white;
  455.             }
  456.         }
  457.         .gform_validation_container {
  458.             display: none;
  459.         }
  460.     }
  461.     .gform_footer {
  462.         position: absolute;
  463.         bottom: 40px;
  464.         right: 40px;
  465.  
  466.         input[type="submit"] {
  467.             background-color: transparent;
  468.             color: white;
  469.             font-family: FontAwesome;
  470.             font-size: 20px;
  471.             margin-bottom: 0;
  472.             padding: 10px 20px;
  473.         }
  474.     }
  475.     .validation_error {
  476.         color: white;
  477.     }
  478. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!