, above the breadcrumb -- there is nothing on the page more important than "follow your POH". */ .warning-box { margin: 0 0 20px; padding: 0; background: none; border: 0; border-radius: 0; } .warning-box p { color: var(--danger); margin: 0; font-size: 0.95rem; line-height: 1.5; /* No measure cap. A reading paragraph wants ~70 characters, but this is a notice, not prose: held to 78ch it wrapped into a three-line block that read as another paragraph to skim. Across the full column it runs as a banner line above everything. */ } .warning-box strong { color: var(--danger); } /* === ON-THIS-PAGE RAIL === */ /* A table of contents in the left margin: where you are in the page, and a way to jump. Content is a fixed 1100px column, so the rail is positioned against the viewport centre rather than floated -- and it only appears once the margin is genuinely wide enough to hold it without crowding the text. */ .page-toc { --toc-w: 190px; --toc-gap: 24px; /* Half the rail's footprint. The content column centres itself, so without shifting both by this the rail hangs off the left edge and every pixel of slack lands on the right -- measured 71px left of the rail against 293px right of the content. Centre the rail and the column as one composition instead. */ --toc-shift: calc((var(--toc-w) + var(--toc-gap)) / 2); display: none; position: fixed; top: 150px; left: calc(50% - 550px - var(--toc-w) - var(--toc-gap) + var(--toc-shift)); width: var(--toc-w); max-height: calc(100vh - 210px); overflow-y: auto; overflow-x: hidden; /* never a sideways scrollbar in a rail */ font-size: 0.82rem; z-index: 5; } @media (min-width: 1540px) { .page-toc { display: block; } /* Only where a rail was actually built -- a page without one stays centred. TRANSFORM, not margin. `has-page-toc` is added by JS after first paint, so shifting `main` with margin-left relaid out the whole column and scored a 0.295 Cumulative Layout Shift in the field -- the worst element on the site. A transform paints the same offset without touching layout, and CLS explicitly does not count transform movement. `main` keeps its auto margins, so this is "centre it, then push right by half the rail", which is what the old calc() worked out to. */ body.has-page-toc main { transform: translateX(calc((190px + 24px) / 2)); } } .page-toc-title { margin: 0 0 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); } .page-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); } .page-toc li { margin: 0; } .page-toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; /* sit the marker on top of the rail */ border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; line-height: 1.35; /* ACS task titles carry unbroken runs like "Runway/Taxiway/Heliport/Helipad" that will not wrap on their own, and overflow-y:auto forces overflow-x to compute to auto as well -- so the rail grew a horizontal scrollbar. Break them instead. */ overflow-wrap: anywhere; } /* Per-section jump list, on the few pages dense enough to want one. Sits with the section it belongs to; the rail carries only the sections themselves. */ .section-jump { margin: 6px 0 18px; border-left: 2px solid var(--border); padding-left: 14px; } .section-jump > summary { cursor: pointer; color: var(--text-dim); font-size: 0.82em; letter-spacing: 0.04em; text-transform: uppercase; list-style: none; padding: 4px 0; } .section-jump > summary::-webkit-details-marker { display: none; } .section-jump > summary::before { content: "\25B8 "; /* ▸ */ color: var(--accent); display: inline-block; transition: transform .15s ease; } .section-jump[open] > summary::before { transform: rotate(90deg); } .section-jump > summary:hover { color: var(--text); } .section-jump ul { list-style: none; margin: 6px 0 0; padding: 0; columns: 2; column-gap: 24px; } .section-jump li { break-inside: avoid; margin: 0 0 4px; } .section-jump a { color: var(--text-muted); text-decoration: none; font-size: 0.9em; } .section-jump a:hover { color: var(--accent); } @media (max-width: 760px) { .section-jump ul { columns: 1; } } .page-toc a.sub { /* h3: a card or sub-section under an h2 */ padding-left: 26px; font-size: 0.95em; } /* Leaves the page rather than scrolling within it. Marked, because a rail that silently mixes the two makes the reader guess which kind of click they are about to make. */ .page-toc a.goes::after { content: " \2192"; /* The site's accent, not a muted grey: this arrow is the affordance that says the entry leaves the page, so it should read as clickable. */ color: var(--accent); } .page-toc a.goes:hover { color: var(--accent); } .page-toc a:hover { color: var(--text); } .page-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .page-toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } /* Jump targets have to clear the fixed topbar and its subnav row. */ main h2, main h3 { scroll-margin-top: var(--jump-offset, 140px); } /* scroll-behavior is smooth site-wide; honour a request for less motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* === STUDY TOOLS AS A RIGHT-HAND RAIL === */ /* Only with the left rail present, so the page is symmetric: rail, content, tools. 1620px is where 190 + 24 + 1100 + 24 + 190 fits with margins to spare; below it the bar stays where it was, in the flow. */ @media (min-width: 1620px) { body.has-study-rail .study-tools-callout.is-rail { position: fixed; top: 150px; left: calc(50% + 550px + 24px); width: 190px; margin: 0; flex-direction: column; align-items: stretch; gap: 10px; z-index: 5; } body.has-study-rail .study-tools-callout.is-rail .stc-actions { flex-direction: column; width: 100%; } body.has-study-rail .study-tools-callout.is-rail a { text-align: center; } /* With a rail on each side the composition centres on its own, so the single-rail half-shift has to come back off or everything leans right. */ body.has-page-toc.has-study-rail main { margin-left: auto; margin-right: auto; } body.has-page-toc.has-study-rail .page-toc { left: calc(50% - 550px - 214px); } /* Tools but no rail -- an index page. Mirror of the single-rail shift: lean the column left by half the panel so the two centre together. The panel has to travel with it, or the gap grows by exactly the shift. */ body.has-study-rail:not(.has-page-toc) main { margin-left: calc(50% - 550px - (190px + 24px) / 2); margin-right: auto; } body.has-study-rail:not(.has-page-toc) .study-tools-callout.is-rail { left: calc(50% + 550px + 24px - (190px + 24px) / 2); } } /* === RESPONSIVE === */ @media (max-width: 900px) { .topbar { padding: 0 12px; gap: 10px; } .topbar-search { display: none; } .topbar-support { padding: 6px 10px; font-size: 0.78em; } /* Hamburger replaces the inline topnav at narrow widths */ .hamburger { display: flex; } /* Topnav becomes a slide-down drawer beneath the topbar. The closed-state translate must subtract the element's own height PLUS the top offset — `translateY(-110%)` is relative to the drawer's height, so a short drawer (~200px) only moves ~220px up from top:56px, leaving its bottom edge ~36px below the viewport top (the last item "About" peeks through). calc(-100% - 60px) guarantees the bottom edge clears y=0 regardless of content size. */ .topnav { position: fixed; top: 56px; left: 0; right: 0; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); background-color: var(--chrome); border-bottom: 1px solid var(--surface); z-index: 150; overflow-y: auto; transform: translateY(calc(-100% - 60px)); transition: transform 0.25s ease; padding: 8px 0; visibility: hidden; pointer-events: none; } .topnav-list { flex-direction: column; gap: 0; padding: 0; } .topnav-item { display: block; } .topnav-trigger { width: 100%; justify-content: space-between; height: 44px; border-radius: 0; padding: 0 20px; } .topnav-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background-color: var(--sunken); padding: 4px 0 8px; display: none; min-width: 0; } .topnav-item.is-open > .topnav-menu, .topnav-item:focus-within > .topnav-menu { display: block; } .topnav-menu a { padding: 8px 28px; font-size: 0.92em; } /* Nested submenu is already inline-indented globally; just give the children a touch more breathing room on the mobile drawer. */ .topnav-flyout a { padding: 10px 24px 10px 44px; font-size: 0.9em; } /* Mobile-only overlay behind the drawer */ .topnav-overlay { display: block; position: fixed; top: 56px; left: 0; width: 100vw; height: calc(100vh - 56px); height: calc(100dvh - 56px); background: rgba(0,0,0,0.6); z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } /* Open state — checkbox driven */ .nav-toggle-checkbox:checked ~ .topbar .topnav, .nav-toggle-checkbox:checked ~ .topnav { transform: translateY(0); box-shadow: 0 8px 24px rgba(0,0,0,0.5); visibility: visible; pointer-events: auto; } .nav-toggle-checkbox:checked ~ .topnav-overlay { opacity: 1; visibility: visible; } main, footer { padding-left: 16px; padding-right: 16px; } /* Sub-nav scrolls horizontally on mobile too — already does, just tighten */ .subnav.has-context { padding: 0 12px; gap: 12px; } .service-item, .testimonial { display: block; width: 90%; margin: 10px auto; } .hero { height: 40vh; } .hero--full { height: 60vh; height: 60dvh; } .hero h1 { font-size: 2.2em; } .meter { height: 1rem; } /* Tighten cards/grids on mobile */ .course-card, .feature-card, .topic-card, .track-card, .syllabus-card, .area-section, .question-card, .cert-block { padding: 18px; } .course-card h2, .area-section h2 { font-size: 1.2em; } /* Topic page mnemonic cards — wider on mobile */ .mnemonic-grid, .pill-grid, .topic-grid, .feature-grid, .course-track, .track-row, .syllabus-grid, .post-list { grid-template-columns: 1fr !important; } /* Quiz / search adjustments. Deliberately NOT flex-direction: column. 900px is the hamburger breakpoint, and a wrapped row still fits comfortably at that width — stacking everything put Reset, Export and Import on three separate lines. flex-wrap already handles it; the score just has to give up its auto margin so it stops forcing an awkward break. */ .quiz-controls .score { margin-left: 0; } .search-box { flex-wrap: wrap; } /* On narrow screens the 22-letter jump nav takes 3-4 rows when sticky, which dominates the viewport. Hide the letters and keep just the search bar — typing a term is faster than alphabet-hunting on a phone anyway. */ .alpha-nav a { display: none; } .alpha-nav .search-box { margin-left: 0; width: 100%; } .alpha-nav input { width: 100%; min-width: 0; } /* Logbook two-column → one */ .logbook-grid { grid-template-columns: 1fr !important; } /* ACS reference: stop sticky TOC from eating content */ .area-toc { position: relative; } /* Smaller heading */ h1 { font-size: 1.7em; } h2 { font-size: 1.3em; } } @media (max-width: 560px) { /* Below this the labelled selects genuinely are too wide to share a row. */ .quiz-controls > div:not(.quiz-actions) { width: 100%; } .quiz-controls select { width: 100%; } .search-box { flex-direction: column; align-items: stretch; } } @media (max-width: 480px) { .hero h1 { font-size: 1.8em; } .hero p { font-size: 1em; } .meter { height: 0.875rem; } .stat-grid, .summary-grid { grid-template-columns: 1fr 1fr !important; } /* Tighten table on small screens */ table { font-size: 0.85em; } table th, table td { padding: 4px !important; } } /* ===== Auto-glossary linker ===== */ .glossary-auto-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold); cursor: pointer; position: relative; transition: border-color 0.15s ease, color 0.15s ease; } .glossary-auto-link:hover { color: var(--gold); border-bottom-color: var(--accent); } .glossary-tip { position: absolute; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: 340px; background-color: var(--sunken); border: 1px solid var(--border-soft); border-radius: 6px; padding: 11px 16px 13px; box-shadow: 0 10px 24px rgba(0,0,0,0.7); pointer-events: none; cursor: default; opacity: 0; transform: translateY(4px); /* display:none while closed, not merely opacity:0. Every tip is absolutely positioned 340px wide from its own underlined word, and an invisible-but-laid-out box parks past the right edge of a phone screen: 365px of viewport against 611px of document, so every page with a glossary term scrolled sideways on every phone. Capping max-width cannot fix that -- the problem is where the box starts, not how wide it is -- and clipping at the root does not either: measured in Chrome, `overflow-x: clip` and `hidden` on both left the content moving 200px, because clip is not propagated to the viewport from the root. Removing the box from layout is what works. The fade survives via allow-discrete + @starting-style; where those are unsupported the tip appears instantly, which is a fair trade for not shipping a sideways scroll on every phone. Nothing measures the tip while it is closed -- positionTip() runs on mouseover and after the open class is added, by which point it is displayed. */ display: none; transition: opacity 0.18s ease 0.18s, transform 0.18s ease 0.18s, display 0.18s allow-discrete 0.18s; z-index: 1000; text-align: left; color: var(--text); font-weight: 400; font-style: normal; } /* Invisible bridge over the 10px gap between the word and the tooltip — keeps :hover continuous so the mouse can travel up to click "Open in glossary →" without the tooltip vanishing mid-flight. Only "active" while the tip is shown, otherwise it would catch hovers above any underlined word. */ .glossary-tip::before { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; pointer-events: none; } .glossary-auto-link:hover .glossary-tip, .glossary-auto-link.glossary-tip-open .glossary-tip { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } @starting-style { .glossary-auto-link:hover .glossary-tip, .glossary-auto-link.glossary-tip-open .glossary-tip { opacity: 0; transform: translateY(4px); } } .glossary-auto-link:hover .glossary-tip::before, .glossary-auto-link.glossary-tip-open .glossary-tip::before { pointer-events: auto; } .glossary-tip-image { display: block; margin: -11px -16px 11px; /* span to tooltip edges, gap below */ border-radius: 5px 5px 0 0; /* match tooltip top corners */ border-bottom: 1px solid var(--border-soft); background: var(--sunken); overflow: hidden; line-height: 0; /* kill inline-img descender gap */ } .glossary-tip-image img { display: block; width: 100%; max-height: 180px; object-fit: cover; } .glossary-tip-title { display: block; color: var(--accent); font-weight: 700; font-size: 0.74em; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid rgba(var(--accent-rgb),0.35); } .glossary-tip-body { display: block; font-size: 0.87em; line-height: 1.6; color: var(--text); } /* Footer reads as a button: gold divider line above (matches the dotted-cue accent), button block below spans tooltip edges with a subtle gold tint that deepens on hover. Green text keeps the call-to-action prominent. */ .glossary-tip-link { display: block; margin: 12px -16px -13px; padding: 10px 16px 11px; border-top: 1px solid var(--gold); background-color: rgba(var(--gold-rgb),0.07); color: var(--accent); font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; text-align: center; border-radius: 0 0 5px 5px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .glossary-tip-link:hover { background-color: rgba(var(--gold-rgb),0.18); color: var(--accent-hover); } /* On narrow screens, keep the tooltip inside the viewport */ @media (max-width: 600px) { .glossary-tip { max-width: min(340px, calc(100vw - 40px)); } } /* ===== Wiki sub-page layout ===== */ .breadcrumb { color: var(--text-dim); font-size: 0.85em; margin: 0 0 6px; } .breadcrumb a { color: var(--gold); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .sep { color: var(--text-dim); margin: 0 6px; } .concept-hero { background-color: var(--surface); border-left: 4px solid var(--accent); border-radius: 8px; padding: 22px 26px; margin: 14px 0 28px; } .concept-hero h1 { color: var(--accent); margin: 0 0 10px; font-size: 1.7em; } .concept-hero .summary { color: var(--text); font-size: 1.02em; line-height: 1.6; margin: 0; } .concept-hero .also-known { color: var(--text-dim); font-size: 0.85em; margin-top: 10px; font-style: italic; } .concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 18px 0 30px; } .concept-tile { background-color: var(--surface); border-radius: 8px; padding: 18px 20px; text-decoration: none; color: inherit; border-left: 3px solid var(--gold); transition: transform 0.15s ease, border-left-color 0.15s ease; display: block; } .concept-tile:hover { transform: translateY(-2px); border-left-color: var(--accent); } /* h3, not h4: the tile sits under an h2, so h4 skipped a level in the document outline -- which is how a screen-reader user navigates a page. Every property here is set explicitly, so the change is invisible. */ .concept-tile h3 { color: var(--accent); margin: 0 0 6px; font-size: 1em; } .concept-tile p { color: var(--text-soft); font-size: 0.88em; margin: 0; line-height: 1.5; } .concept-section-label { color: var(--gold); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--surface); } .concept-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 32px 0 20px; padding-top: 22px; border-top: 1px solid var(--surface); } .concept-nav a { background-color: var(--surface); border-radius: 8px; padding: 12px 16px; text-decoration: none; color: var(--text); font-size: 0.92em; display: block; text-align: center; transition: transform 0.15s ease, border-color 0.15s ease; border: 1px solid transparent; } .concept-nav a:hover { border-color: var(--accent); transform: translateY(-1px); } .concept-nav .label { display: block; color: var(--text-dim); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; } .concept-nav .center { background-color: var(--accent-tint); border-color: var(--accent); } .concept-nav .center .label { color: var(--accent); } .concept-nav .disabled { opacity: 0.4; pointer-events: none; } @media (max-width: 600px) { .concept-nav { grid-template-columns: 1fr; } } .related-concepts { background-color: var(--surface); border-left: 4px solid var(--gold); border-radius: 8px; padding: 16px 22px; margin: 24px 0; } .related-concepts h3 { color: var(--gold); margin: 0 0 10px; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.05em; } .related-concepts ul { margin: 0; padding-left: 18px; } .related-concepts li { color: var(--text); font-size: 0.92em; margin-bottom: 6px; line-height: 1.5; } .related-concepts a { color: var(--accent); text-decoration: none; } .related-concepts a:hover { text-decoration: underline; } .related-concepts .blurb { color: var(--text-dim); } /* ========================================================================== Figures — diagrams and photos integrated into content pages. Use

for FAA-style line drawings, scans, and technical illustrations (white-bg padding helps transparent PNGs read on the dark theme). Use

for full-bleed photography. Captions get italic muted text; .src spans render attribution muted further. ========================================================================== */ figure.diagram, figure.photo { margin: 22px auto; max-width: 900px; text-align: center; } figure.diagram img, figure.photo img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; } figure.diagram img { background: var(--surface); padding: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } figure.diagram figcaption, figure.photo figcaption { margin-top: 10px; color: var(--text-soft); font-size: 0.88em; font-style: italic; line-height: 1.5; } figure.diagram .src, figure.photo .src { display: block; margin-top: 4px; color: var(--text-dim); font-size: 0.85em; font-style: normal; } @media (max-width: 600px) { figure.diagram img { padding: 8px; } figure.diagram, figure.photo { margin: 16px auto; } } /* ========================================================================== Color-coded marking text. When prose names a real-world color-coded thing (instrument arc, fuel placard, beacon, airspace shading, position light) we render the color word in that color so the eye can match prose to the diagram or photo. The rule: color the word only when you can point at the thing and it IS that color. Idioms like "red flag" or "green light" stay plain. Distinct from .links/headings (which use brand green var(--accent)) — these tokens are brighter and bold so they read as color labels. ========================================================================== */ /* --mark-green, not --accent-hover. The two happened to share a hex in the original palette, so the sweep collapsed them -- and on a red-branded instance "green arc" then rendered in red. An instrument marking names a real colour on a real gauge; it is never the brand's. */ .mark-green { color: var(--mark-green); font-weight: 600; } .mark-yellow { color: var(--mark-yellow); font-weight: 600; } .mark-red { color: var(--mark-red); font-weight: 600; } .mark-blue { color: var(--mark-blue); font-weight: 600; } .mark-magenta { color: var(--mark-magenta); font-weight: 600; } .mark-amber { color: var(--mark-amber); font-weight: 600; } /* Print: keep colors readable on white paper. */ /* The generated print block repoints --mark-* at print-safe values, so the literal overrides that used to live here are gone. */ /* ========================================================================== Print stylesheet — turn any content page into a clean study packet. Hides site chrome (topbar, sidebar, notes widget, footer, study-tools callouts, prev/next nav). Resets dark theme to ink-on-paper. Adds page- break hints so course-cards and concept-heros don't split mid-block. ========================================================================== */ @media print { @page { margin: 0.6in 0.7in; } html, body { background: #fff !important; color: #000 !important; font-family: Georgia, "Times New Roman", serif; font-size: 11pt; line-height: 1.45; } /* Hide every element that's only useful on screen. */ .topbar, .topnav, .subnav, .nav-toggle-checkbox, .hamburger, .topnav-overlay, footer, .breadcrumb, .study-tools-callout, .concept-nav, .nav-context, .topbar-search, .topbar-support, #notes-widget, #notes-fab, #notes-panel, #feedback-fab, #feedback-overlay { display: none !important; } /* Full-width main; no chrome offsets. */ main { margin: 0 !important; padding: 0 !important; max-width: 100% !important; } /* Headings: serif body, sans headings, avoid orphan headings. */ h1, h2, h3, h4, h5 { font-family: "Helvetica Neue", Arial, sans-serif; color: #000 !important; page-break-after: avoid; page-break-inside: avoid; } h1 { font-size: 22pt; margin: 0 0 12pt; } h2 { font-size: 15pt; margin: 16pt 0 6pt; } h3 { font-size: 12pt; margin: 12pt 0 4pt; } p, li { orphans: 3; widows: 3; } /* Links: black underlined. External URLs printed in parens; internal links keep just the underline so the page doesn't fill with /courses/... */ a, a:visited { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; } /* Content blocks: light borders, no fills. */ .course-card { background: transparent !important; border: 0.5pt solid #888 !important; border-radius: 0 !important; padding: 8pt 12pt !important; margin: 0 0 10pt !important; page-break-inside: avoid; } .concept-hero { background: transparent !important; border: none !important; border-left: 3pt solid #000 !important; padding: 0 0 0 12pt !important; margin: 0 0 14pt !important; page-break-inside: avoid; } .concept-hero h1 { color: #000 !important; } .concept-hero .summary { color: #000 !important; font-size: 11pt; } .related-concepts { background: transparent !important; border: none !important; border-top: 1pt solid #000 !important; padding: 8pt 0 0 !important; margin-top: 14pt; page-break-inside: avoid; } .related-concepts h3 { color: #000 !important; } .related-concepts a { color: #000 !important; } .related-concepts .blurb { color: #444 !important; } /* Warning boxes: keep distinct as a "callout" but greyscale. */ .warning-box { background: #f3f3f3 !important; border-left: 3pt solid #000 !important; color: #000 !important; padding: 6pt 10pt !important; page-break-inside: avoid; } .warning-box p { color: #000 !important; } /* Concept tile grids print as a vertical list. */ .concept-grid { display: block !important; gap: 0 !important; } .concept-tile { background: transparent !important; border: 0.5pt solid #aaa !important; padding: 5pt 10pt !important; margin: 3pt 0 !important; display: block !important; page-break-inside: avoid; } .concept-tile h4 { color: #000 !important; margin: 0 0 2pt !important; font-size: 11pt; } .concept-tile p { color: #000 !important; margin: 0 !important; font-size: 10pt; } .concept-section-label { color: #000 !important; font-size: 12pt; margin-top: 14pt; } /* Code + pre: greyscale-friendly. */ code, pre { background: #f3f3f3 !important; color: #000 !important; font-family: "Courier New", monospace; font-size: 9pt; } pre { border: 0.5pt solid #aaa !important; padding: 6pt 8pt !important; page-break-inside: avoid; white-space: pre-wrap; } /* Tables — keep gridlines, force visible borders. */ table { border-collapse: collapse; page-break-inside: avoid; } th, td { border: 0.5pt solid #888 !important; padding: 4pt 6pt; color: #000 !important; } /* Images — never overflow the page; never split. */ img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; } /* Glossary auto-links: drop the dotted underline + tooltip pseudo-content. */ .glossary-auto-link { color: #000 !important; text-decoration: none !important; border-bottom: none !important; } .glossary-tip { display: none !important; } /* Further-reading aside: keep, simplified. */ .further-reading { background: transparent !important; border: none !important; border-top: 1pt solid #000 !important; padding: 8pt 0 0 !important; page-break-inside: avoid; } .further-reading h3 { color: #000 !important; } .fr-tag { background: #eee !important; color: #000 !important; border: 0.5pt solid #888 !important; } /* Figures — keep visible; drop dark-theme padding/shadow. */ figure.diagram, figure.photo { margin: 12pt auto !important; page-break-inside: avoid; } figure.diagram img { background: transparent !important; padding: 0 !important; border: 0.5pt solid #888 !important; box-shadow: none !important; } figure.diagram figcaption, figure.photo figcaption { color: #000 !important; font-size: 9.5pt !important; font-style: italic; } figure.diagram .src, figure.photo .src { color: #444 !important; } } /* === VIDEO ASIDE (per-page video sidebar) === */ /* Fixed-right panel pinned to the viewport on wide screens. Below 1700px it falls back to an inline block appended to

. The JS module handles mounting in the right place based on a matchMedia query. */ .video-aside { background-color: #1f1f1f; border: 1px solid #2e2e2e; border-radius: 12px; padding: 18px; box-sizing: border-box; } .video-aside.is-fixed { position: fixed; top: 80px; /* Anchor just outside main's right edge. Main is centered (max-width 1100), so the aside hugs the reading column on wide screens instead of floating in dead space at the viewport edge. */ left: calc(50% + 550px + 24px); width: 320px; max-height: calc(100vh - 104px); overflow-y: auto; z-index: 50; } .video-aside.is-inline { margin: 36px 0 8px; } .video-aside h3 { margin: 0 0 4px; color: var(--accent); font-size: 0.95em; letter-spacing: 0.04em; text-transform: uppercase; } .video-aside .va-subtitle { margin: 0 0 14px; color: #888; font-size: 0.78em; } .video-aside .va-list { display: flex; flex-direction: column; gap: 12px; } .video-aside .va-card { background-color: var(--surface); border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid transparent; transition: border-color 0.15s ease, transform 0.15s ease; text-align: left; display: block; width: 100%; padding: 0; color: inherit; font: inherit; } .video-aside .va-card:hover { border-color: var(--accent); transform: translateY(-1px); } .video-aside .va-card[data-locked="true"]:hover { border-color: var(--gold); } .video-aside .va-thumb { position: relative; aspect-ratio: 16 / 9; background-color: #111; background-size: cover; background-position: center; } .video-aside .va-thumb.is-placeholder { background-image: linear-gradient(135deg, #2a2a2a 0%, var(--bg) 100%); background-size: auto; } .video-aside .va-thumb.is-placeholder::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 8px, transparent 8px, transparent 16px ); } .video-aside .va-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%); } .video-aside .va-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1; } .video-aside .va-play::before { content: ''; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #fff; margin-left: 3px; } .video-aside .va-badge { position: absolute; top: 8px; left: 8px; background-color: rgba(0,0,0,0.7); color: var(--gold); font-size: 0.7em; padding: 2px 8px; border-radius: 12px; z-index: 1; letter-spacing: 0.04em; } .video-aside .va-badge.free { color: var(--accent); } .video-aside .va-duration { position: absolute; bottom: 8px; right: 8px; background-color: rgba(0,0,0,0.75); color: #ddd; font-size: 0.75em; padding: 1px 6px; border-radius: 4px; z-index: 1; } .video-aside .va-meta { padding: 10px 12px 12px; } .video-aside .va-title { margin: 0; color: #e8e8e8; font-size: 0.92em; line-height: 1.35; } .video-aside .va-type { margin: 4px 0 0; color: #888; font-size: 0.75em; } /* Hide on narrow viewports — videos still accessible inline below content. */ @media (max-width: 700px) { .video-aside.is-inline { padding: 14px; } } /* Modal player (used for both video and GIF lightbox). */ .va-modal { position: fixed; inset: 0; background-color: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; } .va-modal-inner { position: relative; width: min(960px, 100%); max-height: 90vh; } .va-modal-inner iframe, .va-modal-inner video, .va-modal-inner img { width: 100%; max-height: 90vh; background-color: #000; border-radius: 8px; border: 0; display: block; } .va-modal-inner iframe, .va-modal-inner video { aspect-ratio: 16 / 9; height: auto; } .va-modal-close { position: absolute; top: -36px; right: 0; background: none; border: 0; color: #fff; font-size: 1.6em; cursor: pointer; padding: 4px 12px; } .va-modal-locked { background-color: #1f1f1f; border-radius: 12px; padding: 32px; color: #ddd; text-align: center; max-width: 480px; } .va-modal-locked h3 { color: var(--gold); margin: 0 0 12px; } .va-modal-locked p { margin: 0 0 18px; line-height: 1.5; } /* Status flag on a citation whose source document the FAA has withdrawn. The link still goes to the real AC -- that is still where the text came from -- but a student reading it needs to know it is no longer current guidance, so the flag sits next to the citation rather than replacing it. Muted and in parentheses: it qualifies the citation, it is not a warning. */ .cite-status { color: var(--text-muted); font-size: 0.9em; font-style: italic; white-space: normal; } /* ========================================================================== ACS CODE ANATOMY ========================================================================== The decomposition of a code like PH.I.C.K2, built from type and rules rather than shipped as an image. Being real markup it is selectable and copyable, findable with the browser's own find-in-page, sharp at any zoom, and it takes whatever palette the tenant build stamps in -- none of which a JPEG does. (It does NOT become searchable from the site's search box: search-index.js is a hand-maintained list of pages, not a full-text index, and the ACS pages already have their entries.) Every colour comes from a token, and each segment carries its own colour in --ca-c. The swatch on a definition row below is the same --ca-c as its segment in the code above: that repetition is the whole diagram, and it is what survives when the parts wrap onto separate lines on a phone. Emphasis increases left to right, because so does specificity -- the element number is what a student actually looks up. Selectors are qualified with the element name and scoped to .code-anatomy on purpose: the ACS pages carry their own ".acs-decoder p, .acs-decoder ul" rules in a page