Design for the pages Features, FAQ and Privacy

customize.dist/src/less2/pages/page-features.less

@@ -3,53 +3,21 @@
 
 .infopages_main();
 .infopages_topbar();
-
-@features_th-bg: #555;
-@features_th-fg: #fff;
-@features_tr-bg-alt: #ddd;
-@features_notes: #333;
-@features_yes: #c4ffca;
-@features_no: #ffc4bc;
-@features_part: #faffd3;
-
-table#cp-features-table {
-    width: 100%;
-    th {
-        background-color: @features_th-bg;
-        color: @features_th-fg;
-        padding: 10px;
-        border: 1px solid @features_th-bg;
-    }
-    tbody {
-        td {
-            height: 32px;
-            line-height: 32px;
-            padding: 5px;
-            border: 1px solid @features_th-bg;
-        }
-        tr:nth-child(odd) {
-            background-color: @features_tr-bg-alt;
-        }
-    }
-    td:nth-child(4) {
-        color: @features_notes;
-        font-size: 14px;
-        font-style: italic;
-    }
-    td:first-child {
-        font-weight: bold;
-    }
-    .yes, .no, .part {
-        text-align: center;
-    }
-    .yes { background-color: @features_yes; }
-    .no { background-color: @features_no; }
-    .part { background-color: @features_part; }
-    .left {
-        text-align: left;
+#cp-main {
+    background-color: #fff;
+}
+.cp_cont_features {
+    padding-top: 3em;
+    padding-bottom: 3em;
+    background-image: url('/customize/cover_features.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    h1 {
+        font-weight: 700;
+        color: #fff;
     }
 }
-
 #cp-features-register {
     text-align: center;
     padding: 20px;
@@ -62,6 +30,57 @@ table#cp-features-table {
     border-radius: 0;
     &:hover {
         transform: scale(1.05);
+        cursor: pointer;
+    }
+    padding: 0.5em 1em;
+}
+.cp-features-web {
+    .card {
+        box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
+        border: none;
+    }
+    h3 {
+        color: #fff;
+    }
+    .list-group {
+        li {
+            &:before {
+                content: "\f00c";
+                font-family: "FontAwesome";
+                font-size: 14px;
+                color: @cryptpad_color_blue;
+                padding-right: 10px;
+            }
+        }
+        div {
+            display: inline;
+        }
+    }
+    a.voted {
+        opacity: 0.6;
+        margin-left: 15px;
+        &:hover {
+            opacity: 1;
+        }
+    }
+    .list-group-item {
+        border-color: rgba(69, 145, 196, 0.125);
     }
 }
-
+.cp-anon-user {
+    .card-body {
+        background-color: @cryptpad_color_blue;
+    }
+}
+.cp-regis-user {
+    @media (max-width:767px) {
+        margin-top: 3em;
+    }
+    .card-body {
+        &:first-of-type{
+            background: #4591C4;
+            background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
+            background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
+        }
+    }
+}