Page updates.

Browse Source
This commit is contained in:
retoor 2025-11-08 20:16:22 +01:00
parent a1b20e2fc2
commit 748213538f
2 changed files with 318 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
retoors/static/css/components/pricing.css Normal file
View File

@ -0,0 +1,176 @@
/* Styles for the Pricing Page (pricing.html) */
.pricing-hero {
text-align: center;
padding: 40px 20px;
margin-bottom: 40px;
}
.pricing-hero h1 {
font-size: 3rem;
color: var(--text-color);
margin-bottom: 1rem;
}
.pricing-hero p {
font-size: 1.2rem;
color: var(--light-text-color);
margin-bottom: 30px;
}
.pricing-toggle {
display: inline-flex;
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--border-color);
}
.pricing-toggle .btn-toggle {
padding: 10px 20px;
border: none;
background-color: var(--card-background);
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pricing-toggle .btn-toggle.active {
background-color: var(--primary-color);
color: white;
}
.pricing-toggle .btn-toggle:hover:not(.active) {
background-color: var(--background-color);
}
.pricing-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto 60px auto;
padding: 0 20px;
}
.pricing-card {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color);
padding: 30px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.pricing-card.featured {
border: 2px solid var(--primary-color);
transform: scale(1.02);
}
.pricing-card h3 {
font-size: 1.8rem;
color: var(--text-color);
margin-bottom: 15px;
}
.pricing-card .price {
font-size: 3.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 20px;
}
.pricing-card .price span {
font-size: 1.2rem;
font-weight: 400;
color: var(--light-text-color);
}
.pricing-card ul {
list-style: none;
padding: 0;
margin-bottom: 30px;
text-align: left;
}
.pricing-card ul li {
margin-bottom: 10px;
color: var(--text-color);
font-size: 1rem;
display: flex;
align-items: center;
}
.pricing-card ul li::before {
content: '✓'; /* Checkmark icon */
color: var(--accent-color);
margin-right: 10px;
font-weight: bold;
}
.pricing-card .btn-primary {
margin-top: auto; /* Push button to the bottom */
width: 100%;
padding: 12px 20px;
font-size: 1.1rem;
}
.pricing-faq {
max-width: 800px;
margin: 0 auto 60px auto;
padding: 0 20px;
}
.pricing-faq h2 {
text-align: center;
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 40px;
}
.faq-item {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 2px 10px var(--shadow-color);
padding: 20px;
margin-bottom: 20px;
}
.faq-item h3 {
font-size: 1.3rem;
color: var(--text-color);
margin-bottom: 10px;
}
.faq-item p {
font-size: 1rem;
color: var(--light-text-color);
line-height: 1.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.pricing-hero h1 {
font-size: 2.5rem;
}
.pricing-hero p {
font-size: 1rem;
}
.pricing-tiers {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none; /* Remove scale on small screens */
}
.pricing-faq h2 {
font-size: 2rem;
}
}

142
retoors/static/css/components/security.css Normal file
View File

@ -0,0 +1,142 @@
/* Styles for the Security Page (security.html) */
.security-hero {
text-align: center;
padding: 40px 20px;
margin-bottom: 60px;
}
.security-hero h1 {
font-size: 3rem;
color: var(--text-color);
margin-bottom: 1rem;
}
.security-hero p {
font-size: 1.2rem;
color: var(--light-text-color);
max-width: 800px;
margin: 0 auto;
}
.security-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto 60px auto;
padding: 0 20px;
}
.pillar-card {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color);
padding: 30px;
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.pillar-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.pillar-card img.icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.pillar-card h3 {
font-size: 1.5rem;
color: var(--text-color);
margin-bottom: 15px;
}
.pillar-card p {
font-size: 1rem;
color: var(--light-text-color);
line-height: 1.6;
}
.security-certifications {
text-align: center;
margin-bottom: 60px;
}
.security-certifications h2 {
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 40px;
}
.cert-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
.cert-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.cert-item img.cert-logo {
height: 60px;
width: auto;
}
.cert-item p {
font-size: 1.1rem;
color: var(--text-color);
font-weight: 500;
}
.security-cta {
text-align: center;
padding: 40px 20px;
background-color: var(--background-color);
border-radius: 8px;
margin-bottom: 40px;
}
.security-cta h2 {
font-size: 2rem;
color: var(--text-color);
margin-bottom: 30px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.security-hero h1 {
font-size: 2.5rem;
}
.security-hero p {
font-size: 1rem;
}
.security-certifications h2 {
font-size: 2rem;
}
.security-cta h2 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.security-hero h1 {
font-size: 2rem;
}
.pillar-card {
padding: 20px;
}
.cert-grid {
gap: 20px;
}
.cert-item img.cert-logo {
height: 50px;
}
}