/* open-sans-300 - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('/fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-300italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('/fonts/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-regular - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('/fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500 - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('/fonts/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('/fonts/open-sans-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600 - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('/fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('/fonts/open-sans-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('/fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('/fonts/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800 - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('/fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800italic - latin */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('/fonts/open-sans-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } html{border:0 none;font:inherit;margin:0;padding:0;vertical-align:baseline;scroll-padding-top: 55px;scroll-behavior: smooth;} BODY{background-color:#F0F0F0!important;background-position:top;background-repeat:repeat-x;font-family: 'Open Sans', 'Arial', 'Helvetica', 'sans-serif';font-size:13px;margin:0;width:100%;color:#333;word-wrap:break-word;-webkit-text-size-adjust: none;} IFRAME {border: 0px;} A:HOVER,A:active,A:link,A:visited{color:#6F6F6F;text-decoration:none;font-weight:700} IMG{max-width:100%;height:auto;width:auto} .story A:HOVER,.story A:active,.story A:link,.story A:visited,.more-block A:HOVER,.more-block A:active,.more-block A:link,.more-block A:visited, #dldescription A:HOVER,#dldescription A:active,#dldescription A:link,#dldescription A:visited,.postbody A:HOVER,.postbody A:active,.postbody A:link,.postbody A:visited{color:#0472b9;text-decoration:none;font-weight:700} .story A:hover, .more-block A:hover, #dldescription A:hover, .postbody A:hover{text-decoration:underline} .flexslider A:hover img,.newsarticle A:hover img,.openleft A:hover img,.screenshots A:hover img{transition-duration:.2s;transition-property:opacity;opacity:.8} .rightbox a{font-weight:400} .rightbox{height:auto;width:300px;position:absolute;top:0;right:0;padding:5px;} TEXTAREA{overflow:auto} INPUT[type=password],INPUT[type=text],INPUT[type=email],INPUT[type=search],TEXTAREA{background:#fcfcfc;border:1px solid #d1d1d1;box-shadow:0 1px 3px rgba(0,0,0,.15)inset;color:#333;font:700 12px/1 Arial,"Helvetica Neue",Helvetica,sans-serif;padding:6px 15px 6px 10px;text-shadow:0 2px 3px rgba(0,0,0,.1);border-radius:3px;outline:0} INPUT[type=password]:focus,input[type=text]:focus,textarea:focus{box-shadow:0 0 5px #51a3ee;border:1px solid #51a3ee} INPUT[type=button],INPUT[type=submit],button{background-color:#eee;background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font:700 11px/1 Arial,"Helvetica Neue",Helvetica,sans-serif;padding:8px;text-align:center;text-shadow:0 1px 0 #eee;text-transform:uppercase} INPUT[type=button]:ACTIVE,INPUT[type=submit]:ACTIVE,button:ACTIVE{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee} INPUT[type=button]:HOVER,INPUT[type=submit]:HOVER,button:hover{background-color:#ddd;background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd} input[type="radio"] {margin:10px;} #wrap { background: #FFF; border: 1px solid #E2E2E2; margin: 0 auto 10px; padding: 5px; position: relative; max-width: 1600px; border-top: 0; margin-top:55px; }blockquote{background:#f9f9f9;border:none;border-left:4px solid #d6d6d6;margin:20px;overflow:auto;padding:0 0 10px 12px} blockquote p{font-family:Georgia,'Times New Roman',Times,serif;font-style:italic;font-size:18px;line-height:26px} #hometop{min-height:380px;overflow:hidden} .theme-toggle-btn{ background: transparent; border: 1px solid transparent; color: #fff; line-height: 32px; padding: 0 10px; border-radius: 6px; cursor: pointer; font: 600 12px/32px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .theme-toggle-btn:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } @media (max-width: 768px){ .theme-toggle-btn{ line-height: 28px; font-size: 12px; padding: 0 8px; } } .homehero { position: relative; /* border-radius: 0px 0px 5px 0px; */ background-size: cover; background-position: center; border-bottom: none; overflow: hidden; position: relative; /* margin-left: -10px; */ /* margin-top: -12px; */ z-index: 1; margin-top: -5px; margin-right: -6px; margin-left: -6px; } .homewelcome { float: right; } .topheaderhomehero, .topheaderhomehero h1, .topheaderhomehero h2 {color:white} .topheaderhomehero h1, .topheaderhomehero h2 {text-align: center;} /* Scope box-sizing to header to avoid width overflow with padding */ #fxnav-header, #fxnav-header * { box-sizing: border-box; } /* Tokens (syncs with html[data-theme]) */ :root { /* Subtly translucent header background for light mode */ --fxnav-bg: rgba(246, 246, 246, .86); --fxnav-surface: #f6f6f6; --fxnav-bdr: #E2E2E2; --fxnav-fg: #666; --fxnav-fg-dim: #6F6F6F; --fxnav-accent: #6F6F6F; --fxnav-hover: rgba(0,0,0,.06); --fxnav-shadow: 0 14px 32px rgba(0,0,0,.12); --fxnav-cta: #ffc914; } html[data-theme="dark"] { /* Subtly translucent header background for dark mode */ --fxnav-bg: rgba(15, 19, 26, .84); --fxnav-surface: #0b1016; --fxnav-bdr: rgba(255,255,255,.12); /* Foreground tuned for high contrast on deep blue-gray background */ --fxnav-fg: #e7ecf7; /* soft white with slight blue tint for eye comfort */ --fxnav-fg-dim: #aeb6c6; /* dimmed foreground */ --fxnav-accent: #aeb6c6; --fxnav-hover: rgba(255,255,255,.08); --fxnav-shadow: 0 18px 44px rgba(0,0,0,.55); --fxnav-cta: #ffcf33; } /* Header shell (slim sticky) */ #fxnav-header { position: fixed; inset: 0 0 auto 0; z-index: 20000; background: var(--fxnav-bg); /* now translucent */ border-bottom: 1px solid var(--fxnav-bdr); -webkit-backdrop-filter: saturate(130%) blur(8px); backdrop-filter: saturate(130%) blur(8px); color: var(--fxnav-fg); /* Ensure consistent typography across themes */ font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .fxnav-shell { max-width: 1600px; margin: 0 auto; padding: 0 16px; display: grid; /* Brand column sized to its content so the logo is never squished */ grid-template-columns: max-content 1fr auto; grid-template-areas: "brand nav right"; align-items: center; column-gap: 12px; min-height: 54px; /* fixed height; no shrink on scroll */ } /* Removed shrink-down rule to keep header/logo size constant */ /* Brand */ .fxnav-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } /* Logo: explicit height cap, auto width to preserve aspect ratio; no aspect-ratio to avoid external SVG sprite bugs */ .fxnav-logo { height: calc(var(--fxnav-h, 54px) - 14px) !important; max-height: calc(var(--fxnav-h, 54px) - 14px); width: auto !important; /* block global img width:100% rules */ max-width: 100%; display: block; filter: invert(.5) saturate(1.1) contrast(1.03); } /* Dark mode logo: brighten to near-white with a subtle pop */ html[data-theme="dark"] #fxnav-header .fxnav-logo { filter: brightness(0) invert(1) saturate(1.2) contrast(1.05) drop-shadow(0 1px 0 rgba(0,0,0,.25)); } /* Prevent global styles from making links blue/purple etc (applies in both themes) */ #fxnav-header .fxnav-link, #fxnav-header .fxnav-link:link, #fxnav-header .fxnav-link:visited, #fxnav-header .fxnav-sub a, #fxnav-header .fxnav-sub a:link, #fxnav-header .fxnav-sub a:visited, #fxnav-header .fxnav-iconbtn, #fxnav-header .fxnav-userbtn { color: var(--fxnav-fg) !important; } #fxnav-header .fxnav-link b, #fxnav-header .fxnav-link span, #fxnav-header .fxnav-sub a b, #fxnav-header .fxnav-sub a span { color: inherit !important; } /* Mobile toggle (hamburger) */ .fxnav-toggle { -webkit-tap-highlight-color: transparent; appearance: none; border: 1px solid var(--fxnav-bdr); background: transparent; color: var(--fxnav-fg); border-radius: 10px; width: 40px; height: 36px; display: none; align-items: center; justify-content: center; cursor: pointer; grid-area: toggle; /* Keep toggle above overlay so the "X" is always clickable */ position: relative; z-index: 20003; } /* Explicitly force burger color so master CSS can't override */ #fxnav-header .fxnav-toggle, #fxnav-header .fxnav-toggle:hover, #fxnav-header .fxnav-toggle:focus { color: var(--fxnav-fg) !important; border-color: var(--fxnav-bdr) !important; background: transparent !important; } .fxnav-burger, .fxnav-burger::before, .fxnav-burger::after { content: ""; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; } /* Also harden the burger bars against master CSS overrides */ #fxnav-header .fxnav-toggle .fxnav-burger, #fxnav-header .fxnav-toggle .fxnav-burger::before, #fxnav-header .fxnav-toggle .fxnav-burger::after { background-color: var(--fxnav-fg) !important; } .fxnav-burger::before { position: absolute; transform: translateY(-6px); } .fxnav-burger::after { position: absolute; transform: translateY( 6px); } /* Primary nav (desktop inline) */ .fxnav-nav { grid-area: nav; justify-self: center; } /* Force true viewport-centering on desktop (independent of brand/right widths) */ @media (min-width: 1101px) { /* Ensure the shell isn't a positioned ancestor so the nav anchors to the full-width header */ #fxnav-header .fxnav-shell { position: static !important; } #fxnav-header .fxnav-nav { position: absolute !important; /* remove from grid flow and anchor to header */ left: 50%; transform: translateX(-50%); /* center horizontally to the viewport */ justify-self: auto; /* neutralize grid alignment */ } } .fxnav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .fxnav-item { position: relative; } .fxnav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--fxnav-fg); text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: .2px; position: relative; } .fxnav-link:hover, .fxnav-link:focus { background: var(--fxnav-hover); text-decoration: none; } .fxnav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; background: var(--fxnav-accent); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .18s ease; border-radius: 2px; opacity: .55; } .fxnav-link:hover::after, .fxnav-link:focus::after, .fxnav-link[aria-current="page"]::after { transform: scaleX(1); opacity: .75; } .fxnav-caret { width: 12px; height: 12px; opacity: .9; transition: transform .14s ease; } .fxnav-item.fxnav-open > .fxnav-link .fxnav-caret { transform: rotate(180deg); } /* Dropdowns — desktop flyouts */ .fxnav-sub { position: absolute; top: calc(100% - 1px); left: 0; /* Ensure dropdown expands to fit longest item (no wrapping on desktop) */ width: max-content; min-width: 230px; padding: 8px; margin: 0; list-style: none; background: var(--fxnav-surface); border: 1px solid var(--fxnav-bdr); border-radius: 12px; box-shadow: var(--fxnav-shadow); display: none; z-index: 50; } .fxnav-item.fxnav-open > .fxnav-sub { display: block; } .fxnav-sub li { margin: 0; padding: 0; } .fxnav-sub a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; color: var(--fxnav-fg); text-decoration: none; font-weight: 600; font-size: 14px; /* Prevent dark-mode-only wrapping differences; keep consistent on desktop */ white-space: nowrap; letter-spacing: .2px; line-height: 1.2; } .fxnav-sub a:hover, .fxnav-sub a:focus { background: var(--fxnav-hover); } /* Highlight current submenu item (optional if server sets aria-current="page") */ .fxnav-sub a[aria-current="page"] { font-weight: 800; background: var(--fxnav-hover); } /* Right cluster */ .fxnav-right { grid-area: right; display: inline-flex; align-items: center; gap: 8px; } /* Icon buttons (search, login, etc) */ .fxnav-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--fxnav-bdr); color: var(--fxnav-fg); background: transparent; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; } .fxnav-iconbtn:hover, .fxnav-iconbtn:focus { background: var(--fxnav-hover); text-decoration: none; } .fxnav-icon { width: 18px; height: 18px; display: block; } /* Ensure IMG-based icons go light in dark mode (inline SVGs already follow currentColor) */ html[data-theme="dark"] #fxnav-header img.fxnav-icon { filter: brightness(0) invert(1) contrast(1.05) saturate(1.1); } /* CTA */ .fxnav-cta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--fxnav-cta); color: #fff; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.10); white-space: nowrap; font-weight: 900; font-size: 13px; flex: 0 0 auto; } #fxnav-header .fxnav-cta span { color: black !important; } /* Keep brand choice for "Go PRO" label */ .fxnav-cta:hover, .fxnav-cta:focus { transform: translateY(-1px); } .fxnav-cta-icon { width: 18px; height: 18px; } /* User */ .fxnav-user { position: relative; } /* Make entire button the avatar; lock background to prevent master CSS bleed; add hover overlay matching other icons */ .fxnav-userbtn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--fxnav-bdr); background: transparent !important; color: var(--fxnav-fg); cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } #fxnav-header .fxnav-userbtn:hover, #fxnav-header .fxnav-userbtn:focus { background: transparent !important; /* neutralize master CSS hover background */ } .fxnav-userbtn::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background .18s ease; pointer-events: none; } .fxnav-userbtn:hover::after, .fxnav-userbtn:focus-visible::after { background: var(--fxnav-hover); /* same hover tone as other icons */ } .fxnav-avatar { width: 100%; height: 100%; display: block; border: 0; border-radius: inherit; object-fit: cover; object-position: center; } .fxnav-sub-user { right: 0; left: auto; min-width: 210px; } /* Full-width mobile sheet (<=1100px) */ @media (max-width: 1100px) { .fxnav-shell { /* Keep brand at its content width; middle column is spacer; right + toggle live at the end */ grid-template-columns: max-content 1fr auto auto; grid-template-areas: "brand . right toggle"; row-gap: 0; } .fxnav-toggle { display: inline-flex; } #fxnav-header.fxnav-is-open .fxnav-burger { background: transparent !important; } #fxnav-header.fxnav-is-open .fxnav-burger::before { transform: rotate(45deg); top: 0; } #fxnav-header.fxnav-is-open .fxnav-burger::after { transform: rotate(-45deg); top: 0; } /* Full-width panel under header — uses left/right anchors; includes safe-area padding */ .fxnav-nav { justify-self: stretch; position: fixed; left: 0; right: 0; width: auto; max-width: 100%; top: var(--fxnav-h, 54px); z-index: 20002; margin: 0; padding: 12px 16px 16px; padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); background: var(--fxnav-surface); border-bottom: 1px solid var(--fxnav-bdr); box-shadow: var(--fxnav-shadow); /* Leave a tappable area below the sheet to click the overlay */ max-height: calc(100vh - var(--fxnav-h, 54px) - 12px - env(safe-area-inset-bottom, 0px)); overflow: auto; overflow-x: hidden; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; pointer-events: none; } #fxnav-header.fxnav-is-open .fxnav-nav { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto; } /* List becomes a clean full-width stack */ .fxnav-list { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .fxnav-item { width: 100%; } .fxnav-link { justify-content: space-between; width: 100%; padding: 14px 12px; } .fxnav-link::after { display: none; } /* Primary dropdowns render inline inside sheet */ .fxnav-nav .fxnav-sub { position: static; display: none; padding: 6px; margin-top: 6px; border: 1px solid var(--fxnav-bdr); border-radius: 10px; background: var(--fxnav-surface); box-shadow: none; /* Revert width behavior on mobile to avoid horizontal overflow */ width: auto; max-width: 100%; } .fxnav-nav .fxnav-item.fxnav-open > .fxnav-sub { display: block; } /* Allow wrapping on mobile sheet so long labels don't overflow */ .fxnav-nav .fxnav-sub a { white-space: normal; } /* Keep user dropdown as a flyout on wider mobile/tablet (if visible) */ .fxnav-sub-user { position: absolute; top: calc(100% - 1px); right: 0; left: auto; border-radius: 12px; box-shadow: var(--fxnav-shadow); } /* Show utilities within the sheet for all <=1100px */ .fxnav-util-only { display: block !important; } } /* Ultra-compact phones (<=420px): hide right cluster; utilities live in the sheet */ @media (max-width: 440px) { .fxnav-shell { grid-template-columns: 1fr auto; grid-template-areas: "brand toggle"; } .fxnav-right { display: none; } .fxnav-brand { min-width: 0; } /* Keep logo sized by header height cap */ .fxnav-logo { height: calc(var(--fxnav-h, 54px) - 14px) !important; max-height: calc(var(--fxnav-h, 54px) - 14px); width: auto !important; max-width: 100%; } } /* Utility entries (hidden by default; shown on <=1100px via media rule above) */ .fxnav-util-only { display: none; } .fxnav-divider { height: 1px; background: var(--fxnav-bdr); margin: 2px 0; border-radius: 1px; } .fxnav-section { padding: 8px 10px; font: 900 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: var(--fxnav-fg-dim); text-transform: uppercase; letter-spacing: .8px; } /* Theme radios inside hamburger */ .fxnav-sub-theme { padding: 6px; } .fxnav-radio { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; cursor: pointer; } .fxnav-radio input { width: 16px; height: 16px; accent-color: var(--fxnav-fg); } .fxnav-radio:hover { background: var(--fxnav-hover); } .fxnav-radio span { font-weight: 700; color: var(--fxnav-fg); } /* Menu CTA (sheet) — text white */ .fxnav-cta-menu { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: 999px; margin-top: 6px; background: var(--fxnav-cta); color: #fff; /* white text */ font-weight: 900; font-size: 14px; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.10); } #fxnav-header .fxnav-cta-menu span { color: black !important; } .fxnav-cta-menu:hover, .fxnav-cta-menu:focus { transform: translateY(-1px); } /* Desktop CTA compaction (if ever visible on very small screens) */ @media (max-width: 500px) { .fxnav-cta span { display: none; } .fxnav-cta { padding: 0 10px; border-radius: 10px; width: 36px; justify-content: center; } } /* Overlay behind full-width sheet - Starts below the header so the header/toggle ("X") stays clickable - Clicks/taps on overlay close the menu */ .fxnav-overlay { position: fixed; left: 0; right: 0; bottom: 0; top: var(--fxnav-h, 54px); background: rgba(0,0,0,.35); -webkit-backdrop-filter: saturate(120%) blur(2px); backdrop-filter: saturate(120%) blur(2px); opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 20001; pointer-events: none; } @media (max-width: 1100px) { #fxnav-header.fxnav-is-open .fxnav-overlay { opacity: 1; visibility: visible; pointer-events: auto; } } /* Lock scroll when menu open */ html.fxnav-modal-open { overflow: hidden; } /* Motion safety */ @media (prefers-reduced-motion: reduce) { .fxnav-link::after, .fxnav-cta, .fxnav-cta-menu { transition: none !important; } } /* A11y utility */ .fxnav-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Abbreviation styling (keep nav clean while retaining title tooltips) */ #fxnav-header abbr[title] { text-decoration: none; border-bottom: 0; } .topheaderinfohomehero { /* position: absolute; */ left: 0; right: 0; bottom: 0; padding: 10px; } .bgimageheaderhomehero { pointer-events: none; position: absolute; width: 100%; height: 100%; z-index: -1; object-fit: cover; object-position: center; } .topheaderhomehero { /* position: absolute; */ left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 50%); z-index: 1; padding: 8px; color: #FFF; /* text-align: center; */ text-shadow: 0px 0px 20px #000; } .statsdata { text-align: center; overflow: auto; background-color: #F0F0F0 !important; padding-top: 10px; margin-left: -5px; margin-right: -5px; border-bottom: 1px solid #E2E2E2; } /* Dark mode styles */ html[data-theme="dark"] .statsdata { background-color: #1E1E1E !important; /* dark neutral background */ border-bottom: 1px solid #333333; /* subtle dark divider */ color: #E0E0E0; /* light text for contrast */ } @media screen and (max-width :450px){ .homeintro{ text-align:center; } .homewelcome { float:none;text-align:center;max-width:100%; } } .signupstats {width:25%;float:left;margin-bottom:10px;} @media only screen and (max-width:800px) { .signupinfo h2 {text-align:center;} .prosignuplogo {float:none;margin:auto;width:250px;height:61px;} .signupstats {width:50%;float:left;} .signupreview { float: left; width: auto; padding: 30px; } } @media only screen and (max-width:500px) { .signupstats {width:100%;float:left;margin-bottom:25px;} .monthly button {width:auto!important;} .annual button {width:auto!important;} } .newsarticle img { border-radius:5px; } @media screen and (max-width :400px){ .newsarticle img { float: none; margin: auto; text-align: center; display: block; text-align: center; width: 80%; margin-top: 10px; margin-bottom: 10px; } } .homeboxnew { padding:15px; } .newscontainer{display:grid;gap:24px;margin:24px auto;padding:0 16px;max-width:72rem;} @media (min-width:640px){.newscontainer{grid-template-columns:repeat(2,1fr);} } @media (max-width:639.98px){.newscontainer{grid-template-columns:1fr;} } .newsarticle{position:relative;background:#f7f7f9;border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,.05);padding:24px; display:flex;flex-direction:column; font:400 1rem/1.55 system-ui,sans-serif!important; color:#111!important;text-decoration:none!important; transition:transform .25s,box-shadow .25s;} .newsarticle:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.08);} .newsarticle .card-link{position:absolute;inset:0;z-index:1; text-indent:-9999px;overflow:hidden;white-space:nowrap;} .newsarticle .cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:16px;} .newsarticle h3{margin:0 0 8px;font-size:1.35rem!important;font-weight:600!important;} .meta{font-size:.875rem!important;color:#6b7280!important;margin-bottom:16px; display:flex;gap:8px;flex-wrap:wrap;} .topic-badge{position:relative;z-index:2;background:rgba(37,99,235,.1);color:#2563eb; font-size:.75rem;padding:4px 10px;border-radius:4px; text-transform:uppercase;letter-spacing:.03em;text-decoration:none!important;font-weight:600;} .preview{margin-bottom:16px;} .preview p{margin:0;} .readtime{margin-top:auto;font-size:.875rem!important;color:#2563eb!important;} .homeboxnew h2, .hotnow h2, .newflightsim h2, .homeboxnew h2 a:link, .homeboxnew h2 a:visited, h2.newsh{ font-size:28px; color:#717171; } /* ── Slimmed‑down Table‑of‑Contents styles ───────────────────── */ nav.toc{ background:#fafafa;border:1px solid #e5e7eb;border-radius:6px; padding:.5rem .75rem;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:.78rem !important;line-height:1.35;margin:0 0 .9rem; } nav.toc>h2{ margin:0 0 .35rem !important;font-size:.88rem !important;font-weight:600; border-bottom:1px solid #e5e7eb;padding-bottom:.3rem; } #storycontent nav.toc>h2{margin-top:0 !important;margin-bottom:.35rem !important;} nav.toc ol{counter-reset:section;list-style:none;margin:0;padding:0;} nav.toc li{counter-increment:section;margin:.15rem 0;} nav.toc li::before{content:counters(section,".") ". ";font-weight:600;font-size:.75em;color:#1d4ed8;} nav.toc a{text-decoration:none;color:#111827 !important;transition:color .15s ease;} nav.toc a:hover{color:#1d4ed8 !important;text-decoration:underline;} nav.toc ol ol{margin-left:.7rem;} #storycontent nav.toc, #storycontent nav.toc li, #storycontent nav.toc a{font-size:.78rem !important;line-height:1.35 !important;} #storycontent nav.toc li{margin:.15rem 0 !important;} .newflightsim {padding:30px;} .newflightsim h3 { color: #333; margin: 0; border-radius: 5px; padding-top:20px; } .newsh {margin-top:50px;} .addonsimulator { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; padding: 10px; margin-top: 30px; margin-bottom: 20px; } /* pager container */ .article-pager{ display:flex; justify-content:space-between; gap:16px; margin:48px 0; } .article-pager a{ flex:1; position:relative; background:#f7f7f9; border-radius:12px; padding:20px 24px; text-decoration:none; box-shadow:0 2px 4px rgba(0,0,0,.05); transition:transform .25s,box-shadow .25s; } .article-pager a:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.08); } .article-pager .dir{ font-size:.75rem; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; display:block; font-weight:600; } .article-pager .title{ font-size:1rem; font-weight:600; color:#111; line-height:1.4; display:block; } .article-pager .prev .dir:before{content:"← ";} /* little arrows */ .article-pager .next .dir:after {content:" →";} @media(max-width:600px){ .article-pager{ flex-direction:column; } } .related-downloads h2{ /* heading above related grid */ font-size:1.5rem; margin:64px 0 24px; color:#111; border-bottom:2px solid #e5e7eb; padding-bottom:8px; } .addonsimulator h3, .addonsimulator h3 a:link, .addonsimulator h3 a:visited { display:inline-block; font-size:19px; color:#717171; margin:0px; text-align: left; } /* grid that can go 2-4 across */ .rel-container{ display:grid; gap:24px; margin:40px 0; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } /* card */ .rel-card{ position:relative; background:#f7f7f9; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,.05); padding:20px; display:flex; flex-direction:column; /* always column → no overlap */ gap:16px; transition:transform .25s,box-shadow .25s; } .rel-card:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.08); } /* stretched link */ .rel-card a.link{ position:absolute; inset:0; font-size:0; line-height:0; } /* 16:9 thumbnail */ .rel-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; } /* body */ .rel-body{ display:flex; flex-direction:column; gap:8px; flex:1; } .rel-body h3{ margin:0; font-size:1.1rem; font-weight:600; color:#111; } .rel-snippet{ margin:0; color:#374151; font-size:.9rem; line-height:1.45; } /* override aggressive site-wide h3 formatting */ .related-downloads .rel-body h3{ background:none!important; border:none!important; padding:0!important; text-transform:none!important; text-align:left!important; color:#111!important; font-size:1.1rem!important; /* keep our desired size */ font-weight:600!important; } .related-downloads h2.rel-head{ /* clear inherited box styling first --------------- */ padding:0 !important; border:none !important; /* ← reset every edge */ /* now apply the style we actually want ------------- */ font-size:1.5rem !important; margin:64px 0 24px !important; color:#111 !important; border-bottom:2px solid #e5e7eb !important; /* add only bottom edge */ padding-bottom:8px !important; background:none !important; border-radius:0 !important; text-transform:none !important; text-align:left !important; } /* Unique ID for the GPS coordinates section */ #unique-gps-coordinates { position: relative; border-radius: 5px; background-color: #f7f7f7; padding: 15px; margin-bottom: 20px; border: 1px solid #ccc; overflow: hidden; /* Ensure floats are contained */ } #unique-gps-coordinates * { margin: 0; padding: 0; box-sizing: border-box; } #unique-gps-coordinates h2, #unique-gps-coordinates h3 { margin-top: 0; margin-bottom: 10px; } #unique-gps-coordinates dl { display: flex; flex-wrap: wrap; } #unique-gps-coordinates dt { width: 30%; font-weight: bold; padding: 5px 0; } #unique-gps-coordinates dd { width: 70%; margin-left: 0; padding: 5px 0; } #unique-gps-coordinates p { margin: 10px 0; } #unique-gps-coordinates .mod-map-icon { float: right; width: 50px; /* Adjust the size as needed */ height: auto; margin-left: 15px; } #unique-gps-coordinates iframe { border-radius: 5px; display: block; width: 100%; margin-top: 15px; } #unique-gps-coordinates small { display: block; margin-top: 5px; } /* Styles for the Copy to Clipboard button */ #unique-gps-coordinates .copy-button { display: inline-block; margin-left: 10px; padding: 5px 10px; font-size: 0.9em; color: #fff; background-image:none; background-color: #0068d7; /* Adjust to match your site's color scheme */ border: none; border-radius: 3px; cursor: pointer; text-shadow: none; } #unique-gps-coordinates .copy-button:hover { background-color: #0056b3; /* Darker shade for hover effect */ } .addonsimulator p { margin-top: 5px; margin-bottom: 5px; } .addonsimulator ul { list-style: none; padding: 0; margin-bottom: 0px; } .addonsimulator li { display: inline-block; text-align: center; clear: both; background: #757575; margin: auto; color: white; padding: 5px; border-radius: 5px; margin-right: 10px; margin-bottom: 10px; } .addonsimulator li a { color: white; text-decoration: none; } .addonlogo { border-radius:50%; border: 1px solid #969696; width: 22px; height: 22px; position: relative; top: 5px; margin-right: 5px; } .featureddownloads h3 { font-size: 22px; color: #717171; margin: 0px; text-align: left; } .latestwrapper { display: inline-block; float: right; text-align: center; } .latestaddon { width: 300px; height: 150px; margin-top: -11px; position: relative; overflow: hidden; margin-right: -11px; } .latestaddon a {text-decoration: none;color:white;display:block;font-weight: normal;} .latestaddon h4 {color:white;margin:0px} .latestaddon img { pointer-events: none; width: 100%; height: 100%; z-index: 0; object-fit: cover; } .latestaddon svg { width:40px; height:40px; } .latestaddon h3 { top: 0px; right: 0px; margin:0px; padding:0px; position:absolute; } @media only screen and (max-width:640px) { .latestwrapper { display: block; text-align: center; float: none; margin-top: 10px; margin-bottom: 10px; } .latestaddon { /* width: 300px; */ /* height: 150px; */ margin: auto; position: relative; overflow: hidden; max-width: 100%; height: auto; } } .ctaaddons { background: #f0c14b; border: 1px solid; border-color: #a88734 #9c7e31 #846a29; color: #111!important; text-shadow: none; font-size: 14px; font-weight: 100; clear: both; border-radius: 5px; padding: 4px; text-decoration: none!important; height: 20px; position: relative; line-height: 20px; text-align: center; display: inline-block; } .ctagoprohome { background: #14853C; color: white!important; text-shadow: none; font-size: 20px; font-weight: 100; clear: both; border-radius: 5px; padding: 10px; text-decoration: none!important; height: 20px; position: relative; line-height: 20px; text-align: center; display: inline-block; } .ctaabouthome { background: #676767; color: white!important; text-shadow: none; font-size: 16px; font-weight: 100; clear: both; border-radius: 5px; padding: 5px; text-decoration: none!important; height: 20px; position: relative; line-height: 20px; text-align: center; display: inline-block; } .ctanew { background: #2d8a3a; color: white!important; text-shadow: none; font-size: 16px; font-weight: 100; clear: both; border-radius: 5px; padding: 5px; text-decoration: none!important; height: 20px; position: relative; line-height: 20px; text-align: center; display: inline-block; } .featureddownloads { margin:10px 10px; text-align:center; margin-bottom:50px; } .featdl { display:inline-block;width:220px;height:auto;margin:10px;position:relative;border-radius:5px;overflow:hidden; } .featdl a {text-decoration: none;color:white;display:block;font-weight: normal;} .featdl h4 {color:white;margin:0px} .featdl img {display:block} .newslettersignup { text-align: center; overflow: auto; background-color: #F0F0F0!important; padding-top: 10px; margin-left: -5px; margin-right: -5px; border-bottom: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2; padding: 20px; } .newslettersignup svg { width:80px; height:80px; float:right; } .newslettersignup h2 { text-align:left; } .homeproinfo { overflow: auto; background-color: #ffe6af!important; padding-top: 10px; margin-left: -5px; margin-right: -5px; border-top: 1px solid #E2E2E2; padding: 20px; } .newtoflightsim { margin-top:60px; } .hotnow{ margin-top:50px; } .hotbox { width:50% } @media screen and (max-width: 700px) { .hotbox { float: none; width: auto; } } .homeslider {padding-right:0px;height:auto;} .flex-caption h2 {font-size:19px;} .slides li { border-radius: 5px; overflow: hidden; } .flexslider .slides img { width: 100%; display: block; max-height: 340px; object-fit: cover; } .bigtext { text-align:center; } .badge { display: inline-block; background-color: #B30000; color: white; border-radius: 12px; padding: 0 4px; margin-left: 5px; font-weight: bold; font-size: 14px; /* Adjust font size as needed */ } .exclusive-notice { background-color: #FFF4CC; color: #333; padding: 10px; border-radius: 5px; margin: 10px 0; font-size: 12px !important; font-weight: bold; margin: auto; margin-top: 20px; } .menu { width: 100%; } .menu-container { margin: 0 auto; background: #f6f6f6; border-bottom: 1px solid #E2E2E2; position: fixed; z-index: 100; width: 100%; } .menucontainer2 { align-items: center; position: relative; margin-left: auto; margin-right: auto; max-width: 1600px; } .logonew { height: 40px; margin-bottom: 10px; margin-left: 10px; width: auto; display: inline-block; float: left; padding-top: 7px; filter: invert(0.5); } .menu img { max-width: 100%; } .menu-mobile { display: none; padding: 20px; } .menu-mobile:after { content: "\002630"; font-size: 2.5rem; padding: 0; position: relative; top: 50%; -webkit-transform: translateY(-25%); transform: translateY(-25%); } .menu-dropdown-icon:before { content: "\2304"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; color: #808080; font-size: 35px; padding: 0px 30px 0px 0px; } .menu > ul { margin: 0 auto; list-style: none; padding: 0; /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ box-sizing: border-box; clear: right; } .menu > ul:before, .menu > ul:after { content: ""; display: table; } .menu > ul:after { clear: both; } .menu > ul > li { float: left; padding: 0; margin: 0; } .menu > ul > li a { text-decoration: none; padding: 0em 2em; display: block; font-weight: 400; font-size: 16px; line-height: 60px; } li.mainmenu > a:hover { box-shadow: inset 0 -3px 0 0 #6F6F6F; } .menu > ul > li:hover { } .menu > ul > li > ul { display: none; width: 100%; background: #f6f6f6; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul:before, .menu > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; } .menu > ul > li > ul > li a { color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc; } .menu > ul > li > ul > li a:hover{ color:#03a9f4; } .menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em; } .menu > ul > li > ul > li > ul > li a { border: 0; font-size: 14px; } .menu > ul > li > ul.normal-sub { width: 300px; left: auto; padding: 10px 20px; border: 1px solid #E2E2E2; } .menu > ul > li > ul.normal-sub > li { width: 100%; } .menu > ul > li > ul.normal-sub > li a { border: 0; } .menu > ul > li a.signuplink { background: #2C8A3B; border-radius: 5px; line-height: 40px; color: white; margin-bottom: 10px; margin-top: 10px; margin-right:10px; height: 40px; font-weight: 600;} #flyawaymenu nav ul li a:hover, nav ul li a:focus { color: #000000; } /* –––––––––––––––––––––––––––––––––––––––––––––––––– Mobile style's –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media only screen and (max-width: 1279px) { .menu > ul > li a { text-decoration: none; padding: 0em 0.8em; display: block; font-weight: 400; font-size: 16px; line-height: 60px; } } @media only screen and (max-width: 979px) { .menu > ul > li a.signuplink { background: #2C8A3B; border-radius: 5px; line-height: 40px; color: white; margin-bottom: 10px; margin-top: 10px; height: 40px; font-weight: 800; width: 80%; margin: auto; text-align: center; } .menu > ul > li a.searchmenu::before { content: 'Search'; padding-right:5px; } .menu > ul > li a.promenulink { text-align:center; } .menu-container { width: 100%; } .menu-container .menu{ display: inline-table; } .menu-mobile { display: block; float: right; padding: 5px 20px 0; margin: 0px; padding-bottom: 0px; } .menu-dropdown-icon:before { display: block; } .menu > ul { display: none; width:100%; } .menu > ul > li { width: 100%; float: none; display: block; } .menu > ul > li a { display: block; } .menu > ul > li > ul { position: relative; padding: 0 40px; } .menu > ul > li > ul.normal-sub { width: 100%; } .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px; } .menu > ul > li > ul > li:first-child { margin: 0; } .menu > ul > li > ul > li > ul { position: relative; } .menu > ul > li > ul > li > ul > li { float: none; } .menu .show-on-mobile { display: block; overflow: auto; clear:both; } } .menuimg { width: 30px; height: 30px; line-height: 60px; vertical-align: middle; margin-left: 5px; padding: 0px 3px;} #flyawaymenu { height: 56px; padding: 10px 0; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; background-color: #F0F0F0; border-bottom: 1px solid #dedede; } .widthmax { max-width: 1180px; } .menu-wrap { display: flex; justify-content: space-between; padding: 0 15px; } .logo-img { height: 35px; filter: invert(0.5); width: auto; padding-top: 7px; width: 146.64px; } .logo-img-footer { height: 25px; filter: invert(0.6); width: 104.73px; } .menu-icon { font-size: 2.4em; color: #808081; line-height: 56px; } #flyawaymenu nav { position: absolute; background-color: #757575; top:56px; left:0; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; z-index:3; } #flyawaymenu nav ul { background-color: #757575; list-style-type: none; max-height: 0px; overflow: hidden; transition: all 0.5s; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } #flyawaymenu nav ul li { padding: 0 15px; } #flyawaymenu nav ul li a { display: inline-block; color: #ffffff; text-transform: uppercase; font-size: 18px; padding: 10px; text-decoration: none; text-shadow: 1px 1px 1px #555; background-color: #757575; } #flyawaymenu nav ul li a:hover, nav ul li a:focus { color: #000000; } #checkbox { display: none; } #checkbox:checked ~ nav ul { max-height: 400px; padding: 15px 0; transition: all 0.5s; } /* ========================================= Base alignment (keep inside container width) ========================================= */ .menu-right { float: right; } li.fas-auth, li.fas-user { float: right !important; margin-left: auto !important; /* also works if parent UL is flex */ clear: none !important; list-style: none !important; z-index: 50 !important; } /* ========================================= AUTH AREA (anonymous) Right-aligned + perfect vertical centering ========================================= */ li.menu-right.fas-auth { display: flex !important; align-items: center !important; justify-content: flex-end !important; height: 60px !important; /* match header height */ line-height: 1 !important; /* neutralize inherited line-heights */ padding: 0 !important; margin: 0 !important; } .fas-authwrap { display: inline-flex !important; align-items: center !important; gap: 12px !important; height: 40px !important; /* locks both controls */ } /* ========================================= Login button (left of CTA) ========================================= */ .fas-login { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; line-height: 40px !important; padding: 0 12px !important; margin: 0 !important; color: inherit !important; text-decoration: none !important; border-radius: 999px !important; background: transparent !important; border: none !important; align-self: center !important; /* vertical centering */ -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, color .18s ease !important; } .fas-login:hover, .fas-login:focus { background: rgba(0,0,0,.06) !important; /* neutral for light mode */ text-decoration: none !important; } @media (prefers-color-scheme: dark) { .fas-login:hover, .fas-login:focus { background: rgba(255,255,255,.06) !important; } } /* Dark-mode class support */ html.dark .fas-login:hover, body.dark .fas-login:hover, html.theme-dark .fas-login:hover, body.theme-dark .fas-login:hover, html.dark-mode .fas-login:hover, body.dark-mode .fas-login:hover, .darkmode .fas-login:hover, html.dark .fas-login:focus, body.dark .fas-login:focus, html.theme-dark .fas-login:focus, body.theme-dark .fas-login:focus, html.dark-mode .fas-login:focus, body.dark-mode .fas-login:focus, .darkmode .fas-login:focus { background: rgba(255,255,255,.06) !important; } .fas-login:focus-visible { outline: 2px solid rgba(0,0,0,.5) !important; outline-offset: 2px !important; } @media (prefers-color-scheme: dark) { .fas-login:focus-visible { outline-color: rgba(255,255,255,.6) !important; } } /* Login avatar + icon, with hard size clamps to prevent global overrides */ .fas-login__avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #e9edf3 !important; /* light mode */ border: 1px solid rgba(0,0,0,.12) !important; } @media (prefers-color-scheme: dark) { .fas-login__avatar { background: #141923 !important; border-color: rgba(255,255,255,.18) !important; } } html.dark .fas-login__avatar, body.dark .fas-login__avatar, html.theme-dark .fas-login__avatar, body.theme-dark .fas-login__avatar, html.dark-mode .fas-login__avatar, body.dark-mode .fas-login__avatar, .darkmode .fas-login__avatar { background: #141923 !important; border-color: rgba(255,255,255,.18) !important; } .fas-login__svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: inline-block !important; vertical-align: middle !important; } .fas-login__svg .gstroke { fill: none; stroke: rgba(0,0,0,.85); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-color-scheme: dark) { .fas-login__svg .gstroke { stroke: rgba(255,255,255,.85) !important; } } html.dark .fas-login__svg .gstroke, body.dark .fas-login__svg .gstroke, html.theme-dark .fas-login__svg .gstroke, body.theme-dark .fas-login__svg .gstroke, html.dark-mode .fas-login__svg .gstroke, body.dark-mode .fas-login__svg .gstroke, .darkmode .fas-login__svg .gstroke { stroke: rgba(255,255,255,.85) !important; } .fas-login__label { font-size: 15px !important; opacity: .9 !important; display: none !important; /* icon-first on compact widths */ } @media (min-width: 768px) { .fas-login__label { display: inline !important; } } /* ========================================= Go PRO CTA — high-CTR yellow (#ffc914) On-load pop + ping for attention ========================================= */ .fas-cta-pro { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; height: 40px !important; line-height: 40px !important; padding: 0 16px !important; border-radius: 999px !important; border: none !important; color: #0b0f14 !important; /* near-black for strong contrast on yellow */ font-weight: 900 !important; font-size: 15px !important; letter-spacing: .2px !important; text-transform: none !important; background: #ffc914 !important; box-shadow: 0 10px 22px rgba(255,201,20,.28), inset 0 0 0 1px rgba(255,255,255,.06) !important; transition: transform .12s ease, box-shadow .25s ease, background-color .2s ease, filter .25s ease !important; margin: 0 !important; text-decoration: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent; align-self: center !important; z-index: 2 !important; animation: fas-cta-pop .7s cubic-bezier(.16,1,.3,1) .25s 1 both !important; /* on-load pop */ } .fas-cta-pro:hover, .fas-cta-pro:focus { background: #e6b700 !important; box-shadow: 0 12px 26px rgba(230,183,0,.36), inset 0 0 0 1px rgba(255,255,255,.08) !important; transform: translateY(-1px) !important; filter: saturate(108%) brightness(1.01) !important; text-decoration: none !important; } .fas-cta-pro:active { transform: translateY(0) !important; box-shadow: 0 8px 18px rgba(230,183,0,.28), inset 0 0 0 1px rgba(255,255,255,.06) !important; } .fas-cta-pro:focus-visible { outline: 2px solid rgba(0,0,0,.5) !important; outline-offset: 2px !important; } /* Ping ring on first paint */ .fas-cta-pro::after { content: "" !important; position: absolute !important; inset: -8px !important; border-radius: inherit !important; box-shadow: 0 0 0 0 rgba(255,201,20,0) !important; pointer-events: none !important; animation: fas-cta-ping 2.2s ease-out .55s 1 forwards !important; } /* Sleek, larger PRO icon (fixed size; ignore global img/svg rules) */ .fas-cta-pro__logo { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; display: inline-block !important; vertical-align: middle !important; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)) saturate(1.05) !important; flex: 0 0 24px !important; } .fas-cta-pro__text { white-space: nowrap !important; } /* Pop + ping keyframes */ @keyframes fas-cta-pop { 0% { transform: scale(.98); box-shadow: 0 10px 22px rgba(255,201,20,.18); } 50% { transform: scale(1.045); box-shadow: 0 16px 34px rgba(255,201,20,.36); } 100% { transform: scale(1); box-shadow: 0 10px 22px rgba(255,201,20,.28); } } @keyframes fas-cta-ping { 0% { box-shadow: 0 0 0 0 rgba(255,201,20,.5); opacity: 1; } 70% { box-shadow: 0 0 0 26px rgba(255,201,20,0); opacity: .35; } 100% { box-shadow: 0 0 0 40px rgba(255,201,20,0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fas-cta-pro { animation: none !important; transition: none !important; } .fas-cta-pro::after { animation: none !important; } } /* ========================================= LOGGED-IN USER MENU (right inside container) Proper dark mode + stable dropdown (no hover gap) ========================================= */ li.usermenu.menu-right.fas-user { position: relative !important; /* anchor dropdown positioning */ float: right !important; margin-left: auto !important; /* far-right within container */ display: flex !important; align-items: center !important; height: 60px !important; line-height: 1 !important; padding: 0 !important; z-index: 50 !important; } li.fas-user > a.usermenu__anchor.fas-user__anchor { display: flex !important; align-items: center !important; gap: 10px !important; line-height: 60px !important; padding: 0 1em !important; text-decoration: none !important; color: inherit !important; } /* Avatar */ .fas-user__avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 50% !important; border: 1px solid rgba(0,0,0,.15) !important; /* light mode border */ display: inline-block !important; vertical-align: middle !important; } @media (prefers-color-scheme: dark) { .fas-user__avatar { border-color: rgba(255,255,255,.18) !important; } } html.dark .fas-user__avatar, body.dark .fas-user__avatar, html.theme-dark .fas-user__avatar, body.theme-dark .fas-user__avatar, html.dark-mode .fas-user__avatar, body.dark-mode .fas-user__avatar, .darkmode .fas-user__avatar { border-color: rgba(255,255,255,.18) !important; } .fas-user__name { font-size: 16px !important; font-weight: 500 !important; color: inherit !important; white-space: nowrap !important; max-width: 140px !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Dropdown container: - Unique class 'fas-dd' to prevent theme overrides. - Opens downward, overlaps 1px to remove any hover gap. - Aligns flush to the right edge of the trigger. */ li.fas-user > ul.normal-sub.fas-dd { position: absolute !important; top: calc(100% - 1px) !important; /* overlap 1px to avoid hover gap */ right: 0 !important; /* flush with the right edge of the user li */ left: auto !important; bottom: auto !important; display: none; /* shown on hover/focus */ background: #ffffff !important; /* LIGHT MODE default */ color: #111 !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 10px !important; padding: 6px !important; min-width: 210px !important; z-index: 9999 !important; box-shadow: 0 12px 28px rgba(0,0,0,.15) !important; box-sizing: border-box !important; transition: opacity .12s ease !important; opacity: 0; /* fade-in only (no transform) */ } /* FORCE Dark mode: prefers-color-scheme (high specificity) */ @media (prefers-color-scheme: dark) { li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd { background: #0f121a !important; color: #e8eaed !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; } } /* FORCE Dark mode: common theme classes (very specific, covers many setups) */ html.dark li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, body.dark li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, html.theme-dark li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, body.theme-dark li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, html.dark-mode li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, body.dark-mode li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, .darkmode li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, html[data-theme="dark"] li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, body[data-theme="dark"] li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, html[data-mode="dark"] li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd, body[data-mode="dark"] li.mainmenu.menu-dropdown-icon.usermenu.menu-right.fas-user > ul.normal-sub.fas-dd { background: #0f121a !important; color: #e8eaed !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; } /* Reveal dropdown on hover/focus of parent li (no flicker) */ li.fas-user:hover > ul.normal-sub.fas-dd, li.fas-user:focus-within > ul.normal-sub.fas-dd { display: block !important; opacity: 1 !important; } /* Normalize nested lis inside dropdown */ li.fas-user > ul.normal-sub.fas-dd > li { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Dropdown items: full-row hover highlight and icon sizing reset */ .fas-user__item { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 12px !important; text-decoration: none !important; color: inherit !important; border-radius: 8px !important; transition: background-color .12s ease !important; font-size: 15px !important; /* normalize against theme */ line-height: 1.2 !important; } /* Icon hard clamp to prevent global svg/img rules from inflating size */ .fas-user__icon { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: inline-block !important; vertical-align: middle !important; flex: 0 0 18px !important; fill: currentColor !important; stroke: none !important; opacity: .9 !important; } .fas-user__item:hover, .fas-user__item:focus { text-decoration: none !important; background: rgba(0,0,0,.06) !important; /* LIGHT hover */ } @media (prefers-color-scheme: dark) { .fas-user__item:hover, .fas-user__item:focus { background: rgba(255,255,255,.08) !important; } } html.dark .fas-user__item:hover, body.dark .fas-user__item:hover, html.theme-dark .fas-user__item:hover, body.theme-dark .fas-user__item:hover, html.dark-mode .fas-user__item:hover, body.dark-mode .fas-user__item:hover, .darkmode .fas-user__item:hover, html.dark .fas-user__item:focus, body.dark .fas-user__item:focus, html.theme-dark .fas-user__item:focus, body.theme-dark .fas-user__item:focus, html.dark-mode .fas-user__item:focus, body.dark-mode .fas-user__item:focus, .darkmode .fas-user__item:focus { background: rgba(255,255,255,.08) !important; } /* Small screens: hide name to keep header tidy */ @media (max-width: 480px) { .fas-user__name { display: none !important; } } /* A11y helper */ .sr-only { position: absolute !important; width: 1px; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .actions svg { fill: #ffffff; height: 35px; width: 35px; } .actions {float:none;} .powerfilters {margin-top:10px;text-align:center;} .powerfilter, .powerfilter:HOVER { all: unset; display: inline-flex; background-color: #757575; color: white; padding: 10px; margin-right: 10px; font-size: 16px; border-radius: 5px; align-items: center; justify-content: center; cursor: pointer;} .powerfilter img, .powerfilter svg {width: 30px; height: 30px; margin-left: 10px;} .filterselected, .filterselected:HOVER { background-color: green; } ul.promenulist::before { content: "\A0"; background-image: url(https://flyawaysimulation.com/images/assets/pro-logo.png); background-image: -webkit-image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-image: image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-repeat: no-repeat; background-size: contain; width: 80px; height: 20px; /* float: right; */ /* margin-top: 5px; */ clear: both; /* position: absolute; */ /* top: -10px; */ display: block; /* left: 25%; */ margin-left: 15px; } .newsearch{ padding: 10px!important; } .newsearch::before { content: "Search"; padding-left: 10px; padding-right: 10px; } @media (min-width: 768px) { .logo-img { filter: invert(0.5); } .newsearch{ padding: 0px!important; text-align: center; } .newsearch::before { content: ""; padding-right:0px; padding-left: 0px; } .searchiconnew { float: right; padding-top: 3px!important; } .promenu { background-color: #757575; position: absolute; bottom: 37px; right: 0px; border-radius: 4px 4px 0px 0px; } ul.promenulist::before { content: "\A0"; background-image: url(https://flyawaysimulation.com/images/assets/pro-logo.png); background-image: -webkit-image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-image: image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-repeat: no-repeat; background-size: contain; width: 80px; height: 20px; /* float: right; */ /* margin-top: 5px; */ clear: both; position: absolute; top: -10px; left: 25%; margin-left: 0px; } .widthmax { margin: auto; position:relative; } .menu-icon { display: none; } .menu-wrap { display:block; padding:0px; } #flyawaymenu { background-color: transparent; height:auto; } #flyawaymenu nav { position: relative; top: 0px; background-color: #757575; padding: 5px; } #flyawaymenu nav ul { max-height: 100%; padding: 0; text-align: left; margin: auto; max-width: 1180px; } #flyawaymenu nav ul li { display: inline-flex; padding:0; } #flyawaymenu nav ul li a { font-size: 12px; color:white; display:block; padding-right:21px; } #flyawaymenu nav ul li a.promenulink { font-size: 12px; color:white; display:block; padding-right:10px; text-transform: capitalize; } #flyawaymenu nav ul li.actions a { padding:0; margin-left:5px; } .logo-img { height: 56px; margin-bottom: 10px; margin-left: 10px; width:234.59px; } .actions svg { fill: white; height: 35px; width: 35px; } .actions { float:right; } } #userlinks ul { padding-left: 0; border: none; margin: 0; } #userlinks ul li { margin-left: 0; padding-left: 5px; border: none; list-style: none; display: inline-block; } .countryicon { width: 15px; height: 15px; border-radius: 3px;} .scenerycountry { vertical-align: top; display: inline-block; line-height: 15px;} .relatedaddons { clear: both;} .relatedaddons h2 { background-color: #f5f5f5; color: #333; margin: 0; padding: 5px; border: 1px solid #d2d2d2; text-transform: uppercase; border-radius: 5px; text-align: center;} .reldlnew { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin-top:15px; margin-bottom:15px; } .relitemnew { display: flex; flex-direction: column; flex-basis: 33%; } @media (max-width: 600px) { .relitemnew { display: flex; flex-direction: column; flex-basis: 50%; } } @media (max-width: 400px) { .relitemnew { display: flex; flex-direction: column; flex-basis: 100%; } } .relitemnewinternal:hover {background-color: #f3f3f3;} .relitemnew span { font-size: 11px; font-weight: 700; display: block; } .relitemnew a { text-decoration:none; display: contents; } .relitemnewinternal { margin: 10px; margin-bottom: 25px; border-radius: 5px; border: 1px solid #E2E2E2; overflow: hidden; color: #333; height: 100%; } .relitemnewinternal h3 { font-size:15px; color:#2f2f2f; } .relitemnewinternal img { display:block; width:100%; } .reladdondetails { margin:5px; } .reladdondetails dl.dl-inline { margin:0px; } .reladdondetails dl.dl-inline img { width: 20px; height: 20px; position: relative; top: 5px; right: 0px; } @media screen and (min-width: 991px) { #flyawaymenu nav ul li a { font-size: 14px; padding-right:30px; } #flyawaymenu nav ul li a.promenulink { font-size: 14px; } } #storyheaderarticle { z-index:1; } .bgimageheader { pointer-events: none; position: absolute; width: 100%; height: 100%; z-index: -1; object-fit: cover; } #storycontent lite-youtube img { pointer-events: none; position: absolute; width: 100%; height: 100%!important; object-fit: cover; margin:0px; } #storycontent lite-youtube iframe { margin:0px; } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; border-radius: 5px; overflow: hidden; } /* gradient */ lite-youtube::before { content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; margin:0px; } /* play button */ lite-youtube > .lty-playbtn { width: 68px; height: 48px; position: absolute; cursor: pointer; transform: translate3d(-50%, -50%, 0); top: 50%; left: 50%; z-index: 1; background-color: transparent; /* YT's actual play button svg */ background-image: url('data:image/svg+xml;utf8,'); filter: grayscale(100%); transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: none; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .newsearch { padding:0px!important; text-align:center; } .faslogo{ width:310px;height:74px;max-width:none; } .newsearch:hover { background:none!important; } .searchimg { width: 30px; height: 30px; vertical-align: middle; } .probadge {bottom:100%;} .uploadaddon { border: none; background: #14853C; color: white; text-shadow: none; font-size: 20px; font-weight: 100; clear: both; margin-top: 10px; padding: 5px; border-radius: 5px; right: 0px; top: 0px; margin-top: 20px; border: 1px solid white; width: 70%; text-align: center; margin:auto; } .uploadaddonmessage { float: left; line-height: 30px; margin-left: 10px;} .uploadaddon svg { width:25px;height:25px; } .uploadaddon a{ text-decoration:none!important; color:white!important; display:block!important; } .sideboxer li {overflow: auto;} .mustreads a {font-size: 14px; display:block;overflow:hidden;} .mustcomments {margin: 10px 0px 0px 0px;} .mustimage {width:60px;height:60px;border-radius:50%;float:right} .stayleft {text-align: left!important} pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } .boxhome{clear:both;float:right;height:340px;margin:10px;position:absolute;top:0;right:0} .sideboxer{margin-bottom:20px;margin-top:5px} .sideboxer a,.sideboxer p{color:#464646;text-decoration:none} .hotnow{clear:both;margin:10px} cite{font-style:normal;font-weight:700;text-transform:uppercase} .title{color:#215dc6;font-family:Verdana,Helvetica;font-size:14px;font-weight:700;text-decoration:none} .sidebarad{width:300px;height:250px;text-align:center;margin:auto} .content{padding:5px 0} .tiny{color:#215dc6;font-family:Verdana,Helvetica;font-size:10px;font-weight:400;text-decoration:none} .bcontent{color:#215dc6;font-family:Verdana,Helvetica;font-size:10px} .secure{color:green;font-size:11px;font-weight:700;text-decoration:none} h1,h1 a:link,h1 a:visited,h2,h2 a:link,h2 a:visited,h3,h3 a:link,h3 a:visited,h4,h4 a:link,h4 a:visited{color:#333;margin-bottom:5px;margin-top:5px;text-decoration:none;font-weight:700} #storycontent h2, #storycontent h3, #storycontent h4, #storycontent h5 {margin-top:50px;margin-bottom:18px} #storycontent h2 {font-size:24px} h1,h1 a:link,h1 a:visited{font-size:30px;font-weight:700;text-transform:capitalize} h2,h2 a:link,h2 a:visited{font-size:19px} h3,h3 a:link,h3 a:visited{font-size:16px} h4,h4 a:link,h4 a:visited{font-size:13px} #authorbox h3 {margin-top:5px;margin-bottom:5px} #userlinks{float:right;clear:both;background:#919191;height:36px;line-height:36px;} #userlinks ul{padding-left:0;border:none;margin:0} #userlinks ul li{margin-left:0;padding-left:5px;border:none;list-style:none;display:inline-block} #userlinks ul li a{color:#fff;text-decoration:none;font-size:14px;margin:10px;font-weight:700} .opentable{background:#FFF;clear:both;margin:5px;overflow:visible;padding:8px} input.btn,input.btn:hover{background:#090;border:1px solid;border-color:#000;color:#fff;cursor:pointer;font:700 100% 'trebuchet ms',helvetica,sans-serif} .galleryroundbox{margin:1em auto} .gallerycontent{color:#000;margin:0 7px;overflow:auto;padding:5px;text-align:left} .openleft{background:#FFF;float:left;padding:5px;padding-right:320px;width:100%;box-sizing:border-box;min-height:3200px;padding-top:0px;} #storyheader{border-bottom:1px solid #E2E2E2;margin:0;overflow:visible;padding:8px;position:relative;padding-top:0px;} #storyheader h1{margin-bottom:2px;margin-top:10px} #storycontent{margin:5px;overflow:visible;padding:8px} .notice{font-size:9px} .topics img{border:none;margin:3px} .topicbox{background:#FFF;display:block;margin:8px;overflow:auto;padding:8px} .topicinfo{float:left;width:25%} .foot{margin-top:40px;text-align:center} .dlcat{padding:8px} .message{text-align:justify} a.simulator{color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:15px;margin:5px;text-decoration:none;text-shadow:#999 .1em .1em .2em} .information{overflow:auto;text-align:justify} /* Light mode (default) */ div.figure, div.Figure { background: #f5f5f5; border: 1px solid #e2e2e2; clear: right; float: right; margin: 0.5em; overflow: auto; padding: 0.5em; width: 210px; border-radius: 5px; } /* Dark mode */ html[data-theme="dark"] div.figure, html[data-theme="dark"] div.Figure { background: #151619; /* darker background */ border: 1px solid #444; /* softer dark border */ color: #e0e0e0; /* light text color */ } /* Optional: tweak links and captions inside figures for readability */ html[data-theme="dark"] div.figure a, html[data-theme="dark"] div.Figure a { color: #80b3ff; /* readable link color */ } html[data-theme="dark"] div.figure figcaption, html[data-theme="dark"] div.Figure figcaption { color: #bfbfbf; /* slightly dimmed caption */ } .boxtitle,.option,.storytitle{color:#06274e;font-family:Verdana,Helvetica;font-size:11px;font-weight:700;text-decoration:none} .pagenumbers,.pagenumbers a{clear:both;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:15px;text-align:center} dt{font-weight:bolder} .dlcomments dt{padding-bottom:10px;padding-top:10px} .dlcomments dd{border-bottom:1px dotted #BBB;padding-bottom:10px;padding-top:10px;min-height:40px;margin-bottom:50px} .dlcommentsauthor,.dlcommentsauthor a{color:#333;font-size:14px;font-weight:700} .dlcommentsdate{color:#757575;font-weight:lighter;margin-left:20px} div.floatleft{float:left;width:100%} .descleft{float:left;width:70%} .imagegall h2{display:inline} div.imagegall{border-bottom:thin silver dotted;margin:10px;overflow:hidden} div.media{margin:5px} .downloadscat{border-bottom:thin solid silver;clear:both;margin:10px auto;overflow:auto;padding:10px} div.errormessage{-moz-border-radius:5px;background:#a12a2a;border-radius:5px;color:#FFF;font-size:12px;margin-bottom:.5em;overflow:auto;padding:.5em;width:300px} div.errormessage a{color:#FFF;font-size:12px} .downloadsinfo{-moz-border-radius:15px;background:#F9F9F9;border:thin solid silver;border-radius:15px;margin:10px;padding:10px;width:100%} .downloads-box{border-bottom:thin silver solid;margin:10px;max-width:1680px;overflow:auto;padding:10px} .downloads-box img{border:none;float:right;height:100px;width:150px;clear:both;border-radius: 5px;} .newsarticle{border-bottom:1px solid #E2E2E2;margin:10px;padding:10px;clear:both;overflow:auto;} .newsarticle img{border:none;float:right} div.middle400{background:#F9F9F9;border:thin silver solid;clear:both;margin:.5em auto;overflow:auto;padding:.5em;width:50%} .downloadlink{cursor:pointer} .datetime{color:#666;font-size:12px} #dependencies:target { animation-name: blink; animation-direction: normal; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: ease; border-radius:10px; } @keyframes blink { 0% { background: #7fce9b; } 100% { background: none; } } #breadcrumbs ul { list-style: none; overflow: hidden; font-size: 12px; margin-top: -5px; margin-left:-10px; margin-bottom: 0px; margin-right: -10px; padding: 0px; border-bottom:1px solid #dedede; } #breadcrumbs li { float: left; } #breadcrumbs li a { color: #6d6d6d; text-decoration: none; padding: 7px 0 7px 35px; background: #F0F0F0; position: relative; display: block; float: left; font-weight: normal; } #breadcrumbs li a::after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 20px solid #F0F0F0; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } #breadcrumbs li a::before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 20px solid #dedede; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } #breadcrumbs li:first-child a { padding-left: 10px; } #breadcrumbs li a:hover { background: #5e5e5e; color:white; } #breadcrumbs li a:hover:after { border-left-color: #5e5e5e !important; } #infotabs{float:right} .monthly input[type='submit'] { width:240px; height:50px;margin:5px; background-color:#FA8A10; background-image:none; color:white; text-shadow:none; font-size:18px; box-shadow: 0 4px #db821a; border:none; border-bottom:none; } .monthly input[type='submit']:hover{ box-shadow: 0 2px #db821a!important; background-color: #f99e34!important; } .annual input[type='submit'] { width:240px; height:50px;margin:5px; background-color:#2C8A3B; background-image:none; color:white; text-shadow:none; font-size:18px; box-shadow: 0 4px #21652b; border:none; border-bottom:none; } .annual input[type='submit']:hover{ box-shadow: 0 2px #21652b!important; background-color: #5da567!important; } .commenttitle { font-size:16px; } .dlcommentsdate { font-size: 13px; } .promember { background-image: url(https://flyawaysimulation.com/images/pro-logo.png); background-repeat: no-repeat; background-size: contain; width: 80px; height: 20px; float: right; margin-top: 5px; clear: both; position: relative; top: -20px; } .commenttitlepro { position: relative; /* so the badge can sit nicely relative to the title block */ } /* PRO logo badge */ .commenttitlepro::after { content: ""; display: block; background-image: url("https://flyawaysimulation.com/images/svg/pro-icon-2025-2.svg"); background-repeat: no-repeat; background-size: contain; width: 80px; /* tweak as needed to match the SVG’s aspect */ height: 20px; float: right; margin-top: 5px; clear: both; position: relative; top: -20px; } /* Optional: subtle tweak in dark mode (if needed) */ html[data-theme="dark"] .commenttitlepro::after { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } #zone1{height:90px;margin:auto;text-align:center;width:728px} #zone2{height:600px;margin:auto;text-align:center;width:120px} #searchbox{float:right;height:40px;margin-top:35px;padding:5px} #plusone{background:url(https://flyawaysimulation.com/themes/FlyAway/style/trans.png);bottom:0;padding:10px;position:fixed;right:0} .paginate { font-size: 20px; margin: 3px; padding: 3px; width: 99%; } .paginate a { background-color: #f5f5f5; border: 1px solid #E2E2E2; color: #666; display: inline-block; font-size: 14px; margin: 5px 2px; padding: 2px 5px; text-decoration: none; } .paginate a:active, .paginate a:hover { border: 1px solid #999; color: #000; } .paginate span.current { background-color: #999; border: 1px solid #999; color: #FFF; font-weight: 700; margin: 2px; padding: 2px 5px; } .paginate span.disabled { border: 1px solid #eee; color: #DDD; margin: 2px; padding: 2px 5px; } /* === DARK MODE === */ html[data-theme="dark"] .paginate a { background-color: #1f1f1f; border: 1px solid #444; color: #ccc; } html[data-theme="dark"] .paginate a:active, html[data-theme="dark"] .paginate a:hover { border: 1px solid #888; color: #fff; } html[data-theme="dark"] .paginate span.current { background-color: #666; border: 1px solid #888; color: #fff; } html[data-theme="dark"] .paginate span.disabled { border: 1px solid #333; color: #555; } .stars{background-image:url(https://flyawaysimulation.com/themes/FlyAway/style/sprite-overall.png);display:inline-block;height:12px;overflow:hidden;width:64px} .star5{background-position:0 -941px} .star4{background-position:0 -879px} .star3{background-position:0 -817px} .star2{background-position:0 -755px} .star1{background-position:0 -693px} .bottomad iframe {margin:auto;} input.dlnow,input.dlnow:hover{background:#F60;border:1px solid;border-color:#000;color:#fff;cursor:pointer;font-family:Arial,Helmet,Freesans,sans-serif;font-weight:400;font-size:24px} #commentform span.allowed{background:#F9F7E4;border:dotted thin #BBB;color:#807E70;display:block;width:65%} #commentform textarea{width:75%} #commentform input[type=text], #commentform input[type=email]{width:35%} #commentform input[type=submit]{width:83%} .validate-error{color:#900;font-weight:700} #storycontent iframe,#storycontent img,.content img{border-width:0;max-width:100%} #storycontent img{height:auto!important;clear:both;border-radius:5px;} #storycontent li,#storycontent p,.content p{font-size:14px;line-height:18px;text-rendering:auto;margin-bottom:20px} #storycontent li {margin-bottom:15px} #storycontent div.figure p,#storycontent div.Figure p,#storycontent div.middle400 p,div.figure p,div.middle400 p,div.webscreenshot p{font-size:smaller;font-style:italic;text-align:center;text-indent:0} #galleryimage img,div.figure img{border:0; border-radius:5px;} #message{background-color:#8E1609;color:#FFF;font-family:Arial,Helvetica,sans-serif;font-size:100%;font-weight:700;left:0;padding:10px 0;position:fixed;text-align:center;top:0;width:100%;z-index:105} #message span{float:left;text-align:center;width:95%} #message span a{color:#FFF;font-size:16px} .searchicon:HOVER, .searchicon:active, .searchicon:focus, .searchicon { background:none; border: none; color: white; text-shadow: none; outline:0; box-shadow:none; padding:0; display:table-cell; } #share{background:#FFF;border-radius:5px 0 0 5px;margin-left:-95px;margin-top:40px;position:fixed;width:90px} #share a{display:block;margin:10px;text-align:center} ul.tabs{border-bottom:thick solid #aeaeae} ul.tabs a{color:#747474;font:18px "Century Gothic",Helvetica,Arial,sans-serif;padding:3px;text-decoration:none;text-shadow:#999 .1em .1em .2em} ul.tabs a.current{background:#aeaeae;color:#FFF} .scroll{height:375px;overflow-x:hidden;overflow-y:scroll} .hotbox{float:left;overflow-x:hidden} .boxhome h3,.homedownloads h3,.homesimulators h3,.hotnow h3,.newtoflightsim h3,.related-downloads h2,.related-downloads h3,.screenshots h3,.sideboxer h3,h3.newsh{background-color:#f5f5f5;color:#333;margin:0;padding:5px;border:1px solid #d2d2d2;text-transform:uppercase;border-radius: 5px;text-align: center;} .screenshots{clear:both;width:100%} .screenshots img{margin:.5%;padding-top:5px} .screenshots li:first-child img{margin-left:0} .screenshots li:last-child img{margin-right:0} .newtoflightsim{margin:10px} .newtoflightsim p{padding:5px} .highlighted{-moz-border-radius:2px;background-color:#828282;border-radius:2px;color:#FFF;font-size:9px;font-weight:700;margin:3px;padding:2px} .homedownloads{height:400px;margin:10px} .relitem{float:left;margin:5px;text-align:center;max-width:135px;height:180px} .relitem span{display:block} #storycontent > div.additional img {max-width:45%;} .related-downloads{clear:both;} .reldl{overflow-x:auto;overflow-y:hidden;padding:0;text-align:center;} .reldl2{text-align:center} .reldl img{height:auto;width:130px;border-radius:5px;} .reldl span{font-size:11px;font-weight:700} .bigtext,.bigtext a{clear:both;color:#517901;font-size:18px;text-decoration:none} .dlscroll{height:370px;overflow-x:hidden;overflow-y:scroll} .pad{padding:0 5px} .sideboxes{float:right;margin-top:10px} #getsocial,.getsocial{clear:both;display:block;float:right;width:130px} #caretoshare{clear:both;display:block;width:130px;margin:auto} #caretoshare p{color:#636363;font-weight:700;font-size:16px;text-transform:uppercase} .sbox{display:block;float:left;margin:5px;height:70px} .plusbadge{ display: inline-block; position: absolute; right: 0px; bottom: -1px; } #embedcode{-moz-border-bottom-colors:none;-moz-border-image:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 #F6F6F6;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 1px 0 #FFF,0 1px 1px rgba(0,0,0,.17)inset;color:#666;font-size:13px;height:54px;padding:7px 10px;width:70%} #intro{float:left;width:360px} .mediatype{background:#919191;text-transform:uppercase;color:#FFF;display:inline-block;float:right;font-weight:700;padding:3px 10px} a.ctabutton{background:#690;color:#FFF;display:inline-block;float:right;font-weight:700;height:29px;padding:0 10px;text-decoration:none;text-transform:uppercase;line-height:29px} .filecontents table{border-collapse:collapse;width:100%;table-layout:fixed} .filecontents table,.filecontents td,.filecontents th{border:1px solid #DEDEDE;text-align:left} .filecontents th:first-child {width:60%} div.filecontents{margin:10px} .viewthem{color:#6E6E6E;cursor:pointer;font-size:16px!important} .galleryimageleft{float:left;margin:10px;z-index:9} #pagination{font-size:12px;list-style-type:none;margin:0;overflow:hidden;padding:2px 0;clear:both;padding-top:10px} #pagination li{display:inline} #pagination a,#pagination a:visited{color:#999;height:15px;text-decoration:none;margin:20px 0} #pagination .pagination-prev a{background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiM0RkJBNkY7IiBkPSJNMjcsMUwyNywxYzE0LjM1OSwwLDI2LDExLjY0MSwyNiwyNnYwYzAsMTQuMzU5LTExLjY0MSwyNi0yNiwyNmgwQzEyLjY0MSw1MywxLDQxLjM1OSwxLDI3djAKCQkJQzEsMTIuNjQxLDEyLjY0MSwxLDI3LDF6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzRGQkE2RjsiIGQ9Ik0yNyw1NEMxMi4xMTIsNTQsMCw0MS44ODgsMCwyN1MxMi4xMTIsMCwyNywwczI3LDEyLjExMiwyNywyN1M0MS44ODgsNTQsMjcsNTR6IE0yNywyCgkJCUMxMy4yMTUsMiwyLDEzLjIxNSwyLDI3czExLjIxNSwyNSwyNSwyNXMyNS0xMS4yMTUsMjUtMjVTNDAuNzg1LDIsMjcsMnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzEuNzA2LDQwYy0wLjI1NiwwLTAuNTEyLTAuMDk4LTAuNzA3LTAuMjkzTDE5LjUwMSwyOC4yMDljLTAuNjY3LTAuNjY3LTAuNjY3LTEuNzUxLDAtMi40MTgKCQlsMTEuNDk4LTExLjQ5OGMwLjM5MS0wLjM5MSwxLjAyMy0wLjM5MSwxLjQxNCwwczAuMzkxLDEuMDIzLDAsMS40MTRMMjEuMTIsMjdsMTEuMjkzLDExLjI5M2MwLjM5MSwwLjM5MSwwLjM5MSwxLjAyMywwLDEuNDE0CgkJQzMyLjIxOCwzOS45MDIsMzEuOTYyLDQwLDMxLjcwNiw0MHoiLz4KPC9nPgo8L3N2Zz4=") no-repeat left center;float:left;padding-left:20px} #pagination .pagination-next a{background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiM0RkJBNkY7IiBkPSJNMjcsNTNMMjcsNTNDMTIuNjQxLDUzLDEsNDEuMzU5LDEsMjd2MEMxLDEyLjY0MSwxMi42NDEsMSwyNywxaDBjMTQuMzU5LDAsMjYsMTEuNjQxLDI2LDI2djAKCQkJQzUzLDQxLjM1OSw0MS4zNTksNTMsMjcsNTN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzRGQkE2RjsiIGQ9Ik0yNyw1NEMxMi4xMTIsNTQsMCw0MS44ODgsMCwyN1MxMi4xMTIsMCwyNywwczI3LDEyLjExMiwyNywyN1M0MS44ODgsNTQsMjcsNTR6IE0yNywyCgkJCUMxMy4yMTUsMiwyLDEzLjIxNSwyLDI3czExLjIxNSwyNSwyNSwyNXMyNS0xMS4yMTUsMjUtMjVTNDAuNzg1LDIsMjcsMnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjIuMjk0LDQwYy0wLjI1NiwwLTAuNTEyLTAuMDk4LTAuNzA3LTAuMjkzYy0wLjM5MS0wLjM5MS0wLjM5MS0xLjAyMywwLTEuNDE0TDMyLjg4LDI3CgkJTDIxLjU4NywxNS43MDdjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMGwxMS40OTgsMTEuNDk4YzAuNjY3LDAuNjY3LDAuNjY3LDEuNzUxLDAsMi40MTgKCQlMMjMuMDAxLDM5LjcwN0MyMi44MDYsMzkuOTAyLDIyLjU1LDQwLDIyLjI5NCw0MHoiLz4KPC9nPgo8L3N2Zz4=") no-repeat right center;float:right;padding-right:20px;text-align:right} #storyheader img,img{border:none} #pagination a:hover,#userinfo a{color:#000;text-decoration:none} .floatleft,.topiccontent{float:left} .adcenter,.dlmenu,.message h1,.message h2,.simulator-information,div.downloadlist{text-align:center} .pop ul,.sideboxer ul{list-style-type:none;margin:0;padding:0} .leaveacomment,.storyintro, .storyintro p {font-size:16px;font-weight:700} .centerwrap{margin:auto;max-width:1180px;height:90px;position:relative;padding-left:10px;padding-right:10px;padding-top:5px;} #menu li:hover>div,:first-child+html #menu div div{display:block} #related-stories,.clear,div.clearboth{clear:both} .reldl li,.screenshots li,ul.tabs li{display:inline-block;list-style:none;margin:0;max-width: 50%;} .sideboxer li{border-bottom:thin dotted #666;padding:5px;margin:10px} .pop li{padding:5px} .pop a,.reldl a{text-decoration:none} .reldl ul,.screenshots ul{margin:0;padding:0;text-align:center} #related-stories li{margin:10px 0} ul#benefits li { font-size: 12px; color: #666; line-height: 16px; position: relative; padding-bottom: 8px; padding-left: 10px; margin: 10px; margin-bottom: 20px; } ul#benefits li:before { content: ''; position: absolute; border-right: 3px solid #3ab54b; border-bottom: 3px solid #3ab54b; width: 10px; height: 10px; top: calc(50% - 4px); left: -20px; transform: translateY(-50%) rotate( -45deg ); } ul#benefits{margin:0 0 12px;padding:0;list-style-type:none} .pricing_box{border:1px solid #ccc;float:left;text-align:center;padding:0 0 20px;margin-left:-1px;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);-moz-box-shadow:0 2px 10px -4px rgba(0,0,0,.5);background:#fff} .pricing_box.radius-left{-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-bottom-left-radius:5px} .pricing_box.radius-right{-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-moz-border-bottom-right-radius:5px} .pricing_box .header{text-shadow:0 1px 1px #fff;border-bottom:1px solid #ccc;background:url(https://flyawaysimulation.com/themes/FlyAway/style/price.bg.png) repeat;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-top-right-radius:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-top-left-radius:5px;width:100%;height:68px} .pricing_box .header span{position:relative;top:20px;font-size:16px;font-weight:700;line-height:28px} .pricing_box .header span.info{position:relative;font-size:12px;font-weight:400;top:2px;display:block;color:gray} .pricing_box p{line-height:28px} .pricing_box ul{list-style:none;margin:0 0 15px!important;text-align:left;padding:0} .cols-2 .pricing_box{width:48.8%;margin-bottom:20px} .cols-3 .pricing_box{width:33%;margin-bottom:20px} .cols-4 .pricing_box{width:24.8%;font-size:1em} .cols-5 .pricing_box{width:19.5%;font-size:.9em} .pricing_box ul li{line-height:4em;padding-left:20px!important;margin-left:0;list-style-type:none!important} .pricing_box ul li.odd{background:#F9F9F9} .pricing_box ul li.even{background:#fff} .pricing_box strong{background:url(https://flyawaysimulation.com/themes/FlyAway/style/price.sprite.png) no-repeat 0 -9999px;height:12px;padding-left:20px;font-style:normal;color:gray} .pricing_box strong.no{background-position:0 0} .pricing_box strong.yes{background-position:0 -15px} .pricing_box strong.single{background-position:0 -30px} .pricing_box strong.unlim{background-position:0 -45px} .pricing_box strong.more{height:20px;width:20px;cursor:pointer;float:right;padding:0;margin:14px 14px 0 0} .pricing_box strong.nopad{padding:0} .pricing_box h3{margin:20px 0;font-size:22px;display:block} .pricing_box h3 em{font-size:12px;font-weight:400} .pricing_box p.button{height:40px;background:url(https://flyawaysimulation.com/themes/FlyAway/style/price.readmore.png) no-repeat left 0;float:none} .pricing_box p.button a{font-size:16px;font-weight:700;line-height:40px;background:url(https://flyawaysimulation.com/themes/FlyAway/style/price.readmore.png) no-repeat right -40px;padding:0 40px} .pricing_box p.button:hover{background-position:left -80px} .pricing_box p.button a:hover{background-position:right -120px} .pricing_box.large{position:relative;z-index:9;margin-top:-30px;-moz-box-shadow:0 1px 10px #cbcbcb;-webkit-box-shadow:0 1px 10px #cbcbcb;box-shadow:0 1px 10px #cbcbcb;padding:0 0 40px;border-radius:5px} .pricing_box.large .header{color:#303E0E;text-shadow:0 1px 0 #C7DD90;height:88px;background:url(https://flyawaysimulation.com/themes/FlyAway/style/price.bg.signup.png) repeat;border-bottom:1px solid #b2d850} .pricing_box.large .header span{top:30px} .pricing_box.large .header span.info{top:14px;color:#576e1f;text-shadow:none} .pricing_box.large p.button{background-position:left -160px} .pricing_box.large p.button a{background-position:right -200px;color:#303E0E;text-shadow:0 1px 0 #C7DD90} .pricing_box.large p.button:hover{background-position:left -240px} .pricing_box.large p.button a:hover{background-position:right -280px} p.button{margin:0 20px 0 0;padding:0;display:inline-block} p.button a{float:left;line-height:32px;*line-height:28px;margin:0 -20px 0 0!important;padding:0 20px;height:100%;border:none;cursor:pointer;color:#3f4950;font-size:12px;text-shadow:0 1px 0 #fff;text-decoration:none} p.button a:hover{text-decoration:none} .cssmenu{margin:0;background:#919191;line-height:100%;width:auto;clear:both;height:46px} .cssmenu ul{margin:auto;max-width:1180px;padding:0 6px} .cssmenu li{margin:0 5px;float:left;position:relative;list-style:none;line-height:46px;text-transform:uppercase} .cssmenu a,.cssmenu span.parent{font-weight:700;color:#FFF;text-decoration:none;display:block;padding:0 20px;margin:0;cursor:pointer;height:46px} .cssmenu a:hover{background:#000;color:#fff} .cssmenu .active a,.cssmenu li:hover>a,.cssmenu li:hover>span.parent{background:#5e5e5e} .cssmenu li:hover li a,.cssmenu ul ul li:hover a{border:none;color:#fff} .cssmenu ul ul a:hover{background:#8f8f8f;color:#fff!important} .cssmenu li:hover>ul{display:block} .cssmenu ul ul{z-index:1000;display:none;margin:0;padding:0;width:270px;position:absolute;top:46px;left:0;background:#5e5e5e} .cssmenu ul ul ul{z-index:1000;display:none;margin:0;padding:0;width:185px;position:absolute;top:0;left:185px;background:#5e5e5e} .cssmenu ul ul li{float:none;margin:0} .cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0} * html .cssmenu ul{height:1%} .show-menu{margin:0;background:#919191;line-height:100%;font:400 12px Arial,Helvetica,sans-serif;width:auto;clear:both;display:none;padding:10px 0;text-align:left} .hamburger { width: 40px; height: 40px; display: inline-block; margin-left: 20px; color: white; font-size: 30px; line-height: 40px; } input#show-menu[type=checkbox]{display:none} input[type=checkbox]:checked#show-menu~.cssmenu{display:block} .authorbyline{ width: 20px; height: 20px; border-radius: 50%; border: 1px solid white!important; } .articleinfo a{color: white;text-decoration: none;} .articleinfo img {position: relative; top: 5px;} #addoninfo { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; padding: 10px; margin-top: 30px; margin-bottom: 20px; } #addoninfo p { margin:0px; } #storyheaderarticle { border-radius: 0px 0px 5px 0px; background-size: cover; background-position: center; border-bottom: none; overflow: hidden; position: relative; margin-left: -10px; } #storyheaderarticle h1{margin-bottom:2px;margin-top:0px} #storyheaderarticle img,img{border:none} .topheader { /* position: absolute; */ left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 40%); z-index: 1; padding: 8px; color: #FFF; /* text-align: center; */ color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgb(255 255 255 / 10%); } .topheaderinfo { /* position: absolute; */ left: 0; right: 0; bottom: 0; padding: 10px; } #storyheaderarticle > .topheader h1, #storyheaderarticle > .topheader div, #storyheaderarticle > .topheader span { color: white; /* color: rgba(0,0,0,0.6); */ text-shadow: 1px 3px 3px rgb(0 0 0 / 34%); } .jumpspan { display: inline-block; height: 15px; width: 15px; margin-right: 3px; background-size: contain; float:left; } .jumpspan img { height: 15px; width: 15px; } .dlcommentstop { background: url("https://flyawaysimulation.com/images/svg/svgsprite-1.8.svg#comments") no-repeat; } .mainstory { max-width: 700px; margin-left: auto; margin-right: auto; color:#444; } #storycontent > div.story > .mainstory p, #storycontent > div.story > .mainstory li, #storycontent > div.story > .mainstory dl { font-size: 17px; line-height: 1.9; } @media only screen and (max-width:767px) { #storycontent > div.story > .mainstory p, #storycontent > div.story > .mainstory li, #storycontent > div.story > .mainstory dl { font-size: 16px; line-height: 1.9; } } #storycontent > div.story > .mainstory img { border-radius:5px; } #storycontent > div.story > .mainstory > p:first-child:first-letter { color: #919191; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; } #storycontent > div.story > .mainstory > p:first-child > img:first-child { float:left; } @media screen and (max-width:991px){ #storyheaderarticle { margin-right:-10px; border-radius: 0px; } } @media screen and (max-width :935px){.cssmenu a,.cssmenu span.parent{padding:0 10px;font-size:11px} .plusbadge{ float: none; font-size: 18px; display: block; position: relative; } .searchicon, .searchicon img { width:20px!important; height:20px!important; } h1 {font-size:26px} #storycontent h2 {font-size:20px} #userlinks{position:absolute;top:60px;right:0;line-height:36px;} } @media screen and (max-width :700px){.centerwrap a{width:100%;text-align:center} .hotbox{float:none;width:auto} .centerwrap{ height:60px; } .faslogo{ width:auto;height:50px;max-width:none; } .plusbadge{ float: none; font-size: 16px; position: relative; display: block; } .flexslider .slides img{width:auto!important;} .cssmenu{position:static;display:none;height:auto} .cssmenu a,.cssmenu ul{padding:0} .cssmenu li{text-align:center;padding:0;margin:0} .cssmenu li a,.cssmenu ul li,.cssmenu ul ul{width:100%} .show-menu{display: block; padding: 0px; height: 40px;} #userlinks{ position: absolute; top: 60px; right: 0;} .searchicon{margin:auto;margin-bottom:10px;} a.ctabutton{padding:0 5px;font-size:11px;font-size:2vw} .probadge {bottom:100%;} } .additional img {max-width:45%!important} .additional a, #flightsimtopimages a {cursor:zoom-in;} .displayscreenshots, .installinstructions { margin-top: 20px; margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; background: #f7f7f7; border-radius: 5px; overflow: auto; clear:both; } .displayscreenshots h2, .installinstructions h2 { text-align: center; color: #656565; margin-top:10px!important; } .additional{width:100%;margin:auto;text-align:center} .additional img{margin:5px!important;width:150px;height:100px} label.error{float:none;color:red;padding-left:.5em;vertical-align:top} .sortem{ clear: both; text-align: right; background: #EEE; width: 100%; border: 1px solid #d2d2d2; border-radius: 5px; margin-top: 10px; color: #656565; } .dltype{display:inline-block;font-weight:700;padding:2px 5px} .dltypesmall{display:inline-block;font-weight:700;padding:5px 0;float:right;width:150px;font-size:10px;text-align:center} .repaint{background-color:#297A75;color:#fff} .basemodel{background-color:#14853C;color:#fff} .paywarerepaint{background-color:#F90;color:#000} .patch{background-color:#09F;color:#000} .paintkit{background-color:#CCC;color:#000} .probadge { background-image: url(https://flyawaysimulation.com/images/assets/pro-logo.png); background-image: -webkit-image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-image: image-set( url(https://flyawaysimulation.com/images/assets/pro-logo.png) 1x, url(https://flyawaysimulation.com/images/assets/pro-logo@2x.png) 2x ); background-repeat:no-repeat;background-size:contain;width:80px;height:20px;position:relative;bottom:120%;left:25% } .promember { background-image: url(https://flyawaysimulation.com/images/pro-logo.png); background-repeat: no-repeat; background-size: contain; width: 80px; height: 20px; float: right; margin-top:5px; clear:both; position: relative; top: -20px; } .disclaimercomments { color: #676767; width: 90%; margin: auto; margin-bottom: 30px; margin-top: 30px; font-style:italic; } button.dlbutton,button.dlbutton:HOVER{clear:both;border:none;text-shadow:none;background-image:url(https://flyawaysimulation.com/themes/FlyAway/style/dlb.png);color:#5E5E5E;cursor:pointer;display:inline-block;font:25px Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;padding:3px 10px;margin:8px;width:243px;height:62px;padding-left:30px} button.dlbutton span.smalldl{display:block;font-size:14px} .language{float:right;margin:5px} .language p{color:#636363;font-weight:400;font-family:Arial,Helmet,Freesans,sans-serif;font-size:18px;margin:0} .error{font-weight:700;color:#C00!important} .valid{color:#060!important} #expand{overflow:hidden;position:relative} #gradient{display:none;width:100%;height:35px;background:url(https://flyawaysimulation.com/themes/FlyAway/style/bg-gradient.png) repeat-x;position:absolute;bottom:0;left:0} .searchicon{height:30px;width:30px;vertical-align:middle;} .searchicon img { width:30px; height:30px; } #sitesearch{text-align:center;background:#f5f5f5;padding:10px;display:none;position:absolute;z-index:100;border:1px solid #E2E2E2;left:0;right:0} #sitesearch div{max-width:1180px;margin:auto} .search input[type=text], .search input[type=search]{background:url(https://flyawaysimulation.com/themes/FlyAway/style/search-white-new.png) no-repeat 10px 6px #fcfcfc;padding:6px 15px 6px 35px} .optiondl{width:85%} .responsivevideo{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:10px;clear:both} #mediaplayer,#mediaplayer_wrapper,.responsivevideo iframe{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important} @media screen and (max-width:991px){.openleft{float:none;width:100%;padding:5px;margin:0;min-height:0;padding-top:0px;} .rightbox{float:none;margin:auto;width:98%;position:relative;padding-top:80px;} .boxhome{float:none;width:80%;margin:auto} #intro{float:none;width:100%} .homedownloads{height:auto} .boxhome{display:none} .homeslider{padding-right:0!important;width:auto;height:auto!important} #hometop{min-height:0!important} .sideboxer{text-align:center} .sideboxer table{margin:auto} .responsiveclear{width:auto!important;clear:both!important;float:none!important} .hide{display:none}} .homeslider{padding-right:335px;height:380px} .flex-container a:active,.flex-container a:focus,.flexslider a:active,.flexslider a:focus{outline:0} .flex-control-nav,.flex-direction-nav,.slides{margin:0;padding:0;list-style:none;overflow:hidden} @font-face{font-family:flexslider-icon;src:url(fonts/flexslider-icon.eot);src:url(fonts/flexslider-icon.eot?#iefix) format('embedded-opentype'),url(fonts/flexslider-icon.woff) format('woff'),url(fonts/flexslider-icon.ttf) format('truetype'),url(fonts/flexslider-icon.svg#flexslider-icon) format('svg');font-weight:400;font-style:normal} .flexslider{padding:0} .flexslider .slides>li{display:none;-webkit-backface-visibility:hidden;min-height:340px} .flexslider .slides img{width:100%;display:block;min-height:340px;max-width:none;} .flex-pauseplay span{text-transform:capitalize} .slides:after{content:"\0020";display:block;clear:both;visibility:hidden;line-height:0;height:0} html[xmlns] .slides{display:block} * html .slides{height:1%} .no-js .slides>li:first-child{display:block} .flexslider{margin:0 0 10px;background:#fff;position:relative;zoom:1} .flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease} .loading .flex-viewport{max-height:300px} .flexslider .slides{zoom:1} .carousel li{margin-right:5px} .flex-direction-nav{*height:0} .flex-direction-nav a{text-decoration:none;display:block;width:40px;height:45px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,.8);text-shadow:1px 1px 0 rgba(255,255,255,.3);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease} .flex-direction-nav .flex-prev{left:-50px} .flex-direction-nav .flex-next{right:-50px;text-align:right} .flexslider:hover .flex-prev{opacity:.7;left:10px} .flexslider:hover .flex-next{opacity:.7;right:10px} .flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1} .flex-direction-nav .flex-disabled{opacity:0!important;filter:alpha(opacity=0);cursor:default} .flex-direction-nav a:before{font-family:flexslider-icon;font-size:40px;display:inline-block;content:'\f001'} .flex-direction-nav a.flex-next:before{content:'\f002'} .flex-pauseplay a{display:block;width:20px;height:20px;position:absolute;bottom:5px;left:10px;opacity:.8;z-index:10;overflow:hidden;cursor:pointer;color:#000} .flex-pauseplay a:before{font-family:flexslider-icon;font-size:20px;display:inline-block;content:'\f004'} .flex-pauseplay a:hover{opacity:1} .flex-pauseplay a.flex-play:before{content:'\f003'} .flex-control-nav{width:100%;text-align:center;margin-top:15px} .flex-control-nav li{margin:0 6px;display:inline-block;zoom:1;*display:inline} .flex-control-paging li a{width:11px;height:11px;display:block;background:#666;background:rgba(0,0,0,.5);cursor:pointer;text-indent:-9999px;-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.3);-o-box-shadow:inset 0 0 3px rgba(0,0,0,.3);box-shadow:inset 0 0 3px rgba(0,0,0,.3)} .flex-control-paging li a:hover{background:#333;background:rgba(0,0,0,.7)} .flex-control-paging li a.flex-active{background:#000;background:rgba(0,0,0,.9);cursor:default} .flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden} .flex-control-thumbs li{width:25%;float:left;margin:0} .flex-control-thumbs img{width:100%;display:block;opacity:.7;cursor:pointer} .flex-control-thumbs img:hover{opacity:1} .flex-control-thumbs .flex-active{opacity:1;cursor:default} @media screen and (max-width:860px){.flex-direction-nav .flex-prev{opacity:1;left:10px} .flex-direction-nav .flex-next{opacity:1;right:10px}} .flexslider .slides li{position:relative} .flex-caption{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1;padding:5px;color:#FFF} .flex-caption h2{color:#FFF;text-shadow:none;font-size:16px} .flex-caption p{margin:2px 0} .flexslider a{font-weight:400} .play{background:url(https://flyawaysimulation.com/themes/FlyAway/style/play_overlay.png) center center no-repeat;height:100%;width:100%;position:absolute;top:0;right:0;z-index:10} .playcontainer{position:relative;display:inline-block} .imagegall .playcontainer{float:left} #comments h2{padding:10px 15px 10px 10px;display:inline;color:#FFF;background:#737373;font-size:14px} .commentheader{background:#f5f5f5;height:36px;line-height:36px;border-bottom:3px solid #737373} .commentheader a{margin:0 10px;text-transform:uppercase} .commentimage { float: right; width: 80px; height: 80px; border-radius: 50%!important; display: block; /* Light mode base */ background-color: #f3f3f3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), /* subtle light ring */ 0 4px 10px rgba(0, 0, 0, 0.25); /* soft drop shadow */ object-fit: cover; transition: box-shadow 0.25s ease, background-color 0.25s ease, filter 0.25s ease, transform 0.15s ease; } /* Dark mode: soften light halo, add slight glow and boost contrast */ html[data-theme="dark"] .commentimage { background-color: #05070a; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), /* soft subtle ring */ 0 10px 25px rgba(0, 0, 0, 0.9); /* deeper shadow for depth */ filter: brightness(1.12) contrast(1.08) saturate(1.05); } /* Optional: hover polish on both themes */ .commentimage:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .commentimage:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 12px 28px rgba(0, 0, 0, 0.95); } /* PRO users: highlight avatar with a ring */ .commenttitlepro .commentimage { /* Inherit base avatar styles, just enhance */ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), /* inner light ring */ 0 0 0 4px #ffb300, /* gold ring */ 0 6px 16px rgba(0, 0, 0, 0.45); /* soft drop shadow */ transform: translateY(0); /* ensure baseline */ } /* Dark mode: slightly stronger ring + glow */ html[data-theme="dark"] .commenttitlepro .commentimage { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9), /* inner dark ring */ 0 0 0 4px #ffcc4d, /* warmer gold ring */ 0 10px 26px rgba(0, 0, 0, 0.9); /* deeper shadow */ filter: brightness(1.15) contrast(1.1) saturate(1.05); } .dlfree{width:100%;text-align:center;margin:5px;text-transform:uppercase;font-style:italic} .dlfree a{color:#d72121;text-decoration:none} .dlimageright{height:110px;width:150px;position:relative;display:inline-block;float:right;} .dlimageright span{position:absolute;bottom:0;right:0;border-radius: 0px 0px 5px 5px;} .interaction{float:right;} .interaction a{color:#000;font-weight:normal} .interaction span.commentcount { display: inline-block; height: 20px; line-height: 15px; width: auto; float: none; background-repeat: no-repeat;} .interaction span.readcount {display:inline-block;height:20px;line-height:19px;width:45px;padding-left:25px;background:url(https://flyawaysimulation.com/themes/FlyAway/style/views.png) left no-repeat;margin:5px} #socialnetworks { margin:15px; text-align:center; } .iconso { height: 50px; width: 50px; padding:10px; border-radius:5px; } .iconso { fill: #fff; } #twitterhome { background:rgba(33,184,216,0.75); } #facebookhome { background:rgba(51,91,151,0.75); } #youtubehome { background:rgba(255,0,0,0.75); } #youtubehome:HOVER { background:rgba(255,0,0,1.00); } #facebookhome:HOVER { background:rgba(51,91,151,1.00); } #twitterhome:HOVER { background:rgba(33,184,216,1.00); } #socialnetworkshome { margin:15px; text-align:center; margin-top:60px; margin-bottom:60px; } div#socialshare{ margin-top: 10px; width: 80%; margin-left: auto; margin-right: auto; } #socialshare div { float: left; text-align: center; width:33.3%; font-size:14px; height:35px; cursor:pointer; padding-top:6px; color:white; font-weight:bold; } #totalshares{padding-top:10px;text-align:center;} #google { background:rgba(220,73,57,0.75); } #twitter { background:rgba(33,184,216,0.75); } #facebook { background:rgba(51,91,151,0.75); } #google:HOVER { background:rgba(220,73,57,1.00); } #facebook:HOVER { background:rgba(51,91,151,1.00); } #twitter:HOVER { background:rgba(33,184,216,1.00); } .icon { height: 30px; width: 30px; } .icon { fill: #fff; } .newdlbutton { border:none; background: #14853C; color: white; text-shadow:none; font-size:20px; font-weight:100; width:180px; clear:both; margin-top: 10px; } .newdlbutton:HOVER, .newdlbutton:active, .newdlbutton:focus { background: #14853C; border:none; text-shadow:none; box-shadow:none; -webkit-box-shadow:none; outline:0; } .newdlbutton span { display:block; font-size:12px; } #flightsimtopimages { display: table; table-layout: fixed; width: 100%; border-spacing:10px; text-align:center; } #flightsimtopimages div, #flightsimtopimages a { display:table-cell; } #flightsimtopimages img { border-radius:5px; } #addondescription { margin-top:10px; border: 1px solid #ccc; padding: 0.5em; background: #f7f7f7; border-radius:5px; overflow:auto; } #addondescription dl { } #addondescription dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; } #addondescription dt::after { content: ":"; } #addondescription dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } .dldefs { display:table-cell; word-break: break-word; } .dlratingnew { text-align:center; display:table-cell; width:20%; vertical-align:middle; } .dlratingnew img { max-width:200px; } .dlratingnew p { font-size:10px; } .dlratingnew>.interaction { position:relative; width:100px; margin:10px auto 10px auto; float:none; } .newtype{ display: inline-block; padding: 2px 5px; border-radius:5px; font-size:10px; } .newscreenshots { cursor: pointer; } .fs2020-share {color:white; background:#007d00;padding:5px;border-radius:5px;} .fs2020-share a {color:white;} .dl-inline dd { display: inline; margin-left: 0; margin-right:20px; } .dl-inline dt { display:inline; color: dimgrey; } .dl-inline dt:after { content: ":"; } @media screen and (max-width :500px){ .dlratingnew { width:100%; text-align:center; display:block; } .dlratingnew { clear:both; float:none; margin:auto; margin-bottom:20px; } } .popularicon { display: inline-block; height: 12px; width: 12px; margin: 0px 5px; background-size: contain; } .popularicon img { height:12px; width:12px; } .jumpspan { display: inline-block; height: 15px; width: 15px; margin-right: 3px; background-size: contain; float:left; } .jumpspan img { width:15px; height:15px; } .additional img { border-radius:5px; } .dlratingnew>.interaction span.commentcount { width:auto; } .jumpmenu { text-align:center; } .jumpmenu div { display:inline-block; margin: 10px; } .jumpmenu a { color:#525252; text-decoration: none; } #video {margin-top:20px;} #video video {border-radius:5px;} .backtotop { text-align: center; clear: both; background: #757575; display: block; margin: auto; margin-top: 50px; margin-bottom:50px; color: white; padding: 5px; border-radius: 5px; width: 90px; } .backtotop a { color: white; text-decoration: none; } .modcopyright { margin-top: 10px; padding: 10px; overflow: hidden; text-align: center; } .modcopyright p {font-size:12px!important;color:#717171;margin:0px;margin-bottom:0px!important;} .modcopyright a {text-decoration: none;} /* Light mode (default) */ #filecontents { margin-top: 10px; border: 1px solid #ccc; padding: 10px; background: #f7f7f7; border-radius: 5px; text-align: center; overflow: auto; } .filecontents { clear: both; } /* Dark mode */ html[data-theme="dark"] #filecontents { border: 1px solid #444; background: #151619; color: #e0e0e0; } html[data-theme="dark"] .filecontents { clear: both; } .filecontents{display:none;} button.viewthem, button.viewthem:focus, button.viewthem:active, button.viewthem:hover {border: none; background: #14853C; color: white; text-shadow: none; font-size: 20px; font-weight: 100; border:none; text-shadow:none; text-transform:none; box-shadow:none; -webkit-box-shadow:none; outline:0; clear: both;margin-left:10px;margin-right:10px;} p.viewthem {cursor: auto;margin-top:8px;margin-bottom:0px!important;} .footerlinks { padding: 25px 0 25px; overflow:auto; } .footercontainer { margin: auto; max-width: 1180px; padding-left: 10px; padding-right: 10px; padding-top: 5px; } .footerlogo {float:left;margin:10px} .footerlinks a { color: #6d6d6d; text-decoration: none; } .footerbuffer { height:50px; } .footerlist { float:left; list-style: none; margin:10px 0 0; } .footerlist li { display: inline-block; padding: 0; margin: 10px; } .footercopyright { float: right; color: #6d6d6d; font-size: 12px; margin:10px 0 0; } .btt {clear:both;text-align:center;padding-top:40px;} .btt img { width:16px; height:16px; } @media screen and (max-width :920px){ .footerlogo{float:none;text-align:center} .footerlist{padding:0px;float:none;text-align:center} .footercopyright{float:none;text-align:center;} } .searchheader {font-size:16px;font-weight:700;} .procomment { width:80px; height:20px; } .dotdbox { text-align: center; max-width: 300px; margin: auto; } .dotdbox img {border-radius:5px;} .featdlside { display:inline-block;width:90%;height:auto;margin:10px;position:relative;border-radius:5px;overflow:hidden; } .featdlside a {text-decoration: none;color:white;display:block;font-weight: normal;} .featdlside h4 {color:white;margin:0px} .featdlside h3 {color:white;margin:0px} .featdlside img {display:block;width:100%;height:auto} .dlinfo {color:darkgray;font-size:12px;} .dotdbox p { color: #6d6d6d; font-size: 15px;margin-bottom:0px} /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; cursor: zoom-out!important; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('https://flyawaysimulation.com/themes/FlyAway/style/fancybox_sprite.png')!important; } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('https://flyawaysimulation.com/themes/FlyAway/style/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('https://flyawaysimulation.com/themes/FlyAway/style/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('https://flyawaysimulation.com/themes/FlyAway/style/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('https://flyawaysimulation.com/themes/FlyAway/style/fancybox_sprite@2x.png')!important; background-size: 44px 152px!important; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('https://flyawaysimulation.com/themes/FlyAway/style/fancybox_loading@2x.gif')!important; background-size: 24px 24px!important; /*The size of the normal image, half the size of the hi-res image*/ } } @media screen and (max-width :450px){ #storyheader > .dltype { width: 70px; font-size: 10px; } } @media screen and (max-width :400px){ #dldescription img { height: auto!important; clear: both; margin: auto; width: 80%!important; float: none!important; display: block; margin-bottom: 10px; } @media screen and (max-width: 400px) { #storycontent > div.story > .mainstory img { height: auto; clear: both; margin: auto; float: none!important; display: block; margin-bottom: 10px; } } div.figure { clear: none; float: none; margin: 0px; overflow: auto; padding: 0px; width: auto; } } @media screen and (max-width :415px){ #breadcrumbs li a { font-size:9px; } } .downloadflex {display: flex;flex-wrap: wrap;} .downloadflex div { flex: 100%; margin: 1%; border-radius: 5px; border: 1px solid #E2E2E2; overflow: hidden; color: #333; padding: 10px; max-height: 200px; } .dlimageright { height: 200px; width: 200px; position: relative; display: block; float: right; margin-right: -10px; margin-top: -16px; margin-bottom: -11px; margin-left:5px; } .dlimageright span.dltypesmall { width:100% } .downloadflex div.hdmesh { flex: 42%; margin: 1%; border-radius: 5px; border: 1px solid #E2E2E2; overflow: hidden; color: #333; padding: 10px; max-height: initial; } .downloadflex div.hdmesh img { height: 110px; width: 150px; position: relative; display: inline-block; float: right; top: 0px; right: -7px; } .downloadflex div:target {background-color: #ffffbe;} .downloadflex a { height: 100%; display: block; text-decoration: none; font-weight:normal; color: #333; } .downloadflex div.hdmesh {padding:2%;width:43.7%;} .downloadflex div:hover {background-color: #f3f3f3;} .downloadflex img {border-radius: 5px; width: 200px; height: 200px; object-fit:cover; } .dl-inline dt {display:inline-block;margin-top:10px;} .dl-inline dt:after { content:""; } .dl-inline dd { font-weight:bold; } .dl-inline svg { width: 20px; height: 20px; position: relative; top: 5px;} .downloadflex dl.dl-inline img { width: 20px; height: 20px; position: relative; top: 5px; right:0px;} @media screen and (max-width :500px){ .downloadflex div { width: 100%; margin: 2%; max-height: initial; } .dlimageright { float: none; width: 100%; margin: 0px; } .downloadflex img { width: 100%; max-height: 200px; } .dlindeximages { width: 20px!important; height: 20px!important; position: relative; top: 5px;} .downloadflex div.hdmesh { flex: 100%; padding: 2%; } .downloadflex div.hdmesh .dlimageright { height: 110px; width: 150px; position: relative; display: inline-block; float: right; } } .downloadscat { border-radius:5px; border: 1px solid #d2d2d2; margin-bottom:50px; } .downloadscat h2, .downloadscat h2 a:link, .downloadscat h2 a:visited { font-size: 32px; color: #4c4c4c; } .downloadscat h3, .downloadscat h3 a:link, .downloadscat h3 a:visited { font-size: 22px; color: #6b6b6b; margin-bottom: 20px; margin-top: 20px; text-align: center; text-transform: capitalize; } .indexflex { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .indexfeatdl { display: inline-block; width: 300px; margin: 10px; position: relative; border-radius: 5px; overflow: hidden; } .indexfeatdl img { display: block; width: 300px; height: auto; } .featdl-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgb(84 84 84); z-index: 1; padding: 5px; color: #FFF; text-align: center; } .dlstats { position: absolute; top: 0; right: 0; color: #FFF; text-shadow: 0px 0px 20px #000; } .dlstats svg { width:25px; height:25px; background-color:white; } .ctadlindex { margin-top: 40px; background: #14853C; color: white!important; text-shadow: none; font-size: 20px; font-weight: 100; clear: both; border-radius: 5px; padding: 10px; text-decoration: none!important; position: relative; line-height: 20px; text-align: center; display: block; width: 80%; margin: auto; margin-top: 40px; margin-bottom: 20px; } h3.mainindex {text-align: left;} .uploadaddon2 { border: none; color: white; text-shadow: none; font-size: 20px; font-weight: 100; clear: both; margin-top: 10px; padding: 5px; border-radius: 5px; margin-top:0px; margin:0px; padding:0px; } .uploadaddonmessage2 { float: left; margin-right: 10px; line-height: 20px;} .uploadaddon2 svg { width: 15px; height: 15px; } .uploadaddon2 a{ text-decoration:none; color:white; display:block; } /* ========== Dark mode (attribute-driven) ========== / / Toggling: document.documentElement.setAttribute('data-theme','dark'); */ html[data-theme="dark"]{ color-scheme: dark; /* Dark palette tokens (from your dark CSS) */ --bg: #0e0e0f; --navbar: #0f0f10; --surface-1: #121315; --surface-2: #151619; --surface-3: #1a1b1f; --card: #17181c; --muted: #9aa0a6; --text: #e5e7eb; --text-strong: #f3f4f6; --text-dim: #c7c9ce; --heading: #f2f2f3; --border: #232428; --border-2: #2a2d32; --link: #8ab4ff; --link-hover: #b8d3ff; --accent: #3b82f6; --accent-600: #2563eb; --accent-700: #1d4ed8; --success: #22c55e; --success-700: #16a34a; --warning: #d4a72c; --danger: #ef4444; --shadow-1: 0 2px 8px rgba(0,0,0,.5); --shadow-2: 0 6px 12px rgba(0,0,0,.55); --inset: inset 0 1px 2px rgba(0,0,0,.35); } /* Core text + background */ html[data-theme="dark"] body{ background-color: var(--bg) !important; background-position: top; background-repeat: repeat-x; color: var(--text); } /* Links */ html[data-theme="dark"] a:hover, html[data-theme="dark"] a:active, html[data-theme="dark"] a:link, html[data-theme="dark"] a:visited{ color:var(--link); text-decoration:none; font-weight:700; } html[data-theme="dark"] a:hover{ color:var(--link-hover); } html[data-theme="dark"] .story a:hover, html[data-theme="dark"] .more-block a:hover, html[data-theme="dark"] #dldescription a:hover, html[data-theme="dark"] .postbody a:hover{ text-decoration:underline; } html[data-theme="dark"] .story a, html[data-theme="dark"] .more-block a, html[data-theme="dark"] #dldescription a, html[data-theme="dark"] .postbody a{ color:var(--link) !important; } /* Inputs */ html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=search], html[data-theme="dark"] textarea{ background:#111216; border:1px solid var(--border-2); box-shadow:var(--inset); color:var(--text); text-shadow:none; } html[data-theme="dark"] input[type=password]::placeholder, html[data-theme="dark"] input[type=text]::placeholder, html[data-theme="dark"] input[type=email]::placeholder, html[data-theme="dark"] input[type=search]::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--muted); } html[data-theme="dark"] input[type=password]:focus, html[data-theme="dark"] input[type=text]:focus, html[data-theme="dark"] input[type=email]:focus, html[data-theme="dark"] input[type=search]:focus, html[data-theme="dark"] textarea:focus{ box-shadow:0 0 0 3px rgba(37,99,235,.35); border:1px solid var(--accent-600); } /* Buttons */ html[data-theme="dark"] input[type=button], html[data-theme="dark"] input[type=submit], html[data-theme="dark"] button{ background-color:#2a2f39; background-image:linear-gradient(to bottom,#2a2f39,#1f2430); border:1px solid #353b45; border-bottom:1px solid #2d323c; color:var(--text); text-shadow:none; } html[data-theme="dark"] input[type=button]:hover, html[data-theme="dark"] input[type=submit]:hover, html[data-theme="dark"] button:hover{ background-color:#2c3440; background-image:linear-gradient(to bottom,#2c3440,#232a36); border:1px solid #3a4150; border-bottom:1px solid #333a47; } html[data-theme="dark"] input[type=button]:active, html[data-theme="dark"] input[type=submit]:active, html[data-theme="dark"] button:active{ border:1px solid #404652; border-bottom:1px solid #3a404c; box-shadow:inset 0 0 5px 2px #3c4350,0 1px 0 0 rgba(255,255,255,.02); } /* Layout containers, cards, surfaces */ html[data-theme="dark"] #wrap{ background:transparent; border:0; } html[data-theme="dark"] blockquote{ background:var(--surface-2); border-left:4px solid #343741; } html[data-theme="dark"] .homeboxnew{ color:var(--text); } html[data-theme="dark"] .newscontainer{ color:var(--text); } html[data-theme="dark"] .newsarticle{ background:var(--card); box-shadow:var(--shadow-1); color:var(--text)!important; border-bottom:none; } html[data-theme="dark"] .newsarticle:hover{ box-shadow:var(--shadow-2); } html[data-theme="dark"] .newsarticle h3{ color:var(--heading)!important; } html[data-theme="dark"] .meta{ color:var(--muted)!important; } html[data-theme="dark"] .topic-badge{ background:rgba(37,99,235,.15); color:#9ec1ff; } html[data-theme="dark"] .readtime{ color:#9ec1ff!important; } html[data-theme="dark"] .homeboxnew h2, html[data-theme="dark"] .hotnow h2, html[data-theme="dark"] .newflightsim h2, html[data-theme="dark"] .homeboxnew h2 a:link, html[data-theme="dark"] .homeboxnew h2 a:visited, html[data-theme="dark"] h2.newsh{ color:#c7cad1; } /* TOC box */ html[data-theme="dark"] nav.toc{ background:var(--surface-2); border:1px solid var(--border-2); color:var(--text); } html[data-theme="dark"] nav.toc>h2{ color:var(--heading); border-bottom:1px solid var(--border-2); } html[data-theme="dark"] nav.toc li::before{ color:var(--accent-600); } html[data-theme="dark"] nav.toc a{ color:var(--text)!important; } html[data-theme="dark"] nav.toc a:hover{ color:var(--link)!important; } /* Addon simulator cards */ html[data-theme="dark"] .addonsimulator{ background:var(--surface-2); border:1px solid var(--border-2); } html[data-theme="dark"] .addonsimulator h3, html[data-theme="dark"] .addonsimulator h3 a{ color:#c7cad1; } /* Pager */ html[data-theme="dark"] .article-pager a{ background:var(--card); box-shadow:var(--shadow-1); color:var(--text); } html[data-theme="dark"] .article-pager a:hover{ box-shadow:var(--shadow-2); } html[data-theme="dark"] .article-pager .dir{ color:var(--muted); } html[data-theme="dark"] .article-pager .title{ color:var(--heading); } /* Related grid */ html[data-theme="dark"] .rel-card { background: var(--card); box-shadow: var(--shadow-1); } html[data-theme="dark"] .rel-card:hover { box-shadow: var(--shadow-2); } html[data-theme="dark"] .rel-body h3 { color: var(--heading) !important; } html[data-theme="dark"] .rel-snippet { color: var(--text-dim); } html[data-theme="dark"] .related-downloads h2, html[data-theme="dark"] .related-downloads h2.rel-head { color: var(--heading) !important; border-bottom: 2px solid var(--border-2) !important; } /* GPS coordinates section */ html[data-theme="dark"] #unique-gps-coordinates{ background:var(--card); border:1px solid var(--border-2); } html[data-theme="dark"] #unique-gps-coordinates h2, html[data-theme="dark"] #unique-gps-coordinates h3{ color:var(--heading); } html[data-theme="dark"] #unique-gps-coordinates dt{ color:var(--text); } html[data-theme="dark"] #unique-gps-coordinates dd{ color:var(--text-dim); } html[data-theme="dark"] #unique-gps-coordinates p{ color:var(--text); } html[data-theme="dark"] #unique-gps-coordinates small{ color:var(--muted); } html[data-theme="dark"] #unique-gps-coordinates .copy-button{ background-color:var(--accent-600); } html[data-theme="dark"] #unique-gps-coordinates .copy-button:hover{ background-color:var(--accent-700); } /* Pills/list items */ html[data-theme="dark"] .addonsimulator li{ background:#2f3136; color:#fff; } html[data-theme="dark"] .addonlogo{ border:1px solid #3a3d44; } /* Newsletter and info bands */ html[data-theme="dark"] .newslettersignup{ background:var(--surface-2)!important; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } html[data-theme="dark"] .newslettersignup h2{ color:var(--heading); } html[data-theme="dark"] .homeproinfo{ background:#463b22!important; color:var(--text); } /* Menu */ html[data-theme="dark"] .menu-container{ background:var(--navbar); border-bottom:1px solid var(--border); } html[data-theme="dark"] .logonew{ filter:brightness(0) invert(1) contrast(110%); -webkit-filter:brightness(0) invert(1) contrast(110%); } html[data-theme="dark"] .menu > ul > li a{ color:var(--text); } html[data-theme="dark"] li.mainmenu > a:hover{ box-shadow:inset 0 -3px 0 0 var(--text); } html[data-theme="dark"] .menu > ul > li > ul{ background:var(--navbar); border-top:1px solid var(--border); } html[data-theme="dark"] .menu > ul > li > ul > li a{ color:var(--muted); border-bottom:1px solid var(--border-2); } html[data-theme="dark"] .menu > ul > li > ul > li a:hover{ color:var(--link); } html[data-theme="dark"] .menu > ul > li > ul.normal-sub{ background:var(--surface-1); border:1px solid var(--border); } html[data-theme="dark"] .menu > ul > li a.signuplink{ background:#2C8A3B; color:#fff; } /* Mobile top nav (flyawaymenu) */ html[data-theme="dark"] #flyawaymenu{ background-color:var(--navbar); border-bottom:1px solid var(--border); } html[data-theme="dark"] .logo-img, html[data-theme="dark"] .logo-img-footer{ filter:brightness(0) invert(1) contrast(110%); -webkit-filter:brightness(0) invert(1) contrast(110%); } html[data-theme="dark"] #flyawaymenu nav, html[data-theme="dark"] #flyawaymenu nav ul{ background-color:#1d1f25; } html[data-theme="dark"] #flyawaymenu nav ul li a{ color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.35); background-color:#1d1f25; } html[data-theme="dark"] #flyawaymenu nav ul li a:hover{ color:#cfd6e2; } /* Filters */ html[data-theme="dark"] .powerfilter{ background-color:#2f3136; color:#fff; } html[data-theme="dark"] .filterselected{ background-color:var(--success); } /* Related addons */ html[data-theme="dark"] .relatedaddons h2{ background:var(--surface-2); border:1px solid var(--border-2); color:var(--heading); } html[data-theme="dark"] .relitemnewinternal{ background:var(--surface-1); border:1px solid var(--border); color:var(--text); } html[data-theme="dark"] .relitemnewinternal:hover{ background:#1f2126; } html[data-theme="dark"] .relitemnew span{ color:var(--muted); } html[data-theme="dark"] .relitemnewinternal h3{ color:var(--heading); } /* Story/article surfaces */ html[data-theme="dark"] .opentable, html[data-theme="dark"] .openleft, html[data-theme="dark"] .topicbox{ background:var(--surface-1); } html[data-theme="dark"] #storyheader{ border-bottom:1px solid var(--border); } html[data-theme="dark"] .gallerycontent{ color:var(--text); } html[data-theme="dark"] .datetime{ color:var(--muted); } /* Breadcrumbs */ html[data-theme="dark"] #breadcrumbs ul{ border-bottom:1px solid var(--border); } html[data-theme="dark"] #breadcrumbs li a{ background:#131316; color:#b5bbc4; } html[data-theme="dark"] #breadcrumbs li a::after{ border-left-color:#131316; } html[data-theme="dark"] #breadcrumbs li a::before{ border-left-color:var(--border); } html[data-theme="dark"] #breadcrumbs li a:hover{ background:#2b2d33; color:#fff; } html[data-theme="dark"] #breadcrumbs li a:hover:after{ border-left-color:#2b2d33 !important; } /* Comments */ html[data-theme="dark"] .commentheader{ background:#151619; border-bottom:3px solid #4b4f58; } html[data-theme="dark"] #comments h2{ background:#4b4f58; } html[data-theme="dark"] .dlcomments dd{ border-bottom:1px dotted #3a3f49; color:var(--text); } html[data-theme="dark"] .dlcommentsauthor, html[data-theme="dark"] .dlcommentsauthor a{ color:var(--text); } html[data-theme="dark"] .dlcommentsdate{ color:var(--muted); } /* Fancybox and media */ html[data-theme="dark"] .flexslider{ background:var(--surface-1); } html[data-theme="dark"] .flex-control-paging li a{ background:rgba(255,255,255,.2); box-shadow:inset 0 0 3px rgba(0,0,0,.5); } html[data-theme="dark"] .flex-control-paging li a:hover{ background:rgba(255,255,255,.35); } html[data-theme="dark"] .flex-control-paging li a.flex-active{ background:rgba(255,255,255,.5); } html[data-theme="dark"] .fancybox-skin{ background:#1a1b1f; color:#e5e7eb; } html[data-theme="dark"] pre{ background:var(--surface-3); color:var(--text); border:1px solid var(--border-2); } /* Addon description block */ html[data-theme="dark"] #addondescription{ background:var(--surface-2); border:1px solid var(--border-2); } html[data-theme="dark"] #addondescription dt{ color:var(--text); } html[data-theme="dark"] #addondescription dd{ color:var(--text-dim); } /* Small chips/pills */ html[data-theme="dark"] .newtype{ background:#2f3136; color:#fff; } /* Sorting, files, notices */ html[data-theme="dark"] .sortem{ background:#1a1b1f; border:1px solid var(--border-2); color:#c0c3cb; } html[data-theme="dark"] .downloadsinfo{ background:var(--surface-2); border:1px solid var(--border-2); } html[data-theme="dark"] .downloads-box{ border-bottom:1px solid var(--border-2); } html[data-theme="dark"] div.middle400{ background:var(--surface-2); border:1px solid var(--border-2); } /* Forms in story */ html[data-theme="dark"] #commentform span.allowed{ background:#1c1d22; border:1px dotted #3a3f49; color:#a7abb5; } /* Share/sidebar */ html[data-theme="dark"] #share{ background:var(--surface-1); } html[data-theme="dark"] ul.tabs{ border-bottom:thick solid #4b4f58; } html[data-theme="dark"] ul.tabs a{ color:#c0c4cd; text-shadow:none; } html[data-theme="dark"] ul.tabs a.current{ background:#4b4f58; color:#fff; } html[data-theme="dark"] .sideboxer a, html[data-theme="dark"] .sideboxer p{ color:#d4d7de; } /* Additional imagery boxes */ html[data-theme="dark"] .additional img{ border-radius:5px; } /* Download lists / flex */ html[data-theme="dark"] .downloadflex div{ background:var(--surface-1); border:1px solid var(--border-2); color:var(--text); } html[data-theme="dark"] .downloadflex div a{color:white;font-weight:normal} html[data-theme="dark"] .downloadflex div:hover{ background:#1f2126; } html[data-theme="dark"] .downloadflex div:target{ background:#1f2126; } /* Download categories */ html[data-theme="dark"] .downloadscat{ background:var(--surface-1); border:1px solid var(--border-2); } html[data-theme="dark"] .downloadscat h2, html[data-theme="dark"] .downloadscat h2 a{ color:#e0e2e6; } html[data-theme="dark"] .downloadscat h3, html[data-theme="dark"] .downloadscat h3 a{ color:#c7cad1; } /* Index featured tiles */ html[data-theme="dark"] .featdl-caption{ background:#23262d; } /* CTA buttons you already use (kept same color) */ html[data-theme="dark"] .ctagoprohome, html[data-theme="dark"] .newdlbutton, html[data-theme="dark"] button.viewthem{ background:#14853C; color:#fff; } /* Newsletter/footers */ html[data-theme="dark"] .footerlinks a{ color:#b7bcc5; } html[data-theme="dark"] .footercopyright{ color:#9aa0a6; } html[data-theme="dark"] .modcopyright p{ color:#a9aeb6 !important; } html[data-theme="dark"] .modcopyright a{ color:var(--link); } /* Breadcrumb blink highlight */ html[data-theme="dark"] #dependencies:target{ animation-name: blink; } @keyframes blink{ 0% { background: #1f3d2a; } 100% { background: none; } } /* Headlines/body text */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h1 a, html[data-theme="dark"] h2 a, html[data-theme="dark"] h3 a, html[data-theme="dark"] h4 a { color: var(--heading); } html[data-theme="dark"] #storycontent li, html[data-theme="dark"] #storycontent p, html[data-theme="dark"] .content p { color: var(--text); line-height: 22px; } /* Fix: ensure dark text on white overlay backgrounds in dark mode */ html[data-theme="dark"] div[style*="rgba(255, 255, 255"] h3, html[data-theme="dark"] div[style*="rgba(255,255,255"] h3 { color: #000 !important; } /* Back to top */ html[data-theme="dark"] .backtotop{ background:#2b2d33; color:#fff; } html[data-theme="dark"] .backtotop a{ color:#fff; } /* Assorted labels and icons */ html[data-theme="dark"] .secure{ color:var(--success); } html[data-theme="dark"] .error{ color:#f87171 !important; } html[data-theme="dark"] .valid{ color:#34d399 !important; } html[data-theme="dark"] .bigtext, html[data-theme="dark"] .bigtext a{ color:#9bd27c; } /* Search layer */ html[data-theme="dark"] #sitesearch{ background:#151619; border:1px solid var(--border); } html[data-theme="dark"] .search input[type=text], html[data-theme="dark"] .search input[type=search]{ background:#111216 url(https://flyawaysimulation.com/themes/FlyAway/style/search-white-new.png) no-repeat 10px 6px; color:var(--text); } /* “Add to end” pieces maintained: social, ratings, small utilities */ html[data-theme="dark"] .jumpmenu a{ color:#cfd6e2; } html[data-theme="dark"] .displayscreenshots, html[data-theme="dark"] .installinstructions{ background:var(--surface-2); border:1px solid var(--border-2); } html[data-theme="dark"] .displayscreenshots h2, html[data-theme="dark"] .installinstructions h2{ color:#c0c3cb; } html[data-theme="dark"] .dotdbox p{ color:#b7bcc5; } html[data-theme="dark"] .dlinfo{ color:#a9aeb6; } /* FlyAway Download Widget — Modern v10 (clean, compact, mobile-perfect) */ .faw-v10 { --text: #0b1020; --muted: #5a6573; --hairline: #e6e8ef; --pill-bg: #f4f6f9; --pill-bd: #e6e8ef; /* CTR-optimized CTA */ --cta: #1ED760; --cta-hover: #1ad157; --cta-press: #16b64c; --cta-text: #051b13; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif; line-height: 1.4; /* No horizontal overflow on small screens */ overflow-wrap: anywhere; word-break: break-word; } [data-theme="dark"] .faw-v10 { --text: #e8ecf4; --muted: #a6b0c3; --hairline: #22314a; --pill-bg: #0f1a2e; --pill-bd: #1d263b; --cta: #1ED760; --cta-hover: #18c957; --cta-press: #13b24b; --cta-text: #051b13; } .faw-v10 * { box-sizing: border-box; } /* Neutral links (no legacy blue) */ #fa-mod-download-widget.faw-v10 a { color: var(--text); text-decoration: none; } #fa-mod-download-widget.faw-v10 a:hover { text-decoration: underline; } /* Top row: meta (left) + CTA (right) */ .faw-v10 .faw-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(8px, 1.2vw, 16px); } @media (max-width: 720px) { .faw-v10 .faw-top { grid-template-columns: 1fr; } } /* Inline row with auto separators (no stray bullets) */ .faw-v10 .faw-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: clamp(13px, 2.8vw, 14px); } .faw-v10 .faw-inline .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); } .faw-v10 .faw-inline .item + .item::before { content: "•"; color: var(--muted); opacity: .6; margin: 0 2px; } .faw-v10 .muted { color: var(--muted); } /* Rating (keep original 5-star image) */ .faw-v10 .faw-stars-img { height: 18px; width: auto; max-width: 100%; display: inline-block; vertical-align: middle; } /* Country flag */ .faw-v10 .faw-flag { width: 16px; height: 16px; border-radius: 2px; object-fit: cover; display: inline-block; } /* Hot marker for popular files */ .faw-v10 .faw-emoji { font-size: 14px; line-height: 1; vertical-align: middle; } /* CTA (compact, high-CTR, mobile-safe) */ .faw-v10 .faw-cta { display: flex; align-items: center; justify-content: flex-end; max-width: 100%; } .faw-v10 .faw-cta form { margin: 0; width: 100%; } .faw-v10 .faw-btn, .faw-v10 .faw-cta form input[type="submit"], .faw-v10 .faw-cta form button[type="submit"], .faw-v10 .faw-cta a[href*="download"], .faw-v10 .faw-cta .button, .faw-v10 .faw-cta .btn { appearance: none; border: 0 !important; border-radius: 12px !important; cursor: pointer; padding: 10px 16px !important; min-height: 44px; min-width: 0 !important; max-width: 100% !important; font-weight: 900 !important; font-size: 16px !important; line-height: 1.15 !important; text-decoration: none !important; background: var(--cta) !important; color: var(--cta-text) !important; text-transform: none !important; letter-spacing: -.01em !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; transition: transform .05s ease, background-color .15s ease, filter .15s ease, box-shadow .15s ease; box-shadow: 0 6px 14px rgba(30, 215, 96, .18), inset 0 -2px 0 rgba(0,0,0,.10) !important; box-sizing: border-box !important; } @media (max-width: 720px) { .faw-v10 .faw-cta { justify-content: stretch; } .faw-v10 .faw-cta form, .faw-v10 .faw-cta .faw-btn, .faw-v10 .faw-cta form input[type="submit"], .faw-v10 .faw-cta form button[type="submit"], .faw-v10 .faw-cta a[href*="download"], .faw-v10 .faw-cta .button, .faw-v10 .faw-cta .btn { width: 100% !important; } } .faw-v10 .faw-btn:hover, .faw-v10 .faw-cta form input[type="submit"]:hover, .faw-v10 .faw-cta form button[type="submit"]:hover, .faw-v10 .faw-cta a[href*="download"]:hover, .faw-v10 .faw-cta .button:hover, .faw-v10 .faw-cta .btn:hover { background: var(--cta-hover) !important; filter: saturate(1.05); transform: translateY(-1px); } .faw-v10 .faw-btn:active, .faw-v10 .faw-cta form input[type="submit"]:active, .faw-v10 .faw-cta form button[type="submit"]:active, .faw-v10 .faw-cta a[href*="download"]:active, .faw-v10 .faw-cta .button:active, .faw-v10 .faw-cta .btn:active { background: var(--cta-press) !important; transform: translateY(0); box-shadow: 0 4px 10px rgba(30, 215, 96, .18), inset 0 2px 0 rgba(0,0,0,.12) !important; } .faw-v10 .faw-btn:focus-visible, .faw-v10 .faw-cta form input[type="submit"]:focus-visible, .faw-v10 .faw-cta form button[type="submit"]:focus-visible, .faw-v10 .faw-cta a[href*="download"]:focus-visible, .faw-v10 .faw-cta .button:focus-visible, .faw-v10 .faw-cta .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(30, 215, 96, .5), 0 8px 16px rgba(30, 215, 96, .22), inset 0 -2px 0 rgba(0,0,0,.10) !important; } /* Details — compact line */ .faw-v10 .faw-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); } .faw-v10 .faw-details ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: clamp(13px, 2.8vw, 14px); } .faw-v10 .faw-details li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .faw-v10 .label { color: var(--muted); } .faw-v10 .value { color: var(--text); font-weight: 600; min-width: 0; } .faw-v10 .truncate { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .faw-v10 .truncate { max-width: 24ch; } } /* Links — pills (kept) */ .faw-v10 .faw-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: clamp(13px, 2.8vw, 14px); } .faw-v10 .faw-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--pill-bd); border-radius: 999px; background: var(--pill-bg); color: var(--text); text-decoration: none; transition: background-color .15s ease, transform .05s ease, border-color .15s ease; max-width: 100%; } .faw-v10 .faw-links a:hover { transform: translateY(-1px); border-color: var(--hairline); } .faw-v10 .faw-links img { width: 16px; height: 16px; flex: 0 0 16px; } /* User status */ .faw-v10 .faw-status { margin-top: 8px; padding: 6px 10px; border-left: 3px solid transparent; font-weight: 600; color: var(--text); } .faw-v10 .faw-status.latest { border-left-color: #16a34a; color: #16a34a; } .faw-v10 .faw-status.outdated { border-left-color: #f59e0b; color: #f59e0b; } .faw-v10 .faw-status.never { border-left-color: var(--hairline); color: var(--muted); } /* Green tick sizing override (prevents random upscaling) */ .faw-v10 img[src$="greentick.svg"], .faw-v10 .faw-tick { width: 14px !important; height: 14px !important; vertical-align: -2px; } /* Scoped to the widget container to avoid global collisions */ #fa-mod-download-widget .faw-compat { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: stretch; vertical-align: middle; max-width: 100%; } #fa-mod-download-widget .faw-compat-pill { display: inline-flex; flex-wrap: wrap; /* allow label to wrap inside pill on narrow screens */ align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--pill-bg, #f3f5f8); border: 1px solid var(--pill-bd, #e6e8ef); color: var(--text, #0b1020); font-size: 14px; line-height: 1.2; max-width: 100%; overflow: hidden; /* keeps icon/text clipped within the pill */ } #fa-mod-download-widget .faw-compat-pill strong { font-weight: 800; } #fa-mod-download-widget .faw-compat-label { min-width: 0; flex: 1 1 auto; /* label can wrap; icon stays inside pill */ word-break: break-word; } #fa-mod-download-widget .faw-compat-icon { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; display: inline-block !important; vertical-align: -2px; flex: 0 0 14px; } /* Subtle state accents (optional) */ #fa-mod-download-widget .faw-compat-pill.is-ok { border-color: rgba(16, 185, 129, .35); } #fa-mod-download-widget .faw-compat-pill.is-no { border-color: rgba(239, 68, 68, .35); } /* Dark mode */ [data-theme="dark"] #fa-mod-download-widget .faw-compat-pill { background: #0f1a2e; border-color: #1d263b; color: #e8ecf4; } [data-theme="dark"] #fa-mod-download-widget .faw-compat-pill.is-ok { border-color: rgba(34, 197, 94, .45); } [data-theme="dark"] #fa-mod-download-widget .faw-compat-pill.is-no { border-color: rgba(239, 68, 68, .45); } /* ================================ FAW Unified CSS v1.8 - Preview/Featured: .faw-media - Gallery: #fawg-wrap - Universal Modal: .fawg-ov ================================ */ /* ===== PREVIEW/FEATURED (faw-media) ===== */ .faw-media { --text: #0b1020; --muted: #5a6573; --border: #e6e8ef; --surface: #f7f8fa; --accent: #1ED760; --main-h: auto; /* updated via JS for desktop */ color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif; display: grid; grid-template-columns: minmax(0, 1fr) 280px; /* desktop */ gap: 10px; align-items: start; margin-bottom:10px; margin-top:10px; } [data-theme="dark"] .faw-media { --text: #e8ecf4; --muted: #a6b0c3; --border: #1d263b; --surface: #0f1a2e; --accent: #1ED760; } /* Remove any global text-shadow inside preview area */ .faw-media button, .faw-media a { text-shadow: none !important; } /* Mobile: stack (feature first, thumbs under) */ @media (max-width: 900px) { .faw-media { grid-template-columns: 1fr; gap: 10px; } } /* Desktop: if only 1 item, remove side strip */ @media (min-width: 901px) { .faw-media.is-count-1 { grid-template-columns: 1fr; } .faw-media.is-count-1 .faw-media-strip { display: none !important; } } .faw-media-main { position: relative; border: 1px solid var(--border); border-radius: 10px; /* match gallery */ overflow: hidden; background: var(--surface); aspect-ratio: 16 / 9; } /* Make the whole main area look/feel like a zoomable image when it's an image */ .faw-media-main[data-provider="image"] { cursor: zoom-in; } /* Reset any button styling for the preview click target */ .faw-media-main .faw-media-open { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; display: block; border-radius: 0; cursor: inherit; /* inherits zoom-in from the parent */ } .faw-media-main .faw-media-open:focus { outline: none; } .faw-media-fit, .faw-media-main img, .faw-media-main video, .faw-media-main iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Play overlay */ .faw-media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 14px rgba(0,0,0,.25); cursor: pointer; } .faw-media-play:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .faw-media-play:hover { filter: brightness(1.08); } .faw-media-play:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(30,215,96,.45), 0 6px 14px rgba(0,0,0,.25); } /* Desktop side strip (vertical) */ .faw-media-strip { display: flex; flex-direction: column; gap: 8px; max-height: var(--main-h); overflow: auto; scrollbar-gutter: stable both-edges; } /* Desktop: 2 items: center vertically */ @media (min-width: 901px) { .faw-media.is-count-2 .faw-media-strip { justify-content: center; } } /* Desktop thumbs (match gallery borders) */ .faw-media-thumb { position: relative; display: block; width: 100%; /* fill 280px column */ aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 10px; /* match gallery */ overflow: hidden; background: var(--surface); cursor: pointer; /* changes main image only (no modal) */ } .faw-media-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Preview thumbs — neutralize global button styles to match gallery tiles */ .faw-media .faw-media-thumb { -webkit-appearance: none; appearance: none; background: var(--surface); background-image: none; border: 1px solid var(--border); box-shadow: none; padding: 0; margin: 0; color: inherit; transition: transform .05s ease; } .faw-media .faw-media-thumb:hover { background: var(--surface); border-color: var(--border); box-shadow: none; filter: none; } .faw-media .faw-media-thumb:active { transform: translateY(0); box-shadow: none; filter: none; } .faw-media .faw-media-thumb:focus { outline: none; } .faw-media .faw-media-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } /* Ensure inner image fills like tiles */ .faw-media .faw-media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Video badge (used in preview and gallery) */ .faw-media-badge, #fawg-wrap .fawg-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 6px; border-radius: 999px; letter-spacing: .02em; z-index: 2; } /* Mobile: thumbnails as a horizontal scroller */ @media (max-width: 900px) { .faw-media-strip { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 2px; } .faw-media-thumb { flex: 0 0 auto; width: clamp(120px, 24vw, 160px) !important; } .faw-media.is-count-1 .faw-media-thumb { width: clamp(160px, 40vw, 220px) !important; } .faw-media.is-count-2 .faw-media-thumb { width: clamp(140px, 30vw, 200px) !important; } .faw-media-strip .faw-media-thumb { display: block !important; } } /* Util */ .faw-visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ===== GALLERY (fawg-wrap) ===== */ #fawg-wrap { --text: #0b1020; --muted: #5a6573; --border: #e6e8ef; --surface: #f7f8fa; --accent: #1ED760; color: var(--text); clear:both; margin-top:30px; margin-bottom:30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } [data-theme="dark"] #fawg-wrap { --text: #e8ecf4; --muted: #a6b0c3; --border: #1d263b; --surface: #0f1a2e; --accent: #1ED760; } #fawg-wrap button, #fawg-wrap a { text-shadow: none !important; } #fawg-wrap .fawg-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } #fawg-wrap .fawg-header h2 { margin: 0; font-size: clamp(18px, 2.6vw, 22px); } #fawg-wrap .fawg-count { font-size: 13px; color: var(--muted); } #fawg-wrap .fawg-grid { --cell: 220px; /* JS reads this */ display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); gap: 10px; } @media (max-width: 1200px) { #fawg-wrap .fawg-grid { --cell: 200px; } } @media (max-width: 900px) { #fawg-wrap .fawg-grid { --cell: 160px; } } @media (max-width: 600px) { #fawg-wrap .fawg-grid { --cell: 140px; } } #fawg-wrap .fawg-item { display: block; position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 9; cursor: zoom-in; /* magnifier plus on gallery tiles */ } #fawg-wrap .fawg-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } #fawg-wrap .fawg-actions { margin-top: 12px; display: flex; justify-content: center; } #fawg-wrap .fawg-loadmore { appearance: none; border: 0; border-radius: 999px; cursor: pointer; padding: 12px 18px; font-weight: 900; font-size: 15px; line-height: 1.2; background: var(--accent); color: #051b13; box-shadow: 0 8px 18px rgba(30,215,96,.24), inset 0 -2px 0 rgba(0,0,0,.08); transition: transform .05s ease, filter .15s ease, box-shadow .15s ease; } #fawg-wrap .fawg-loadmore:hover { transform: translateY(-1px); filter: saturate(1.05); } #fawg-wrap .fawg-loadmore:active { transform: translateY(0); } #fawg-wrap .fawg-loadmore.is-finned { opacity: .7; cursor: default; } #fawg-wrap .fawg-note { margin-top: 10px; color: var(--muted); font-size: 13px; } #fawg-wrap .fawg-note a { color: inherit; text-decoration: underline; } /* Badge re-used above; leave here for clarity */ #fawg-wrap .fawg-badge { /* see shared rules above */ } /* ===== UNIVERSAL OVERLAY (global) ===== */ .fawg-ov { position: fixed; inset: 0; z-index: 99999; display: none; background: rgba(3,7,18,.9); backdrop-filter: blur(2px); } .fawg-ov.is-open { display: block; } .fawg-ov[hidden] { display: none !important; } /* Outer grid: top bar, main area, bottom bar */ .fawg-ov .fawg-ov-inner { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px; cursor: zoom-out; /* magnifier minus on overlay background */ } .fawg-ov .fawg-ov-top { display: flex; align-items: center; justify-content: space-between; } .fawg-ov .fawg-ov-title { color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .01em; } /* Controls */ .fawg-ov .fawg-ov-actions { display: flex; align-items: center; gap: 8px; } .fawg-ov .fawg-ov-close, .fawg-ov .fawg-ov-hd { appearance: none; border: 1px solid rgba(255,255,255,.45); background: rgba(7,12,24,.96); color: #fff; height: 36px; border-radius: 10px; cursor: pointer; padding: 0 12px; font-weight: 900; font-size: 13px; box-shadow: 0 6px 14px rgba(0,0,0,.5); text-shadow: none; } .fawg-ov .fawg-ov-close { width: 36px; padding: 0; font-size: 20px; line-height: 1; } .fawg-ov .fawg-ov-close:hover, .fawg-ov .fawg-ov-hd:hover { background: rgba(7,12,24,.98); } .fawg-ov .fawg-ov-hd.is-on { border-color: rgba(30,215,96,.9); background: rgba(30,215,96,.25); } /* Main viewport area */ .fawg-ov .fawg-ov-main { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Wrapper that holds the actual media - fixed 16:9 frame - width scales to 96vw (up to 1280px by default) - height limited so top/bottom bars still fit */ .fawg-ov .fawg-ov-imgwrap { position: relative; width: min(96vw, 1280px); max-width: 96vw; max-height: calc(100vh - 120px); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: #000; cursor: auto; /* no zoom-out cursor on the content box itself */ display: flex; align-items: center; justify-content: center; } /* HD: allow bigger frame on large screens + a bit more vertical space */ .fawg-ov .fawg-ov-imgwrap.is-hd { width: min(96vw, 1600px); max-width: 96vw; max-height: calc(100vh - 80px); } /* Stage where we inject IMG/VIDEO/IFRAME */ .fawg-ov .fawg-ov-content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Media inside overlay: - images/video/iframe fill the 16:9 frame - maintain aspect ratio with object-fit: contain - YouTube/local videos are full-size, not tiny */ .fawg-ov .fawg-ov-content img, .fawg-ov .fawg-ov-content video, .fawg-ov .fawg-ov-content iframe { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; } /* Nav buttons */ .fawg-ov .fawg-ov-nav { position: absolute; inset: 0; pointer-events: none; } .fawg-ov .fawg-ov-btn { position: absolute; top: 50%; transform: translateY(-50%); appearance: none; border: 1px solid rgba(255,255,255,.45); background: rgba(7,12,24,.96); color: #fff; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; pointer-events: auto; box-shadow: 0 6px 14px rgba(0,0,0,.5); } .fawg-ov .fawg-ov-btn:hover { background: rgba(7,12,24,.98); } .fawg-ov .fawg-ov-prev { left: 10px; } .fawg-ov .fawg-ov-next { right: 10px; } /* Bottom bar */ .fawg-ov .fawg-ov-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .fawg-ov .fawg-ov-counter { color: #fff; font-size: 13px; opacity: .9; font-weight: 800; } /* Reset button UI so they behave like image links */ .faw-media .faw-media-open, .faw-media .faw-media-thumb, #fawg-wrap .fawg-item { -webkit-appearance: none; appearance: none; background: none; background-image: none; border: 0; padding: 0; margin: 0; line-height: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } /* Restore the visual styles you want on the tiles/thumbs */ .faw-media .faw-media-thumb, #fawg-wrap .fawg-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } /* Hover matches tile behavior; no global button hover */ .faw-media .faw-media-thumb:hover, #fawg-wrap .fawg-item:hover { background: var(--surface); border-color: var(--border); box-shadow: none; filter: none; } /* No “pressed” look on active state */ .faw-media .faw-media-thumb:active, #fawg-wrap .fawg-item:active, .faw-media .faw-media-open:active { transform: none; box-shadow: none; filter: none; } /* Focus ring only for keyboard navigation */ .faw-media .faw-media-open:focus:not(:focus-visible), .faw-media .faw-media-thumb:focus:not(:focus-visible), #fawg-wrap .fawg-item:focus:not(:focus-visible) { outline: none; } .faw-media .faw-media-open:focus-visible, .faw-media .faw-media-thumb:focus-visible, #fawg-wrap .fawg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } /* FAS Sidebar (scoped) — Strong-contrast Light, Dark via [data-theme="dark"] #fas-sidebar */ /* Component tokens (scoped) */ #fas-sidebar { /* Site-neutral backgrounds */ --fas-bg-page: #F0F0F0; /* Soft gray panels (not pure white) for light mode */ --fas-panel-bg: linear-gradient(180deg,#F4F5F7 0%, #E9EBEF 100%); --fas-text: #1B232D; --fas-text-muted: #5D6A79; /* Stronger heading color for light mode (deep amber for contrast) */ --fas-heading-color: #B36A00; --fas-heading-shadow: none; --fas-border: rgba(0,0,0,0.10); --fas-surface-1: rgba(0,0,0,0.04); --fas-card-bg: rgba(0,0,0,0.035); --fas-card-shadow: 0 8px 18px rgba(0,0,0,0.08); --fas-card-shadow-hover: 0 12px 24px rgba(0,0,0,0.12); /* Brand accent (kept gold) */ --fas-accent: #ffc914; --fas-accent-hover: #ffd84d; --fas-accent-ink: #0b121a; --fas-caption-to: rgba(255,255,255,0.94); --fas-link: #0A57CC; --fas-link-hover: #08429D; --fas-chip-bg: rgba(0,0,0,0.06); --fas-chip-border: rgba(0,0,0,0.14); --fas-ambient: radial-gradient(closest-side, rgba(255,201,20,0.17), transparent 70%); --fas-shadow-1: 0 6px 14px rgba(0,0,0,0.12); --fas-shadow-inset: inset 0 0 0 1px var(--fas-border); /* Title chip tokens (Light mode = glassy slate) */ --fas-titlechip-bg: rgba(19,27,36,0.78); --fas-titlechip-color: #FFFFFF; --fas-titlechip-border: rgba(0,0,0,0.28); --fas-titlechip-shadow: 0 4px 10px rgba(0,0,0,0.24); --fas-titlechip-hover-shadow: 0 8px 16px rgba(0,0,0,0.28); } /* Dark theme override (scoped) */ [data-theme="dark"] #fas-sidebar { --fas-panel-bg: linear-gradient(180deg,#0b121a 0%, #0f1a28 100%); --fas-text: #e6edf3; --fas-text-muted: #c7d1db; /* In dark mode, headings go to bright gamer gold */ --fas-heading-color: #ffc914; --fas-heading-shadow: 0 1px 0 rgba(0,0,0,0.4); --fas-border: rgba(255,255,255,0.08); --fas-surface-1: rgba(255,255,255,0.06); --fas-card-bg: rgba(255,255,255,0.04); --fas-card-shadow: 0 8px 18px rgba(0,0,0,0.25); --fas-card-shadow-hover: 0 12px 24px rgba(0,0,0,0.35); --fas-caption-to: rgba(8,18,24,0.95); --fas-chip-bg: rgba(255,255,255,0.08); --fas-chip-border: rgba(255,255,255,0.12); --fas-ambient: radial-gradient(closest-side, rgba(255,201,20,0.22), transparent 70%); --fas-shadow-1: 0 6px 14px rgba(0,0,0,0.28); --fas-shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.05); /* Title chip tokens (Dark mode) */ --fas-titlechip-bg: rgba(8,18,24,0.78); --fas-titlechip-color: #ffffff; --fas-titlechip-border: rgba(255,255,255,0.10); --fas-titlechip-shadow: none; --fas-titlechip-hover-shadow: none; } /* Kill master list borders inside sidebar */ #fas-sidebar .sideboxer li { border: 0 !important; border-bottom: 0 !important; background: none !important; } /* Utility */ #fas-sidebar .fas-hidden { display: none !important; } /* Panels */ #fas-sidebar .sideboxer.fas-panel { background: var(--fas-panel-bg) !important; color: var(--fas-text) !important; border-radius: 14px !important; padding: 18px 16px !important; box-shadow: var(--fas-shadow-1), var(--fas-shadow-inset) !important; position: relative !important; overflow: hidden !important; } #fas-sidebar .sideboxer.fas-panel.fas-panel--tight { border-radius: 10px !important; padding: 12px !important; } #fas-sidebar .fas-panel--promo .fas-strong { color: #000 !important; } [data-theme="dark"] #fas-sidebar .fas-panel--promo .fas-strong { color: #fff !important; } /* Ambient glow */ #fas-sidebar .fas-ambient { position: absolute !important; right: -40px !important; bottom: -40px !important; width: 160px !important; height: 160px !important; background: var(--fas-ambient) !important; filter: blur(8px) !important; pointer-events: none !important; } /* Headings (extra specificity to beat master rules) */ #fas-sidebar .sideboxer h3.fas-h3, #fas-sidebar .fas-h3 { margin: 0 0 10px 0 !important; font-size: 20px !important; line-height: 1.2 !important; letter-spacing: 0.4px !important; color: var(--fas-heading-color) !important; text-shadow: var(--fas-heading-shadow) !important; background: transparent !important; border: 0 !important; padding: 0 !important; text-transform: none !important; text-align: left !important; } #fas-sidebar .sideboxer h3.fas-h4, #fas-sidebar .sideboxer h4.fas-h4, #fas-sidebar .fas-h4 { margin: 0 0 6px 0 !important; font-size: 16px !important; line-height: 1.15 !important; letter-spacing: 0.3px !important; color: var(--fas-heading-color) !important; text-shadow: var(--fas-heading-shadow) !important; background: transparent !important; border: 0 !important; padding: 0 !important; text-transform: none !important; text-align: left !important; } /* Body copy, links */ #fas-sidebar .fas-paragraph { margin: 6px 0 14px 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--fas-text-muted) !important; } #fas-sidebar .fas-ul { margin: 0 0 14px 0 !important; padding: 0 0 0 18px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--fas-text-muted) !important; } #fas-sidebar .fas-center { text-align: center !important; margin-top: 12px !important; } #fas-sidebar .fas-mini { margin: 12px 0 0 0 !important; font-size: 11px !important; line-height: 1.45 !important; color: var(--fas-text-muted) !important; } #fas-sidebar .fas-link { color: var(--fas-link) !important; text-decoration: none !important; font-size: 13px !important; } #fas-sidebar .fas-link:hover { color: var(--fas-link-hover) !important; text-decoration: underline !important; } /* Cards (mods) */ #fas-sidebar .fas-card { display: block !important; position: relative !important; border-radius: 12px !important; padding: 10px !important; background: var(--fas-card-bg) !important; box-shadow: var(--fas-card-shadow), inset 0 0 0 1px var(--fas-border) !important; margin: 10px 0 !important; transition: transform .18s ease, box-shadow .18s ease !important; color: inherit !important; text-decoration: none !important; } #fas-sidebar .fas-card:hover { transform: translateY(-2px) !important; box-shadow: var(--fas-card-shadow-hover), inset 0 0 0 1px var(--fas-border) !important; } /* Thumbs */ #fas-sidebar .fas-thumb { position: relative !important; border-radius: 10px !important; overflow: hidden !important; } #fas-sidebar .fas-thumb img { display: block !important; width: 100% !important; height: auto !important; transform: scale(1) !important; filter: brightness(1) !important; transition: transform .22s ease, filter .22s ease !important; } #fas-sidebar .fas-card:hover .fas-thumb img { transform: scale(1.05) !important; filter: brightness(1.05) !important; } /* Badge */ #fas-sidebar .fas-badge { position: absolute !important; top: 10px !important; left: 10px !important; border-radius: 999px !important; padding: 6px 10px !important; font-size: 12px !important; font-weight: 900 !important; box-shadow: 0 8px 14px rgba(0,0,0,0.25) !important; color: #081218 !important; } #fas-sidebar .fas-badge--gold { background: var(--fas-accent) !important; color: var(--fas-accent-ink) !important; } #fas-sidebar .fas-badge--green { background: #22e584 !important; color: #081218 !important; } #fas-sidebar .fas-badge--red { background: #ff5a5f !important; color: #081218 !important; } @keyframes fasPulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,95,0.55); } 70% { box-shadow: 0 0 0 12px rgba(255,90,95,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); } } #fas-sidebar .fas-badge--pulse { animation: fasPulse 1.8s infinite !important; } /* Caption + title chip */ #fas-sidebar .fas-caption { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 12px !important; background: linear-gradient(180deg, rgba(8,18,24,0) 0%, var(--fas-caption-to) 85%) !important; } #fas-sidebar .fas-titlechip { display: inline-block !important; max-width: 86% !important; /* don’t span full width */ margin: 0 !important; font-size: 14.5px !important; line-height: 1.3 !important; font-weight: 900 !important; color: var(--fas-titlechip-color) !important; background: var(--fas-titlechip-bg) !important; border: 1px solid var(--fas-titlechip-border) !important; box-shadow: var(--fas-titlechip-shadow) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important; padding: 6px 10px !important; border-radius: 10px !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; /* clamp to 2 lines on light and dark */ word-break: break-word !important; backdrop-filter: saturate(1.1) blur(4px) !important; -webkit-backdrop-filter: saturate(1.1) blur(4px) !important; border-left: 3px solid var(--fas-accent) !important; /* subtle brand nod */ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important; } #fas-sidebar .fas-card:hover .fas-titlechip, #fas-sidebar .fas-card:focus-within .fas-titlechip { filter: saturate(1.04) brightness(1.03) !important; box-shadow: var(--fas-titlechip-hover-shadow) !important; transform: translateY(-0.5px) !important; } /* Buttons */ #fas-sidebar .fas-btn { display: inline-block !important; border: 0 !important; border-radius: 12px !important; padding: 12px 18px !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: 0.3px !important; cursor: pointer !important; text-decoration: none !important; text-align: center !important; transition: transform .06s ease, box-shadow .06s ease, background-color .2s ease, color .2s ease !important; } #fas-sidebar .fas-btn--accent { background: var(--fas-accent) !important; color: var(--fas-accent-ink) !important; box-shadow: 0 6px 18px rgba(255,201,20,0.45), 0 1px 0 rgba(255,255,255,0.35) inset !important; } #fas-sidebar .fas-btn--accent:hover { background: var(--fas-accent-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 20px rgba(255,201,20,0.55), 0 1px 0 rgba(255,255,255,0.35) inset !important; } #fas-sidebar .fas-btn--block { width: 100% !important; height: 46px !important; font-size: 15px !important; } #fas-sidebar .fas-btn--sm { height: 36px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 10px !important; } /* Forms */ #fas-sidebar .fas-form { margin: 0 !important; } #fas-sidebar .fas-label { display: block !important; font-size: 12px !important; color: var(--fas-text-muted) !important; margin-bottom: 6px !important; } #fas-sidebar .fas-input { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; height: 44px !important; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--fas-border) !important; background: var(--fas-surface-1) !important; color: var(--fas-text) !important; font-size: 14px !important; outline: none !important; transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important; margin-bottom: 10px !important; } #fas-sidebar .fas-input:focus { box-shadow: 0 0 0 3px rgba(255,201,20,0.28) !important; border-color: var(--fas-accent) !important; } /* PRO block */ #fas-sidebar .fas-pro-logo { width: 240px !important; max-width: 100% !important; height: auto !important; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)) !important; margin: 6px auto 10px auto !important; display: block !important; } #fas-sidebar .fas-pro-cta { text-decoration: none !important; display: block !important; text-align: center !important; } /* Layout helpers */ #fas-sidebar .fas-flex { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 6px 0 14px 0 !important; } #fas-sidebar .fas-icon { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; filter: drop-shadow(0 4px 10px rgba(255,201,20,0.25)) !important; } /* Social */ #fas-sidebar .fas-social { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; } #fas-sidebar .fas-social__link { display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; color: inherit !important; background: var(--fas-surface-1) !important; border: 1px solid var(--fas-border) !important; padding: 8px 10px !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: 0.2px !important; transition: transform .06s ease, box-shadow .06s ease, background .06s ease, color .06s ease !important; } #fas-sidebar .fas-social__link:hover { background: var(--fas-accent) !important; color: var(--fas-accent-ink) !important; box-shadow: 0 8px 18px rgba(255,201,20,0.45) !important; transform: translateY(-1px) !important; } /* Survey */ #fas-sidebar .fas-survey { background: var(--fas-surface-1) !important; border-radius: 8px !important; padding: 8px !important; box-shadow: inset 0 0 0 1px var(--fas-border) !important; } #fas-sidebar .fas-survey__title { margin: 0 0 6px 0 !important; font-size: 13px !important; line-height: 1.3 !important; color: var(--fas-text) !important; font-weight: 700 !important; } #fas-sidebar .fas-survey__table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 6px !important; } #fas-sidebar .fas-survey__row td { vertical-align: middle !important; } #fas-sidebar .fas-survey__cell-radio { width: 22px !important; } #fas-sidebar .fas-survey__radio { width: 16px !important; height: 16px !important; accent-color: var(--fas-accent) !important; cursor: pointer !important; margin: 0 !important; } #fas-sidebar .fas-survey__label { display: block !important; margin: 0 !important; color: var(--fas-text) !important; font-size: 13px !important; line-height: 1.3 !important; cursor: pointer !important; padding: 6px 8px !important; background: var(--fas-surface-1) !important; border: 1px solid var(--fas-border) !important; border-radius: 6px !important; } #fas-sidebar .fas-survey__actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 6px !important; } #fas-sidebar .fas-meta { display: inline-block !important; font-size: 11px !important; color: var(--fas-text-muted) !important; line-height: 1 !important; } /* Must-Reads list */ #fas-sidebar .fas-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } #fas-sidebar .fas-list__item { margin: 0 0 8px 0 !important; } #fas-sidebar .fas-list__link { display: flex !important; align-items: flex-start !important; gap: 10px !important; text-decoration: none !important; color: inherit !important; background: var(--fas-surface-1) !important; border: 1px solid var(--fas-border) !important; border-radius: 10px !important; padding: 8px !important; transition: transform .06s ease, box-shadow .06s ease, background .06s ease, color .06s ease !important; } #fas-sidebar .fas-list__link:hover { background: var(--fas-accent) !important; color: var(--fas-accent-ink) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 18px rgba(255,201,20,0.45) !important; } #fas-sidebar .fas-list__thumb { display: block !important; width: 64px !important; height: 64px !important; object-fit: cover !important; border-radius: 8px !important; } #fas-sidebar .fas-list__content { flex: 1 1 auto !important; min-width: 0 !important; } #fas-sidebar .fas-list__title { font-weight: 800 !important; color: inherit !important; font-size: 13px !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; } #fas-sidebar .fas-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--fas-chip-bg) !important; border: 1px solid var(--fas-chip-border) !important; color: inherit !important; font-size: 11px !important; line-height: 1 !important; padding: 4px 8px !important; border-radius: 999px !important; margin-top: 4px !important; } /* Related Add-ons: global styles (scoped to #fas-related-root) */ #fas-related-root { --bg: #ffffff; --text: #0e1217; --muted: #6a7686; --card: #f5f7fa; --card-hover: #eef1f5; --border: rgba(10, 15, 20, 0.08); --border-strong: rgba(10, 15, 20, 0.14); --shadow: 0 12px 28px rgba(8, 15, 25, 0.12), 0 3px 8px rgba(8, 15, 25, 0.08); --shadow-hover: 0 18px 44px rgba(8, 15, 25, 0.18), 0 6px 14px rgba(8, 15, 25, 0.12); --radius-lg: 16px; --star: #f59e0b; --overlay-top-strong: rgba(0,0,0,0.78); --overlay-top-fade: rgba(0,0,0,0.0); color-scheme: light; font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important; margin: 36px 0 16px 0 !important; } [data-theme="dark"] #fas-related-root { --bg: #0c0f14; --text: #e6edf7; --muted: #9aa8ba; --card: #131a24; --card-hover: #162031; --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --shadow: 0 14px 30px rgba(2, 8, 20, 0.65), 0 3px 10px rgba(2, 8, 20, 0.35); --overlay-top-strong: rgba(0,0,0,0.82); --overlay-top-fade: rgba(0,0,0,0.0); color-scheme: dark; } #fas-related-root .fas-rel-wrap { max-width: 1400px !important; margin: 0 auto !important; padding: 0 16px !important; } /* Header */ #fas-related-root .fas-rel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; } #fas-related-root .fas-rel-heading { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; flex: 1 1 auto !important; } #fas-related-root #fas-rel-title { margin: 0 !important; color: var(--text) !important; font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; font-weight: 800 !important; } #fas-related-root .fas-rel-sub { margin: 0 !important; color: var(--muted) !important; font-size: 14px !important; } /* Pager (wrap-friendly, no overflow) */ #fas-related-root .fas-rel-pager { display: flex !important; gap: 8px !important; align-items: flex-start !important; flex-wrap: wrap !important; max-width: 100% !important; flex: 0 1 auto !important; } #fas-related-root .fas-rel-page { display: inline-flex !important; align-items: flex-start !important; gap: 8px !important; padding: 8px 12px !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; color: var(--text) !important; text-decoration: none !important; font-size: 13px !important; line-height: 1.25 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important; } #fas-related-root .fas-rel-page:hover { background: var(--card-hover) !important; border-color: var(--border-strong) !important; transform: translateY(-1px) !important; } #fas-related-root .fas-rel-page svg { width: 16px !important; height: 16px !important; fill: var(--muted) !important; flex: 0 0 auto !important; margin-top: 1px !important; } @media (max-width: 640px) { #fas-related-root .fas-rel-head { flex-direction: column !important; align-items: stretch !important; } #fas-related-root .fas-rel-pager { width: 100% !important; } #fas-related-root .fas-rel-page { width: 100% !important; } } /* Grid: exactly 4 columns on large screens; step down responsively */ #fas-related-root .fas-rel-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; align-items: stretch !important; } @media (min-width: 640px) { #fas-related-root .fas-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 900px) { #fas-related-root .fas-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 1100px) { #fas-related-root .fas-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row dense !important; } #fas-related-root .fas-rel-grid.fas-balance-1 > .fas-rel-card:last-child { grid-column: 1 / -1 !important; } #fas-related-root .fas-rel-grid.fas-balance-2 > .fas-rel-card:nth-last-child(2), #fas-related-root .fas-rel-grid.fas-balance-2 > .fas-rel-card:last-child { grid-column: span 2 !important; } #fas-related-root .fas-rel-grid.fas-balance-3 > .fas-rel-card:nth-last-child(3) { grid-column: span 2 !important; } } /* Card */ #fas-related-root .fas-rel-card { display: flex !important; flex-direction: column !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; text-decoration: none !important; color: var(--text) !important; overflow: hidden !important; box-shadow: var(--shadow) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; will-change: transform !important; } #fas-related-root .fas-rel-card:hover { transform: translateY(-3px) !important; border-color: var(--border-strong) !important; box-shadow: var(--shadow-hover) !important; } /* Media + overlays */ #fas-related-root .fas-rel-media { position: relative !important; background: #0a0f16 !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; isolation: isolate !important; } @media (max-width: 920px) { #fas-related-root .fas-rel-media { aspect-ratio: 4 / 3 !important; } } @media (max-width: 540px) { #fas-related-root .fas-rel-media { aspect-ratio: 1 / 1 !important; } } #fas-related-root .fas-rel-media::before { content: "" !important; display: block !important; padding-bottom: 66.6667% !important; } #fas-related-root .fas-rel-media > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.02) !important; transition: transform 0.35s ease !important; z-index: 1 !important; } #fas-related-root .fas-rel-card:hover .fas-rel-media > img { transform: scale(1.06) !important; } /* Top overlay for title */ #fas-related-root .fas-rel-overlay { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; z-index: 2 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; background: linear-gradient(180deg, var(--overlay-top-strong) 0%, rgba(0,0,0,0.55) 40%, var(--overlay-top-fade) 100%) !important; max-height: 86% !important; overflow-y: auto !important; scrollbar-width: thin !important; } #fas-related-root .fas-rel-overlay::-webkit-scrollbar { height: 6px; width: 6px; } #fas-related-root .fas-rel-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 10px; } #fas-related-root .fas-rel-overlay::-webkit-scrollbar-track { background: transparent; } #fas-related-root .fas-rel-title { margin: 0 !important; color: #fff !important; font-size: 18px !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.01em !important; display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important; flex: 1 1 auto !important; min-width: 0 !important; } /* Star rating: floating pill at bottom-right */ #fas-related-root .fas-rel-stars-float { position: absolute !important; right: 12px !important; bottom: 12px !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 8px !important; background: rgba(0, 0, 0, 0.50) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 999px !important; color: #fff !important; backdrop-filter: saturate(140%) blur(2px) !important; } #fas-related-root .fas-rel-stars { display: inline-flex !important; align-items: center !important; gap: 2px !important; } #fas-related-root .fas-rel-star { width: 14px !important; height: 14px !important; fill: var(--star) !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)) !important; opacity: 0.95 !important; } #fas-related-root .fas-rel-star.dim { opacity: 0.28 !important; } /* Body + meta row */ #fas-related-root .fas-rel-body { padding: 10px 12px 12px 12px !important; } #fas-related-root .fas-rel-meta-row { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; align-items: center !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; min-height: 0 !important; } #fas-related-root .fas-rel-meta-item { display: inline-flex !important; align-items: center !important; color: var(--muted) !important; min-width: 0 !important; } #fas-related-root .fas-rel-meta-item:not(:first-child)::before { content: "•" !important; margin: 0 8px 0 0 !important; color: var(--muted) !important; opacity: 0.6 !important; } #fas-related-root .fas-rel-meta-item svg { width: 14px !important; height: 14px !important; fill: var(--muted) !important; margin-right: 6px !important; flex: 0 0 auto !important; } /* Motion accessibility */ @media (prefers-reduced-motion: reduce) { #fas-related-root .fas-rel-card, #fas-related-root .fas-rel-media > img { transition: none !important; } #fas-related-root .fas-rel-card:hover .fas-rel-media > img { transform: none !important; } } /* Single-media compact mode (desktop) — prevent giant hero and upscaling */ @media (min-width: 901px) { .faw-media.is-count-1 .faw-media-main { width: 100%; / ensure the grid item has a width / max-width: 960px; / cap size so it’s not a giant hero / justify-self: center; / center the capped box */ } /* When we detect a small source image (via JS), avoid crop/upscale */ .faw-media.is-count-1 .faw-media-main.is-small .faw-media-fit { object-fit: contain; background: var(--surface); } } /* Optional polish */ .faw-media.is-count-1 .faw-media-main.is-small { margin: 0 auto; } /* ======================================= Fly Away Simulation — Download Squeeze (scoped, hardened) ======================================= */ #fasdl, #fasdl * { box-sizing: border-box; } #fasdl img { max-width: 100%; height: auto; display: block; } #fasdl { --bg: #ffffff; --surface: #ffffff; --muted-surface: #f7f9fc; --border: #e6ecf2; --text: #0b121a; --subtext: #26313d; --link: #1058b0; --primary: #2C8A3B; --primary-strong: #14853C; --accent: #ffc914; color: var(--text); line-height: 1.6; background: transparent; } #fasdl a { color: var(--link); text-decoration: none; } #fasdl a:hover { text-decoration: underline; } /* HERO with tiny circular thumbnail */ #fasdl .fasdl-hero { position: relative; } #fasdl .fasdl-hero__thumb { float: right; width: 96px; height: 96px; max-width: 34%; margin: 2px 0 6px 12px; border-radius: 50%; overflow: hidden; } #fasdl .fasdl-hero__thumb img, #fasdl .fasdl-hero__thumb picture, #fasdl .fasdl-hero__thumb a, #fasdl .fasdl-hero__thumb iframe { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } #fasdl .fasdl-title { margin: 0 0 8px 0; font-size: 28px; font-weight: 800; } /* DESCRIPTION */ #fasdl .fasdl-description { margin: 8px 0 12px 0; color: var(--subtext); } #fasdl .fasdl-description.is-collapsed { max-height: 12.5rem; overflow: hidden; mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.12)); } #fasdl .fasdl-description.is-expanded { max-height: none; overflow: visible; mask-image: none; } #fasdl .fasdl-desc-toggle { margin: 6px 0 14px 0; } /* INLINE META BAR */ #fasdl .fasdl-meta-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 12px; padding: 6px 0; margin: 0 0 8px 0; list-style: none; } #fasdl .fasdl-meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--subtext); font-size: 14px; white-space: nowrap; } #fasdl .fasdl-meta-item span { color: var(--subtext); } #fasdl .fasdl-meta-sep { color: #9aa9b7; } #fasdl .fasdl-icon { width: 18px; height: 18px; display: inline-block; } /* LARGE FILE NOTE (light mode) */ #fasdl .fasdl-note { background: #f7fbef !important; border: 1px solid #cfe8bf !important; color: #22332a !important; padding: 12px 14px; border-radius: 10px; margin: 10px 0 20px 0; } /* CHOOSE OPTIONS */ #fasdl .fasdl-choose { text-align: center; margin: 18px 0 12px 0; font-size: 22px; font-weight: 800; } /* OPTIONS GRID */ #fasdl .fasdl-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 6px; } /* CARDS */ #fasdl .pricing_box.fasdl-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px; box-shadow: 0 8px 24px rgba(16,24,40,0.06); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; } /* Headers — vertically centered, ensure child title is centered */ #fasdl .fasdl-card__header, #fasdl .pricing_box.fasdl-card > .header { display: flex !important; align-items: center !important; justify-content: center !important; height: 84px !important; min-height: 84px !important; padding: 0 16px !important; border-bottom: 1px solid var(--border) !important; background: linear-gradient(135deg, #f7fafc, #eef6ff) !important; line-height: 1.2 !important; } #fasdl .fasdl-card__header > *, #fasdl .pricing_box.fasdl-card > .header > * { align-self: center !important; margin: 0 !important; position: static !important; } #fasdl .fasdl-card__title { display: inline-block; margin: 0 !important; line-height: 1.2 !important; align-self: center !important; } #fasdl .fasdl-card--pro .fasdl-card__header { background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important; border-bottom-color: var(--primary) !important; } #fasdl .fasdl-pro-badge { width: 110px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); } #fasdl .fasdl-card__title { font-weight: 800; font-size: 20px; letter-spacing: 0.2px; color: var(--text); } /* REMOVE MASTER TICKS/CROSSES COMPLETELY */ #fasdl .pricing_box.fasdl-card ul, #fasdl ul.fasdl-features { list-style: none !important; list-style-type: none !important; list-style-image: none !important; margin: 0 !important; padding: 12px 16px 12px 26px !important; /* natural vertical padding + left padding for lights */ } #fasdl .pricing_box.fasdl-card ul li, #fasdl ul.fasdl-features li { background: none !important; background-image: none !important; list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 6px 0 !important; /* balanced spacing */ line-height: 1.28 !important; min-height: 0 !important; } #fasdl .pricing_box.fasdl-card ul li::before, #fasdl .pricing_box.fasdl-card ul li::after, #fasdl ul.fasdl-features li::before, #fasdl ul.fasdl-features li::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } #fasdl ul.fasdl-features li::marker { content: "" !important; } /* OUR LIGHTS + text */ #fasdl .fasdl-feature-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; line-height: 1.28 !important; color: var(--text); /* light mode */ position: relative; padding: 0 !important; } #fasdl .fasdl-feature-text::before { content: ""; width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 12px; } #fasdl .fasdl-yes.fasdl-feature-text::before { background: radial-gradient(circle at 50% 50%, #34c759 0%, #2C8A3B 100%); } #fasdl .fasdl-no.fasdl-feature-text::before { background: radial-gradient(circle at 50% 50%, #ff7676 0%, #e23d3d 100%); } /* CTAs */ #fasdl .fasdl-cta-wrap, #fasdl .fasdl-free-cta { padding: 10px 16px 14px 16px; } #fasdl .fasdl-price { margin: 4px 0 8px 0; font-size: 20px; font-weight: 800; } #fasdl .fasdl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px 18px; font-weight: 700; font-size: 16px; letter-spacing: 0.2px; border: 1px solid transparent; cursor: pointer; text-align: center; user-select: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 80ms ease; } #fasdl .fasdl-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } #fasdl .fasdl-btn--primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: 0 8px 16px rgba(44,138,59,0.35); } #fasdl .fasdl-btn--primary:hover { transform: translateY(-1px); text-decoration: none; } #fasdl .fasdl-btn--accent { background: var(--accent) !important; color: var(--text) !important; box-shadow: 0 8px 18px rgba(255,201,20,0.45), 0 1px 0 rgba(255,255,255,0.35) inset; } #fasdl .fasdl-btn--accent:hover { transform: translateY(-1px); text-decoration: none; } #fasdl .fasdl-btn--ghost { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } #fasdl .fasdl-btn--ghost:hover { background: var(--muted-surface) !important; text-decoration: none; } #fasdl .fasdl-cta-trust { font-size: 12px; color: #5d6a77; margin-top: 6px; } /* TRUST BAR */ #fasdl .fasdl-trustbar { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; padding: 8px 10px; border-radius: 10px; background: var(--muted-surface) !important; border: 1px solid var(--border) !important; margin: 12px 0 12px 0; } #fasdl .fasdl-trustbar__item { display: inline-flex; align-items: center; gap: 8px; color: var(--subtext); font-size: 13px; } /* PRO FAQ */ #fasdl .fasdl-faq { margin: 8px 0 12px 0; display: grid; gap: 8px; } #fasdl .fasdl-faq details { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px; padding: 8px 12px; } #fasdl .fasdl-faq summary { cursor: pointer; font-weight: 700; } #fasdl .fasdl-faq p { margin: 8px 0 0 0; color: var(--subtext); } /* INFO GRID */ #fasdl .fasdl-info { margin: 18px 0 10px 0; } #fasdl .fasdl-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; } #fasdl .fasdl-info-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px; padding: 14px; box-shadow: 0 4px 12px rgba(16,24,40,0.04); overflow: hidden; min-width: 0; } #fasdl .fasdl-info-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } #fasdl .fasdl-info-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); } #fasdl .fasdl-info-icon { width: 22px; height: 22px; color: var(--primary); } #fasdl .fasdl-link { color: var(--link); font-weight: 700; } /* Forms */ #fasdl .fasdl-nl-form { display: flex; flex-wrap: wrap; gap: 8px; } #fasdl .fasdl-nl-form input[type="email"] { flex: 1 1 220px; min-width: 120px; max-width: 100%; padding: 10px 12px; border: 1px solid #ccd7e1; border-radius: 8px; font-size: 16px; background: var(--surface) !important; color: var(--text) !important; } #fasdl .fasdl-nl-form input[type="submit"] { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--primary); background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; } #fasdl .fasdl-nl-form input[type="submit"]:hover { filter: brightness(1.04); } #fasdl .fasdl-search__form { display: flex; flex-wrap: wrap; gap: 8px; } #fasdl .fasdl-search__form .q { flex: 1 1 220px; min-width: 120px; max-width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ccd7e1; font-size: 16px; background: var(--surface) !important; color: var(--text) !important; } /* Back button */ #fasdl .fasdl-backlink { margin-top: 12px; } #fasdl .fasdl-btn--back { padding-left: 14px; } #fasdl .fasdl-btn__icon { display: inline-block; } /* MODAL (full-screen) */ #fasdl .fasdl-modal { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(0,0,0,0.8); } #fasdl .fasdl-modal__content { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text); margin: min(7vh, 80px) auto; max-width: 680px; padding: 20px 18px 22px 18px; border-radius: 12px; box-shadow: 0 24px 48px rgba(16,24,40,0.35); position: relative; } #fasdl .fasdl-modal__close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #667789; font-size: 28px; font-weight: 700; cursor: pointer; } #fasdl .fasdl-modal__title { margin: 0 0 10px 0; font-size: 22px; font-weight: 800; } #fasdl .fasdl-modal__servermsg { font-size: 16px; color: var(--subtext); margin: 6px 0 10px 0; } #fasdl .fasdl-progress { width: 100%; background: #eef5fb; border-radius: 6px; overflow: hidden; height: 10px; margin: 10px 0 14px 0; } #fasdl .fasdl-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, #2C8A3B, #34c759); transition: width 50ms linear; } #fasdl .fasdl-modal__note { font-size: 14px; color: #22313b; margin: 10px 0; } #fasdl .fasdl-modal__start { font-size: 18px; color: var(--primary); font-weight: 800; text-align: center; margin: 10px 0 6px 0; } #fasdl .fasdl-modal__newsletter { margin-top: 8px; background: var(--muted-surface) !important; border: 1px solid var(--border) !important; border-radius: 10px; padding: 12px; } #fasdl .fasdl-nl-icon { float: right; width: 60px; height: 60px; max-width: 10%; } #fasdl .fasdl-modal__pro { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border) !important; } #fasdl .fasdl-pro-cta { text-decoration: none; display: block; text-align: center; } #fasdl .fasdl-pro-cta__img { width: 240px; max-width: 100%; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); margin: 6px auto 10px auto; display: block; } #fasdl .fasdl-pro-cta__button { display: inline-block; background: var(--accent); color: var(--text); font-weight: 800; font-size: 16px; letter-spacing: 0.3px; padding: 12px 18px; border-radius: 10px; box-shadow: rgba(255,201,20,0.45) 0 6px 18px, rgba(255,255,255,0.35) 0 1px 0 inset; transition: transform 60ms, box-shadow 60ms; } #fasdl .fasdl-pro-cta__button:hover { transform: translateY(-1px); } /* Lock scroll when modal open */ html.fasdl-lockscroll, body.fasdl-lockscroll { overflow: hidden; } /* Responsive */ @media (max-width: 980px) { #fasdl .fasdl-options { grid-template-columns: 1fr; } #fasdl .fasdl-meta-bar { flex-wrap: wrap; } #fasdl .fasdl-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #fasdl .fasdl-info-grid { grid-template-columns: 1fr; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #fasdl .fasdl-btn, #fasdl .fasdl-progress__bar { transition: none !important; } } /* DARK MODE (cover common toggles) */ body[data-theme="dark"] #fasdl, #fasdl.fasdl--dark, body.dark #fasdl, body.dark-mode #fasdl, html[data-theme="dark"] #fasdl { --bg: #0b1119; --surface: #0f1720; --muted-surface: #121c28; --border: #2b3b4c; --text: #e6edf3; --subtext: #d6e2f0; --link: #7bc2ff; --primary: #2C8A3B; --primary-strong: #1a5a25; --accent: #ffc914; } /* Enforce dark surfaces/text + critical header fix */ body[data-theme="dark"] #fasdl .pricing_box.fasdl-card, #fasdl.fasdl--dark .pricing_box.fasdl-card { background: var(--surface) !important; border-color: var(--border) !important; } /* Headers in dark (ensure not white; both .fasdl-card__header and legacy .header) Expanded to cover all dark toggles + explicit double-class .fasdl-card__header.header */ body[data-theme="dark"] #fasdl .fasdl-card__header, #fasdl.fasdl--dark .fasdl-card__header, body.dark #fasdl .fasdl-card__header, body.dark-mode #fasdl .fasdl-card__header, html[data-theme="dark"] #fasdl .fasdl-card__header, body[data-theme="dark"] #fasdl .pricing_box.fasdl-card > .header, #fasdl.fasdl--dark .pricing_box.fasdl-card > .header, body.dark #fasdl .pricing_box.fasdl-card > .header, body.dark-mode #fasdl .pricing_box.fasdl-card > .header, html[data-theme="dark"] #fasdl .pricing_box.fasdl-card > .header, body[data-theme="dark"] #fasdl .fasdl-card__header.header, #fasdl.fasdl--dark .fasdl-card__header.header, body.dark #fasdl .fasdl-card__header.header, body.dark-mode #fasdl .fasdl-card__header.header, html[data-theme="dark"] #fasdl .fasdl-card__header.header { background: linear-gradient(135deg, #101826, #162235) !important; background-color: #101826 !important; /* guard against global .header background */ border-bottom-color: var(--border) !important; color: var(--text) !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 84px !important; min-height: 84px !important; line-height: 1.2 !important; } /* Pro header variant in dark (cover all toggles) */ body[data-theme="dark"] #fasdl .fasdl-card--pro .fasdl-card__header, #fasdl.fasdl--dark .fasdl-card--pro .fasdl-card__header, body.dark #fasdl .fasdl-card--pro .fasdl-card__header, body.dark-mode #fasdl .fasdl-card--pro .fasdl-card__header, html[data-theme="dark"] #fasdl .fasdl-card--pro .fasdl-card__header { background: linear-gradient(135deg, #1a5a25, #2C8A3B) !important; border-bottom-color: #1a5a25 !important; color: var(--text) !important; } /* Title visibility in dark (single H1) */ body[data-theme="dark"] #fasdl .fasdl-title, #fasdl.fasdl--dark .fasdl-title { color: #f3f7ff !important; } /* Ensure header title text is correct in dark */ body[data-theme="dark"] #fasdl .fasdl-card__header .fasdl-card__title, #fasdl.fasdl--dark .fasdl-card__header .fasdl-card__title, body.dark #fasdl .fasdl-card__header .fasdl-card__title, body.dark-mode #fasdl .fasdl-card__header .fasdl-card__title, html[data-theme="dark"] #fasdl .fasdl-card__header .fasdl-card__title { color: var(--text) !important; text-shadow:none; } /* Description/meta text in dark */ body[data-theme="dark"] #fasdl .fasdl-description, #fasdl.fasdl--dark .fasdl-description { color: var(--subtext) !important; } body[data-theme="dark"] #fasdl .fasdl-meta-item span, #fasdl.fasdl--dark .fasdl-meta-item span { color: var(--subtext) !important; } /* Note box truly dark */ body[data-theme="dark"] #fasdl .fasdl-note, #fasdl.fasdl--dark .fasdl-note, body.dark #fasdl .fasdl-note, body.dark-mode #fasdl .fasdl-note, html[data-theme="dark"] #fasdl .fasdl-note { background: #0b1510 !important; border-color: #1f3a29 !important; color: #d9f7e6 !important; background-image: none !important; } /* Feature text contrast in dark */ body[data-theme="dark"] #fasdl .fasdl-feature-text, #fasdl.fasdl--dark .fasdl-feature-text { color: #ffffff !important; } /* Free Download button text is black in dark mode (very high specificity) */ body[data-theme="dark"] #fasdl .fasdl-card--free .fasdl-free-cta input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"], #fasdl.fasdl--dark .fasdl-card--free .fasdl-free-cta input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"] { color: #0b121a !important; -webkit-text-fill-color: #0b121a !important; text-shadow: none !important; } /* Info cards & fields in dark */ body[data-theme="dark"] #fasdl .fasdl-info-card, #fasdl.fasdl--dark .fasdl-info-card { background: var(--surface) !important; border-color: var(--border) !important; } body[data-theme="dark"] #fasdl .fasdl-nl-form input[type="email"], #fasdl.fasdl--dark .fasdl-nl-form input[type="email"] { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } body[data-theme="dark"] #fasdl .fasdl-search__form .q, #fasdl.fasdl--dark .fasdl-search__form .q { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ======== ADDITIONAL DARK MODE FIXES (requested) ======== */ /* 1) Ensure ALL free download accent submit buttons in dark are black text (broader target) */ body[data-theme="dark"] #fasdl input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"], #fasdl.fasdl--dark input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"], body.dark #fasdl input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"], body.dark-mode #fasdl input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"], html[data-theme="dark"] #fasdl input.button.signup.fasdl-btn.fasdl-btn--accent[type="submit"] { color: #0b121a !important; -webkit-text-fill-color: #0b121a !important; text-shadow: none !important; } /* 2) Modal note text should be white in dark mode */ body[data-theme="dark"] #fasdl .fasdl-modal__note, #fasdl.fasdl--dark .fasdl-modal__note, body.dark #fasdl .fasdl-modal__note, body.dark-mode #fasdl .fasdl-modal__note, html[data-theme="dark"] #fasdl .fasdl-modal__note { color: #ffffff !important; } /* 3) PRO CTA pill text should be black in dark mode */ body[data-theme="dark"] #fasdl .fasdl-pro-cta__button, #fasdl.fasdl--dark .fasdl-pro-cta__button, body.dark #fasdl .fasdl-pro-cta__button, body.dark-mode #fasdl .fasdl-pro-cta__button, html[data-theme="dark"] #fasdl .fasdl-pro-cta__button { color: #0b121a !important; -webkit-text-fill-color: #0b121a !important; text-shadow: none !important; }