/* ============================================================================= Upper Bound Robotics — Design System Color Theme: Black and Gold ============================================================================= */ /* ----------------------------------------------------------------------------- Google Fonts ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ----------------------------------------------------------------------------- CSS Custom Properties (Design Tokens) ----------------------------------------------------------------------------- */ :root { /* Primary colors — black and gold palette */ --color-black: #0a0a0a; --color-black-light: #141414; --color-black-lighter: #1e1e1e; --color-charcoal: #2a2a2a; --color-gray-dark: #3a3a3a; --color-gray: #6b6b6b; --color-gray-light: #9a9a9a; --color-gray-lighter: #d4d4d4; --color-off-white: #f5f5f0; --color-white: #ffffff; /* Gold accent colors */ --color-gold: #c9a84c; --color-gold-light: #d4b85c; --color-gold-dark: #b08d3a; --color-gold-muted: rgba(201, 168, 76, 0.15); --color-gold-glow: rgba(201, 168, 76, 0.3); /* Semantic colors */ --color-bg-primary: var(--color-black); --color-bg-secondary: var(--color-black-light); --color-bg-tertiary: var(--color-black-lighter); --color-bg-card: var(--color-charcoal); --color-bg-light: var(--color-off-white); --color-text-primary: var(--color-white); --color-text-secondary: var(--color-gray-lighter); --color-text-muted: var(--color-gray-light); --color-text-dark: var(--color-black); --color-accent: var(--color-gold); --color-accent-hover: var(--color-gold-light); --color-border: var(--color-gray-dark); /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 2.5rem; --font-size-4xl: 3.25rem; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-relaxed: 1.8; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Layout */ --max-width: 1800px; --max-width-narrow: 1600px; --border-radius: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; /* Shadows */ --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 30px rgba(0, 0, 0, 0.5); --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.15); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ----------------------------------------------------------------------------- Light Theme Overrides Applied when .theme-light class is on the element. ----------------------------------------------------------------------------- */ .theme-light { --color-bg-primary: #f5f5f0; --color-bg-secondary: #eaeae4; --color-bg-tertiary: #e0e0da; --color-bg-card: #ffffff; --color-bg-light: #ffffff; --color-text-primary: #1a1a1a; --color-text-secondary: #3a3a3a; --color-text-muted: #6b6b6b; --color-text-dark: #1a1a1a; --color-accent: #9e8432; --color-accent-hover: #b08d3a; --color-border: #d4d4cc; --color-gold-muted: rgba(158, 132, 50, 0.1); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-gold: 0 4px 20px rgba(158, 132, 50, 0.12); } .theme-light .site-header { background-color: rgba(245, 245, 240, 0.95); } .theme-light .site-logo-text { color: #1a1a1a; } .theme-light .mobile-menu-toggle span { background-color: #1a1a1a; } .theme-light .hero { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #3a3a3a 100%); } .theme-light .hero h1, .theme-light .hero p, .theme-light .hero .hero-label { color: #ffffff; } .theme-light .hero h1 .accent { color: var(--color-gold); } .theme-light .page-hero { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); } .theme-light .page-hero h1, .theme-light .page-hero p { color: #ffffff; } .theme-light .cta-section { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); } .theme-light .cta-section h2, .theme-light .cta-section p { color: #ffffff; } .theme-light .post-header { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); } .theme-light .post-header h1, .theme-light .post-header .post-meta, .theme-light .post-header .post-back { color: #ffffff; } .theme-light .site-footer { background-color: #1a1a1a; } .theme-light .site-footer, .theme-light .site-footer p, .theme-light .site-footer a, .theme-light .footer-brand .site-logo-text { color: #d4d4d4; } .theme-light .site-footer a:hover { color: var(--color-gold); } .theme-light .nav-links a { color: #3a3a3a; } .theme-light .nav-links a:hover, .theme-light .nav-links a.active { color: var(--color-accent); } .theme-light .button-primary { color: #ffffff; } .theme-light .button-primary:hover { color: #ffffff; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: var(--border-radius); cursor: pointer; padding: 6px 10px; font-size: var(--font-size-base); line-height: 1; transition: all var(--transition-fast); color: var(--color-text-secondary); display: flex; align-items: center; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ----------------------------------------------------------------------------- Reset and Base Styles ----------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); } ul, ol { list-style: none; } /* ----------------------------------------------------------------------------- Typography ----------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } p { margin-bottom: var(--space-md); color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-text-muted); } /* ----------------------------------------------------------------------------- Layout Utilities ----------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); } .container-narrow { max-width: var(--max-width-narrow); } .section { padding: var(--space-5xl) 0; } .section-dark { background-color: var(--color-bg-secondary); } .section-darker { background-color: var(--color-bg-primary); } .section-light { background-color: var(--color-bg-light); color: var(--color-text-dark); } .section-light h2, .section-light h3, .section-light h4 { color: var(--color-text-dark); } .section-light p { color: var(--color-gray); } .section-header { text-align: center; margin-bottom: var(--space-3xl); } .section-header h2 { margin-bottom: var(--space-md); } .section-header p { font-size: var(--font-size-lg); max-width: 600px; margin: 0 auto; } .grid { display: grid; gap: var(--space-xl); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; gap: var(--space-md); } .flex-center { align-items: center; justify-content: center; } .text-center { text-align: center; } /* ----------------------------------------------------------------------------- Navigation ----------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: rgba(10, 10, 10, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-base); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; } .site-logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text-primary); } .site-logo img { height: 36px; width: auto; } .site-logo-text { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); letter-spacing: 3px; color: var(--color-white); } .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-links a { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 1px; transition: color var(--transition-fast); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width var(--transition-base); } .nav-links a:hover, .nav-links a.active { color: var(--color-accent); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-cta { margin-left: var(--space-md); } .nav-links a.nav-cta { color: #ffffff; } .nav-links a.nav-cta:hover { color: #ffffff; } .nav-links a.nav-cta::after { display: none; } /* Mobile menu toggle */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); flex-direction: column; gap: 5px; } .mobile-menu-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-white); transition: transform var(--transition-base), opacity var(--transition-base); } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ----------------------------------------------------------------------------- Buttons ----------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 12px 28px; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.5px; text-transform: uppercase; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-base); text-decoration: none; border: 2px solid transparent; } .button-primary { background-color: var(--color-accent); color: #ffffff; border-color: var(--color-accent); } .button-primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #ffffff; box-shadow: var(--shadow-gold); transform: translateY(-2px); } .button-outline { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); } .button-outline:hover { background-color: var(--color-accent); color: var(--color-black); transform: translateY(-2px); } .button-white { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .button-white:hover { background-color: var(--color-white); color: var(--color-black); transform: translateY(-2px); } .button-sm { padding: 8px 20px; font-size: var(--font-size-xs); } .button-lg { padding: 16px 36px; font-size: var(--font-size-base); } /* ----------------------------------------------------------------------------- Hero Section & Slideshow ----------------------------------------------------------------------------- */ .hero { position: relative; height: 85vh; min-height: 600px; background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black-light) 50%, var(--color-charcoal) 100%); overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 70%; height: 200%; background: radial-gradient(ellipse at center, var(--color-gold-muted) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* Individual slides */ .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: calc(72px + var(--space-4xl)) 0 var(--space-4xl); opacity: 0; z-index: 0; transition: opacity 0.8s ease; pointer-events: none; } .hero-slide.active { opacity: 1; z-index: 2; pointer-events: auto; } /* Optional background image per slide */ .hero-slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 0; } .hero-slide-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, 0.7); } .hero .container { position: relative; z-index: 3; } .hero-content { max-width: 780px; } /* Slide content animations */ .hero-slide.active .hero-label { animation: slide_fade_up 0.6s ease 0.2s both; } .hero-slide.active h1 { animation: slide_fade_up 0.6s ease 0.35s both; } .hero-slide.active p { animation: slide_fade_up 0.6s ease 0.5s both; } .hero-slide.active .hero-buttons { animation: slide_fade_up 0.6s ease 0.65s both; } @keyframes slide_fade_up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hero text styles */ .hero-label { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 3px; color: var(--color-gold); margin-bottom: var(--space-lg); padding: var(--space-xs) var(--space-md); border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 100px; background-color: rgba(201, 168, 76, 0.15); } .hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-lg); line-height: 1.1; color: #ffffff; } .hero h1 .accent { color: var(--color-gold); } .hero p { font-size: var(--font-size-lg); color: #d4d4d4; margin-bottom: var(--space-2xl); max-width: 540px; } .hero-buttons { display: flex; gap: var(--space-md); flex-wrap: wrap; } /* Slide indicators */ .hero-indicators { position: absolute; bottom: var(--space-2xl); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-sm); z-index: 10; } .hero-indicator { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; cursor: pointer; padding: 0; transition: all var(--transition-base); } .hero-indicator:hover { border-color: var(--color-gold); } .hero-indicator.active { background-color: var(--color-gold); border-color: var(--color-gold); } /* Page hero (shorter hero for inner pages) */ .page-hero { padding: calc(72px + var(--space-4xl)) 0 var(--space-3xl); background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black-light) 100%); border-bottom: 1px solid var(--color-border); } .page-hero h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); } .page-hero p { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 600px; } .back-link { display: inline-block; font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: none; margin-bottom: var(--space-md); transition: color var(--transition-fast); } .back-link:hover { color: var(--color-gold); } /* ----------------------------------------------------------------------------- Cards ----------------------------------------------------------------------------- */ .card { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--space-xl); transition: all var(--transition-base); position: relative; overflow: hidden; } .card:hover { border-color: var(--color-gold-dark); transform: translateY(-4px); box-shadow: var(--shadow-gold); } .card-accent { border-left: 3px solid var(--color-gold); } .card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--color-gold-muted); border-radius: var(--border-radius); margin-bottom: var(--space-lg); font-size: var(--font-size-xl); } .card h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); } .card p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0; } .card-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-accent); } .card-link::after { content: '→'; transition: transform var(--transition-fast); } .card:hover .card-link::after { transform: translateX(4px); } /* Blog card */ .blog-card { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); overflow: hidden; transition: all var(--transition-base); } .blog-card:hover { border-color: var(--color-gold-dark); transform: translateY(-4px); box-shadow: var(--shadow-gold); } .blog-card-image { width: 100%; height: 200px; object-fit: cover; background-color: var(--color-gray-dark); } .blog-card-content { padding: var(--space-xl); } .blog-card-date { font-size: var(--font-size-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-sm); } .blog-card-content h3 { font-size: var(--font-size-md); margin-bottom: var(--space-sm); } .blog-card-content h3 a { color: var(--color-text-primary); } .blog-card-content h3 a:hover { color: var(--color-accent); } .blog-card-content p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-md); } /* Stat card */ .stat-card { text-align: center; padding: var(--space-xl); background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-top: 3px solid var(--color-gold); border-radius: var(--border-radius-lg); transition: transform var(--transition-base); } .stat-card:hover { transform: translateY(-2px); } /* Team callout card */ .team-callout { max-width: 900px; margin: 0 auto var(--space-3xl); padding: var(--space-2xl); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); border-radius: var(--border-radius-lg); font-size: var(--font-size-lg); line-height: 1.8; color: var(--color-text-secondary); } .team-callout p { margin: 0; } /* 5-column grid for stat cards */ .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); } .stat-card .stat-number { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); color: var(--color-accent); display: block; margin-bottom: var(--space-xs); } .stat-card .stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; } /* ----------------------------------------------------------------------------- CTA Section ----------------------------------------------------------------------------- */ .cta-section { padding: var(--space-4xl) 0; background: linear-gradient(135deg, var(--color-black-light) 0%, var(--color-charcoal) 100%); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, var(--color-gold-muted) 0%, transparent 70%); pointer-events: none; } .cta-section .container { position: relative; z-index: 1; } .cta-section h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); } .cta-section p { font-size: var(--font-size-lg); color: var(--color-text-muted); margin-bottom: var(--space-2xl); max-width: 600px; margin-left: auto; margin-right: auto; } /* Gold divider line */ .gold-divider { width: 60px; height: 3px; background-color: var(--color-accent); margin: 0 auto var(--space-xl); border-radius: 2px; } /* ----------------------------------------------------------------------------- Contact Form ----------------------------------------------------------------------------- */ .form-group { margin-bottom: var(--space-lg); } .form-group label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.5px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text-primary); background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-gold-muted); } .form-group textarea { min-height: 150px; resize: vertical; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-gray); } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* Inline status messages shown after form submission */ .form-status { margin-top: 20px; padding: var(--space-lg) var(--space-xl); border-radius: var(--border-radius); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .form-status-success { background-color: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); color: #81c784; } .form-status-error { background-color: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); color: #e57373; } .form-status-error a { color: var(--color-accent); } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-black); border-top: 1px solid var(--color-border); padding: var(--space-4xl) 0 var(--space-xl); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-3xl); margin-bottom: var(--space-3xl); } .footer-brand p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-md); max-width: 300px; } .footer-column h4 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin-bottom: var(--space-lg); } .footer-column ul li { margin-bottom: var(--space-sm); } .footer-column ul li a { font-size: var(--font-size-sm); color: var(--color-text-muted); transition: color var(--transition-fast); } .footer-column ul li a:hover { color: var(--color-accent); } .footer-bottom { padding-top: var(--space-xl); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: var(--font-size-xs); color: var(--color-gray); margin-bottom: 0; } /* ----------------------------------------------------------------------------- Blog Post Layout ----------------------------------------------------------------------------- */ .post-header { padding: calc(72px + var(--space-4xl)) 0 var(--space-2xl); background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black-light) 100%); border-bottom: 1px solid var(--color-border); } .post-meta { display: flex; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-lg); font-size: var(--font-size-sm); color: var(--color-text-muted); } .post-meta .post-date { color: var(--color-accent); } .post-body { padding: var(--space-3xl) 0; } .post-body .container { max-width: var(--max-width-narrow); } .post-body h2 { font-size: var(--font-size-2xl); margin-top: var(--space-3xl); margin-bottom: var(--space-lg); } .post-body h3 { font-size: var(--font-size-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); } .post-body p { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); margin-bottom: var(--space-lg); } .post-body ul, .post-body ol { margin-bottom: var(--space-lg); padding-left: var(--space-xl); } .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; } .post-body li { margin-bottom: var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } .post-body img { border-radius: var(--border-radius-lg); margin: var(--space-2xl) 0; } .post-body blockquote { border-left: 3px solid var(--color-accent); padding-left: var(--space-xl); margin: var(--space-2xl) 0; font-style: italic; color: var(--color-text-muted); } .post-body code { background-color: var(--color-bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: var(--font-size-sm); } .post-body pre { background-color: var(--color-bg-tertiary); padding: var(--space-xl); border-radius: var(--border-radius); overflow-x: auto; margin-bottom: var(--space-lg); } .post-body pre code { padding: 0; background: none; } .post-back { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-accent); margin-bottom: var(--space-2xl); } .post-back::before { content: '←'; } /* ----------------------------------------------------------------------------- Product Page Layout ----------------------------------------------------------------------------- */ .product-features { padding: var(--space-4xl) 0; } .feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .feature-item { display: flex; gap: var(--space-md); align-items: flex-start; } .feature-bullet { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; background-color: var(--color-accent); border-radius: 50%; } .feature-item h4 { font-size: var(--font-size-base); margin-bottom: var(--space-xs); } .feature-item p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0; } /* Product description body content */ .product-body { padding: var(--space-3xl) 0; border-top: 1px solid var(--color-border); } .product-body .container { max-width: var(--max-width-narrow); } .product-body h2 { font-size: var(--font-size-2xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); } .product-body p { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } .product-body ul { list-style: disc; padding-left: var(--space-xl); margin-bottom: var(--space-lg); } .product-body li { margin-bottom: var(--space-sm); color: var(--color-text-secondary); } /* ----------------------------------------------------------------------------- Services Page ----------------------------------------------------------------------------- */ .service-block { padding: var(--space-2xl); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); border-radius: var(--border-radius-lg); margin-bottom: var(--space-xl); transition: border-color var(--transition-base); } .service-block:hover { border-left-color: var(--color-gold-light); } .service-block-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); } .service-icon { font-size: var(--font-size-2xl); line-height: 1; } .service-block h3 { font-size: var(--font-size-xl); margin-bottom: 0; color: var(--color-accent); } .service-block p { margin-bottom: var(--space-md); } .service-block ul { list-style: none; padding: 0; } .service-block li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-sm); } .service-block li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background-color: var(--color-accent); border-radius: 50%; } /* Contact info on contact page */ .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); } .contact-info-item { text-align: center; padding: var(--space-2xl); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-top: 3px solid var(--color-gold); border-radius: var(--border-radius-lg); transition: transform var(--transition-base); } .contact-info-item:hover { transform: translateY(-2px); } .contact-info-item .contact-icon { font-size: 2.5rem; margin-bottom: var(--space-md); } .contact-info-item h4 { font-size: var(--font-size-base); margin-bottom: var(--space-sm); } .contact-info-item p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0; } .contact-info-item a { color: var(--color-accent); } /* Contact form container */ .contact-form-wrapper { max-width: 800px; margin: 0 auto; padding: var(--space-2xl); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); } /* ----------------------------------------------------------------------------- Animations ----------------------------------------------------------------------------- */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .fade-in.visible { opacity: 1; transform: translateY(0); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Gold shimmer on hover for special elements */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* ----------------------------------------------------------------------------- Responsive Design ----------------------------------------------------------------------------- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .feature-list { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --font-size-4xl: 2.25rem; --font-size-3xl: 1.75rem; --font-size-2xl: 1.5rem; } .section { padding: var(--space-3xl) 0; } .container { padding: 0 var(--space-md); } /* Mobile navigation */ .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background-color: var(--color-bg-secondary); flex-direction: column; padding: var(--space-xl); border-bottom: 1px solid var(--color-border); gap: var(--space-md); } .nav-links.active { display: flex; } .nav-cta { margin-left: 0; } .mobile-menu-toggle { display: flex; } /* Stack grids */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* Hero adjustments */ .hero { min-height: 70vh; text-align: center; } .hero p { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: var(--space-2xl); } .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; } } @media (max-width: 480px) { .hero-buttons { flex-direction: column; align-items: stretch; } .button-lg { padding: 14px 24px; } .stat-card .stat-number { font-size: var(--font-size-2xl); } }