/* core.css */
:root {
--color-primary: #3C3B6E;
--color-primary-dark: #2a2a4e;
--color-secondary: #B22234;
--color-secondary-light: #c94353;
--color-accent: #B22234;
--color-accent-light: #c94353;
--color-accent-dark: #6d1420;
--color-bg: #ffffff;
--color-bg-alt: #f8f9fa;
--color-bg-card: #ffffff;
--color-text: #1e293b;
--color-text-muted: #475569;
--color-text-light: #64748b;
--color-border: #e2e8f0;
--color-white: #ffffff;
--shadow-sm: 0 1px 3px rgba(60,59,110,0.08);
--shadow-md: 0 4px 12px rgba(60,59,110,0.12);
--shadow-lg: 0 8px 24px rgba(60,59,110,0.16);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--transition: 0.2s ease;
}
html[data-dark="true"] {
--color-bg: #0f172a;
--color-bg-alt: #1e293b;
--color-bg-card: #1e293b;
--color-text: #e2e8f0;
--color-text-muted: #94a3b8;
--color-text-light: #64748b;
--color-border: #334155;
--color-white: #f8fafc;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}
html[data-dark="true"] {
scrollbar-color: var(--color-primary) var(--color-bg-alt);
}
html[data-dark="true"] ::-webkit-scrollbar-track {
background: var(--color-bg-alt);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scrollbar-color: var(--color-primary) var(--color-bg-alt);
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-alt);
}
::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 5px;
border: 2px solid var(--color-bg-alt);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-secondary);
}
body {
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background var(--transition), color var(--transition);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--color-secondary);
}
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
width: 0%;
z-index: 9999;
transition: none;
pointer-events: none;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* layout.css */
.site-header {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
padding: 0.25rem 0;
position: sticky;
top: 0;
z-index: 100;
transition: background var(--transition), border var(--transition);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.logo img,
.header-logo {
max-height: 56px;
width: auto;
}
.footer-logo {
max-height: 32px;
width: auto;
margin-bottom: 8px;
}
.main-nav {
display: flex;
align-items: center;
gap: 0.15rem;
}
.main-nav a {
display: flex;
align-items: center;
gap: 0.3rem;
color: var(--color-text-muted);
font-size: 0.65rem;
font-weight: 500;
padding: 0.35rem 0.5rem;
border-radius: var(--radius-sm);
transition: all var(--transition);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.main-nav a:hover {
color: var(--color-primary);
background: var(--color-bg-alt);
}
.main-nav a.active {
color: var(--color-primary);
background: rgba(30,41,59,0.08);
}
.main-nav a.nav-cta {
background: var(--color-primary);
color: #fff;
border-radius: var(--radius);
font-weight: 600;
}
.main-nav a.nav-cta:hover {
background: var(--color-primary-dark);
color: #fff;
}
.main-nav .lucide {
width: 14px;
height: 14px;
stroke-width: 1.8;
flex-shrink: 0;
}
@media (max-width: 768px) {
.main-nav a {
font-size: 0.6rem;
padding: 0.3rem 0.35rem;
}
.main-nav .lucide {
width: 13px;
height: 13px;
}
.logo img,
.header-logo {
max-height: 48px;
}
}
@media (max-width: 600px) {
.site-header {
padding: 0.2rem 0;
}
.site-header .container {
gap: 0.25rem;
}
.main-nav {
gap: 0.1rem;
}
.main-nav a {
flex-direction: column;
font-size: 0.5rem;
padding: 0.25rem 0.3rem;
gap: 0.1rem;
}
.main-nav .lucide {
width: 14px;
height: 14px;
}
.logo img,
.header-logo {
max-height: 42px;
}
}
@media (max-width: 400px) {
.main-nav a {
padding: 0.2rem 0.15rem;
}
.main-nav .nav-text {
display: none;
}
.main-nav .lucide {
width: 16px;
height: 16px;
}
.logo img,
.header-logo {
max-height: 38px;
}
}
main {
flex: 1;
}
.site-footer {
background:
linear-gradient(180deg, var(--color-primary-dark) 0%, #020617 100%);
color: rgba(255,255,255,0.9);
padding: 2rem 0 1rem;
margin-top: auto;
font-size: 0.85rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 1.5rem;
}
.footer-brand p {
color: rgba(255,255,255,0.7);
font-size: 0.8rem;
line-height: 1.5;
margin-top: 0.5rem;
}
.footer-contact h3,
.footer-hours h3 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 0.75rem;
}
.footer-contact p,
.footer-hours p {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
color: rgba(255,255,255,0.8);
font-size: 0.8rem;
}
.footer-contact .lucide,
.footer-hours .lucide {
width: 14px;
height: 14px;
color: var(--color-accent);
flex-shrink: 0;
}
.footer-contact a {
color: rgba(255,255,255,0.8);
}
.footer-contact a:hover {
color: var(--color-accent);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
}
.footer-bottom a {
color: rgba(255,255,255,0.5);
}
.footer-bottom a:hover {
color: var(--color-accent);
}
.admin-link {
opacity: 0.2;
transition: opacity var(--transition);
padding: 0.25rem;
}
.admin-link:hover {
opacity: 0.5;
}
.admin-link .lucide {
width: 14px;
height: 14px;
}
html[data-dark="true"] .site-header {
background: var(--color-bg);
border-color: var(--color-border);
}
@media (max-width: 600px) {
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.footer-contact p,
.footer-hours p {
justify-content: center;
}
.footer-bottom {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
}
/* components.css */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: all var(--transition);
border: none;
cursor: pointer;
}
.btn .lucide {
width: 18px;
height: 18px;
}
.btn-primary {
background: var(--color-accent);
color: #ffffff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--color-accent-light);
color: #ffffff;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: rgba(255,255,255,0.15);
color: var(--color-white);
border: 2px solid rgba(255,255,255,0.4);
backdrop-filter: blur(4px);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.25);
color: var(--color-white);
border-color: rgba(255,255,255,0.6);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: var(--color-white);
}
section {
padding: 4rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.section-header p {
color: var(--color-text-muted);
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
}
.services-section {
background: var(--color-bg-alt);
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.service-card {
background: var(--color-bg-card);
padding: 1.75rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition);
border: 1px solid var(--color-border);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.service-card .icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.service-card .icon .lucide {
width: 24px;
height: 24px;
color: var(--color-white);
}
.service-card h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.service-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.feature-section {
background: var(--color-bg);
}
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.feature-grid.reverse {
direction: rtl;
}
.feature-grid.reverse > * {
direction: ltr;
}
.feature-content h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.feature-content p {
color: var(--color-text-muted);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.feature-list {
list-style: none;
margin-bottom: 1.5rem;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--color-text);
}
.feature-list .lucide {
width: 20px;
height: 20px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.feature-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.feature-image img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.feature-grid.reverse {
direction: ltr;
}
.feature-image {
order: -1;
}
}
.trust-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.trust-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 70%);
pointer-events: none;
}
.trust-badges {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.25rem;
position: relative;
z-index: 1;
}
.trust-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
padding: 1.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.trust-badge:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.trust-badge .lucide {
width: 36px;
height: 36px;
color: rgba(255, 255, 255, 0.9);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.trust-badge span {
font-family: var(--font-heading);
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
}
@media (max-width: 900px) {
.trust-badges {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 500px) {
.trust-badges {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.trust-badge {
padding: 1rem 0.75rem;
}
}
html[data-dark="true"] .trust-section {
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
}
html[data-dark="true"] .trust-badge {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
html[data-dark="true"] .trust-badge:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
}
.trust-section .section-header h2 {
color: #fff;
}
.trust-section .section-header p {
color: rgba(255, 255, 255, 0.85);
}
.trust-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-color: rgba(255, 255, 255, 0.15);
}
.trust-section .service-card h3 {
color: #fff;
}
.trust-section .service-card p {
color: rgba(255, 255, 255, 0.85);
}
.trust-section .service-card .icon {
background: rgba(255, 255, 255, 0.15);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.gallery-item {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition);
}
.gallery-item:hover {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
html[data-dark="true"] .service-card {
background: var(--color-bg-card);
border-color: var(--color-border);
}
html[data-dark="true"] .btn {
color: var(--color-text);
}
html[data-dark="true"] .btn-outline {
color: var(--color-primary);
border-color: var(--color-primary);
}
.error-page {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 0;
}
.error-content {
max-width: 520px;
margin: 0 auto;
}
.error-code {
font-family: var(--font-display);
font-size: clamp(5rem, 15vw, 10rem);
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
opacity: 0.85;
}
.error-content h1 {
font-family: var(--font-display);
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.error-content p {
color: var(--color-text-muted);
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.error-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
html[data-dark="true"] .error-content h1 {
color: #f0f0f0;
}
/* components-forms.css */
.contact-form {
max-width: 600px;
margin: 0 auto;
background: var(--color-bg-card);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 500px) {
.form-row {
grid-template-columns: 1fr;
}
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem 1rem;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30,41,59,0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-error-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
color: #dc2626;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.form-error-banner .lucide {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
border-color: #dc2626;
}
.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.field-error {
display: block;
color: #dc2626;
font-size: 0.8rem;
margin-top: 0.25rem;
}
html[data-dark="true"] .contact-form {
background: var(--color-bg-card);
border-color: var(--color-border);
}
html[data-dark="true"] .form-group input,
html[data-dark="true"] .form-group textarea,
html[data-dark="true"] .form-group select {
background: var(--color-bg);
color: var(--color-text);
border-color: var(--color-border);
}
html[data-dark="true"] .form-error-banner {
background: #450a0a;
border-color: #7f1d1d;
color: #fca5a5;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
-webkit-text-fill-color: var(--color-text) !important;
border-color: var(--color-border) !important;
transition: background-color 5000s ease-in-out 0s;
}
html[data-dark="true"] input:-webkit-autofill,
html[data-dark="true"] input:-webkit-autofill:hover,
html[data-dark="true"] input:-webkit-autofill:focus,
html[data-dark="true"] select:-webkit-autofill,
html[data-dark="true"] textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #0f0f1a inset !important;
-webkit-text-fill-color: #e0e0e0 !important;
border-color: #2a2a3e !important;
}
/* components-faq.css */
.faq-item {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 0.75rem;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.faq-item[open] {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.25rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.2s ease, color 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '';
width: 10px;
height: 10px;
border-right: 2.5px solid var(--color-primary);
border-bottom: 2.5px solid var(--color-primary);
transform: rotate(-45deg);
transition: transform 0.25s ease;
flex-shrink: 0;
margin-left: 1rem;
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item summary:hover {
background: var(--color-bg-alt);
color: var(--color-primary);
}
.faq-item[open] summary {
background: var(--color-bg-alt);
color: var(--color-primary);
border-bottom: 1px solid var(--color-border);
}
.faq-item p {
padding: 1.1rem 1.25rem;
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-text-muted);
animation: faqFadeIn 0.25s ease;
}
@keyframes faqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
html[data-dark="true"] .faq-item {
background: var(--color-bg-card);
border-color: var(--color-border);
}
html[data-dark="true"] .faq-item:hover,
html[data-dark="true"] .faq-item[open] {
border-color: var(--color-accent);
}
html[data-dark="true"] .faq-item summary::after {
border-color: var(--color-accent);
}
html[data-dark="true"] .faq-item[open] summary {
background: rgba(255,255,255,0.03);
border-color: var(--color-border);
}
html[data-dark="true"] .faq-item summary:hover {
background: rgba(255,255,255,0.03);
}
/* pages-hero.css */
.hero {
background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.88) 50%, rgba(51,65,85,0.85) 100%);
color: var(--color-white);
padding: 5rem 0;
text-align: center;
position: relative;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
clip-path: inset(0);
}
@media (min-width: 768px) {
.hero {
min-height: 85vh;
padding: 6rem 0;
}
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 130%;
object-fit: cover;
object-position: center top;
z-index: 0;
will-change: transform;
filter: blur(4px) saturate(0.7) brightness(0.9);
transform: scale(1.05);
}
@media (min-width: 768px) {
.hero-bg {
position: fixed;
height: 100vh;
top: 0;
filter: blur(8px) saturate(0.6) brightness(0.85);
transform: scale(1.1);
}
}
.hero-content-box {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 2rem 2.5rem;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-width: 700px;
margin: 0 auto;
}
@media (max-width: 600px) {
.hero-content-box {
padding: 1.5rem 1.25rem;
margin: 0 0.5rem;
}
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.75rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hero-subtitle {
font-size: clamp(1rem, 2.5vw, 1.25rem);
opacity: 0.95;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
html[data-dark="true"] .hero {
background: linear-gradient(135deg, rgba(15,23,42,0.97) 0%, rgba(30,41,59,0.95) 100%);
}
/* pages-cta.css */
.cta-section {
background: linear-gradient(135deg, rgba(15,23,42,0.90) 0%, rgba(30,41,59,0.88) 100%);
color: var(--color-white);
text-align: center;
position: relative;
overflow: hidden;
min-height: 50vh;
display: flex;
align-items: center;
clip-path: inset(0);
}
.cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 130%;
object-fit: cover;
object-position: center top;
z-index: 0;
filter: blur(6px) saturate(0.6) brightness(0.8);
transform: scale(1.1);
}
@media (min-width: 768px) {
.cta-section {
min-height: 60vh;
}
.cta-bg {
position: fixed;
height: 100vh;
top: 0;
filter: blur(10px) saturate(0.5) brightness(0.75);
}
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
.cta-section .container {
position: relative;
z-index: 2;
}
.cta-section h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.75rem;
}
.cta-section p {
opacity: 0.95;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-content-box {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 2.5rem 3rem;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 600px) {
.cta-content-box {
padding: 1.5rem 1.25rem;
margin: 0 0.5rem;
}
}
.cta-logo {
max-height: 280px;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto 1rem;
display: block;
border-radius: var(--radius-lg);
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
@media (max-width: 600px) {
.cta-logo {
max-height: 180px;
}
}
/* pages-contact.css */
.contact-hero {
background:
linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(51,65,85,0.88) 100%);
color: var(--color-white);
padding: 3rem 0;
text-align: center;
}
.contact-hero h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.contact-info-card {
background: var(--color-bg-card);
padding: 1.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
margin-bottom: 1rem;
}
.contact-info-card h3 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.contact-info-card .lucide {
width: 20px;
height: 20px;
}
.contact-info-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.contact-info-card a {
color: var(--color-primary);
font-weight: 500;
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
/* pages-features.css */
.about-hero {
background:
linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(51,65,85,0.88) 100%);
color: var(--color-white);
padding: 3rem 0;
text-align: center;
}
.about-hero h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
}
.services-hero {
background:
linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(51,65,85,0.88) 100%);
color: var(--color-white);
padding: 3rem 0;
text-align: center;
}
.services-hero h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
}
.service-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
padding: 2rem 0;
border-bottom: 1px solid var(--color-border);
}
.service-detail:last-child {
border-bottom: none;
}
.service-detail.reverse {
direction: rtl;
}
.service-detail.reverse > * {
direction: ltr;
}
@media (max-width: 768px) {
.service-detail {
grid-template-columns: 1fr;
}
.service-detail.reverse {
direction: ltr;
}
}
.stack-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-top: 1rem;
}
.stack-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.stack-badge-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
font-family: var(--font-sans);
box-shadow: var(--shadow-md);
transition: transform var(--transition);
}
.stack-badge:hover .stack-badge-icon {
transform: translateY(-3px) scale(1.05);
}
.stack-badge span {
font-size: 0.8rem;
color: var(--color-text-muted);
font-weight: 500;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
.config-card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
}
.config-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.config-card-header {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
padding: 0.75rem 1rem;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.config-card-header .lucide {
width: 16px;
height: 16px;
}
.config-card-body {
padding: 0.75rem 1rem;
}
.config-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.35rem 0;
border-bottom: 1px solid var(--color-border);
gap: 0.5rem;
}
.config-line:last-child {
border-bottom: none;
}
.config-key {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.7rem;
color: var(--color-accent);
font-weight: 600;
white-space: nowrap;
}
.config-val {
font-size: 0.75rem;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 0.4rem;
text-align: right;
}
.config-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
.deploy-steps {
max-width: 700px;
margin: 0 auto;
}
.deploy-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
margin-bottom: 1.5rem;
position: relative;
}
.deploy-step:not(:last-child)::after {
content: '';
position: absolute;
left: 22px;
top: 48px;
bottom: -1.5rem;
width: 2px;
background: var(--color-border);
}
.deploy-step-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: #fff;
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--shadow-md);
position: relative;
z-index: 1;
}
.deploy-step-content {
flex: 1;
padding-top: 0.15rem;
}
.deploy-step-content h3 {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.code-block {
background: #1e1e2e;
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
overflow-x: auto;
}
.code-block code {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.8rem;
color: #cdd6f4;
line-height: 1.6;
}
.code-comment {
color: #6c7086;
}
.pages-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
}
.page-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: var(--shadow-sm);
}
.page-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.page-card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.page-card-icon .lucide {
width: 24px;
height: 24px;
color: #fff;
}
.page-card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.page-card p {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
}
/* pages-testimonials.css */
.testimonial-section {
padding: 4rem 0;
background: var(--color-bg-alt);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.testimonial-card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
}
.testimonial-quote {
position: relative;
margin-bottom: 1.5rem;
}
.testimonial-quote .lucide {
position: absolute;
top: -10px;
left: -5px;
width: 32px;
height: 32px;
color: var(--color-secondary);
opacity: 0.2;
}
.testimonial-quote p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--color-text);
font-style: italic;
padding-left: 1.5rem;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-left: 1.5rem;
border-left: 3px solid var(--color-secondary);
}
.testimonial-author strong {
color: var(--color-primary);
font-weight: 600;
}
.testimonial-author span {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.featured-review {
border: 1px solid var(--color-accent);
position: relative;
}
.testimonial-stars,
.review-stars {
display: flex;
gap: 2px;
margin-bottom: 0.75rem;
}
.testimonial-stars .lucide,
.review-stars .lucide {
width: 16px;
height: 16px;
color: #f59e0b;
fill: #f59e0b;
}
.star-rating {
display: flex;
gap: 2px;
margin-bottom: 0.75rem;
}
.star-rating__star {
display: block;
overflow: visible;
width: 18px;
height: 18px;
}
.star-rating__star-ring {
opacity: 0;
transform: scale(0);
}
.star-rating__star-fill {
fill: #f59e0b;
transform: scale(1);
transform-origin: center;
}
.star-rating__star-stroke {
fill: none;
stroke: #d4d4d8;
stroke-width: 1;
transform: scale(1);
transform-origin: center;
}
.star-rating__star-line {
stroke: #f59e0b;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 0 20;
stroke-dashoffset: 0;
}
.star-rating:not(.star-rating--no-anim) .star-rating__star-fill {
transform: scale(0);
}
.star-rating:not(.star-rating--no-anim) .star-rating__star-stroke {
transform: scale(1);
}
.star-rating--animated .star-rating__star-ring {
animation: starRing 1s ease-in-out forwards;
}
.star-rating--animated .star-rating__star-fill {
animation: starFill 1s ease-in-out forwards;
}
.star-rating--animated .star-rating__star-stroke {
animation: starStroke 1s ease-in-out forwards;
}
.star-rating--animated .star-rating__star-line {
animation: starLine 1s ease-in-out forwards;
}
.star-rating--animated .star-rating__star:nth-child(2) .star-rating__star-ring,
.star-rating--animated .star-rating__star:nth-child(2) .star-rating__star-fill,
.star-rating--animated .star-rating__star:nth-child(2) .star-rating__star-stroke,
.star-rating--animated .star-rating__star:nth-child(2) .star-rating__star-line {
animation-delay: 0.08s;
}
.star-rating--animated .star-rating__star:nth-child(3) .star-rating__star-ring,
.star-rating--animated .star-rating__star:nth-child(3) .star-rating__star-fill,
.star-rating--animated .star-rating__star:nth-child(3) .star-rating__star-stroke,
.star-rating--animated .star-rating__star:nth-child(3) .star-rating__star-line {
animation-delay: 0.16s;
}
.star-rating--animated .star-rating__star:nth-child(4) .star-rating__star-ring,
.star-rating--animated .star-rating__star:nth-child(4) .star-rating__star-fill,
.star-rating--animated .star-rating__star:nth-child(4) .star-rating__star-stroke,
.star-rating--animated .star-rating__star:nth-child(4) .star-rating__star-line {
animation-delay: 0.24s;
}
.star-rating--animated .star-rating__star:nth-child(5) .star-rating__star-ring,
.star-rating--animated .star-rating__star:nth-child(5) .star-rating__star-fill,
.star-rating--animated .star-rating__star:nth-child(5) .star-rating__star-stroke,
.star-rating--animated .star-rating__star:nth-child(5) .star-rating__star-line {
animation-delay: 0.32s;
}
.star-rating--no-anim .star-rating__star-fill {
transform: scale(1);
}
.star-rating--no-anim .star-rating__star-stroke {
transform: scale(0);
}
@keyframes starRing {
from, 20% {
animation-timing-function: ease-in;
opacity: 1;
r: 8;
stroke-width: 16;
transform: scale(0);
}
35% {
animation-timing-function: ease-out;
opacity: 0.5;
r: 8;
stroke-width: 16;
transform: scale(1);
}
50%, to {
opacity: 0;
r: 16;
stroke-width: 0;
transform: scale(1);
}
}
@keyframes starFill {
from, 40% {
animation-timing-function: ease-out;
transform: scale(0);
}
60% {
animation-timing-function: ease-in-out;
transform: scale(1.2);
}
80% {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
@keyframes starStroke {
from {
transform: scale(1);
}
20%, to {
transform: scale(0);
}
}
@keyframes starLine {
from, 40% {
animation-timing-function: ease-out;
stroke-dasharray: 0 20;
stroke-dashoffset: 0;
}
60%, to {
stroke-dasharray: 8 12;
stroke-dashoffset: -12;
}
}
.review-service-tag {
display: inline-block;
background: var(--color-bg-alt);
color: var(--color-text-muted);
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: capitalize;
}
.reviews-masonry {
columns: 3;
column-gap: 1.25rem;
}
.review-card {
break-inside: avoid;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.25rem;
margin-bottom: 1.25rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.review-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.review-text {
font-size: 0.9rem;
line-height: 1.6;
color: var(--color-text);
margin-bottom: 0.75rem;
}
.review-author {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.review-author strong {
color: var(--color-text);
}
@media (max-width: 900px) {
.reviews-masonry {
columns: 2;
}
}
@media (max-width: 600px) {
.reviews-masonry {
columns: 1;
}
}
html[data-dark="true"] .review-card {
background: #1a1a2e;
border-color: #2a2a3e;
}
html[data-dark="true"] .review-service-tag {
background: #2a2a3e;
color: #aaa;
}
/* pages-commercial.css */
.hero-logo {
max-height: 320px;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto 1.5rem;
display: block;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
@media (max-width: 600px) {
.hero-logo {
max-height: 200px;
}
}
.hero-flag {
font-size: 1.5rem;
letter-spacing: 0.5rem;
margin-bottom: 1rem;
color: var(--color-accent);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.countdown-section {
background: linear-gradient(135deg, var(--color-secondary) 0%, #8b1a28 100%);
padding: 2.5rem 0;
text-align: center;
}
.countdown-wrapper {
max-width: 800px;
margin: 0 auto;
}
.countdown-header {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(0,0,0,0.2);
padding: 0.5rem 1.25rem;
border-radius: 2rem;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.countdown-header .lucide {
width: 20px;
height: 20px;
color: var(--color-accent);
}
.countdown-subtext {
color: rgba(255,255,255,0.9);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.countdown-unit {
background: rgba(0,0,0,0.25);
border-radius: var(--radius-md);
padding: 1rem 1.5rem;
min-width: 80px;
border: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 500px) {
.countdown-unit {
padding: 0.75rem 1rem;
min-width: 60px;
}
}
.countdown-num {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #fff;
line-height: 1;
font-family: var(--font-display);
}
@media (max-width: 500px) {
.countdown-num {
font-size: 1.75rem;
}
}
.countdown-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.85);
margin-top: 0.25rem;
}
.countdown-warning {
color: rgba(255,255,255,0.85);
font-size: 0.9rem;
max-width: 500px;
margin: 0 auto;
}
.deadline-passed {
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.promo-image {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: block;
}
.promo-banner {
margin-bottom: 2rem;
}
.promo-banner-image {
width: 100%;
max-width: 900px;
height: auto;
margin: 0 auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.promo-feature {
display: flex;
align-items: center;
justify-content: center;
}
.promo-feature .promo-image {
max-width: 100%;
height: auto;
}
.countdown-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.countdown-promo {
display: flex;
align-items: center;
justify-content: center;
}
.countdown-promo .promo-image {
max-width: 500px;
width: 100%;
border: 3px solid rgba(255,255,255,0.2);
}
@media (max-width: 900px) {
.countdown-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.countdown-promo {
order: -1;
}
.countdown-promo .promo-image {
max-width: 90%;
width: 90%;
}
}
.incentives-section .section-header h2 {
color: var(--color-primary);
}
.incentive-card {
position: relative;
padding-top: 2.5rem !important;
}
.incentive-badge {
position: absolute;
top: -12px;
right: 1rem;
background: var(--color-secondary);
color: #fff;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 1rem;
box-shadow: var(--shadow-md);
}
.incentive-badge.gold {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}
.highlight-card {
border: 2px solid var(--color-accent) !important;
background: linear-gradient(180deg, rgba(178,34,52,0.05) 0%, transparent 100%);
}
.lead-text {
font-size: 1.1rem;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
}
.math-breakdown {
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}
.math-line {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-border);
}
.math-line:last-child {
border-bottom: none;
}
.math-line.highlight {
background: rgba(178, 34, 52, 0.05);
margin: 0 -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.math-line.total {
background: var(--color-primary);
color: #fff;
margin: 0.5rem -1.5rem -1.5rem;
padding: 1rem 1.5rem;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
font-weight: 700;
font-size: 1.1rem;
}
.math-label {
font-weight: 500;
}
.math-value {
font-family: 'SF Mono', 'Fira Code', monospace;
font-weight: 600;
}
.math-value.negative {
color: var(--color-secondary);
}
.math-line.total .math-value {
color: var(--color-accent);
}
.math-footnote {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
margin-bottom: 1.5rem;
}
/* pages-commercial-details.css */
.stats-box {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: var(--radius-lg);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
min-height: 300px;
justify-content: center;
}
.stat-item {
text-align: center;
padding: 1rem;
background: rgba(255,255,255,0.1);
border-radius: var(--radius-md);
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-bottom: 0.25rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.stat-label {
font-size: 0.85rem;
color: rgba(255,255,255,0.9);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.1rem;
}
.btn-primary,
.btn-primary:hover,
.hero .btn-primary,
.cta-section .btn-primary,
.cta-content-box .btn-primary {
color: #ffffff !important;
}
.incentive-detail {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
margin-bottom: 2rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.incentive-detail-header {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff;
}
.incentive-detail-badge {
background: var(--color-secondary);
color: #fff;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 1.25rem;
min-width: 70px;
text-align: center;
box-shadow: var(--shadow-md);
}
.incentive-detail-badge.gold {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}
.incentive-detail-header h3 {
margin: 0;
font-size: 1.25rem;
}
.incentive-subtitle {
margin: 0.25rem 0 0;
opacity: 0.85;
font-size: 0.9rem;
}
.incentive-detail-body {
padding: 1.5rem;
}
.incentive-detail-body > p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 1.25rem;
}
.incentive-requirements {
background: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.incentive-requirements h4 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
font-size: 0.95rem;
color: var(--color-primary);
}
.incentive-requirements .lucide {
width: 18px;
height: 18px;
}
.incentive-requirements ul {
list-style: none;
margin: 0;
padding: 0;
}
.incentive-requirements li {
padding: 0.4rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--color-text-muted);
}
.incentive-requirements li::before {
content: "\2605";
position: absolute;
left: 0;
color: var(--color-secondary);
font-size: 0.75rem;
}
.incentive-example {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff;
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.example-label {
background: rgba(255,255,255,0.15);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.comparison-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.comparison-column {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.comparison-column.highlight {
border: 2px solid var(--color-accent);
box-shadow: var(--shadow-lg);
}
.comparison-header {
background: var(--color-primary);
color: #fff;
padding: 1rem;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
}
.comparison-column.highlight .comparison-header {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}
.comparison-row {
display: flex;
justify-content: space-between;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid var(--color-border);
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row span:first-child {
color: var(--color-text-muted);
}
.comparison-row span:last-child {
font-weight: 600;
font-family: 'SF Mono', 'Fira Code', monospace;
}
.comparison-row .green {
color: #16a34a;
}
.comparison-row.total {
background: var(--color-bg-alt);
font-size: 1.05rem;
}
.comparison-row.total-pct {
background: var(--color-primary);
color: #fff;
}
.comparison-row.total-pct span {
color: #fff;
}
.comparison-row.total-pct span:last-child {
color: var(--color-accent);
font-size: 1.25rem;
}
.timeline-section {
padding: 4rem 0;
}
.timeline {
max-width: 700px;
margin: 2rem auto 0;
}
.timeline-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
position: relative;
}
.timeline-item:not(:last-child)::after {
content: '';
position: absolute;
left: 40px;
top: 90px;
bottom: -2rem;
width: 2px;
background: var(--color-border);
}
.timeline-date {
width: 80px;
height: 80px;
background: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.timeline-item.urgent .timeline-date {
background: var(--color-secondary);
animation: pulse-urgent 2s ease-in-out infinite;
}
@keyframes pulse-urgent {
0%, 100% { box-shadow: 0 0 0 0 rgba(178, 34, 52, 0.4); }
50% { box-shadow: 0 0 0 10px rgba(178, 34, 52, 0); }
}
.timeline-date .month {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
opacity: 0.9;
}
.timeline-date .day {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
}
.timeline-date .year {
font-size: 0.75rem;
opacity: 0.8;
}
.timeline-content {
flex: 1;
padding-top: 0.5rem;
}
.timeline-content h4 {
margin: 0 0 0.5rem;
color: var(--color-primary);
font-size: 1.1rem;
}
.timeline-item.urgent .timeline-content h4 {
color: var(--color-secondary);
}
.timeline-content p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
}
/* pages-news.css */
.news-hero {
background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(51,65,85,0.88) 100%);
color: var(--color-white);
padding: 3rem 0;
text-align: center;
}
.news-hero h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
}
.news-hero p {
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.news-section {
padding: 3rem 0;
}
.news-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
justify-content: center;
}
.filter-pill {
padding: 0.5rem 1rem;
border-radius: 2rem;
background: var(--color-bg-alt);
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid var(--color-border);
transition: all var(--transition);
text-transform: capitalize;
}
.filter-pill:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.filter-pill.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.news-grid-small {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.news-card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.news-card-image {
display: block;
aspect-ratio: 16/9;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.news-card:hover .news-card-image img {
transform: scale(1.05);
}
.news-card-content {
padding: 1.25rem;
}
.news-card-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
font-size: 0.85rem;
}
.news-category {
background: var(--color-primary);
color: #fff;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
}
.news-card-meta time {
color: var(--color-text-muted);
}
.news-card h2,
.news-card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
line-height: 1.4;
}
.news-card h2 a,
.news-card h3 a {
color: var(--color-primary);
text-decoration: none;
}
.news-card h2 a:hover,
.news-card h3 a:hover {
color: var(--color-accent);
}
.news-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 0.75rem;
}
.news-source {
font-size: 0.8rem;
color: var(--color-text-light);
}
.news-empty {
text-align: center;
padding: 4rem 2rem;
color: var(--color-text-muted);
}
.news-empty .lucide {
width: 64px;
height: 64px;
margin-bottom: 1rem;
opacity: 0.3;
}
.news-empty h2 {
margin: 0 0 0.5rem;
color: var(--color-text);
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.page-info {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.news-article {
background: var(--color-bg);
}
.article-header {
background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(51,65,85,0.88) 100%);
color: var(--color-white);
padding: 3rem 0;
text-align: center;
}
.article-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.article-meta time {
color: rgba(255,255,255,0.85);
}
.article-header h1 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
margin: 0 0 1rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.article-summary {
font-size: 1.1rem;
opacity: 0.95;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.article-image {
margin-top: -1rem;
padding-bottom: 2rem;
}
.article-image img {
max-width: 800px;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
margin: 0 auto;
display: block;
}
.article-body {
padding: 3rem 0;
}
.container-narrow {
max-width: 700px;
}
.article-commentary {
margin-bottom: 3rem;
}
.article-commentary h2 {
font-size: 1.25rem;
color: var(--color-primary);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-accent);
}
.article-commentary p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--color-text);
margin-bottom: 1rem;
}
.article-source {
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
padding: 1.5rem;
border: 1px solid var(--color-border);
}
.article-source h3 {
font-size: 0.9rem;
color: var(--color-text-muted);
margin: 0 0 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.source-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
margin-bottom: 1rem;
transition: background var(--transition);
}
.source-link:hover {
background: var(--color-primary-dark);
color: #fff;
}
.source-link .lucide {
width: 18px;
height: 18px;
}
.source-title {
font-weight: 600;
color: var(--color-text);
margin: 1rem 0 0.5rem;
}
.source-description {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
.related-articles {
background: var(--color-bg-alt);
padding: 3rem 0;
}
.related-articles h2 {
text-align: center;
margin-bottom: 2rem;
color: var(--color-primary);
}
/* pages-news-admin.css */
.news-cards {
display: none;
}
@media (max-width: 768px) {
.news-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
.news-admin-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
}
.news-admin-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.news-admin-card-title {
font-weight: 600;
color: var(--color-text);
}
.news-admin-card-details {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 1rem;
}
.news-admin-card-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.news-admin-card-row .lucide {
width: 14px;
height: 14px;
}
.news-admin-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.form-article {
max-width: 900px;
}
.form-section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.form-section h2 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
margin: 0 0 1rem;
color: var(--color-text);
}
.form-section h2 .lucide {
width: 18px;
height: 18px;
color: var(--color-accent);
}
.form-help {
font-size: 0.875rem;
color: var(--color-text-muted);
margin: -0.5rem 0 1rem;
}
.form-row {
display: flex;
gap: 1rem;
}
.form-row-2 > * {
flex: 1;
}
@media (max-width: 600px) {
.form-row {
flex-direction: column;
}
}
.form-group-url {
flex: 1;
}
.url-input-group {
display: flex;
gap: 0.5rem;
}
.url-input-group input {
flex: 1;
}
.og-preview {
margin-top: 1rem;
padding: 1rem;
background: var(--color-bg-alt);
border-radius: 8px;
border: 1px dashed var(--color-border);
}
.og-preview h3 {
font-size: 0.875rem;
margin: 0 0 0.75rem;
color: var(--color-text-muted);
}
.og-preview-content {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.og-preview-content img {
width: 120px;
height: 80px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
#og-preview-title {
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.25rem;
}
#og-preview-description {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 0.25rem;
}
#og-preview-site {
font-size: 0.75rem;
color: var(--color-text-light);
}
.form-hint {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.form-group-checkbox {
display: flex;
align-items: center;
padding-top: 1.5rem;
}
.form-group-checkbox label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.page-header h1 {
margin: 0;
}
.badge {
display: inline-flex;
align-items: center;
margin-left: 0.5rem;
}
.badge .lucide {
width: 14px;
height: 14px;
}
.badge-gold {
color: var(--color-accent);
}
/* mockups.css */
.mockup-browser {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
max-width: 900px;
margin: 0 auto;
}
.mockup-browser.small {
max-width: 100%;
}
.mockup-chrome {
background: #f1f3f5;
padding: 0.6rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: 1px solid #dee2e6;
}
.mockup-dots {
display: flex;
gap: 6px;
}
.mockup-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
}
.mockup-dots span:nth-child(1) { background: #ff5f57; }
.mockup-dots span:nth-child(2) { background: #febc2e; }
.mockup-dots span:nth-child(3) { background: #28c840; }
.mockup-url {
flex: 1;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.25rem 0.75rem;
font-size: 0.7rem;
color: #868e96;
font-family: var(--font-sans);
}
.mockup-body {
background: #fff;
}
.mockup-admin {
background: #f8f9fa;
}
.mockup-nav {
background: #1a1a2e;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
.mockup-nav-brand {
color: #fff;
font-weight: 600;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.mockup-nav-brand .lucide {
width: 16px;
height: 16px;
}
.mockup-nav-links {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
.mockup-nav-links span {
color: rgba(255,255,255,0.6);
font-size: 0.65rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.25rem;
}
.mockup-nav-links span.active {
color: #fff;
background: rgba(255,255,255,0.15);
}
.mockup-nav-links .lucide {
width: 12px;
height: 12px;
}
.mockup-content {
padding: 1.25rem;
}
.mockup-title {
font-size: 1.15rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 1rem;
}
.mockup-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}
.mockup-stat {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem;
text-align: center;
}
.mockup-stat.highlight {
border-color: var(--color-accent);
background: linear-gradient(135deg, rgba(139,92,246,0.05), rgba(139,92,246,0.02));
}
.mockup-stat-icon {
margin-bottom: 0.25rem;
}
.mockup-stat-icon .lucide {
width: 20px;
height: 20px;
color: var(--color-accent);
}
.mockup-stat-num {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
line-height: 1.2;
}
.mockup-stat-label {
font-size: 0.65rem;
color: #868e96;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mockup-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.mockup-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
background: #fff;
border: 1px solid #dee2e6;
color: #495057;
}
.mockup-btn.primary {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.mockup-btn .lucide {
width: 13px;
height: 13px;
}
.mockup-filters {
display: flex;
gap: 0.35rem;
margin-bottom: 0.75rem;
}
.mockup-filter-btn {
padding: 0.25rem 0.6rem;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 500;
background: #fff;
border: 1px solid #dee2e6;
color: #868e96;
}
.mockup-filter-btn.active {
background: #1a1a2e;
color: #fff;
border-color: #1a1a2e;
}
.mockup-table {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
font-size: 0.7rem;
}
.mockup-row {
display: grid;
grid-template-columns: 0.7fr 1.2fr 1.1fr 0.8fr 0.7fr;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f1f3f5;
align-items: center;
gap: 0.25rem;
}
.mockup-row.header {
background: #f8f9fa;
font-weight: 600;
color: #495057;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mockup-row:last-child {
border-bottom: none;
}
.mockup-row span {
color: #495057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mockup-status {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
}
.mockup-status.new {
background: #d3f9d8;
color: #2b8a3e;
}
.mockup-status.contacted {
background: #d0ebff;
color: #1971c2;
}
.mockup-status.closed {
background: #e9ecef;
color: #868e96;
}
.mockup-form {
font-size: 0.75rem;
}
.mockup-field {
margin-bottom: 0.5rem;
}
.mockup-field label {
display: block;
font-size: 0.65rem;
font-weight: 600;
color: #495057;
margin-bottom: 0.2rem;
}
.mockup-input {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.35rem 0.6rem;
font-size: 0.7rem;
color: #495057;
}
.mockup-textarea {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.5rem 0.6rem;
font-size: 0.7rem;
color: #495057;
min-height: 80px;
line-height: 1.5;
}
.mockup-settings-section {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem;
}
.mockup-setting-header {
font-size: 0.75rem;
font-weight: 600;
color: #1a1a2e;
display: flex;
align-items: center;
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.mockup-setting-header .lucide {
width: 14px;
height: 14px;
color: var(--color-accent);
}
.mockup-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.7rem;
color: #495057;
}
.mockup-toggle {
width: 32px;
height: 18px;
border-radius: 9px;
background: #dee2e6;
position: relative;
transition: background 0.2s;
}
.mockup-toggle.on {
background: var(--color-accent);
}
.mockup-toggle-knob {
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mockup-toggle.on .mockup-toggle-knob {
transform: translateX(14px);
}
.mockup-badges-demo {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.5rem;
}
.mockup-email-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.5rem;
background: var(--color-accent);
color: #fff;
border-radius: 4px;
font-size: 0.6rem;
font-weight: 500;
}
.mockup-email-badge span {
cursor: default;
opacity: 0.7;
}
@media (max-width: 600px) {
.mockup-stats {
grid-template-columns: repeat(2, 1fr);
}
.mockup-row {
grid-template-columns: 0.6fr 1fr 0.7fr;
font-size: 0.6rem;
}
.mockup-row span:nth-child(4),
.mockup-row span:nth-child(3) {
display: none;
}
.mockup-row.header span:nth-child(4),
.mockup-row.header span:nth-child(3) {
display: none;
}
.mockup-nav-links span span {
display: none;
}
}
html[data-dark="true"] .mockup-chrome { background: #1e293b; border-color: #334155; }
html[data-dark="true"] .mockup-url { background: #0f172a; border-color: #334155; color: #94a3b8; }
html[data-dark="true"] .mockup-body { background: #0f172a; }
html[data-dark="true"] .mockup-admin { background: #1e293b; }
html[data-dark="true"] .mockup-stat { background: #1e293b; border-color: #334155; }
html[data-dark="true"] .mockup-stat-num { color: #e2e8f0; }
html[data-dark="true"] .mockup-title { color: #e2e8f0; }
html[data-dark="true"] .mockup-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-dark="true"] .mockup-table { background: #1e293b; border-color: #334155; }
html[data-dark="true"] .mockup-row { border-color: #334155; }
html[data-dark="true"] .mockup-row.header { background: #0f172a; color: #94a3b8; }
html[data-dark="true"] .mockup-row span { color: #e2e8f0; }
html[data-dark="true"] .mockup-filter-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
html[data-dark="true"] .mockup-filter-btn.active { background: var(--color-primary); color: #fff; }
html[data-dark="true"] .mockup-input, html[data-dark="true"] .mockup-textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html[data-dark="true"] .mockup-settings-section { background: #1e293b; border-color: #334155; }
html[data-dark="true"] .mockup-setting-header { color: #e2e8f0; }
html[data-dark="true"] .mockup-toggle-row { color: #e2e8f0; }
html[data-dark="true"] .mockup-field label { color: #94a3b8; }
/* modal.css */
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
z-index: 1000; display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity 0.2s;
padding: 1rem;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-container {
background: #fff; border-radius: 16px; max-width: 480px; width: 100%;
padding: 2rem; position: relative; max-height: 90vh; overflow-y: auto;
transform: translateY(20px); transition: transform 0.2s;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-overlay.active .modal-container { transform: translateY(0); }
.modal-close {
position: absolute; top: 12px; right: 16px; background: none; border: none;
font-size: 28px; cursor: pointer; color: #94a3b8; line-height: 1;
transition: color 0.2s;
}
.modal-close:hover { color: #1e293b; }
.modal-header { text-align: center; margin-bottom: 1.5rem; }
.modal-header h2 { font-size: 1.4rem; color: #1e293b; margin: 0; }
.modal-header p { color: #64748b; font-size: 0.9rem; margin: 0.25rem 0 0; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.modal-field { margin-bottom: 0.75rem; }
.modal-field label {
display: block; font-size: 0.8rem; font-weight: 600; color: #475569;
margin-bottom: 0.25rem;
}
.modal-field input, .modal-field textarea, .modal-field select {
width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #e2e8f0;
border-radius: 8px; font-size: 0.95rem; transition: border-color 0.2s;
font-family: inherit; background: #fff; color: #1e293b;
}
.modal-field input:focus, .modal-field textarea:focus {
outline: none; border-color: var(--color-primary, #3C3B6E);
box-shadow: 0 0 0 3px rgba(60,59,110,0.1);
}
.modal-field input.invalid { border-color: #ef4444; }
.modal-field input.invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.field-error { display: block; font-size: 0.75rem; color: #ef4444; margin-top: 0.2rem; min-height: 1rem; }
.modal-submit {
width: 100%; padding: 0.75rem; background: var(--color-primary, #2E5E3E); color: #fff;
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: background 0.2s; margin-top: 0.5rem;
}
.modal-submit:hover { filter: brightness(1.1); }
.modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.modal-success {
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
text-align: center; padding: 1.5rem 0;
}
.modal-success p { color: #475569; margin: 0; }
.modal-error {
background: #fef2f2; color: #dc2626; padding: 0.75rem; border-radius: 8px;
text-align: center; margin-top: 0.5rem; font-size: 0.9rem;
}
@media (max-width: 480px) {
.modal-container { padding: 1.5rem; }
.modal-row { grid-template-columns: 1fr; }
}
html[data-dark="true"] .modal-container { background: #1a1a2e; }
html[data-dark="true"] .modal-header h2 { color: #f0f0f0; }
html[data-dark="true"] .modal-field input,
html[data-dark="true"] .modal-field textarea {
background: #0f0f1a; color: #e0e0e0; border-color: #2a2a3e;
}
html[data-dark="true"] .modal-close { color: #64748b; }
html[data-dark="true"] .modal-close:hover { color: #e0e0e0; }
/* anim-slide.css */
.anim-slide {
opacity: 0;
will-change: transform, opacity;
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-slide.is-visible {
opacity: 1;
transform: translate(0, 0) !important;
}
.anim-slide-left {
transform: translateX(-80px);
}
.anim-slide-right {
transform: translateX(80px);
}
.anim-slide-up {
transform: translateY(60px);
}
.anim-slide-down {
transform: translateY(-40px);
}
.anim-slide-up-left {
transform: translate(-60px, 40px);
}
.anim-slide-up-right {
transform: translate(60px, 40px);
}
.anim-slide--slow {
transition-duration: 1.1s;
}
.anim-slide--fast {
transition-duration: 0.4s;
}
.anim-slide[data-delay="1"] { transition-delay: 0.1s; }
.anim-slide[data-delay="2"] { transition-delay: 0.2s; }
.anim-slide[data-delay="3"] { transition-delay: 0.3s; }
.anim-slide[data-delay="4"] { transition-delay: 0.4s; }
.anim-slide[data-delay="5"] { transition-delay: 0.5s; }
.anim-slide[data-delay="6"] { transition-delay: 0.6s; }
.anim-slide[data-delay="7"] { transition-delay: 0.7s; }
.anim-slide[data-delay="8"] { transition-delay: 0.8s; }
.anim-slide--near.anim-slide-left  { transform: translateX(-40px); }
.anim-slide--near.anim-slide-right { transform: translateX(40px); }
.anim-slide--near.anim-slide-up    { transform: translateY(30px); }
.anim-slide--near.anim-slide-down  { transform: translateY(-20px); }
.anim-slide--far.anim-slide-left   { transform: translateX(-150px); }
.anim-slide--far.anim-slide-right  { transform: translateX(150px); }
.anim-slide--far.anim-slide-up     { transform: translateY(100px); }
@media (prefers-reduced-motion: reduce) {
.anim-slide {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* anim-fade.css */
.anim-fade {
opacity: 0;
will-change: transform, opacity;
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.anim-fade.is-visible {
opacity: 1;
transform: none !important;
}
.anim-fade-in {
}
.anim-fade-up {
transform: translateY(30px);
}
.anim-fade-down {
transform: translateY(-30px);
}
.anim-fade-scale {
transform: scale(0.92);
}
.anim-fade-zoom {
transform: scale(0.75);
}
.anim-fade-rotate {
transform: rotate(-3deg) translateY(20px);
}
.anim-fade--slow {
transition-duration: 1s;
}
.anim-fade--fast {
transition-duration: 0.3s;
}
.anim-fade[data-delay="1"] { transition-delay: 0.1s; }
.anim-fade[data-delay="2"] { transition-delay: 0.2s; }
.anim-fade[data-delay="3"] { transition-delay: 0.3s; }
.anim-fade[data-delay="4"] { transition-delay: 0.4s; }
.anim-fade[data-delay="5"] { transition-delay: 0.5s; }
.anim-fade[data-delay="6"] { transition-delay: 0.6s; }
.anim-fade[data-delay="7"] { transition-delay: 0.7s; }
.anim-fade[data-delay="8"] { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
.anim-fade {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* anim-text.css */
.anim-text-reveal {
overflow: hidden;
}
.anim-text-word {
display: inline-block;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-text-reveal.is-visible .anim-text-word {
opacity: 1;
transform: translateY(0);
}
.anim-text-shimmer {
background: linear-gradient(
90deg,
currentColor 0%,
currentColor 40%,
var(--color-accent, #3b82f6) 50%,
currentColor 60%,
currentColor 100%
);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.anim-text-shimmer.is-visible {
animation: anim-text-shimmer-sweep 1.8s ease forwards;
}
@keyframes anim-text-shimmer-sweep {
from { background-position: 100% 0; }
to   { background-position: -100% 0; }
}
.anim-text-count {
display: inline-block;
font-variant-numeric: tabular-nums;
transition: transform 0.3s ease;
}
.anim-text-type {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid var(--color-accent, #3b82f6);
width: 0;
transition: none;
}
.anim-text-type.is-visible {
animation: anim-text-type-cursor 0.7s step-end infinite;
}
.anim-text-type.is-done {
border-right-color: transparent;
animation: none;
}
@keyframes anim-text-type-cursor {
from, to { border-color: var(--color-accent, #3b82f6); }
50% { border-color: transparent; }
}
.anim-text-line {
display: block;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.anim-text-lines.is-visible .anim-text-line {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.anim-text-word,
.anim-text-line {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.anim-text-shimmer {
-webkit-text-fill-color: currentColor;
animation: none !important;
}
.anim-text-type {
width: auto !important;
border-right: none;
animation: none !important;
}
}