/* STRATCOS Production CSS */ /* Plus Jakarta Sans loaded via Google Fonts in HTML */ :root { --navy: #0A1128; --navy-light: #111B33; --navy-mid: #0D1630; --accent: #3B7BF6; --accent-glow: rgba(59,123,246,0.12); --white: #F0F2F8; --gray: #8892A8; --gray-light: #B0B8CC; --dark: #060B18; --border: rgba(255,255,255,0.06); --border-accent: rgba(59,123,246,0.25); --font: 'Plus Jakarta Sans', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-size: 16px; line-height: 1.78; color: var(--gray-light); background: var(--navy); -webkit-font-smoothing: antialiased; } ::selection { background: rgba(59,123,246,0.3); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ===== TYPOGRAPHY ===== */ h1, h2, h3 { color: var(--white); font-weight: 500; } h1 { font-size: 50px; line-height: 1.12; letter-spacing: -1px; margin-bottom: 0; } h2 { font-size: 34px; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 24px; } h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; } p { margin-bottom: 20px; } p:last-child { margin-bottom: 0; } .text-accent { color: var(--accent); } .text-gray { color: var(--gray); } .text-white { color: var(--white); } .text-large { font-size: 18px; max-width: 700px; } .text-intro { font-size: 19px; max-width: 640px; margin-top: 28px; margin-bottom: 40px; line-height: 1.8; } /* ===== LAYOUT ===== */ .container { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; } section { padding: 96px 32px; position: relative; } section.hero { min-height: 100vh; display: flex; align-items: center; padding: 0 32px; overflow: hidden; } /* ===== BRAND PATTERN ===== */ .bg-pattern { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Crect width='1920' height='1080' fill='%230E1630'/%3E%3Cpath fill='%230A1128' d='M1230.62-12.04l551.92,551.92-551.92,551.92-145.85-146.19,302.86-302.52h-638.21v-206.42h638.21l-302.86-302.86L1230.62-12.04ZM-274.54-124.05L-420.39,21.8-5.52,436.66h-441.94v206.42H-5.52l-414.87,414.87,145.85,145.85L389.38,539.87-274.54-124.05ZM1198.14-268.88l-145.85-145.85L637.42.14v-441.94h-206.42V.14L16.14-414.73l-145.85,145.85L534.21,395.04l663.92-663.92ZM-129.71,1348.29l145.85,145.85,414.87-414.53v441.94h206.42v-441.94l414.87,414.53,145.85-145.85-663.92-663.92L-129.71,1348.29Z'/%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ===== NAV ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; transition: all 0.4s ease; } .nav.scrolled { background: rgba(6,11,24,0.95); backdrop-filter: blur(20px); border-bottom-color: var(--border); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 80px; } .nav-logo svg { display: block; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { font-size: 13px; letter-spacing: 0.3px; padding: 8px 12px; border-radius: 4px; transition: all 0.2s; color: var(--gray); } .nav-links a:hover, .nav-links a.active { color: var(--accent); } /* ===== TAG ===== */ .tag { display: inline-block; padding: 5px 16px; border-radius: 20px; border: 1px solid var(--border-accent); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; } /* ===== BUTTONS ===== */ .btn-primary { display: inline-block; background: var(--accent); color: #fff; border: none; padding: 14px 32px; border-radius: 8px; font-size: 15px; font-family: var(--font); font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: all 0.2s; } .btn-primary:hover { background: #2B6BE6; } .btn-secondary { display: inline-block; background: transparent; color: var(--gray-light); border: 1px solid var(--border); padding: 14px 32px; border-radius: 8px; font-size: 15px; font-family: var(--font); font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-secondary:hover { border-color: var(--border-accent); color: var(--white); } /* ===== CARDS ===== */ .card { background: linear-gradient(145deg, var(--navy-light), var(--navy)); border: 1px solid var(--border); border-radius: 12px; padding: 32px; transition: all 0.3s; position: relative; overflow: hidden; } .card:hover { border-color: var(--border-accent); transform: translateY(-2px); } .card .glow { position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--accent-glow); filter: blur(40px); pointer-events: none; } .card-icon { margin-bottom: 16px; } .card-number { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: 1px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .card p { color: var(--gray); font-size: 15px; } /* ===== GRID ===== */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .grid-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } /* ===== DIVIDER ===== */ .divider { height: 1px; margin: 64px 0; background: linear-gradient(90deg, transparent, var(--border-accent), transparent); } /* ===== DEPLOYMENT CODES (SAM/SCM/SIA) ===== */ .deploy-code { font-size: 42px; font-weight: 500; color: var(--white); margin-bottom: 8px; letter-spacing: -1px; } .deploy-label { font-size: 13px; color: var(--gray); letter-spacing: 1px; margin-bottom: 16px; text-transform: uppercase; font-weight: 600; } /* ===== EMAIL HIGHLIGHT ===== */ .email-box { padding: 16px 24px; background: var(--accent-glow); border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-accent); } .email-box a { color: var(--accent); font-weight: 700; font-size: 17px; } /* ===== FOOTER ===== */ footer { background: var(--navy); border-top: 1px solid var(--border); padding: 64px 32px 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-heading { font-size: 11px; color: var(--gray); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; } .footer-link { color: var(--gray-light); font-size: 14px; margin-bottom: 10px; transition: color 0.2s; cursor: pointer; display: block; } .footer-link:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 12px; color: var(--gray); margin: 0; } /* ===== GLOSSARY ===== */ .glossary-term { margin-bottom: 40px; } .glossary-term h3 { color: var(--accent); font-size: 22px; } .glossary-divider { height: 1px; background: var(--border); margin-top: 24px; } /* ===== POSITIONING DIAGRAM ===== */ .diagram { margin-top: 32px; padding: 48px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, var(--navy-light), var(--navy)); position: relative; overflow: hidden; } .diagram .glow { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--accent-glow); filter: blur(50px); pointer-events: none; } .diagram-inner { position: relative; height: 320px; margin: 0 auto; max-width: 600px; } .axis-v { position: absolute; left: 50%; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, rgba(59,123,246,0.27), rgba(59,123,246,0.13)); } .axis-h { position: absolute; top: 50%; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, rgba(59,123,246,0.13), rgba(59,123,246,0.27)); } .axis-label { position: absolute; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; background: var(--navy-light); padding: 2px 14px; border-radius: 4px; } .badge-stratcos { position: absolute; top: 15%; left: 58%; padding: 14px 24px; border: 2px solid var(--accent); border-radius: 10px; background: linear-gradient(145deg, var(--navy-light), var(--navy)); box-shadow: 0 0 30px rgba(59,123,246,0.15); } .badge-other { position: absolute; padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(145deg, var(--navy-light), var(--navy)); } /* ===== HAMBURGER MENU ===== */ .hamburger { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; position: relative; align-items: center; justify-content: center; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--white); position: absolute; left: 11px; transition: all 0.3s ease; } .hamburger span:nth-child(1) { top: 14px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 28px; } .hamburger.active span:nth-child(1) { top: 21px; transform: rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* Mobile overlay nav */ .nav-links.mobile-open { display: flex !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(6,11,24,0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 99; } .nav-links.mobile-open a { font-size: 20px; padding: 14px 24px; font-weight: 500; } /* ===== RESPONSIVE: TABLET (max 1024px) ===== */ @media (max-width: 1024px) { h1 { font-size: 40px; } h2 { font-size: 28px; } .container { max-width: 100%; } .grid-3 { grid-template-columns: 1fr 1fr; } .grid-contact { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } section { padding: 72px 24px; } section.hero { padding: 0 24px; } .nav-inner { padding: 0 24px; } .deploy-code { font-size: 34px; } .diagram { padding: 32px; } .diagram-inner { max-width: 500px; height: 280px; } .badge-stratcos { padding: 10px 16px; } .badge-stratcos svg { height: 14px; } .badge-other { padding: 8px 12px; } } /* ===== RESPONSIVE: MOBILE (max 768px) ===== */ @media (max-width: 768px) { h1 { font-size: 32px; letter-spacing: -0.5px; } h2 { font-size: 24px; } h3 { font-size: 18px; } .text-large { font-size: 16px; } .text-intro { font-size: 16px; margin-top: 20px; margin-bottom: 32px; } /* Nav */ .hamburger { display: flex; } .nav-links { display: none; } .nav-inner { height: 68px; } .nav-logo svg { height: 36px; } /* Layout */ .grid-2, .grid-3, .grid-contact, .footer-grid { grid-template-columns: 1fr; } section { padding: 56px 20px; } section.hero { padding: 0 20px; min-height: calc(100vh - 68px); } /* Cards */ .card { padding: 24px; } .deploy-code { font-size: 30px; } .deploy-label { font-size: 12px; } /* Buttons */ .btn-primary, .btn-secondary { padding: 12px 24px; font-size: 14px; width: 100%; text-align: center; display: block; } section.hero .btn-primary, section.hero .btn-secondary { width: auto; display: inline-block; } /* Positioning diagram */ .diagram { padding: 20px; margin-top: 24px; } .diagram-inner { height: 320px; max-width: 100%; } .axis-label { font-size: 10px; padding: 2px 8px; letter-spacing: 1px; } .badge-stratcos { position: absolute; top: 10%; left: 52%; padding: 10px 14px; } .badge-stratcos svg { height: 12px; } .badge-stratcos p { font-size: 10px; } .badge-other { padding: 6px 10px; } .badge-other p { font-size: 10px; } /* Footer */ .footer-grid { gap: 32px; } .footer-grid > div:first-child { grid-column: auto; } .footer-bottom { flex-direction: column; gap: 8px; } .footer-bottom p { text-align: center; } /* Tag */ .tag { font-size: 10px; padding: 4px 12px; letter-spacing: 1px; } /* Divider */ .divider { margin: 40px 0; } /* Glossary */ .glossary-term h3 { font-size: 18px; } } /* ===== RESPONSIVE: SMALL MOBILE (max 480px) ===== */ @media (max-width: 480px) { h1 { font-size: 28px; } h2 { font-size: 22px; } section { padding: 44px 16px; } section.hero { padding: 0 16px; } .nav-inner { padding: 0 16px; } .nav-logo svg { height: 30px; } .card { padding: 20px; } .card-number { gap: 10px; } .deploy-code { font-size: 26px; } /* Hero buttons stack */ section.hero div[style*="display:flex;gap:16px"] { flex-direction: column; } section.hero .btn-primary, section.hero .btn-secondary { width: 100%; text-align: center; display: block; } /* Diagram simplified */ .diagram-inner { height: 260px; } .badge-stratcos { top: 8%; left: 50%; } .badge-other[style*="bottom:20%;right"] { display: none; } .badge-other[style*="top:20%;left"] { display: none; } }