/* ============================================================ Integral Aviation Solutions — Range & Specifications — static styles IAS / Head-of-State dark system. Tokens inlined for a single light request. No framework, no runtime. Fonts are loaded in the document (preconnect + link) so they are not render-blocked behind this stylesheet. ============================================================ */ :root { --ink:#0E0E0F; --ink-900:#121214; --surface:#16161A; --surface-2:#1F1F23; --cream:#EDE7DA; --cream-dim:#D2CBBC; --muted:#A39C90; --muted-2:#837C70; --gold:#C5A668; --gold-deep:#9C7E45; --gold-bright:#D8BE86; --gold-soft:rgba(197,166,104,0.10); --hairline:rgba(197,166,104,0.18); --hairline-strong:rgba(197,166,104,0.34); --line:rgba(237,231,218,0.10); --line-strong:rgba(237,231,218,0.20); --font-serif:'Cormorant Garamond','Hoefler Text',Georgia,serif; --font-sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --container:1320px; --gutter:clamp(1.25rem,5vw,5rem); --radius:5px; } * { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; } body { margin:0; background:var(--ink); color:var(--cream); font-family:var(--font-sans); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } button { font:inherit; cursor:pointer; } ::selection { background:var(--gold); color:var(--ink); } *::-webkit-scrollbar { width:9px; height:9px; } *::-webkit-scrollbar-thumb { background:var(--hairline-strong); border-radius:999px; } *::-webkit-scrollbar-track { background:transparent; } .container { width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } .eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0; } .display { font-family:var(--font-serif); font-weight:400; line-height:1.08; letter-spacing:-0.01em; color:var(--cream); margin:16px 0 0; } .display em, .em { font-style:italic; color:var(--gold); } .gold-rule { width:54px; height:1px; background:var(--gold); margin:24px 0 0; } .lead { font-size:16.5px; line-height:1.65; color:var(--cream-dim); margin:24px 0 0; max-width:640px; } .muted { color:var(--muted); } .center { text-align:center; } /* ---- top network bar ---- */ .topbar { background:var(--ink); border-bottom:1px solid var(--line); } .topbar .container { display:flex; align-items:center; gap:18px; min-height:42px; flex-wrap:wrap; } .topbar .label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; } .topbar nav { display:flex; gap:16px 18px; flex-wrap:wrap; } .topbar a { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--cream-dim); transition:color .15s; border-bottom:1px solid transparent; padding-bottom:1px; } .topbar a:hover { color:var(--gold); border-bottom-color:var(--gold); } .topbar .label { color:var(--gold); } /* ---- sticky nav ---- */ .nav { position:sticky; top:0; z-index:50; background:rgba(14,14,15,0.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); } .nav .container { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px; } .nav-brand { display:flex; align-items:center; gap:14px; } .nav-brand img { height:46px; width:auto; } .nav-brand .wm { display:flex; flex-direction:column; line-height:1.08; } .nav-brand .wm b { font-family:var(--font-serif); font-weight:400; font-size:20px; color:var(--cream); } .nav-brand .wm span { font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; } .nav-links { display:flex; align-items:center; gap:26px; } .nav-links a { font-size:13.5px; color:var(--cream-dim); white-space:nowrap; transition:color .15s; } .nav-links a:hover, .nav-links a.is-active { color:var(--gold); } .nav-cta { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:var(--radius); background:var(--gold); color:var(--ink)!important; font-size:13px; font-weight:600; } .nav-cta:hover { background:var(--gold-bright); } .nav-toggle { display:none; } /* ---- buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 28px; border-radius:var(--radius); font-size:14.5px; font-weight:600; letter-spacing:0.02em; border:1px solid transparent; transition:background .2s,border-color .2s,color .2s; } .btn-solid { background:var(--gold); color:var(--ink); border-color:var(--gold); } .btn-solid:hover { background:var(--gold-bright); border-color:var(--gold-bright); } .btn-outline { background:transparent; color:var(--gold); border-color:var(--hairline-strong); } .btn-outline:hover { border-color:var(--gold); } .btn-row { display:flex; gap:14px; flex-wrap:wrap; } /* ---- hero ---- */ .hero { position:relative; border-bottom:1px solid var(--hairline); overflow:hidden; } .hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 42%; } .hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,14,15,0.62) 0%,rgba(14,14,15,0.78) 55%,var(--ink) 100%); } .hero .container { position:relative; padding-top:92px; padding-bottom:78px; } h1.display { font-size:clamp(2.5rem,5.2vw,4.6rem); line-height:1.04; letter-spacing:-0.015em; margin-top:20px; max-width:1000px; } .stats { display:flex; gap:48px; flex-wrap:wrap; margin-top:60px; border-top:1px solid var(--hairline); padding-top:32px; } .stat .v { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.1rem,3.2vw,2.9rem); color:var(--gold); line-height:1; } .stat .l { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:10px; } /* ---- sections ---- */ .section { border-top:1px solid var(--hairline); } .section.alt { background:var(--ink-900); } .section .container { padding-top:84px; padding-bottom:84px; } .section-head { max-width:900px; } .section h2.display { font-size:clamp(2rem,3.6vw,3.1rem); } .section-body { margin-top:46px; } /* ---- cards / link tiles ---- */ .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .tile { display:block; border:1px solid var(--hairline); background:var(--surface); padding:28px; transition:border-color .2s,transform .2s; } .tile:hover { border-color:var(--hairline-strong); transform:translateY(-2px); } .tile .k { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); } .tile h3 { font-family:var(--font-serif); font-weight:400; font-size:26px; color:var(--cream); margin:12px 0 0; } .tile p { font-size:14px; line-height:1.55; color:var(--muted); margin:8px 0 0; } .tile .go { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; color:var(--gold); margin-top:16px; display:inline-block; } /* ---- range map ---- */ .rangemap { display:flex; gap:36px; flex-wrap:wrap; align-items:stretch; } .rangemap-chart { flex:1 1 460px; min-width:300px; position:relative; } .rangemap-chart svg { width:100%; height:auto; display:block; overflow:visible; } .rangemap-hover { position:absolute; left:0; bottom:0; font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.04em; } .rangemap-side { flex:0 1 290px; min-width:248px; display:flex; flex-direction:column; gap:20px; } .side-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { height:34px; padding:0 14px; border-radius:999px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; background:transparent; color:var(--muted); border:1px solid var(--hairline-strong); transition:all .15s; } .chip.is-active { background:var(--gold); color:var(--ink); border-color:var(--gold); } .legend { display:flex; flex-direction:column; } .legend-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 12px; text-align:left; background:transparent; border:none; border-left:2px solid transparent; border-bottom:1px solid var(--line); transition:background .15s; width:100%; } .legend-item .n { font-family:var(--font-serif); font-size:18px; color:var(--cream-dim); } .legend-item .r { font-family:var(--font-mono); font-size:12px; color:var(--muted); white-space:nowrap; } .legend-item.is-active { background:var(--gold-soft); border-left-color:var(--gold); } .legend-item.is-active .n { color:var(--cream); } .legend-item.is-active .r { color:var(--gold); } .readout { margin-top:auto; border-top:1px solid var(--hairline); padding-top:18px; } .readout .t { font-family:var(--font-serif); font-size:21px; color:var(--cream); line-height:1.3; } .readout .big { font-family:var(--font-serif); font-size:40px; color:var(--gold); line-height:1; } .readout .sub { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); } .readout .meta { font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin-top:10px; } /* ---- tables ---- */ .table-wrap { overflow-x:auto; border:1px solid var(--hairline); } table.data { width:100%; border-collapse:collapse; min-width:680px; } table.data th, table.data td { text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); white-space:nowrap; } table.data thead th { background:var(--ink-900); border-bottom:1px solid var(--hairline); font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); position:relative; } table.data thead th[data-sort] { cursor:pointer; user-select:none; } table.data thead th[data-sort]:hover { color:var(--gold); } table.data thead th .ar { color:var(--gold); margin-left:6px; opacity:0; } table.data thead th.sorted .ar { opacity:1; } table.data td { font-size:14px; color:var(--cream-dim); } table.data td.num { font-family:var(--font-serif); font-size:18px; color:var(--gold); } table.data td.name { font-family:var(--font-serif); font-size:18px; color:var(--cream); } table.data tbody tr:nth-child(even) { background:var(--ink-900); } table.data tbody tr.is-hidden { display:none; } /* ---- filter bar ---- */ .filterbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:16px 0; margin-bottom:32px; } .filter-btn { height:36px; padding:0 18px; border-radius:999px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; background:transparent; color:var(--muted); border:1px solid var(--hairline-strong); transition:all .15s; } .filter-btn.is-active { background:var(--gold); color:var(--ink); border-color:var(--gold); } .filter-count { margin-left:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--muted-2); } /* ---- spec cards ---- */ .spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .spec-card { border:1px solid var(--hairline); background:var(--surface); transition:border-color .22s; } .spec-card:hover { border-color:var(--hairline-strong); } .spec-card.is-hidden { display:none; } .spec-card .pad { padding:22px 24px 24px; } .spec-card .top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .spec-card .maker { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .spec-card .badge { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); border:1px solid var(--hairline-strong); border-radius:999px; padding:3px 10px; white-space:nowrap; } .spec-card h3 { font-family:var(--font-serif); font-weight:400; font-size:27px; color:var(--cream); margin:12px 0 0; line-height:1.05; } .spec-card .note { font-size:13.5px; line-height:1.55; color:var(--muted); margin:9px 0 20px; min-height:42px; } .spec-card .specs { display:grid; grid-template-columns:1fr 1fr; gap:15px 12px; border-top:1px solid var(--line); padding-top:18px; } .spec-card .specs .k { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); } .spec-card .specs .v { font-family:var(--font-serif); font-size:21px; color:var(--gold); line-height:1.1; margin-top:4px; } /* ---- spec card: full specification expand ---- */ .spec-toggle { display:flex; align-items:center; gap:8px; width:100%; margin-top:18px; padding:11px 0 0; background:none; border:none; border-top:1px solid var(--line); cursor:pointer; font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); transition:color .2s; } .spec-toggle:hover { color:var(--gold); } .spec-toggle .chev { margin-left:auto; width:9px; height:9px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg); transition:transform .3s ease; } .spec-card.is-open .spec-toggle { color:var(--gold); } .spec-card.is-open .spec-toggle .chev { transform:rotate(-135deg); } .spec-more { overflow:hidden; max-height:0; opacity:0; transition:max-height .34s ease, opacity .26s ease; } .spec-card.is-open .spec-more { opacity:1; } .spec-meta { display:grid; grid-template-columns:1fr 1fr; gap:15px 20px; margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); } .spec-meta > div { min-width:0; } .spec-meta .k { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); } .spec-meta .v { display:block; font-family:var(--font-sans); font-size:13.5px; color:var(--cream); margin-top:5px; line-height:1.3; overflow-wrap:anywhere; } .spec-hr-note { font-family:var(--font-mono); font-size:9px; letter-spacing:0.06em; color:var(--muted-2); margin:14px 0 0; line-height:1.4; } /* ---- contact ---- */ .contact { position:relative; border-top:1px solid var(--hairline); overflow:hidden; } .contact-bg { position:absolute; inset:0; background-size:cover; background-position:center; } .contact-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 0%,rgba(14,14,15,0.82) 48%,rgba(14,14,15,0.55) 100%); } .contact .container { position:relative; padding-top:92px; padding-bottom:92px; } .contact .inner { max-width:560px; } .wa-btn { display:inline-flex; align-items:center; gap:11px; height:56px; padding:0 30px; border-radius:var(--radius); background:#25D366; color:#fff; font-size:15px; font-weight:600; transition:background .2s; } .wa-btn:hover { background:#1fbe5b; } .contact .line { display:flex; gap:32px; flex-wrap:wrap; margin-top:34px; font-family:var(--font-mono); font-size:12.5px; } .contact .line a { color:var(--cream-dim); } /* ---- footer ---- */ .footer { background:var(--ink); border-top:1px solid var(--hairline); } .footer .container { padding-top:60px; padding-bottom:40px; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; } .footer img.flogo { height:72px; width:auto; margin-bottom:16px; } .footer p { font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; max-width:360px; } .footer .fh { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; } .footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .footer ul a { font-size:14px; color:var(--cream-dim); } .footer ul a:hover { color:var(--gold); } .footer-base { margin-top:46px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } .footer-base span { font-family:var(--font-mono); font-size:11px; color:var(--muted-2); } /* ---- floating whatsapp ---- */ .wa-float { position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(0,0,0,0.45); } .note-fine { font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin-top:16px; } /* ---- responsive ---- */ @media (max-width:1000px) { .tiles, .spec-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width:820px) { /* No-JS fallback: let the links wrap so navigation always works */ .nav-links { flex-wrap:wrap; gap:14px 18px; } /* JS-enhanced: collapse links into a hamburger panel */ .has-js .nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:42px; margin-left:auto; padding:0 12px; background:transparent; border:1px solid var(--hairline-strong); border-radius:var(--radius); cursor:pointer; } .has-js .nav-toggle span { display:block; width:20px; height:1.5px; background:var(--cream); transition:transform .25s ease, opacity .2s ease; } .has-js .nav .container { flex-wrap:wrap; } .has-js .nav-links { display:none; order:3; flex-basis:100%; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:6px 0 12px; } .has-js .nav-links.is-open { display:flex; } .has-js .nav-links a { white-space:normal; padding:14px 2px; border-bottom:1px solid var(--line); font-size:15px; } .has-js .nav-links a.nav-cta { height:46px; margin-top:14px; justify-content:center; border-bottom:none; } .has-js .nav-toggle.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .has-js .nav-toggle.is-open span:nth-child(2) { opacity:0; } .has-js .nav-toggle.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } } @media (max-width:640px) { .tiles, .spec-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } .stats { gap:28px; } .section .container { padding-top:60px; padding-bottom:60px; } } /* ---- referrer back banner ---- */ .back-banner { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--gold); color:var(--ink); padding:11px 16px; text-align:center; } .back-banner a { color:var(--ink); display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; letter-spacing:0.01em; } .back-banner a:hover { text-decoration:underline; } /* ---- network band ---- */ .network-band { background:var(--ink-900); border-top:1px solid var(--hairline); } .network-band .container { padding-top:72px; padding-bottom:72px; } .net-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; } .net-card { display:flex; flex-direction:column; gap:5px; background:var(--gold); border:1px solid var(--gold); padding:22px 24px; transition:background .2s,transform .2s,box-shadow .2s; } .net-card:hover { background:var(--gold-bright); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.4); } .nc-name { font-family:var(--font-serif); font-size:23px; color:var(--ink); line-height:1.1; } .nc-desc { font-size:13px; color:rgba(14,14,15,0.66); line-height:1.45; } .nc-go { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); margin-top:10px; font-weight:600; } /* ---- buyer / acquisition sections ---- */ .buy-band { border-top:1px solid var(--hairline); } .buy-band.alt { background:var(--ink-900); } .buy-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start; margin-top:44px; } .buy-prose p { font-size:15.5px; line-height:1.72; color:var(--cream-dim); margin:0 0 16px; max-width:600px; } .buy-prose p:last-child { margin-bottom:0; } .buy-prose strong { color:var(--cream); font-weight:600; } .buy-aside { border:1px solid var(--hairline-strong); background:var(--surface); padding:30px; } .buy-aside h3 { font-family:var(--font-serif); font-weight:400; font-size:25px; color:var(--cream); margin:0; line-height:1.15; } .buy-aside p { font-size:14px; color:var(--muted); line-height:1.6; margin:12px 0 22px; } .buy-ctas { display:flex; flex-direction:column; gap:10px; } .buy-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; background:var(--gold); color:var(--ink); font-weight:600; font-size:13.5px; transition:background .2s,transform .2s; } .buy-cta:hover { background:var(--gold-bright); transform:translateX(3px); } .buy-cta .arr { font-family:var(--font-mono); } .buy-cta.green { background:#25D366; color:#fff; } .buy-cta.green:hover { background:#1fbe5b; } .expert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; } .expert-grid p { font-size:14.5px; line-height:1.7; color:var(--cream-dim); margin:0; } .expert-grid .eh { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; } table.data caption { caption-side:top; text-align:left; padding:0 0 16px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--muted-2); } @media (max-width:820px) { .buy-grid { grid-template-columns:1fr; gap:28px; } .expert-grid { grid-template-columns:1fr; gap:20px; } } @media (max-width:1000px) { .net-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px) { .net-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } } /* ---- skip link (keyboard / screen-reader) ---- */ .skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:var(--ink); padding:11px 18px; border-radius:0 0 var(--radius) 0; font-family:var(--font-sans); font-size:14px; font-weight:600; } .skip-link:focus { left:0; } /* keep the brand mark from crowding the hamburger on small phones */ @media (max-width:480px) { .nav-brand img { height:38px; } }