/* Tojo Dynamics - Unified Clean Design System Modern, minimalist CSS for all pages */ /* ======================================== CSS CUSTOM PROPERTIES (CSS VARIABLES) ======================================== */ :root { /* Colors */ --primary-color: #000000; --primary-light: #333333; --primary-dark: #000000; --secondary-color: #666666; --accent-color: #c9a96e; --accent-hover: #b8944d; /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #f5f5f5; --bg-dark: #2a2a2a; /* Text Colors */ --text-primary: #2a2a2a; --text-secondary: #666666; --text-light: #999999; --text-white: #ffffff; /* Borders & Lines */ --border-color: rgba(0, 0, 0, 0.08); --border-color-hover: rgba(0, 0, 0, 0.15); --border-radius: 8px; --border-radius-large: 16px; --border-radius-small: 4px; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; --spacing-xxxl: 4rem; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Fluid editorial display sizes (headlines break past the static scale) */ --font-size-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem); --font-size-display-sm: clamp(2.1rem, 1.4rem + 2.9vw, 3.4rem); --tracking-eyebrow: 0.18em; --measure: 64ch; /* Line Heights */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Layout */ --max-width: 1400px; --max-width-narrow: 800px; --header-height: 80px; } /* ======================================== RESET & BASE STYLES ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Safety-net against horizontal scroll. Deliberately on , not : overflow-x on would turn it into a scroll container and break position: sticky (.ed-why__aside). This is only the net — the actual causes (long words on headings, grid breakpoints) are fixed separately. */ overflow-x: hidden; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Media never overflows its container (cause fix for image-driven overflow). Class-scoped image rules elsewhere (.team-image img, .logo-image, ...) win on specificity, so fixed-size images are unaffected. */ img { max-width: 100%; height: auto; } /* ======================================== TYPOGRAPHY ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); margin-bottom: var(--spacing-md); color: var(--text-primary); letter-spacing: -0.01em; } h1 { font-size: var(--font-size-5xl); margin-bottom: var(--spacing-lg); } h2 { font-size: var(--font-size-4xl); } h3 { font-size: var(--font-size-3xl); } h4 { font-size: var(--font-size-2xl); } h5 { font-size: var(--font-size-xl); } h6 { font-size: var(--font-size-lg); } p { margin-bottom: var(--spacing-md); line-height: var(--line-height-relaxed); color: var(--text-secondary); } a { color: var(--accent-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } /* ======================================== LAYOUT UTILITIES ======================================== */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-xl); } .container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--spacing-xl); } .section { padding: var(--spacing-xxxl) 0; } .section-lg { padding: calc(var(--spacing-xxxl) * 1.5) 0; } .section-sm { padding: var(--spacing-xxl) 0; } /* ======================================== HEADER & NAVIGATION ======================================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); transition: all var(--transition-normal); } .header.scrolled { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--border-color-hover); box-shadow: var(--shadow-sm); } .nav-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-xl); display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } /* Logo */ .logo-link { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); transition: opacity var(--transition-normal); padding: var(--spacing-sm) 0; } .logo-link:hover { opacity: 0.65; color: var(--text-primary); } .logo-image { width: 45px; height: 45px; object-fit: contain; margin-right: var(--spacing-md); transition: all var(--transition-normal); } .logo-link:hover .logo-image { transform: scale(1.1); } .logo-text { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); letter-spacing: 0.14em; text-transform: uppercase; } /* Navigation Links */ .nav-links { display: flex; list-style: none; gap: var(--spacing-lg); margin: 0; padding: 0; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--transition-normal); position: relative; padding: var(--spacing-sm) 2px; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: transparent; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-normal); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* Language Switcher */ .language-switcher { position: relative; } .language-btn { display: flex; align-items: center; gap: var(--spacing-sm); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); cursor: pointer; transition: all var(--transition-fast); } .language-btn:hover { border-color: var(--border-color-hover); background: var(--bg-primary); } .language-icon { transition: transform var(--transition-fast); } .language-switcher.open .language-icon { transform: rotate(180deg); } .language-dropdown { position: absolute; top: 100%; right: 0; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); min-width: 64px; z-index: 1001; } .language-switcher.open .language-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .language-option { display: flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); border-bottom: 1px solid var(--border-color); } .language-option:last-child { border-bottom: none; } .language-option:hover { background: var(--bg-secondary); color: var(--text-primary); } .lang-code { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); } /* Mobile Menu */ .mobile-menu-toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: var(--spacing-sm); gap: 4px; } .hamburger-line { width: 24px; height: 2px; background: var(--text-primary); transition: all var(--transition-normal); } .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(6px); } .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); } /* ======================================== MAIN CONTENT ======================================== */ .main-content { margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); } /* ======================================== BUTTONS & FORMS ======================================== */ .btn { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; border: 2px solid transparent; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-normal); text-align: center; white-space: nowrap; } .btn-primary { background: var(--primary-color); color: var(--text-white); border-color: var(--primary-color); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--text-white); } .btn-secondary { background: transparent; color: var(--primary-color); border-color: var(--primary-color); position: relative; overflow: hidden; z-index: 1; } .btn-secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent-color); transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .btn-secondary:hover { color: var(--text-white); border-color: var(--accent-color); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary:hover::before { left: 0; } /* Secondary button on dark backgrounds */ .cta-dark .btn-secondary { color: var(--text-white); border-color: var(--accent-color); } .cta-dark .btn-secondary:hover { color: var(--text-white); border-color: var(--accent-color); } .btn-large { padding: var(--spacing-lg) var(--spacing-xxl); font-size: var(--font-size-base); } .btn-small { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-xs); } /* Form Elements */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; margin-bottom: var(--spacing-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: var(--font-size-base); font-family: var(--font-family); background: var(--bg-primary); transition: all var(--transition-fast); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18); } .form-textarea { min-height: 120px; resize: vertical; } /* ======================================== CARDS & CONTENT BLOCKS ======================================== */ .card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); padding: var(--spacing-xl); transition: all var(--transition-normal); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: var(--border-color-hover); } .card-header { margin-bottom: var(--spacing-lg); } .card-title { margin-bottom: var(--spacing-sm); } .card-subtitle { color: var(--text-light); font-size: var(--font-size-sm); } .card-content { margin-bottom: var(--spacing-lg); } .card-footer { border-top: 1px solid var(--border-color); padding-top: var(--spacing-lg); } /* ======================================== GRID SYSTEMS ======================================== */ .grid { display: grid; gap: var(--spacing-xl); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid-5 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* ======================================== HERO SECTIONS ======================================== */ .hero { padding: calc(var(--spacing-xxxl) + var(--header-height)) 0 var(--spacing-xxxl); background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); position: relative; overflow: hidden; } .hero-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xxxl); align-items: center; } .hero-content h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--spacing-lg); letter-spacing: -0.03em; } .hero-content p { font-size: var(--font-size-xl); color: var(--text-secondary); margin-bottom: var(--spacing-xl); max-width: 500px; } .hero-visual { display: flex; justify-content: center; align-items: center; } .hero-logo { width: 200px; height: 200px; background: var(--bg-primary); border-radius: 24px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xl); transition: all var(--transition-normal); padding: var(--spacing-xl); border: 1px solid var(--border-color); } .hero-logo:hover { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15); } .hero-logo img { width: 100%; height: 100%; object-fit: contain; } .cta-group { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-lg); } /* ======================================== SECTIONS & CONTENT ======================================== */ .section-header { text-align: center; max-width: 600px; margin: 0 auto var(--spacing-xxxl); } .section-header h2 { font-size: var(--font-size-4xl); margin-bottom: var(--spacing-md); } .section-header p { font-size: var(--font-size-lg); color: var(--text-secondary); } /* Services Cards */ .service-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); padding: var(--spacing-xl); transition: all var(--transition-normal); text-align: center; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--border-color-hover); background: var(--bg-primary); } .service-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-lg); font-size: var(--font-size-xl); color: var(--text-white); } .service-card h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: var(--text-primary); } .service-card p { color: var(--text-secondary); line-height: var(--line-height-relaxed); } /* Team Cards */ .team-card { text-align: center; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); padding: var(--spacing-xl); transition: all var(--transition-normal); } .team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: var(--bg-primary); } .team-image { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--spacing-md); border: 3px solid var(--primary-color); } .team-image img { width: 100%; height: 100%; object-fit: cover; } .team-info h4 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); } .team-role { color: var(--text-light); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-md); } .team-bio { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } /* Stats Section */ .stats { padding: var(--spacing-xxxl) 0; background: var(--bg-secondary); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); text-align: center; } .stat-item { padding: var(--spacing-lg); } .stat-number { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); color: var(--primary-color); display: block; margin-bottom: var(--spacing-sm); } .stat-label { color: var(--text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); } /* ======================================== FOOTER ======================================== */ .footer { background: var(--bg-dark); color: var(--text-white); padding: var(--spacing-xxxl) 0 var(--spacing-xl); border-top: 1px solid rgba(201, 169, 110, 0.35); } .footer-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-xl); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .footer-section h4 { font-family: var(--font-family); color: var(--text-white); margin-bottom: var(--spacing-lg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .footer-logo { display: flex; align-items: center; margin-bottom: var(--spacing-lg); } .footer-logo img { width: 40px; height: 40px; margin-right: var(--spacing-md); } .footer-logo span { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-white); letter-spacing: 0.14em; text-transform: uppercase; } .footer-description { color: #cccccc; margin-bottom: var(--spacing-lg); line-height: var(--line-height-relaxed); } .footer-contact p { color: #cccccc; margin-bottom: var(--spacing-sm); } .footer-links { list-style: none; } .footer-links li { margin-bottom: var(--spacing-sm); } .footer-links a { color: #cccccc; text-decoration: none; transition: color var(--transition-fast); } .footer-links a:hover { color: var(--text-white); } .footer-cta-btn { display: inline-block; background: var(--accent-color); color: var(--text-white); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--border-radius); text-decoration: none; font-weight: var(--font-weight-semibold); margin: var(--spacing-md) 0; transition: all var(--transition-normal); } .footer-cta-btn:hover { background: var(--accent-hover); transform: translateY(-2px); color: var(--text-white); } .footer-languages { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .footer-lang-link { color: #cccccc; text-decoration: none; padding: var(--spacing-sm); border-radius: var(--border-radius-small); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); transition: all var(--transition-fast); } .footer-lang-link:hover, .footer-lang-link.active { background: rgba(255, 255, 255, 0.1); color: var(--text-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--spacing-xl); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); } .footer-bottom p { color: #cccccc; margin: 0; } .footer-bottom-links { display: flex; gap: var(--spacing-lg); } .footer-bottom-links a { color: #cccccc; text-decoration: none; font-size: var(--font-size-sm); transition: color var(--transition-fast); } .footer-bottom-links a:hover { color: var(--text-white); } /* ======================================== UTILITY CLASSES ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mt-xl { margin-top: var(--spacing-xl); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .mb-xl { margin-bottom: var(--spacing-xl); } .hidden { display: none; } .visible { display: block; } /* ======================================== ANIMATIONS & EFFECTS ======================================== */ /* Base fade-in */ .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Slide variants for section reveals */ .slide-in-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(60px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } /* Hero base stays minimal. The animated gradient-text headline, the floating blurred accent blobs and the gold scroll-progress bar were removed — they read as generic "AI landing page" tells, and BRAND.md forbids gradients. */ .hero { position: relative; overflow: hidden; } /* Enhanced button hover - sliding fill */ .btn-primary { position: relative; overflow: hidden; z-index: 1; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent-color); transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .btn-primary:hover::before { left: 0; } /* Card hover lift effect */ .card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Service card enhanced hover */ .service-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } /* Stat items (count-up animation + pop removed for a calmer, editorial feel) */ .stat-item { transition: transform 0.3s ease; } /* ======================================== EDITORIAL PRIMITIVES (shared) ======================================== */ /* Eyebrow label: small uppercase Inter with a short gold rule. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-family); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-light); margin: 0 0 var(--spacing-lg); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--accent-color); } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .fade-in, .slide-in-left, .slide-in-right { opacity: 1 !important; transform: none !important; } } /* ======================================== RESPONSIVE DESIGN ======================================== */ @media (max-width: 1024px) { .hero-container { grid-template-columns: 1fr; gap: var(--spacing-xxl); text-align: center; } .hero-content h1 { font-size: var(--font-size-4xl); } .nav-container { padding: 0 var(--spacing-lg); } .container { padding: 0 var(--spacing-lg); } } @media (max-width: 768px) { :root { --header-height: 70px; } .nav-links { position: fixed; top: var(--header-height); left: 0; right: 0; background: var(--bg-primary); border-top: 1px solid var(--border-color); flex-direction: column; padding: var(--spacing-lg); gap: var(--spacing-md); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all var(--transition-normal); box-shadow: var(--shadow-lg); } .nav-links.active { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-menu-toggle { display: flex; } .language-switcher { order: -1; } /* The switcher sits at the far left on mobile (order: -1); open the dropdown to the right so it never runs off the left edge of the screen. */ .language-dropdown { right: auto; left: 0; } .hero-content h1 { font-size: var(--font-size-3xl); } .hero-content p { font-size: var(--font-size-lg); } .hero-logo { width: 150px; height: 150px; } .section-header h2 { font-size: var(--font-size-3xl); } .cta-group { flex-direction: column; align-items: center; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); } .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .footer-bottom { flex-direction: column; text-align: center; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container, .container-narrow { padding: 0 var(--spacing-md); } .nav-container { padding: 0 var(--spacing-md); } .hero-content h1 { font-size: var(--font-size-2xl); } .section-header h2 { font-size: var(--font-size-2xl); } .stats-grid { grid-template-columns: 1fr; } .btn { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-sm); } .card, .service-card, .team-card { padding: var(--spacing-lg); } .logo-image { width: 35px; height: 35px; margin-right: var(--spacing-sm); } .logo-text { font-size: var(--font-size-lg); } } /* ======================================== MAINTENANCE MODE ======================================== */ .maintenance-notice { position: fixed; top: var(--header-height); left: 0; right: 0; background: #ff9500; color: white; padding: var(--spacing-sm) var(--spacing-md); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); z-index: 999; } /* ======================================== PRINT STYLES ======================================== */ @media print { .header, .footer, .mobile-menu-toggle, .language-switcher, .maintenance-notice { display: none; } .main-content { margin-top: 0; } body { font-size: 12pt; line-height: 1.4; color: black; background: white; } .hero { padding: 2rem 0; } } /* Screen-reader-only utility */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ======================================== LEGAL PAGES (Privacy Policy, Terms) ======================================== */ .hero-small { padding: var(--spacing-3xl) 0 var(--spacing-2xl); min-height: auto; } .hero-small .hero-content { max-width: 800px; } .legal-content { background: var(--bg-white); padding: var(--spacing-2xl); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); margin-bottom: var(--spacing-xl); } .legal-content .last-updated { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .legal-content h2 { font-size: var(--font-size-xl); margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-md); color: var(--primary-color); scroll-margin-top: var(--spacing-2xl); } /* Auto-numbered legal pages (e.g. legal_notice.html where sections are conditionally rendered). CSS counters increment only on visible h2s, so the numbering never has gaps. */ .legal-content--auto-numbered { counter-reset: legal-section; } .legal-content--auto-numbered h2 { counter-increment: legal-section; display: flex; align-items: baseline; gap: var(--spacing-md); padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); border-left: 3px solid var(--primary-color); border-radius: 2px; } .legal-content--auto-numbered h2::before { content: counter(legal-section) "."; color: var(--primary-color); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); min-width: 1.6em; opacity: 0.75; } .legal-content h3 { font-size: var(--font-size-lg); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); } .legal-content p { margin-bottom: var(--spacing-md); line-height: 1.8; } .legal-content ul { margin-bottom: var(--spacing-md); padding-left: var(--spacing-xl); } .legal-content ul li { margin-bottom: var(--spacing-sm); line-height: 1.7; } .legal-content .contact-info { background: var(--bg-secondary); padding: var(--spacing-lg); border-radius: var(--border-radius); margin-top: var(--spacing-md); } .legal-content .contact-info p { margin-bottom: var(--spacing-xs); } .legal-table-wrap { overflow-x: auto; margin: var(--spacing-md) 0; } .legal-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .legal-table th, .legal-table td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); vertical-align: top; } .legal-table thead th { background: var(--bg-secondary); color: var(--primary-color); font-weight: var(--font-weight-semibold); } .legal-table tbody tr:last-child td { border-bottom: none; } .legal-actions { display: flex; gap: var(--spacing-md); justify-content: center; } /* GDPR Layer-1 info block at the contact form (AEPD-compliant). */ .gdpr-info { border: 1px solid var(--border-color); border-left: 3px solid var(--primary-color); border-radius: var(--border-radius); padding: var(--spacing-md) var(--spacing-lg); margin: var(--spacing-lg) 0; background: var(--bg-secondary); } .gdpr-info legend { font-weight: var(--font-weight-semibold); color: var(--primary-color); padding: 0 var(--spacing-sm); font-size: var(--font-size-sm); } .gdpr-info-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-xs) var(--spacing-md); margin: 0; font-size: var(--font-size-sm); line-height: 1.5; } .gdpr-info-dl dt { font-weight: var(--font-weight-semibold); color: var(--text-secondary); } .gdpr-info-dl dd { margin: 0; color: var(--text-primary); } @media (max-width: 600px) { .gdpr-info-dl { grid-template-columns: 1fr; gap: 2px var(--spacing-md); } .gdpr-info-dl dt { margin-top: var(--spacing-sm); } .gdpr-info-dl dt:first-child { margin-top: 0; } } .form-consent-label { display: flex; align-items: flex-start; gap: var(--spacing-sm); cursor: pointer; font-size: var(--font-size-sm); line-height: 1.5; } .form-consent-label input[type="checkbox"] { margin: 4px 0 0 0; flex-shrink: 0; } .form-consent-label em { color: var(--text-light); font-size: var(--font-size-xs); font-style: normal; } /* ======================================== CAREERS PAGE ======================================== */ .positions-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .position-card { background: var(--bg-white); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-md); transition: var(--transition); } .position-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .position-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-lg); margin-bottom: var(--spacing-md); } .position-header h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-xs); } .position-meta { display: flex; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); } .position-type { background: var(--bg-secondary); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); } .position-content p { margin-bottom: var(--spacing-md); color: var(--text-secondary); } .position-skills { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .skill-tag { background: var(--primary-color); color: var(--text-white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); } @media (max-width: 768px) { .position-header { flex-direction: column; } .position-header .btn { width: 100%; } .legal-content { padding: var(--spacing-lg); } .legal-actions { flex-direction: column; } .legal-actions .btn { width: 100%; } }