s
https://github.com/russross/blackfriday/issues/307
*/.content li br:nth-of-type(2) {
display: none;
}#promo {
display: none;
background-color: #FFF2BD;
padding: 20px 10px;
text-align: center;
}#promo-title {
font-size: 19.2px;
font-size: 1.2rem;
font-weight: normal;
color: #222;
margin: 0 0 4px 0;
padding: 0;
}#promo-end {
font-size: 14.4px;
font-size: 0.9rem;
color: #555;
margin: 0;
padding: 0;
}/*TODO: split & clean that CSS*//*neutral*/* {
font-family: 'karla', sans-serif;
}.hero-block {
padding: 100px 0 90px 0;
}@media (max-width: 900px) {
.hero-block {
padding-top: 60px;
}
}.header,
.hero-gradient,
.footer {
color: white;
}/* No gradient on list pages. */.hero-list {
background: none;
color: inherit;
padding-bottom: 20px;
}/*
Gradients do not cover well on mobile, so force header to plain color.
B/c 'background-attachment: fixed' does not work on mobile.
*/.header {
background: #3b1f5d;
}.hero-gradient,
.footer {
background: linear-gradient(to right bottom,#3b1f5d,#633c84,#a25fa7,#b672ba);
}/*
On desktops, let gradient covers both menu and main title elements.
*/@media only screen and (min-device-width: 768px) {
.header,
.hero-gradient {
background: linear-gradient(to right bottom,#3b1f5d,#633c84,#a25fa7,#b672ba);
background-attachment: fixed;
}
}/* HELP section */.help-page .header {
background: #514a9d;
}.help-page .hero-gradient {
background: linear-gradient(to right bottom,#514a9d,#24c6dc);
}@media only screen and (min-device-width: 768px) {
.help-page .header,
.help-page .hero-gradient {
background: linear-gradient(to right bottom,#514a9d,#24c6dc);
background-attachment: fixed;
}
}.help-page ul.topics-list {
margin-top: 30px;
}*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}body {
-webkit-font-smoothing: antialiased;
}strong {
color: inherit;
}a:hover {
color: inherit;
}/*custom*/.changelog {
margin-right: 12px;
}.logo {
color: #FFF;
}.logo:link, .logo:visited {
color: #FFF;
text-decoration: none;
}.intermediate {
padding: 90px 0;
}.testimonial {
background-color: #FDFAEF;
border: 1px solid rgba(100, 100, 100, .05) !important;
}.faq {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 30px;
margin-bottom: 30px;
}.faq-last {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 30px;
}.faq img, .faq-last img {
max-width: 100%;
height: auto;
}.journal {
margin-top: 60px;
margin-bottom: 60px;
}.journal .paragraph {
margin-bottom: 20px;
}.journal .container-lrg img {
max-width: 100%;
height: auto;
}.help img {
margin: 30px 0 30px 0;
}.subheading + ul {
margin-top: 10px;
}.ctas-button, .ctas-button-2 {
cursor: pointer;
transition: box-shadow .15s ease-in;
}.ctas-button:hover, .ctas-button:focus, .ctas-button-2:hover, .ctas-button-2:focus {
box-shadow: 0.2em 0.2em 0 1px #443642;
}.ctas-button.btn-bigger,
.ctas-button-2.btn-bigger {
font-size: 19.2px;
font-size: 1.2rem;
vertical-align: middle;
height: 55px;
line-height: 52.8px;
line-height: 3.3rem;
}.ctas-button:link, .ctas-button:visited {
color: #000;
}.ctas-button-2.btn-bigger {
font-weight: 400 !important;
font-size: 14.4px !important;
font-size: 0.9rem !important;
}.cuty-thanks {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: -36px;
}.tweets {
margin-top: 40px !important;
padding: 0 20px;
}.tweets a {
text-decoration: none;
color: inherit;
}.tweets .testimonial .avatar {
padding-right: 15px;
}.tweets .testimonial img {
border-radius: 50%;
max-height: 52px;
margin-top: 0px;
}code {
font-family: Consolas, Monaco, "Courier New", Courier, monospace;
white-space: pre-wrap;
}pre {
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 3px;
padding: 10px;
background-color: #EEE;
font-size: 13.6px;
font-size: 0.85rem;
}/*text*/.heading {
text-transform: none;
font-weight: bold;
font-size: 48px;
line-height: 68px;
letter-spacing: 0;
}@media (max-width: 900px) {
.heading {
font-size: 35px;
line-height: 40px;
}
}.subheading {
font-size: 30px;
line-height: 40px;
font-weight: 500;
}@media (max-width: 900px) {
.subheading {
font-size: 26px;
line-height: 35px;
}
}.paragraph {
font-size: 18px;
font-weight: 100;
margin-bottom: 10px;
}.heading + .paragraph {
margin-top: 30px;
}.subheading + .paragraph {
margin-top: 10px;
}p.paragraph, ul.paragraph, ol.paragraph {
color: rgba(0, 0, 0, .5);
}.logo {
font-size: 30px;
line-height: 30px;
font-weight: 900;
}.logo > img {
margin-bottom: -5px;
}@media (max-width: 550px) {
.logo {
font-size: 22px;
vertical-align: sub;
}
}.nav-link2,
.nav-link {
text-decoration: none;
font-size: 18px;
line-height: 30px;
color: inherit;
}.nav-link:not(:first-of-type) {
margin-left: 20px;
}.text-center {
text-align: center;
}.text-right {
text-align: right;
}/*flexbox styles*/.flex,
.spread,
.center,
.right,
.vertical,
.centervertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}.spread {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}.center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.centervertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}.vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}/*grid*/.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
padding: 0 20px;
}.col-1 {width: 8.333333%;}.col-2 {width: 16.666667%;}.col-3 {width: 25%;}.col-4 {width: 33.333333%;}.col-5 {width: 41.666667%;}.col-6 {width: 50%;}.col-7 {width: 58.333333%;}.col-8 {width: 66.666667%;}.col-9 {width: 75%;}.col-10 {width: 83.333333%;}.col-11 {width: 91.666667%;}.col-12 {width: 100%;}/*containers*/.container-lrg,
.container-sml {
margin: auto;
width: 100%;
}.container-lrg {
max-width: 1080px;
}.container-sml {
max-width: 700px;
}.ctas {
margin: 40px 0 0 0;
}.header {
padding: 20px 0 20px 0;
overflow: hidden;
}.ctas-input {
outline: none;
border: none;
border-radius: 3px;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 15px;
width: 260px;
display: inline-block;
}.ctas-button {
display: inline-block;
margin: 0 0 0 10px;
height: 40px;
line-height: 38px;
padding: 0 30px;
background: #fff;
border-radius: 3px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
border: 1px solid white;
text-decoration: none;
}@media (max-width: 440px) {
.ctas-input,
.ctas-button {
display: block;
width: 100%;
text-align: center;
}
.ctas-button {
margin: 10px 0 0 0;
}
}.socialproof {
padding: 90px 0;
}.socialproof img {
max-height: 45px;
max-width: 100%;
margin-top: 45px;
}.socialproof .logos {
}.socialproof .logos a {
color: #412065;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}.socialproof .logos a:hover {
text-decoration: none;
}.socialproof .logos h3 {
margin-top: 56px;
text-align: center;
}.testimonial-content {
margin-top: 15px;
}.testimonial-people {
color: hsl(0, 0%, 21%);
}.testimonial {
margin-top: 0px;
border-radius: 3px;
padding: 20px;
border: 1px solid rgba(0, 0, 0, .1);
}@media (max-width: 750px) {
.socialproof .emoji {
font-size: 40px;
}
.testimonial {
min-height: inherit;
}
.socialproof .flex {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.socialproof .col-4:nth-of-type(1) {
width: 100%;
}
.socialproof .col-4:not(:nth-of-type(1)) {
width: 50%;
}
}@media (max-width: 500px) {
.socialproof .col-4:nth-of-type(1) {
margin-bottom: 0;
}
.socialproof .col-4:not(:nth-of-type(1)) {
width: 100%;
}
}.ctas-button,
.ctas-button-2 {
display: inline-block;
height: 40px;
line-height: 38px;
padding: 0 30px;
background: #fff;
border-radius: 3px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
border: 1px solid white;
text-decoration: none;
}.ctas-button-2 {
background: transparent;
color: white;
margin: 0 0 0 10px;
}@media (max-width: 440px) {
.ctas-button,
.ctas-button-2 {
display: block;
width: 100%;
text-align: center;
}
.ctas-button-2 {
margin: 10px 0 0 0;
}
}.footer {
/*padding: 90px 0 45px;*/
padding: 45px 0;
}.footer .footer-nav {
padding-top: 60px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}.footer .nav-link {
display: inline-block;
margin: 0 10px;
}@media(max-width: 700px) {
.footer .footer-nav .col-3 {
width: 50%;
}
}@media(max-width: 500px) {
.footer .footer-nav .col-3 {
width: 100%;
}
}.ctas-input {
outline: none;
border: none;
border-radius: 3px;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 15px;
width: 260px;
display: inline-block;
}.ctas-button {
display: inline-block;
margin: 0 0 0 10px;
height: 40px;
line-height: 38px;
padding: 0 30px;
background: #fff;
border-radius: 3px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
border: 1px solid white;
text-decoration: none;
}@media (max-width: 440px) {
.ctas-input,
.ctas-button {
display: block;
width: 100%;
text-align: center;
}
.ctas-button {
margin: 10px 0 0 0;
}
}.feature2 {
border-bottom: 1px solid rgba(0, 0, 0, .1);
}/* Feature */.feature .paragraph,
.feature .subheading {
padding-left: 20px;
padding-right: 20px;
}.feature-title {
font-size: 22px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: 600;
color: #444 !important;
}/* Newsletter */.newsletter {
padding: 0 20px;
}.footer .newsletter {
padding: 0;
}.footer .newsletter .ctas {
margin: 20px 0 0 0;
}.footer .newsletter .ctas-input {
margin-bottom: 10px;
}/* Emojione credit */.fineprint {
font-size: 13px;
font-style: italic;
color: #ddd;
margin-top: 35px;
}.fineprint p {
margin-bottom: 4px;
}.fineprint a {
color: #ddd;
}.fineprint a:hover {
text-decoration: underline;
}/* Fix some margin issues on */.journal.content div:not(.fullwidth) + p {
margin-top: 1em;
}/* -------------------------------
Surcharge styles used by Bulma (which we use a bit more in Hugo version)
--------------------------------
*/.content {
font-size: 18px;
font-weight: 100;
color: #444444;
}/* Force images in .content to be horizontaly centered */.content img,
.content figure img {
display: block;
margin: 40px auto;
}/* Do not apply a margin when figure has a 'no-margin' class */.content figure.no-margin img {
margin: 0 auto;
}/* Do not center a margin when figure has a 'align-lefta ' class */.content figure.align-left img {
margin: 0;
}/* Display captions closer to the picture. */.content figure figcaption {
margin: -40px 0 40px 0;
}/* But not for testimonial's avatar pictures */.content .testimonial img {
margin: 0;
margin: initial;
}/* Force container to use the full width of the page, even though they're within
a smaller container. See http://bulma.io/documentation/layout/container/. */.content .fullwidth {
margin-left: calc(-50vw + 51%);
margin-right: calc(-50vw + 51%);
max-width: 100vw;
width: 100vw;
}.content .fullwidth > div {
max-width: 1150px;
margin: auto;
}/* h2 title */.content h2 {
font-weight: bold;
}/* h3 title */.content h3 {
font-weight: bold;
font-size: 24px;
font-size: 1.5rem;
}/* Index page */.index {
margin-bottom: 0;
}.index hr,
.customers-url hr {
height: 1px;
width: 100vw;
margin: 80px calc(-50vw + 51%);
background-color: rgba(0, 0, 0, .1);
}.index h2,
.customers-url h2 {
text-align: center;
}.cta-link {
margin-top: 20px;
}.cta-link a {
color: inherit;
text-decoration: underline;
}.cta-link a:hover, .cta-link a:focus {
text-decoration: none;
}/* Windows Newsletter Banner */.windows-banner {
display: none;
padding: 20px;
text-align: center;
}.windows-banner .icon {
margin-bottom: 20px;
}.windows-banner .ctas {
margin: 20px 0 0 0;
}.windows-banner .ctas form .email.ctas-input {
background-color: #4A4A4A;
color: #FFF;
}.windows-banner .ctas form .button.ctas-button {
background-color: #E5E5E5;
border-color: #E5E5E5;
}/* CTA Buttons */.content .ctas-button {
color: white;
background: linear-gradient(to right bottom,#633c84,#a25fa7);
border: none;
margin: 20px auto;
}.footer .footer-nav {
padding-top: 15px;
}.footer .footer-nav a {
color: #FFF;
}@media (max-width: 440px) {
.ctas-button-2,
.ctas-button {
margin: 0;
}
.footer .ctas-button {
padding-left: 0;
padding-left: initial;
padding-right: 0;
padding-right: initial;
}
}/* Downsize Buy button on some places */.testimonial-hero .ctas-button.btn-bigger,
.header .ctas-button.btn-bigger,
.footer .ctas-button.btn-bigger {
font-size: 15px;
vertical-align: inherit;
height: inherit;
line-height: 38px;
}.testimonial-hero .ctas-button.btn-bigger .paddle-gross-price,
.header .ctas-button.btn-bigger .paddle-gross-price,
.footer .ctas-button.btn-bigger .paddle-gross-price {
display: none;
}/* NOTE: TEMPORARILY disable the price tag on BUY buttons */.paddle-gross-price {
display: none;
}.testimonial-hero .ctas-button.is-warning,
.testimonial-hero .ctas-button-2.is-warning,
.header .ctas-button.is-warning,
.header .ctas-button-2.is-warning,
.footer .ctas-button.is-warning,
.footer .ctas-button-2.is-warning {
border-color: #ffdd57;
color: #363636;
}/* Dirty fix for the nav */.header .ctas-button.is-warning,
.header .ctas-button-2.is-warning {
margin-left: 20px;
}@media (max-width: 550px) {
.header .ctas-button.is-warning,
.header .ctas-button-2.is-warning {
padding-left: 8px;
padding-right: 8px;
margin-left: 10px;
}
}/* "What is" section in footer */.footer .what-is {
padding-bottom: 45px;
}/* Testimonial HERO */.testimonial-hero-single {
height: 400px;
margin: 60px 0;
}/* TODO: Dirty fix to remove margin between LAST testimonial and footer */.index > .testimonial-hero-single + .container-sml:last-child {
margin-bottom: -60px;
}.testimonial-hero {
height: 100%;
padding: 60px 0;
background-position: top center;
background-position-x: 70%;
background-repeat: no-repeat;
background-size: contain;
/* Default color: */
background-color: #EBEBEB;
}.testimonial-hero.has-no-hero-picture {
background: url("/img/470c69ee2d32d0e13819e856c137d4d56846d547/ignasi_pattern_s.png");
background-repeat: repeat;
background-size: auto;
}@media (max-width: 768px) {
.testimonial-hero {
background-size: cover;
}
}.testimonial-hero .opening-quote {
font-family: monospace;
font-size: 160px;
font-size: 10rem;
position: absolute;
margin-left: -80px;
margin-left: -5rem;
opacity: .2;
}.testimonial-hero .hero-logo {
max-height: 40px;
vertical-align: middle;
padding-left: 12px;
display: inline;
display: initial;
margin: 0;
margin: initial;
}.testimonial-hero .ctas-button,
.testimonial-hero .ctas-button-2 {
color: inherit;
border-color: inherit;
transition: all .1s;
}.testimonial-hero .ctas-button:hover,
.testimonial-hero .ctas-button:focus,
.testimonial-hero .ctas-button-2:hover,
.testimonial-hero .ctas-button-2:focus {
box-shadow: none;
background-color: #ffdd57;
color: black;
}.testimonial-hero .ctas-button.is-warning,
.testimonial-hero .ctas-button-2.is-warning {
background: #ffdd57;
border: 1px solid #ffdd57;
margin: 0;
}.testimonial-hero .quote {
max-width: 80%;
}@media (max-width: 550px) {
.testimonial-hero .quote {
font-size: 22px;
line-height: 30px;
}
}.testimonial-hero .quote mark {
/* blue */
/*background-color: rgba(50, 115, 220, 0.4);*/
/* green */
background-color: rgba(56, 255, 200, .3);
color: inherit;
font-weight: bold;
}/* Testimonial Hero CAROUSEL (Flickity) */.main-carousel {
height: 400px;
}.carousel-cell {
width: 100%;
height: 100%;
}/* position dots in carousel */.flickity-page-dots {
bottom: 8px;
}/* white circles */.flickity-page-dots .dot {
opacity: .8;
background: transparent;
border: 2px solid white;
}/* fill-in selected dot */.flickity-page-dots .dot.is-selected {
background: white;
}@media (max-width: 768px) {
.flickity-prev-next-button {
display: none;
}
}/* Paddle localized price tags */.paddle-gross-price {
position: absolute;
margin-left: -19px;
margin-top: -11px;
font-weight: normal;
opacity: 0;
transition: all 0.1s;
}/* Features */.content .feature h3 {
margin-top: 5px;
margin-bottom: 5px;
}.content .feature {
max-width: 600px;
padding-left: 40px;
padding-right: 40px;
}.content .feature img {
margin-left: -20px;
margin-bottom: 0;
margin-top: 0;
}.content .feature p {
margin-bottom: 10px;
}/* Logos "Works with" + Customers */.content .logos {
padding-left: 25px;
padding-right: 25px;
margin: auto;
text-align: center;
}.content .logos img {
max-height: 50px;
margin: 20px auto 0 auto;
}.content .logos:last-of-type {
padding: 0;
}/* Newsletter shortcode */.newsletter-shortcode {
background-color: #F5F5F5;
border-radius: 6px;
padding: 20px;
}.newsletter-shortcode .ctas {
margin: 0;
}.newsletter-shortcode .button {
vertical-align: inherit;
}/* Note shortcode */.content .note {
background-color: aliceblue;
padding: 32px;
}/* Footnote shortcode */.content .footnote {
color: #bbbbbb;
font-size: 14.4px;
font-size: 0.9rem;
font-style: italic;
}.content .footnote a {
color: inherit;
text-decoration: underline;
}.content .footnote a:hover {
color: inherit;
text-decoration: none;
}/* Legend shortcode */.content .legend {
color: #888;
font-size: 16px;
font-size: 1rem;
font-style: italic;
text-align: center;
margin-top: -20px;
margin-bottom: 40px !important;
margin-left: auto;
margin-right: auto;
max-width: 520px;
}.content .legend span {
font-style: normal;
}/* Separator shortcode */.content .separator {
letter-spacing: .55em;
padding: 10px 0 25px 0;
font-size: 30.4px;
font-size: 1.9rem;
text-align: center;
}/* Advantages + inconvenients shortcodes */.content .advantages {
margin-top: 25px;
margin-bottom: 20px;
}.content .inconvenients {
margin-bottom: 40px;
}.content .advantages p.label,
.content .inconvenients p.label {
font-size: 17.6px;
font-size: 1.1rem;
font-weight: bold;
border-style: solid;
border-width: 0 0 2px 0;
padding: 8px 0;
}.content .advantages p.label {
border-color: #1FB600;
}.content .inconvenients p.label {
border-color: #F14600;
}/* Tags */.content .tag {
text-transform: uppercase;
}.content.list .tag {
background-color: #FFF;
}/* Article list page *//* Featured image on list pages */.content.list img {
margin: 0 auto;
border-radius: 3px;
}.content.list li.notification {
padding: 20px;
padding: 1.25rem;
}.content.list li.notification .entry-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.content.list li.notification .entry-description {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}/* Updates page */.updates-page .hero-list .ctas .ctas-button {
border-color: inherit;
}.content.updates .entry:not(:first-child) {
margin-top: 80px;
}.content.updates .entry .entry__header {
margin-bottom: 40px;
}.content.updates .entry .entry__header h2 {
margin-bottom: 0;
}.content.updates .entry .entry__header h2 a {
color: inherit;
}.content.updates .entry .entry__header hr {
margin-top: 0.5em;
margin-bottom: 0.25em;
}