tfgrid/www_projectmycelium_io
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk
2024-11-18 20:07:15 +03:00
parent fb458edca2
commit 189a96de30
3 changed files with 108 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
poc_threefold/static/css/tf.css → poc_threefold/static/css/products.css
View File

@@ -1,23 +1,57 @@
:root {
--primary-bg: #0a0a0a;
--secondary-bg: #141414;
--text-color: #ffffff;
--text-muted: #a0a0a0;
/* Light theme variables */
--primary-bg-light: #ffffff;
--secondary-bg-light: #f5f5f5;
--text-color-light: #333333;
--text-muted-light: #666666;
--card-bg-light: #ffffff;
--card-border-light: rgba(0, 0, 0, 0.1);
--card-hover-bg-light: #f8f8f8;
/* Dark theme variables */
--primary-bg-dark: #0a0a0a;
--secondary-bg-dark: #141414;
--text-color-dark: #ffffff;
--text-muted-dark: #a0a0a0;
--card-bg-dark: #141414;
--card-border-dark: rgba(255, 255, 255, 0.1);
--card-hover-bg-dark: #1a1a1a;
/* Common variables */
--accent-color: #00abf4;
--section-padding: 3.6rem 1.2rem;
--nav-height: 42px;
--card-bg: rgba(20, 20, 20, 0.6);
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Default to dark theme */
--primary-bg: var(--primary-bg-dark);
--secondary-bg: var(--secondary-bg-dark);
--text-color: var(--text-color-dark);
--text-muted: var(--text-muted-dark);
--card-bg: var(--card-bg-dark);
--card-border: var(--card-border-dark);
--card-hover-bg: var(--card-hover-bg-dark);
}
* {
/* Light theme overrides */
.light-theme {
--primary-bg: var(--primary-bg-light);
--secondary-bg: var(--secondary-bg-light);
--text-color: var(--text-color-light);
--text-muted: var(--text-muted-light);
--card-bg: var(--card-bg-light);
--card-border: var(--card-border-light);
--card-hover-bg: var(--card-hover-bg-light);
}
.products-page * {
font-family: var(--font-family);
}
body {
.products-page {
font-family: var(--font-family);
line-height: 1.6;
background-color: var(--primary-bg);
background-color: var(--primary-bg) !important;
color: var(--text-color);
margin: 0;
min-height: 100vh;
@@ -26,8 +60,8 @@ body {
font-size: 0.9rem;
}
header {
background-color: rgba(10, 10, 10, 0.95);
.products-page header {
background-color: var(--primary-bg);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
@@ -35,16 +69,16 @@ header {
right: 0;
height: var(--nav-height);
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--card-border);
}
header nav {
.products-page header nav {
max-width: 1400px;
margin: 0 auto;
height: 100%;
}
header nav ul {
.products-page header nav ul {
display: flex;
justify-content: center;
align-items: center;
@@ -55,7 +89,7 @@ header nav ul {
gap: 1.5rem;
}
header nav ul li a {
.products-page header nav ul li a {
text-decoration: none;
color: var(--text-muted);
font-size: 0.57rem;
@@ -63,14 +97,13 @@ header nav ul li a {
transition: all 0.3s ease;
padding: 0.3rem 0;
position: relative;
font-family: var(--font-family);
}
header nav ul li a:hover {
.products-page header nav ul li a:hover {
color: var(--text-color);
}
header nav ul li a::after {
.products-page header nav ul li a::after {
content: '';
position: absolute;
bottom: -1px;
@@ -81,45 +114,41 @@ header nav ul li a::after {
transition: width 0.3s ease;
}
header nav ul li a:hover::after {
.products-page header nav ul li a:hover::after {
width: 100%;
}
main.container {
.products-page main.container {
max-width: 1400px;
margin: 0 auto;
padding: var(--nav-height) 1.2rem 0;
}
section {
.products-page section {
padding: var(--section-padding);
position: relative;
}
section#why {
.products-page section#why {
min-height: calc(100vh - var(--nav-height));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: radial-gradient(circle at center, #141414 0%, #0a0a0a 100%);
background: var(--primary-bg);
}
section#why h1 {
font-family: var(--font-family);
.products-page section#why h1 {
font-size: 2.4rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.2rem;
background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--text-color);
max-width: 1000px;
}
section#why p {
font-family: var(--font-family);
.products-page section#why p {
font-size: 0.9rem;
color: var(--text-muted);
max-width: 800px;
@@ -127,24 +156,23 @@ section#why p {
font-weight: 300;
}
section#products {
.products-page section#products {
background-color: var(--secondary-bg);
position: relative;
overflow: hidden;
}
section#products::before {
.products-page section#products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
background: var(--card-border);
}
section#products h2 {
font-family: var(--font-family);
.products-page section#products h2 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 0.9rem;
@@ -152,8 +180,7 @@ section#products h2 {
margin-left: 2.4rem;
}
section#products p {
font-family: var(--font-family);
.products-page section#products p {
color: var(--text-muted);
font-size: 0.9rem;
max-width: 900px;
@@ -162,7 +189,7 @@ section#products p {
margin-left: 2.4rem;
}
.product-grid {
.products-page .product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
@@ -171,41 +198,40 @@ section#products p {
padding: 0 0.5rem;
}
.product-card {
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
.products-page .product-card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.9rem 0.6rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 0.6rem;
position: relative;
overflow: hidden;
}
.product-card:hover {
.products-page .product-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
border-color: var(--card-border);
background-color: var(--card-hover-bg);
}
.product-card h3 {
font-family: var(--font-family);
.products-page .product-card h3 {
font-size: 0.9rem;
font-weight: 600;
margin: 0;
color: var(--text-color);
}
.product-card p {
font-family: var(--font-family);
.products-page .product-card p {
font-size: 0.72rem;
color: var(--text-muted);
margin: 0;
line-height: 1.6;
}
[role="button"] {
font-family: var(--font-family);
.products-page [role="button"] {
display: inline-block;
padding: 0.6rem 1.5rem;
background: var(--accent-color);
@@ -220,15 +246,15 @@ section#products p {
margin-top: 1.2rem;
}
[role="button"]:hover {
.products-page [role="button"]:hover {
background: #0090d4;
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 171, 244, 0.2);
}
section#dive-deeper {
.products-page section#dive-deeper {
text-align: center;
background: linear-gradient(45deg, #141414, #1a1a1a);
background: var(--secondary-bg);
min-height: 30vh;
display: flex;
flex-direction: column;
@@ -236,25 +262,22 @@ section#dive-deeper {
align-items: center;
}
section#dive-deeper h2 {
font-family: var(--font-family);
.products-page section#dive-deeper h2 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.2rem;
background: linear-gradient(90deg, #ffffff, #a0a0a0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--text-color);
}
footer {
.products-page footer {
text-align: center;
padding: 1.8rem 0.6rem;
background-color: var(--secondary-bg);
color: var(--text-muted);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid var(--card-border);
}
footer ul {
.products-page footer ul {
list-style-type: none;
padding: 0;
display: flex;
@@ -263,42 +286,41 @@ footer ul {
margin-top: 0.9rem;
}
footer ul li a {
font-family: var(--font-family);
.products-page footer ul li a {
text-decoration: none;
color: var(--text-muted);
font-size: 0.72rem;
transition: color 0.3s ease;
}
footer ul li a:hover {
.products-page footer ul li a:hover {
color: var(--text-color);
}
@media (max-width: 1200px) {
.product-grid {
.products-page .product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
.products-page {
--section-padding: 2.4rem 0.9rem;
}
section#why h1 {
.products-page section#why h1 {
font-size: 1.5rem;
}
section#why p {
.products-page section#why p {
font-size: 0.79rem;
}
section#products h2 {
.products-page section#products h2 {
font-size: 1.5rem;
}
header nav ul {
.products-page header nav ul {
padding: 0 0.6rem;
gap: 0.9rem;
flex-wrap: wrap;
@@ -306,11 +328,11 @@ footer ul li a:hover {
overflow-x: auto;
}
header nav ul::-webkit-scrollbar {
.products-page header nav ul::-webkit-scrollbar {
display: none;
}
.product-grid {
.products-page .product-grid {
grid-template-columns: 1fr;
}
}