7sys

2024-11-15 09:06:19 +01:00
parent c976595f15
commit 263d2a88d6
15 changed files with 1036 additions and 0 deletions
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -0,0 +1,139 @@
+/* Card Base Styles */
+.card-base {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.card-base:hover {
+    border-color: var(--primary);
+}
+
+/* Mission Vision Cards */
+.mission-vision {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    margin: var(--spacing-xl) 0;
+}
+
+.mission-vision div {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    text-align: center;
+}
+
+.mission-vision h3 {
+    color: var(--primary);
+    margin-bottom: var(--spacing-md);
+}
+
+/* Service Cards */
+.service-card {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    margin: var(--spacing-lg) 0;
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.service-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--primary);
+}
+
+.service-card h3 {
+    color: var(--primary);
+    margin-bottom: var(--spacing-md);
+}
+
+/* Contact Info Card */
+.contact-info {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    margin: var(--spacing-xl) 0;
+}
+
+.contact-info a {
+    color: var(--primary);
+    text-decoration: none;
+    display: block;
+    margin: var(--spacing-sm) 0;
+    transition: opacity var(--transition-speed) ease;
+}
+
+.contact-info a:hover {
+    opacity: 0.8;
+}
+
+/* Quote Styles */
+.quote {
+    font-size: 1.2rem;
+    line-height: 1.6;
+    padding: var(--spacing-xl);
+    margin: var(--spacing-xl) 0;
+    background: var(--bg-card);
+    border-left: 4px solid var(--primary);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    color: var(--text);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.hero-quote {
+    font-size: 1.3rem;
+    line-height: 1.7;
+    color: var(--text);
+    max-width: 900px;
+    margin: var(--spacing-xl) auto;
+    padding: var(--spacing-md) 0;
+    position: relative;
+    font-weight: 300;
+    opacity: 0.9;
+}
+
+.hero-quote::before {
+    content: '"';
+    position: absolute;
+    top: -30px;
+    left: -10px;
+    font-size: 3rem;
+    color: var(--primary);
+    opacity: 0.3;
+}
+
+.welcome-quote {
+    font-size: 1.1rem;
+    text-align: center;
+    padding: var(--spacing-xl);
+}
+
+.welcome-quote:before {
+    content: '°';
+    position: absolute;
+    top: -10px;
+    left: 0;
+    font-size: 1rem;
+    color: var(--primary);
+    opacity: 0.2;
+}
+
+/* Logo Sub Text */
+.logo-sub {
+    display: block;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin: var(--spacing-xl) auto;
+    max-width: 800px;
+    line-height: 1.4;
+    font-style: italic;
+}