/* ========================================================= Uplink Technologies — v3 Layered on top of Bootstrap 5.3 (CDN) + Bootstrap Icons. Do not remove the Bootstrap tags in — this file only overrides variables and adds brand components. ========================================================= */ :root { /* ---- Brand palette (steady-beacon system, carried from v2) ---- */ --navy: #0a1628; --navy-mid: #112240; --navy-soft: #16294a; --blue: #1e6fb5; --blue-hover: #185fa0; --blue-light: #4a9fd4; --blue-pale: #e8f1fa; --off-white: #f8fafc; --text: #1e293b; --text-muted: #64748b; --success: #16a34a; --error: #dc2626; /* ---- Bootstrap variable overrides ---- */ --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --bs-body-color: var(--text); --bs-body-bg: #fff; --bs-primary: var(--blue); --bs-primary-rgb: 30, 111, 181; --bs-secondary: var(--navy); --bs-link-color: var(--blue); --bs-link-hover-color: var(--blue-hover); --bs-border-radius: 10px; --bs-border-radius-lg: 16px; --bs-border-radius-sm: 8px; --shadow-sm: 0 1px 4px rgba(10, 22, 40, .08); --shadow: 0 4px 16px rgba(10, 22, 40, .10); --shadow-lg: 0 12px 40px rgba(10, 22, 40, .16); --glow: 0 8px 28px rgba(30, 111, 181, .35); --t: .25s ease; } ::selection { background: var(--blue); color: #fff; } body { overflow-x: hidden; } a { text-decoration: none; } .text-navy { color: var(--navy) !important; } .text-blue { color: var(--blue) !important; } .text-blue-light { color: var(--blue-light) !important; } .text-muted-c { color: var(--text-muted) !important; } .bg-navy { background-color: var(--navy) !important; } .bg-off-white { background-color: var(--off-white) !important; } .bg-blue-pale { background-color: var(--blue-pale) !important; } .fw-800 { font-weight: 800 !important; } .lh-tight { line-height: 1.15 !important; } .max-prose { max-width: 700px; } /* ========================================================= Buttons ========================================================= */ .btn { font-weight: 600; padding: .7rem 1.5rem; transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t); } .btn-lg { padding: .95rem 2rem; font-size: 1.02rem; } .btn-primary { background: var(--blue); border-color: var(--blue); } .btn-primary:hover, .btn-primary:focus { background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: var(--glow); transform: translateY(-1px); } .btn-outline-light:hover { color: var(--navy); } .btn-outline-primary { color: var(--blue); border-color: var(--blue); } .btn-outline-primary:hover { background: var(--blue); border-color: var(--blue); box-shadow: var(--glow); transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* ========================================================= Navbar ========================================================= */ .navbar-uplink { background: rgba(10, 22, 40, .82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding-top: .85rem; padding-bottom: .85rem; transition: background-color var(--t), box-shadow var(--t); border-bottom: 1px solid rgba(255, 255, 255, .06); } .navbar-uplink.scrolled { background: rgba(10, 22, 40, .95); box-shadow: var(--shadow); } .navbar-brand.uplink-logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: #fff; } .navbar-brand.uplink-logo .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--blue-light)); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; } .navbar-brand.uplink-logo em { color: var(--blue-light); font-style: normal; } .navbar-uplink .nav-link { color: rgba(255, 255, 255, .82); font-weight: 600; padding: .55rem .9rem !important; border-radius: 8px; transition: color var(--t), background-color var(--t); } .navbar-uplink .nav-link:hover, .navbar-uplink .nav-link:focus { color: #fff; background: rgba(255,255,255,.06); } .navbar-uplink .nav-link.active { color: var(--blue-light); } .navbar-uplink .dropdown-menu { border: none; border-radius: var(--bs-border-radius-lg); box-shadow: var(--shadow-lg); padding: .5rem; margin-top: .5rem; } .navbar-uplink .dropdown-item { border-radius: 8px; padding: .55rem .8rem; font-weight: 500; } .navbar-uplink .dropdown-item:hover, .navbar-uplink .dropdown-item:focus { background: var(--blue-pale); color: var(--blue-hover); } .navbar-uplink .btn-nav-cta { background: var(--blue); color: #fff; border: none; } .navbar-uplink .btn-nav-cta:hover { background: var(--blue-hover); box-shadow: var(--glow); } .navbar-uplink .navbar-toggler { border: none; box-shadow: none !important; } .navbar-uplink .navbar-toggler-icon { background-image: none; position: relative; width: 22px; height: 2px; background: #fff; } .navbar-uplink .navbar-toggler-icon::before, .navbar-uplink .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; } .navbar-uplink .navbar-toggler-icon::before { top: -7px; } .navbar-uplink .navbar-toggler-icon::after { top: 7px; } @media (max-width: 991.98px) { .navbar-uplink .navbar-collapse { background: var(--navy); margin: .85rem -1rem -.85rem; padding: .5rem 1.5rem 1.5rem; border-top: 1px solid rgba(255,255,255,.08); } } /* ========================================================= Hero — dark gradient-mesh with photography wash ========================================================= */ .hero-uplink { position: relative; background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(30,111,181,.35), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(74,159,212,.25), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); color: #fff; padding-top: 8.5rem; padding-bottom: 6rem; overflow: hidden; } .hero-uplink::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--blue-light); font-weight: 700; font-size: .8rem; letter-spacing: .04em; padding: .45rem 1rem; border-radius: 100px; } .hero-uplink h1 { font-weight: 800; font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -.01em; } .hero-uplink h1 em { font-style: normal; color: var(--blue-light); } .hero-uplink .lead { color: rgba(255,255,255,.75); font-size: 1.15rem; } .hero-photo-frame { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.12); aspect-ratio: 3/2; } .hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 992px) { /* At lg+ the hero is a two-column row; stretch the photo frame to match the text column's full height instead of a fixed ratio, so a short headline never leaves dead navy space above/below the image. */ .hero-photo-frame { aspect-ratio: auto; height: 100%; } } .hero-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(10,22,40,.55) 100%); } .hero-stat { text-align: left; } .hero-stat .num { font-size: 1.5rem; font-weight: 800; color: #fff; } .hero-stat .lbl { font-size: .78rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* Floating glass card — signature component, used sparingly */ .glass-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--bs-border-radius-lg); padding: 1.1rem 1.25rem; display: flex; gap: .9rem; align-items: flex-start; } .glass-card .icon-chip { width: 42px; height: 42px; flex: none; border-radius: 10px; background: rgba(74,159,212,.18); color: var(--blue-light); display: grid; place-items: center; font-size: 1.15rem; } .glass-card h4 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .15rem; } .glass-card p { font-size: .85rem; color: rgba(255,255,255,.65); margin: 0; } /* ========================================================= Page hero (interior pages) — smaller dark banner w/ photo ========================================================= */ .page-hero { position: relative; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); color: #fff; padding-top: 7.5rem; padding-bottom: 4rem; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 100% 100% at 30% 0%, rgba(0,0,0,.6), transparent 70%); } .page-hero .breadcrumb-uplink { font-size: .82rem; color: rgba(255,255,255,.55); font-weight: 600; } .page-hero .breadcrumb-uplink a { color: rgba(255,255,255,.7); } .page-hero .breadcrumb-uplink a:hover { color: var(--blue-light); } .page-hero h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.9rem); } .page-hero .lead { color: rgba(255,255,255,.75); max-width: 700px; } .page-hero-media { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.12); aspect-ratio: 4/3; } .page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(10,22,40,.55) 100%); } /* ========================================================= Section rhythm ========================================================= */ .section-y { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); } .section-y-sm { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); } .section-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: .6rem; } .section-header h2 { font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.35rem); color: var(--navy); } .section-header .lead { color: var(--text-muted); font-size: 1.08rem; } /* ========================================================= Cards ========================================================= */ .card-uplink { background: #fff; border: 1px solid #e6ebf1; border-radius: var(--bs-border-radius-lg); padding: 1.75rem; height: 100%; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .card-uplink:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(30,111,181,.3); } .card-uplink .icon-chip { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-pale); color: var(--blue); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 1.1rem; } .card-uplink h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; } .card-uplink p { color: var(--text-muted); } .card-uplink .card-link { color: var(--blue); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .3rem; } .card-uplink .card-link i { transition: transform var(--t); } .card-uplink:hover .card-link i { transform: translateX(3px); } /* Photo card — image-topped card for bento-style grids */ .photo-card { border-radius: var(--bs-border-radius-lg); overflow: hidden; background: #fff; border: 1px solid #e6ebf1; height: 100%; transition: transform var(--t), box-shadow var(--t); } .photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .photo-card .photo-card-img { aspect-ratio: 16/10; overflow: hidden; } .photo-card .photo-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .photo-card:hover .photo-card-img img { transform: scale(1.06); } .photo-card .photo-card-body { padding: 1.4rem 1.5rem; } /* Featured/anchor card: sits alone on its own full-width row (image left, copy right) instead of sharing a row with narrower cards, so there's no mismatched-column-height problem to solve in the first place. */ .photo-card--horizontal { overflow: hidden; } .photo-card-img-h { overflow: hidden; aspect-ratio: 3/2; } .photo-card-img-h img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { /* Image column stretches to match the text column's natural height (same technique as the hero) instead of a fixed ratio. */ .photo-card-img-h { aspect-ratio: auto; height: 100%; } } /* ========================================================= Feature list (why-us style) ========================================================= */ .feature-item { display: flex; gap: 1rem; } .feature-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; background: rgba(74,159,212,.15); color: var(--blue-light); display: grid; place-items: center; font-size: 1.2rem; } .section-dark .feature-item h4 { color: #fff; } .section-dark .feature-item p { color: rgba(255,255,255,.65); } .feature-item h4 { font-weight: 700; margin-bottom: .3rem; } .feature-item p { color: var(--text-muted); margin: 0; font-size: .95rem; } /* ========================================================= Section-dark (navy content bands) ========================================================= */ .section-dark { background: var(--navy); color: #fff; position: relative; } .section-dark .section-header h2 { color: #fff; } .section-dark .section-header .lead { color: rgba(255,255,255,.65); } /* ========================================================= Stat strip ========================================================= */ .stat-strip { border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); } .stat-strip .stat-num { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--blue-light); } .stat-strip .stat-lbl { font-size: .85rem; color: rgba(255,255,255,.6); } /* ========================================================= Testimonials ========================================================= */ .testimonial-card { background: #fff; border: 1px solid #e6ebf1; border-radius: var(--bs-border-radius-lg); padding: 1.75rem; height: 100%; } .testimonial-card .stars { color: #f5a623; letter-spacing: .1em; margin-bottom: .75rem; } .testimonial-card p.quote { color: var(--text); font-size: 1rem; margin-bottom: 1.25rem; } .testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-weight: 700; display: grid; place-items: center; } /* ========================================================= CTA banner ========================================================= */ .cta-banner { position: relative; background: radial-gradient(ellipse 700px 400px at 85% 20%, rgba(74,159,212,.3), transparent 65%), linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: #fff; border-radius: 24px; padding: clamp(2.5rem, 5vw, 4rem); overflow: hidden; } .cta-banner h2 { font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.3rem); } .cta-banner p { color: rgba(255,255,255,.72); } /* ========================================================= Footer ========================================================= */ .footer-uplink { background: var(--navy); color: rgba(255,255,255,.7); } .footer-uplink h4 { color: #fff; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; } .footer-uplink a { color: rgba(255,255,255,.62); } .footer-uplink a:hover { color: var(--blue-light); } .footer-uplink .footer-brand p { color: rgba(255,255,255,.55); font-size: .92rem; } .footer-uplink .footer-tagline { color: var(--blue-light); font-weight: 600; font-size: .88rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.45); } /* ========================================================= Forms ========================================================= */ .form-control, .form-select { border: 1.5px solid #d7dee6; border-radius: var(--bs-border-radius-sm); padding: .7rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,111,181,.15); } .form-control.error, .form-select.error { border-color: var(--error); box-shadow: 0 0 0 3px rgba(220,38,38,.12); } .field-error { display: none; color: var(--error); font-size: .82rem; margin-top: .35rem; } .field-error.visible { display: block; } .form-label { font-weight: 600; font-size: .9rem; color: var(--text); } .hp-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } #form-success { display: none; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; border-radius: var(--bs-border-radius); padding: 1rem 1.25rem; opacity: 0; transform: translateY(-6px); transition: opacity var(--t), transform var(--t); } #form-success.shown { display: block; } #form-success.visible { opacity: 1; transform: translateY(0); } /* ========================================================= Accordion (FAQ) — recolor Bootstrap default ========================================================= */ .accordion-uplink .accordion-button { font-weight: 700; color: var(--navy); } .accordion-uplink .accordion-button:not(.collapsed) { background: var(--blue-pale); color: var(--blue-hover); box-shadow: none; } .accordion-uplink .accordion-button:focus { box-shadow: 0 0 0 3px rgba(30,111,181,.15); } .accordion-uplink .accordion-item { border-color: #e6ebf1; border-radius: var(--bs-border-radius) !important; overflow: hidden; margin-bottom: .75rem; } /* ========================================================= Checklist ========================================================= */ .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { display: flex; gap: .65rem; margin-bottom: .8rem; } .check-list li i { color: var(--blue); flex: none; margin-top: .2rem; } /* ========================================================= Scroll reveal (progressive enhancement) ========================================================= */ .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .reveal-item.reveal-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================= Misc ========================================================= */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; z-index: 2000; font-weight: 700; } .skip-link:focus { left: 0; } .divider-dot { color: var(--blue-light); margin: 0 .5rem; } .rounded-xl { border-radius: 18px !important; } .shadow-uplink { box-shadow: var(--shadow-lg); } @media (max-width: 767.98px) { .hero-uplink { padding-top: 6.5rem; padding-bottom: 3.5rem; } .page-hero { padding-top: 6rem; padding-bottom: 3rem; } }