aboutsummaryrefslogtreecommitdiffstats
path: root/assets/css/alaveteli-org.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/alaveteli-org.css')
-rw-r--r--assets/css/alaveteli-org.css180
1 files changed, 157 insertions, 23 deletions
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 77ae00b95..8cbae7021 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -25,32 +25,43 @@
text-align: center; }
/* Alaveteli's purple */
-.hero, .what-is-alaveteli, .features, .get-started, .about__intro, .deployments__intro {
+html {
+ background-color: #333333;
+ height: 100%;
+ min-height: 100%; }
+
+body {
+ background-color: transparent; }
+
+.no-svg .site-title {
+ background-image: url("../img/alaveteli-logo.png"); }
+
+.hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro {
padding: 2em 0; }
@media (min-width: 40em) {
- .hero, .what-is-alaveteli, .features, .get-started, .about__intro, .deployments__intro {
+ .hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro {
padding: 3.5em 0; } }
-.hero, .get-started, .about__intro, .deployments__intro {
+.hero, .how-does-it-work, .get-started, .about__intro, .deployments__intro {
background-color: #333333;
color: #fff; }
- .hero a, .get-started a, .about__intro a, .deployments__intro a {
+ .hero a, .how-does-it-work a, .get-started a, .about__intro a, .deployments__intro a {
color: #fff;
border-bottom: 1px dotted rgba(255, 255, 255, 0.3); }
- .hero a:hover, .get-started a:hover, .about__intro a:hover, .deployments__intro a:hover, .hero a:active, .get-started a:active, .about__intro a:active, .deployments__intro a:active, .hero a:focus, .get-started a:focus, .about__intro a:focus, .deployments__intro a:focus {
+ .hero a:hover, .how-does-it-work a:hover, .get-started a:hover, .about__intro a:hover, .deployments__intro a:hover, .hero a:active, .how-does-it-work a:active, .get-started a:active, .about__intro a:active, .deployments__intro a:active, .hero a:focus, .how-does-it-work a:focus, .get-started a:focus, .about__intro a:focus, .deployments__intro a:focus {
border-color: rgba(255, 255, 255, 0.6);
background-color: #863c83;
text-decoration: none; }
- .hero .button, .get-started .button, .about__intro .button, .deployments__intro .button {
+ .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
width: 100%;
margin-bottom: 1em; }
@media (min-width: 30em) {
- .hero .button, .get-started .button, .about__intro .button, .deployments__intro .button {
+ .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button {
width: auto;
margin-bottom: 0; } }
- .hero .button:hover, .get-started .button:hover, .about__intro .button:hover, .deployments__intro .button:hover, .hero .button:active, .get-started .button:active, .about__intro .button:active, .deployments__intro .button:active, .hero .button:focus, .get-started .button:focus, .about__intro .button:focus, .deployments__intro .button:focus {
+ .hero .button:hover, .how-does-it-work .button:hover, .get-started .button:hover, .about__intro .button:hover, .deployments__intro .button:hover, .hero .button:active, .how-does-it-work .button:active, .get-started .button:active, .about__intro .button:active, .deployments__intro .button:active, .hero .button:focus, .how-does-it-work .button:focus, .get-started .button:focus, .about__intro .button:focus, .deployments__intro .button:focus {
background-color: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.1); }
@@ -94,12 +105,12 @@ h3 {
@media (min-width: 47.5em) {
.nav-position {
position: absolute;
- top: 0.6em;
+ top: 0.4em;
left: 180px; } }
@media (min-width: 56.88889em) {
.nav-position {
left: 240px;
- top: 0.5em; } }
+ top: 0.35em; } }
.site-nav ul {
margin-top: 0;
@@ -146,7 +157,7 @@ h3 {
-o-user-select: none;
user-select: none;
position: absolute;
- top: 0.1em;
+ top: 0.4em;
right: 5em;
display: inline-block;
padding: 0.3em 0.75em;
@@ -194,7 +205,6 @@ h3 {
margin-right: 1em; }
.what-is-alaveteli {
- border-bottom: 1px solid #e4e3dd;
position: relative; }
@media (min-width: 56.88889em) {
@@ -215,15 +225,27 @@ h3 {
.what-is-alaveteli__item--foi {
background-image: url("../img/scales.svg"); }
+.no-svg .what-is-alaveteli__item--foi {
+ background-image: url("../img/scales.png"); }
+
.what-is-alaveteli__item--help {
background-image: url("../img/pointer.svg"); }
+.no-svg .what-is-alaveteli__item--help {
+ background-image: url("../img/pointer.png"); }
+
.what-is-alaveteli__item--published {
background-image: url("../img/binoculars.svg"); }
+.no-svg .what-is-alaveteli__item--published {
+ background-image: url("../img/binoculars.png"); }
+
.what-is-alaveteli__item--open {
background-image: url("../img/open.svg"); }
+.no-svg .what-is-alaveteli__item--open {
+ background-image: url("../img/open.png"); }
+
@media (min-width: 56.88889em) {
.what-is-alaveteli__international-reach-position {
width: 33.3333%;
@@ -264,6 +286,86 @@ h3 {
border-color: #2b8cdb;
color: #2b8cdb; }
+.no-svg .what-is-alaveteli__international-reach {
+ background-image: url("../img/worldmap.png"); }
+
+.how-does-it-work {
+ background-color: #974495;
+ overflow: hidden; }
+ .how-does-it-work img {
+ position: relative; }
+ @media (min-width: 56.88889em) {
+ .how-does-it-work img {
+ bottom: -1px; } }
+ @media (min-width: 30em) {
+ .how-does-it-work {
+ padding-top: 0;
+ padding-bottom: 0; }
+ .how-does-it-work .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 4.7em; }
+ .how-does-it-work h2, .how-does-it-work p {
+ width: 50%; }
+ .how-does-it-work img {
+ float: right;
+ width: 30em;
+ margin-right: -15em;
+ margin-top: -13em; } }
+ @media (min-width: 43.5em) {
+ .how-does-it-work .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 4.7em; }
+ .how-does-it-work h2, .how-does-it-work p {
+ width: 33.333%; }
+ .how-does-it-work img {
+ margin-right: -5em;
+ margin-top: -15em; } }
+ @media (min-width: 56.88889em) {
+ .how-does-it-work h2, .how-does-it-work p, .how-does-it-work .how-does-it-work__slide__nav {
+ width: 33.333%;
+ margin-left: 66.666%; }
+ .how-does-it-work img {
+ float: left;
+ width: 63.666%;
+ margin-top: -15em; } }
+
+.how-does-it-work__slide {
+ /**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */ }
+ .how-does-it-work__slide:before, .how-does-it-work__slide:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+ .how-does-it-work__slide:after {
+ clear: both; }
+ .how-does-it-work__slide {
+ *zoom: 1; }
+
+.how-does-it-work__slide__nav {
+ margin-top: 0.5em;
+ text-align: center; }
+ @media (min-width: 30em) {
+ .how-does-it-work__slide__nav {
+ text-align: left; } }
+
+.how-does-it-work__slide__skip {
+ display: inline-block;
+ padding: 0.3em;
+ cursor: pointer; }
+ .how-does-it-work__slide__skip span {
+ display: block;
+ border-radius: 1em;
+ width: 0.8em;
+ height: 0.8em;
+ background-color: rgba(0, 0, 0, 0.3); }
+ .how-does-it-work__slide__skip.active span {
+ background-color: rgba(255, 255, 255, 0.3); }
+ .how-does-it-work__slide__skip:hover span, .how-does-it-work__slide__skip:focus span, .how-does-it-work__slide__skip:active span {
+ background-color: rgba(0, 0, 0, 0.3); }
+
@media (min-width: 40em) {
.features__grid-unit {
width: 48.5%; }
@@ -300,7 +402,10 @@ h3 {
background-position: left center;
padding: 1em 0; }
.features__item--primary h3, .features__item--primary p {
- padding-left: 53%; } }
+ padding-left: 63%; } }
+ @media (min-width: 65em) {
+ .features__item--primary h3, .features__item--primary p {
+ padding-left: 53%; } }
.features__item--primary h3 {
font-size: 1.4em; }
@@ -308,6 +413,9 @@ h3 {
background-image: url("../img/devices.svg");
background-size: 258px 188px; }
+.no-svg .features__item--devices {
+ background-image: url("../img/devices.png"); }
+
.features__item--messaging {
background-image: url("../img/signs.svg");
background-size: 200px 166px; }
@@ -315,6 +423,12 @@ h3 {
.features__item--messaging {
background-position: 3em center; } }
+.no-svg .features__item--messaging {
+ background-image: url("../img/signs.png"); }
+
+.get-started {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+
@media (min-width: 30em) {
.get-started__grid-unit {
width: 48.5%;
@@ -457,6 +571,9 @@ h3 {
.deployments__intro p {
font-size: 1.666666667em; } }
+.no-svg .deployments__intro {
+ background-image: url("../img/worldmap-pale.png"); }
+
.deployments__content h2 {
margin-bottom: 1.5em; }
@@ -477,17 +594,17 @@ h3 {
.deployments__unit--minor {
display: inline-block;
- width: 48.5%;
+ width: 47.5%;
vertical-align: top; }
.deployments__unit--minor:nth-child(n) {
- margin-right: 3%; }
+ margin-right: 5%; }
.deployments__unit--minor:nth-child(even) {
margin-right: 0; }
@media (min-width: 37.22222em) {
.deployments__unit--minor {
- width: 31.333333333%; }
+ width: 30%; }
.deployments__unit--minor:nth-child(n) {
- margin-right: 3%; }
+ margin-right: 5%; }
.deployments__unit--minor:nth-child(3n+3) {
margin-right: 0; } }
@media (min-width: 56.88889em) {
@@ -533,12 +650,14 @@ h3 {
.deployment__link {
margin-top: 0;
margin-bottom: 0.5em;
- font-size: 0.888888889em;
- text-overflow: ellipsis;
- text-overflow: ellipsis;
- /* Required for text-overflow to do anything */
- white-space: nowrap;
- overflow: hidden; }
+ font-size: 0.888888889em; }
+ .deployment__link a {
+ display: block;
+ text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ /* Required for text-overflow to do anything */
+ white-space: nowrap;
+ overflow: hidden; }
@media (min-width: 56.88889em) {
.deployment__link {
font-size: 1em; } }
@@ -569,3 +688,18 @@ h3 {
.blog-title {
line-height: 1.3em; }
+
+.clearfix {
+ /**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */ }
+ .clearfix:before, .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+ .clearfix:after {
+ clear: both; }
+ .clearfix {
+ *zoom: 1; }
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-13 15:48:39 +0000