/* ============================================================ THE OPTIC SYSTEM | css/style.css Friendly Eagle Software Inc. Clean redesign - modern, responsive, SEO-friendly ============================================================ */ /* ── Google Fonts (loaded in ) ─────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lexend:wght@400;500;600;700&display=swap'); /* ── Design tokens ───────────────────────────────────────── */ :root { --c-navy: #0d2050; --c-blue: #1a46a8; --c-blue-h: #2558d0; --c-sky: #0ea5e9; --c-teal: #0d9488; --c-white: #ffffff; --c-bg: #f8fafd; --c-border: #dde3ef; --c-text: #374151; --c-muted: #6b7280; --c-gray: gray; --c-dark: #111827; --font-head: 'Lexend', 'Segoe UI', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --shadow-xs: 0 1px 3px rgba(13,32,80,.08); --shadow-sm: 0 2px 8px rgba(13,32,80,.10); --shadow-md: 0 6px 24px rgba(13,32,80,.13); --shadow-lg: 0 16px 48px rgba(13,32,80,.18); --max-w: 1100px; --ease: cubic-bezier(.4,0,.2,1); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--c-text); background: var(--c-white); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; border: 0; } a { color: var(--c-blue); text-decoration: none; } a:hover { color: var(--c-blue-h); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--c-dark); } p { margin-bottom: .9em; } p:last-child { margin-bottom: 0; } ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } textarea, input[type=text], input[type=email], input[type=tel] { box-sizing: border-box; } /* ── Layout helpers ──────────────────────────────────────── */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } .nomargin { margin: 0 !important; } /* ── Utility buttons ─────────────────────────────────────── */ .btn { display: inline-block; padding: 10px 22px; border-radius: var(--r-md); font-family: var(--font-head); font-size: .88rem; font-weight: 600; border: none; cursor: pointer; transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--c-blue); color: #fff !important; box-shadow: 0 2px 8px rgba(26,70,168,.3); } .btn-primary:hover { background: var(--c-blue-h); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,70,168,.4); } .btn-sky { background: var(--c-sky); color: var(--c-navy) !important; box-shadow: 0 2px 8px rgba(14,165,233,.3); } .btn-sky:hover { background: #38bdf8; transform: translateY(-1px); } .btn-outline { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.45); } .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ── Scroll-reveal animation ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: .08s; } .reveal:nth-child(3) { transition-delay: .16s; } .reveal:nth-child(4) { transition-delay: .24s; } .reveal:nth-child(5) { transition-delay: .32s; } .reveal:nth-child(6) { transition-delay: .40s; } /* ============================================================ TOP-BAR (phone / company links) ============================================================ */ #topbar { background: var(--c-navy); padding: 7px 0; font-size: .78rem; color: rgba(255,255,255,.65); } #topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #topbar a { color: rgba(255,255,255,.8); transition: color .2s; } #topbar a:hover { color: var(--c-sky); } .tb-phone { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; white-space: nowrap; } .tb-flag { height: 13px; width: auto; vertical-align: middle; margin-right: 3px; } .tb-links { display: flex; gap: 18px; } /* ============================================================ HEADER (sticky nav) ============================================================ */ #site-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-xs); } #site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; padding-bottom: 11px; gap: 12px; } #hdr-logo img { width: 11em !important; max-width: 11em !important; height: auto; display: block; image-rendering: -webkit-optimize-contrast; } #hdr-logo:hover img { opacity: .85; } /* desktop nav */ #main-nav { display: flex; align-items: center; gap: 2px; } .nav-a { font-family: var(--font-head); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-navy) !important; padding: 7px 9px; border-radius: var(--r-sm); transition: color .2s, background .2s; white-space: nowrap; } .nav-a:hover, .nav-a.active { color: var(--c-blue) !important; background: #eff4ff; } .nav-cta { background: var(--c-blue) !important; color: #fff !important; padding: 8px 15px; border-radius: var(--r-md); font-weight: 700; margin-left: 6px; box-shadow: 0 2px 8px rgba(26,70,168,.28); transition: background .2s, transform .15s, color .2s; } .nav-cta:hover { background: var(--c-blue-h) !important; color: #fff !important; transform: translateY(-1px); } /* hamburger */ #nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--r-sm); } #nav-toggle span { display: block; width: 21px; height: 2px; background: var(--c-navy); border-radius: 2px; transition: all .28s ease; } #nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #nav-toggle.open span:nth-child(2) { opacity: 0; } #nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile overlay */ #mobile-nav { display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; position: fixed; inset: 0; background: rgba(13,32,80,.97); z-index: 899; padding: 215px 24px 40px; overflow-y: auto; } #mobile-nav.open { display: flex; } #mobile-nav .nav-a { color: #fff !important; font-size: 1rem; padding: 12px 28px; width: 100%; text-align: center; } #mobile-nav .nav-a:hover { background: rgba(255,255,255,.1); color: var(--c-sky) !important; } #mobile-nav .nav-cta:hover { background: var(--c-blue-h) !important; color: #fff !important; } #mobile-nav .nav-cta { margin-top: 10px; width: 100%; text-align: center; background: var(--c-sky) !important; color: var(--c-navy) !important; font-size: .95rem; padding: 13px 28px; } #mobile-nav-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: #fff; font-size: 1.7rem; cursor: pointer; line-height: 1; } /* ============================================================ PROMO STRIP ============================================================ */ #promo-strip { background: linear-gradient(90deg, var(--c-sky) 0%, var(--c-teal) 100%); padding: 10px 20px; text-align: center; font-size: .85rem; font-weight: 500; color: #fff; } #promo-strip a { color: #fff; font-weight: 700; text-decoration: underline; } #promo-strip a:hover { opacity: .85; } /* ============================================================ LOGIN BAR ============================================================ */ /* Banner + login panel side by side */ #banner-wrap { display: flex; justify-content: center; align-items: stretch; background: var(--c-navy); border-bottom: 3px solid #1a357a; } #login-bar { flex: 0 0 265px; background: linear-gradient(180deg, #1a357a 0%, var(--c-navy) 100%); border-left: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; } #login-bar .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; width: 100%; } .lb-title { color: #fff; font-size: .92rem; font-weight: 600; font-family: var(--font-head); white-space: nowrap; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.15); width: 100%; margin-bottom: 2px; } /* CLIENT ID label + input always on one line */ .lb-row { display: flex; align-items: center; gap: 8px; width: 100%; } .lb-id-lbl { color: rgba(255,255,255,.65); font-size: .78rem; font-weight: 600; white-space: nowrap; } #tbClientID, #tbClientID2 { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 7px 13px; border-radius: var(--r-md); font-family: var(--font-body); font-size: .9rem; flex: 1; min-width: 0; transition: border-color .2s, background .2s; } #tbClientID::placeholder, #tbClientID2::placeholder { color: rgba(255,255,255,.38); } #tbClientID:focus, #tbClientID2:focus { outline: none; border-color: var(--c-sky); background: rgba(255,255,255,.2); } .lb-btn { background: var(--c-sky); color: var(--c-navy) !important; border: none; padding: 7px 18px; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 700; font-size: .83rem; cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap; } .lb-btn:hover { background: #38bdf8; transform: translateY(-1px); } .lb-sep { color: rgba(255,255,255,.2); } .lb-demo { border: 2px solid rgba(255,255,255,.35); color: #fff !important; background: transparent; padding: 6px 16px; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 600; font-size: .8rem; cursor: pointer; transition: all .2s; display: inline-block; } .lb-demo:hover { background: #fff; color: var(--c-navy) !important; border-color: #fff; } /* ============================================================ BANNER IMAGE ============================================================ */ #banner { flex: 0 1 619px; /* natural image width; shrinks on narrow screens */ max-width: calc(100% - 265px); background: transparent; line-height: 0; overflow: hidden; } #banner img.MAINPICTURE { display: block; width: 100%; height: auto; max-height: 284px; margin: 0; } /* ============================================================ PAGE TITLE STRIP ============================================================ */ #tagline, #tagline2 { background: linear-gradient(135deg, var(--c-navy) 0%, #1c3d8f 100%); text-align: center; padding: 18px 20px 16px; border-bottom: 3px solid var(--c-blue); } #tagline h1, #tagline2 h1 { font-family: var(--font-head); font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 600; color: #fff; letter-spacing: .01em; margin: 0; } /* Home page uses a light tagline */ #tagline { background: #f0f5ff; border-bottom: 3px solid var(--c-blue); } #tagline h1 { color: var(--c-navy); } /* Inner pages: left-aligned title, breathing room below */ #tagline2 { text-align: left; padding-left: 28px; margin-bottom: 28px; } .SUBTITLE { font-family: var(--font-body); font-size: .88rem; color: rgba(255,255,255,.72); font-style: italic; margin-top: 6px; line-height: 1.5; } #tagline .SUBTITLE { color: var(--c-muted); } /* ============================================================ PROMO BOX (HomeHEADERPROMO) ============================================================ */ .HEADERPROMO { background: #fffbea; border-left: 4px solid var(--c-sky); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 18px; margin: 0 0 22px; } .PROMOTION { font-size: .87rem; line-height: 1.65; } .PROMOTION h3 { font-family: var(--font-body); font-weight: 400; color: var(--c-text); font-size: inherit; } .PROMOTION a { color: var(--c-blue); font-weight: 600; } .PROMOTION a:hover { color: var(--c-blue-h); } .tlPRICING { margin-bottom: 20px; } /* ============================================================ MAIN CONTENT CONTAINER ============================================================ */ #container { background: var(--c-white); max-width: var(--max-w); margin: 0 auto; padding: 32px 20px 3em; } #content_home { width: 100%; } /* ============================================================ HOME PAGE - 3 feature cards ============================================================ */ .home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0; } .hcard { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow .25s var(--ease), transform .25s var(--ease); display: flex; flex-direction: column; } .hcard:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .hcard-head { background: linear-gradient(135deg, var(--c-navy) 0%, #1c3d8f 100%); padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .hcard-head-icon { width: 36px; height: 36px; flex-shrink: 0; background: rgba(255,255,255,.15); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .hcard-head h2 { font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: #fff; letter-spacing: .01em; margin: 0; } .hcard-body { padding: 20px 20px 16px; flex: 1; font-size: .9rem; color: var(--c-text); line-height: 1.7; } .hcard-body p { text-align: left; } .hcard-footer { padding: 0 20px 18px; text-align: right; } /* "Read More" - styled as a small button */ .READMORE, a > img.READMORE { display: inline-block !important; background: var(--c-blue); color: #fff !important; padding: 6px 16px; border-radius: var(--r-md); font-family: var(--font-head); font-size: .8rem; font-weight: 600; height: auto !important; width: auto !important; transition: background .2s, transform .15s; vertical-align: middle; } .READMORE:hover, a:hover > img.READMORE { background: var(--c-blue-h); color: #fff !important; transform: translateY(-1px); } a.READMORE:hover { color: #fff !important; } /* ============================================================ INNER PAGE - two-column layout ============================================================ */ .CONTENT2COLUMNS { display: flex; gap: 40px; align-items: flex-start; font-size: .93rem; color: var(--c-text); line-height: 1.7; } .CONTENT2COLUMNS > div:first-child { flex: 1 1 62%; min-width: 0; } .CONTENT2COLUMNS > div:last-child { flex: 0 0 34%; max-width: 34%; text-align: center; } .CONTENT2COLUMNS > div:last-child img { width: 100%; border-radius: var(--r-sm); box-shadow: var(--shadow-md); } .CONTENT2COLUMNS p { text-align: left; } /* Screenshot caption */ .SCREENSHOTNOTE { margin-top: 10px; font-size: .8rem; font-style: italic; color: var(--c-blue); line-height: 1.5; } /* ============================================================ EAGLE GPS LINK ============================================================ */ .EGPSLINK { display: inline-flex; align-items: center; gap: 4px; } .EGPSLINK img { height: 3em; width: auto; display: inline-block; border-radius: 0 !important; box-shadow: none !important; image-rendering: -webkit-optimize-contrast; } /* ============================================================ TESTIMONIALS ============================================================ */ .TESTIMONIALSTITLE { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--c-navy); margin: 24px 0 10px; } .TESTIMONIALS { background: var(--c-bg); border-left: 4px solid var(--c-blue); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; margin-bottom: 12px; font-style: italic; font-size: .88rem; color: var(--c-text); line-height: 1.65; } .TESTIMONIALS:empty { display: none; } /* ============================================================ PRICING - stripe rows ============================================================ */ .STRIPE { padding: 7px 12px; font-size: .88rem; border-bottom: 1px solid var(--c-border); } .STRIPE:nth-child(even) { background: var(--c-bg); } .STRIPE:hover { background: #e8f0ff; } .COSTPERACTEMPL { color: var(--c-muted); font-size: .82rem; } /* ============================================================ BOOK DEMO FORM ============================================================ */ #tblBookDemo { width: 100%; max-width: 680px; } #tblBookDemo td { padding: 5px 8px 5px 0; vertical-align: top; } #tblBookDemo label { display: block; font-size: .78rem; font-weight: 600; color: var(--c-text); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-head); } #tblBookDemo input[type=text], #tblBookDemo textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-family: var(--font-body); font-size: .9rem; color: var(--c-dark); background: #fff; transition: border-color .2s, box-shadow .2s; } #tblBookDemo input[type=text]:focus, #tblBookDemo textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26,70,168,.1); } .TBNAME, .TBCOMPANY, .TBPHONE, .TBEMAIL { width: 240px !important; } .TACOMMENTS { min-height: 108px; resize: vertical; width: 100% !important; } .BTNSUBMIT { background: var(--c-blue); color: #fff; border: none; padding: 10px 28px; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 600; font-size: .9rem; cursor: pointer; margin-top: 8px; transition: background .2s, transform .15s; } .BTNSUBMIT:hover { background: var(--c-blue-h); transform: translateY(-1px); } .BOOKDEMOFEEDBACK { background: #dff0ff; border-left: 4px solid var(--c-blue); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 18px; font-size: .95rem; line-height: 1.65; margin-bottom: 16px; } .IMGWAIT { display: inline; vertical-align: middle; margin-left: 8px; height: 1.1em; } .imgshading { box-shadow: var(--shadow-xs); } .roundBorder3 { border-radius: 3px !important; } .roundBorder5 { border-radius: 5px !important; } .roundBorder7 { border-radius: 7px !important; } /* ============================================================ FOOTER ============================================================ */ #footer { background: #0c1d3f; border-top: 4px solid var(--c-blue); width: 100%; padding-top: 1em; } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 50px 20px 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; } .footer-brand img { height: 36px; width: auto; margin-bottom: 14px; opacity: .85; } .footer-brand p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 270px; } .footer-brand a { color: var(--c-sky); } .footer-social { display: flex; gap: 8px; margin-top: 16px; } .footer-social a { width: 30px; height: 30px; background: rgba(255,255,255,.08); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: .7rem; font-weight: 700; transition: background .2s, color .2s; } .footer-social a:hover { background: var(--c-blue); color: #fff; } .footer-col h4 { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 8px; } .footer-col a { font-size: .82rem; color: rgba(255,255,255,.5); transition: color .2s; } .footer-col a:hover { color: #fff; } .footer-seo { max-width: var(--max-w); margin: 0 auto; padding: 20px 20px; border-top: 1px solid rgba(255,255,255,.06); font-size: .74rem; color: rgba(255,255,255,.3); line-height: 1.65; text-align: justify; } .footer-seo strong { color: rgba(255,255,255,.5); } .footer-bottom { max-width: var(--max-w); margin: 0 auto; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .footer-bottom p { margin: 0; } .footerText, .footerBottom { font-size: .78rem; color: rgba(255,255,255,.45) !important; } .footerText a, .footerBottom a, .AFOOTER { color: rgba(255,255,255,.45) !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 960px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; } .CONTENT2COLUMNS { flex-direction: column; } .CONTENT2COLUMNS > div:last-child { flex: 0 0 100%; max-width: 100%; } .CONTENT2COLUMNS > div:last-child img { max-width: 22em; margin: 0 auto; } .home-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { #nav-toggle { display: flex; } #main-nav { display: none; } #container { padding: 22px 16px 32px; } .home-cards { grid-template-columns: 1fr; } .tb-links { display: none; } } @media (max-width: 540px) { #hdr-logo img { width: 185px !important; } #mobile-nav { padding-top: 140px; } .footer-inner { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; text-align: center; } #tagline h1, #tagline2 h1 { font-size: 1rem; } /* Login panel stacks above banner on small screens */ #banner-wrap { flex-direction: column-reverse; } #banner { flex: none; width: 100%; max-width: 100%; } #login-bar { flex: none; width: 100%; border-left: none; border-bottom: 1px solid rgba(255,255,255,.1); } #login-bar .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; } .lb-title { border-bottom: none; padding-bottom: 0; width: 100%; margin-bottom: 0; } } /* ============================================================ LIGHTBOX ============================================================ */ .lb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 9000; cursor: zoom-out; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lb-overlay.active { display: flex; align-items: center; justify-content: center; animation: lb-fade .2s var(--ease); } @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } } .lb-img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(0,0,0,.65); cursor: default; animation: lb-scale .22s var(--ease); } @keyframes lb-scale { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lb-close { position: fixed; top: 16px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s; z-index: 9001; } .lb-close:hover { background: rgba(255,255,255,.28); } /* Clickable image hint */ .CONTENT2COLUMNS > div:last-child img.lb-enabled { cursor: zoom-in; transition: opacity .18s, transform .2s; } .CONTENT2COLUMNS > div:last-child img.lb-enabled:hover { opacity: .9; transform: scale(1.018); } /* Content section H2 headings */ #content_home .CONTENT2COLUMNS h2 { color: #667; margin-top: 1.3em; margin-bottom: 0.45em; font-size: 1.1rem; font-weight: 600; } #content_home .CONTENT2COLUMNS > div > h2:first-child { margin-top: 0; }