User:Fen/Portals/Products/styles.css: Difference between revisions

Retrieved from "https://consumerrights.wiki/User:Fen/Portals/Products/styles.css"

@@ Line 1: / Line 1: @@
+/* Wrapper: Light and clean */
 .products-portal-wrapper {
-   font-family: 'Segoe UI', sans-serif;
+   font-family: "Rubik", "Segoe UI", sans-serif;
-   background: #fdfaf6;
+   background: #f9fbfc;
    padding: 2em;
    max-width: 1200px;
    margin: auto;
-   box-shadow: 0 0 15px rgba(0,0,0,0.1);
+   border-radius: 8px;
 }
-/* Header */
+/* Header: Minimalist alert-bar style */
 .products-header {
-   background: linear-gradient(to right, #ba0000, #450000);
+   background: #005d8f;
-   color: #fff;
+   color: #ffffff;
-   text-align: center;
+   padding: 1.2em 1.5em;
-   padding: 1.5em;
+   border-left: 10px solid #ff5050;
-   border-radius: 8px;
+   border-radius: 4px;
    margin-bottom: 2em;
-  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
 }
 .products-title {
-   font-size: 2.5em;
+   font-size: 2.2em;
-   font-weight: 900;
+   font-weight: 800;
-   text-transform: uppercase;
+   margin-bottom: 0.2em;
-   letter-spacing: 1px;
+   letter-spacing: 0.5px;
 }
 .products-subtitle {
-   font-size: 1.2em;
+   font-size: 1em;
-   font-style: italic;
+   font-weight: 400;
-   margin-top: 0.5em;
+   opacity: 0.9;
-  color: #f0e0e0;
 }
@@ Line 34: / Line 33: @@
 .products-grid {
    display: grid;
-   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   grid-template-columns: 1fr 1fr;
-   gap: 1.5em;
+   gap: 1.2em;
 }
-/* Card styles */
+/* Card Base: Soft, tile-like design */
 .products-card {
-   background: #fff;
+   background-color: #ffffff;
-   border: 1px solid #ccc;
+   border: 1px solid #d8e1e8;
-   border-left: 6px solid #ba0000;
+   border-radius: 10px;
-   padding: 1em;
+   padding: 1.2em;
-   box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
-   transition: transform 0.2s ease, box-shadow 0.2s ease;
+   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
 .products-card:hover {
-  transform: translateY(-4px);
+   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
-   box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
 }
+/* Wide Cards span full width */
 .products-card.wide {
    grid-column: 1 / -1;
 }
-/* Titles */
+/* Card Title */
 .products-card-title {
-   font-size: 1.5em;
+   font-size: 1.4em;
-   font-weight: bold;
+   font-weight: 600;
-   color: #333;
+   color: #003550;
-   border-bottom: 2px solid #ba0000;
+  margin-bottom: 0.6em;
-   margin-bottom: 0.5em;
+   border-left: 4px solid #ff5050;
+   padding-left: 0.5em;
 }
-/* Body */
+/* Card Body */
 .products-card-body {
-   font-size: 1em;
+   font-size: 0.98em;
    line-height: 1.6;
    color: #222;
@@ Line 72: / Line 74: @@
 .products-card-body ul {
    padding-left: 1.2em;
+  list-style-type: disc;
 }
 .products-card-body li {
-   margin-bottom: 0.5em;
+   margin-bottom: 0.4em;
 }
-/* Centered content */
+/* Center content (image card) */
 .products-card-body.center {
    text-align: center;
@@ Line 85: / Line 88: @@
 .products-card-body a[href*="Category:"] {
    display: inline-block;
-   background-color: #f4f4f4;
+   background: #eef4f8;
-   border: 1px solid #bbb;
+   border: 1px solid #ccdce6;
-   padding: 0.3em 0.6em;
+   padding: 0.3em 0.7em;
-   margin: 0.2em;
+   font-size: 0.95em;
-   font-weight: bold;
+   font-weight: 600;
-   color: #222;
+   color: #003e66;
+  border-radius: 6px;
+  margin: 0.25em;
    text-decoration: none;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
 }
 .products-card-body a[href*="Category:"]:hover {
-   background-color: #ddd;
+   background: #dbeaf5;
+  border-color: #a6c4d6;
+  color: #002a47;
 }
@@ Line 102: / Line 107: @@
 a:link,
 a:visited {
-   color: #3366cc;
+   color: #005ca9;
    text-decoration: none;
+  transition: color 0.2s ease;
 }
-a:hover {
+a:hover,
+a:focus {
+  color: #003f73;
    text-decoration: underline;
-   color: #224499;
+}
+/* Thumbnail cleanup */
+.products-card-body .thumb {
+   margin: 0 auto;
+  border-radius: 4px;
+}
+@media screen {
+  html.skin-theme-clientpref-night .products-portal-wrapper,
+  html.skin-theme-clientpref-os .products-portal-wrapper {
+    background: #1b1d1f;
+    color: #e0e0e0;
+  }
+  html.skin-theme-clientpref-night .products-header,
+  html.skin-theme-clientpref-os .products-header {
+    background: #003e66;
+    color: #ffffff;
+    border-left-color: #ff6b6b;
+  }
+  html.skin-theme-clientpref-night .products-title,
+  html.skin-theme-clientpref-os .products-title {
+    color: #f2f2f2;
+  }
+  html.skin-theme-clientpref-night .products-subtitle,
+  html.skin-theme-clientpref-os .products-subtitle {
+    color: #cccccc;
+    opacity: 0.85;
+  }
+  html.skin-theme-clientpref-night .products-card,
+  html.skin-theme-clientpref-os .products-card {
+    background-color: #26292b;
+    border: 1px solid #3a3d3f;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+  }
+  html.skin-theme-clientpref-night .products-card-title,
+  html.skin-theme-clientpref-os .products-card-title {
+    color: #ffb3b3;
+    border-left-color: #ff6b6b;
+  }
+  html.skin-theme-clientpref-night .products-card-body,
+  html.skin-theme-clientpref-os .products-card-body {
+    color: #dddddd;
+  }
+  html.skin-theme-clientpref-night .products-card-body a[href*="Category:"],
+  html.skin-theme-clientpref-os .products-card-body a[href*="Category:"] {
+    background: #2d3337;
+    border: 1px solid #555;
+    color: #ffb3b3;
+  }
+  html.skin-theme-clientpref-night .products-card-body a[href*="Category:"]:hover,
+  html.skin-theme-clientpref-os .products-card-body a[href*="Category:"]:hover {
+    background: #3a4146;
+    border-color: #ff6b6b;
+    color: #ffe0e0;
+  }
+  html.skin-theme-clientpref-night a:link,
+  html.skin-theme-clientpref-night a:visited,
+  html.skin-theme-clientpref-os a:link,
+  html.skin-theme-clientpref-os a:visited {
+    color: #66b2ff;
+  }
+  html.skin-theme-clientpref-night a:hover,
+  html.skin-theme-clientpref-os a:hover {
+    color: #99ccff;
+  }
 }