:root { --color-bg: #11141a; --color-paper: #181d26; --color-paper-light: #232a36; --color-text: #f0f3f8; --color-text-muted: #94a3b8; --color-primary: #e06c43; --color-primary-hover: #f3845b; --color-secondary: #2f3b4e; --color-accent-blue: #0b1c2e; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.625; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 700; color: #ffffff; line-height: 1.25; } a { color: inherit; text-decoration: none; transition: var(--transition); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.85rem; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: var(--transition); } .btn-primary { background-color: var(--color-primary); color: #ffffff; } .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(224, 108, 67, 0.4); } .btn-secondary { background-color: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); color: #ffffff; } .btn-secondary:hover { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .btn-outline { background-color: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); } .site-header { position: sticky; top: 0; z-index: 100; background-color: rgba(17, 20, 26, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; } .main-nav { display: flex; align-items: center; gap: 2.5rem; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); } .nav-links a:hover, .nav-links a.active { color: var(--color-primary); } .burger { display: none; background: none; border: none; flex-direction: column; gap: 6px; cursor: pointer; } .burger-line { display: block; width: 25px; height: 2px; background-color: var(--color-text); } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 100px; padding-bottom: 80px; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(17, 20, 26, 0.6), #11141a); } .hero-content { max-width: 650px; } .hero-tagline { font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1rem; font-weight: 700; } .hero-title { font-size: clamp(3rem, 6vw, 4.8rem); margin-bottom: 1.5rem; } .hero-title span { color: var(--color-primary); } .hero-subtitle { font-size: 1.15rem; color: var(--color-text-muted); margin-bottom: 2.5rem; } .hero-actions { display: flex; gap: 1.5rem; } .focus-areas { padding: 8rem 0; background-color: var(--color-paper); } .section-label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1rem; text-align: center; font-weight: 700; } .section-title { font-size: clamp(2rem, 4vw, 2.8rem); text-align: center; margin-bottom: 1.5rem; } .section-subtitle { text-align: center; max-width: 650px; margin: 0 auto 4.5rem; color: var(--color-text-muted); } .focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .focus-card { background-color: var(--color-bg); padding: 2rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); position: relative; transition: var(--transition); } .focus-card:hover { transform: translateY(-5px); border-color: var(--color-primary); } .focus-card .tag { position: absolute; top: 20px; right: 20px; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 20px; text-transform: uppercase; color: #ffffff; } .tag-pol { background-color: #3b82f6; } .tag-fin { background-color: #10b981; } .tag-soc { background-color: #f59e0b; } .card-image { width: 100%; height: 180px; overflow: hidden; margin-bottom: 1.5rem; border-radius: 4px; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .focus-card:hover .card-image img { transform: scale(1.08); } .focus-card h3 { font-size: 1.4rem; margin-bottom: 1rem; } .focus-card p { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .card-link { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); } .card-link:hover { text-decoration: underline; } .newsletter-split { display: grid; grid-template-columns: 1fr; } .newsletter-bar { background-color: #c7f9cc; color: var(--color-bg); padding: 4rem 0; } .newsletter-bar h3 { color: var(--color-bg); font-size: 2rem; margin-bottom: 0.5rem; } .newsletter-bar .bar-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); } .news-bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; } .news-info { max-width: 500px; } .newsletter-form { display: flex; gap: 1rem; width: 100%; max-width: 450px; } .newsletter-form input { flex: 1; padding: 0.85rem; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); background-color: #ffffff; color: var(--color-bg); font-family: var(--font-sans); } .newsletter-main { background-color: #ededed; color: var(--color-bg); padding: 5rem 0; border-top: 1px solid rgba(0,0,0,0.05); } .newsletter-main h4 { color: var(--color-bg); font-size: 1.8rem; margin-bottom: 0.5rem; } .news-main-wrap { max-width: 600px; margin: 0 auto; text-align: center; } .news-main-wrap .newsletter-form { margin: 2rem auto 0; } .team-section { padding: 8rem 0; background-color: var(--color-bg); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .team-card { background-color: var(--color-paper); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; transition: var(--transition); } .team-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.15); } .team-img { width: 100%; height: 320px; overflow: hidden; background-color: #0b1017; } .team-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: var(--transition); } .team-card:hover .team-img img { filter: grayscale(0); transform: scale(1.05); } .team-info { padding: 1.5rem; } .team-info h3 { font-size: 1.25rem; margin-bottom: 0.25rem; } .team-info .role { font-size: 0.85rem; color: var(--color-text-muted); } .cta-banner { padding: 6rem 0; background: linear-gradient(to right, rgba(11, 28, 46, 0.9), rgba(24, 29, 38, 0.95)), url('../media/slide-577.jpg') center/cover; } .cta-banner .panel-content { max-width: 700px; margin: 0 auto; text-align: center; } .panel-tag { display: inline-block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1.5rem; font-weight: 700; } .cta-banner h2 { font-size: 2.4rem; margin-bottom: 1.5rem; } .cta-banner p { color: var(--color-text-muted); margin-bottom: 2.5rem; font-size: 1.1rem; } .latest-articles { padding: 8rem 0; background-color: var(--color-paper); } .section-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; } .section-header-row .section-title { margin-bottom: 0; text-align: left; } .link-arrow { font-weight: 600; color: var(--color-primary); } .link-arrow:hover { text-decoration: underline; } .blog-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .article-card { background-color: var(--color-bg); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); transition: var(--transition); display: flex; flex-direction: column; } .article-card:hover { transform: translateY(-5px); border-color: var(--color-primary); } .article-img { width: 100%; height: 200px; overflow: hidden; } .article-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .article-card:hover .article-img img { transform: scale(1.05); } .article-meta { padding: 1.5rem 1.5rem 0.5rem; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; } .article-card h3 { font-size: 1.35rem; padding: 0 1.5rem; margin-bottom: 1rem; } .article-card p { padding: 0 1.5rem 1.5rem; font-size: 0.95rem; color: var(--color-text-muted); flex: 1; } .card-footer { padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } .read-more { color: var(--color-primary); } .faq-section { padding: 8rem 0; background-color: var(--color-bg); } .faq-accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background-color: var(--color-paper); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; } .faq-trigger { width: 100%; padding: 1.5rem 2rem; background: none; border: none; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #ffffff; } .faq-trigger h3 { font-size: 1.15rem; font-family: var(--font-sans); } .faq-content { padding: 0 2rem; max-height: 0; overflow: hidden; transition: all 0.3s cubic-bezier(0, 1, 0, 1); color: var(--color-text-muted); } .faq-item.active .faq-content { padding: 0 2rem 2.5rem; max-height: 1000px; transition: all 0.3s cubic-bezier(1, 0, 1, 0); } .form-section { padding: 8rem 0; background-color: var(--color-paper); border-top: 1px solid rgba(255, 255, 255, 0.05); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4rem; align-items: center; } .contact-block-form { background-color: var(--color-bg); padding: 3rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); } .field-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .field-group label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); } .field-group input, .field-group textarea { width: 100%; padding: 0.85rem; background-color: var(--color-paper); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: #ffffff; font-family: var(--font-sans); transition: var(--transition); } .field-group input:focus, .field-group textarea:focus { outline: none; border-color: var(--color-primary); } .consent-row { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 2rem; font-size: 0.85rem; color: var(--color-text-muted); } .consent-row input { margin-top: 0.25rem; } .consent-row a { color: var(--color-primary); } .error-msg { color: #f43f5e; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; display: none; } .site-footer { background-color: #0b1017; padding: 6rem 0 3rem; border-top: 1px solid rgba(255, 255, 255, 0.05); color: var(--color-text-muted); } .footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3rem; margin-bottom: 4rem; } .footer-about p { margin-top: 1rem; font-size: 0.9rem; } .footer-links h4, .footer-contact h4, .footer-newsletter h4 { color: #ffffff; font-size: 1.1rem; margin-bottom: 1.5rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; } .footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .footer-links a:hover { color: var(--color-primary); } .footer-newsletter p { font-size: 0.9rem; margin-bottom: 1.5rem; } .footer-sub-form { display: flex; gap: 0.5rem; } .footer-sub-form input { flex: 1; padding: 0.75rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--color-paper); color: #ffffff; font-family: var(--font-sans); font-size: 0.9rem; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; font-size: 0.85rem; } .footer-policy-row { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-policy-row a, .link-btn { color: var(--color-text-muted); background: none; border: none; font-size: 0.85rem; cursor: pointer; transition: var(--transition); } .footer-policy-row a:hover, .link-btn:hover { color: var(--color-primary); } .sub-hero { padding: 100px 0 80px; text-align: center; background-color: var(--color-paper); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sub-hero h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); margin-bottom: 1.5rem; } .sub-hero p { max-width: 650px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.15rem; } .about-story { padding: 8rem 0; background-color: var(--color-bg); } .rounded-img-shadow { width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); object-fit: cover; block-size: 380px; } .aesthetic-quote { margin: 2rem 0; font-family: var(--font-serif); font-size: 1.4rem; padding-left: 2rem; border-left: 3px solid var(--color-primary); font-style: italic; color: #ffffff; } .aesthetic-quote cite { display: block; font-size: 0.9rem; font-family: var(--font-sans); color: var(--color-text-muted); font-style: normal; margin-top: 1rem; } .about-values { padding: 8rem 0; background-color: var(--color-paper); } .services-detail { padding: 8rem 0; background-color: var(--color-bg); } .services-grid-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; } .service-detail-card { background-color: var(--color-paper); padding: 2rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; } .service-detail-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 4px; margin-bottom: 1.5rem; } .service-detail-card h3 { font-size: 1.5rem; margin-bottom: 1.25rem; } .service-detail-card p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 2rem; flex: 1; } .pricing-tag { display: inline-block; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; } .blog-feed { padding: 8rem 0; background-color: var(--color-bg); } .article-container { padding: 6rem 0 10rem; background-color: var(--color-bg); } .article-header { text-align: center; max-width: 800px; margin: 0 auto 4rem; } .category-tag { display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1.5rem; } .article-header h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); margin-bottom: 1.5rem; } .article-author-info { font-size: 0.95rem; color: var(--color-text-muted); } .article-main-image { max-width: 900px; margin: 0 auto 5rem; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .article-main-image img { width: 100%; block-size: 500px; object-fit: cover; } .article-body { max-width: 750px; margin: 0 auto; color: var(--color-text-muted); line-height: 1.8; font-size: 1.1rem; } .article-body h2 { color: #ffffff; margin: 3rem 0 1.5rem; font-size: 1.8rem; } .article-body p { margin-bottom: 1.8rem; } .article-body ul { margin: 2rem 0; padding-left: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .article-cta-block { max-width: 750px; margin: 6rem auto 0; background-color: var(--color-paper); padding: 3.5rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; } .article-cta-block h3 { font-size: 1.8rem; margin-bottom: 1rem; } .article-cta-block p { color: var(--color-text-muted); margin-bottom: 2rem; } .contact-details-box { padding: 8rem 0; background-color: var(--color-bg); } .contact-spec-item { margin-bottom: 3rem; } .contact-spec-item h3 { font-size: 1.35rem; margin-bottom: 1rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); } .map-container { padding: 6rem 0; background-color: var(--color-paper); border-top: 1px solid rgba(255, 255, 255, 0.05); } .iframe-wrapper { width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255, 255, 255, 0.05); } .legal-document { padding: 8rem 0 10rem; background-color: var(--color-bg); } .legal-label { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-primary); margin-bottom: 1.5rem; } .last-updated { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 4rem; } .legal-content-body { max-width: 800px; color: var(--color-text-muted); line-height: 1.8; font-size: 1.05rem; } .legal-content-body h2 { color: #ffffff; font-size: 1.5rem; margin: 3rem 0 1.25rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; } .legal-content-body p { margin-bottom: 1.8rem; } .legal-content-body table { width: 100%; border-collapse: collapse; margin: 2.5rem 0; font-size: 0.95rem; } .legal-content-body th, .legal-content-body td { padding: 1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .legal-content-body th { background-color: var(--color-paper); color: #ffffff; font-weight: 600; } .thank-you-space { padding: 140px 0 140px; } .cookie-banner { position: fixed; bottom: 30px; left: 30px; right: 30px; max-width: 650px; background-color: var(--color-paper); border: 1px solid rgba(224, 108, 67, 0.4); box-shadow: 0 15px 40px rgba(0,0,0,0.6); padding: 2rem; border-radius: 4px; z-index: 999; display: none; } .cookie-container p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.6; } .cookie-options { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .option-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #ffffff; } .cookie-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .cookie-buttons .btn { padding: 0.65rem 1.25rem; font-size: 0.85rem; } @media (max-width: 991px) { .main-nav { display: none; width: 100%; position: absolute; top: 80px; left: 0; background-color: var(--color-bg); padding: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex-direction: column; gap: 2rem; } .main-nav.active { display: flex; } .burger { display: flex; } .nav-links { flex-direction: column; align-items: center; gap: 1.5rem; } }