body { margin: 0; font-family: Verdana, sans-serif; font-size: 14px; line-height: 1.45; color: #555555; background-color: #f9f9f9; } main a, footer a { color: #1a355d; text-decoration: none; border-bottom: 1px solid rgba(26, 53, 93, 1.0); transition: border-bottom 0.2s ease; } main a:hover, footer a:hover { text-decoration: none; border-bottom: 1px solid rgba(26, 53, 93, 0.3); } .navbar nav a.active { font-weight: bold; text-decoration: underline; border-bottom: none; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { color: #1a355d; } h2 { font-size: 20px; margin-top: 1.25em; margin-bottom: 0.5em; line-height: 1.2; } h2 + .cards, h2 + .content-media, h2 + .hero-media { margin-top: 20px !important; } header { background: #1a355d; color: white; } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 960px; margin: 0 auto; padding: 12px 20px; } .navbar .logo { font-size: 20px; font-weight: bold; } .logo-link { text-decoration: none; color: inherit; border-bottom: none !important; } .logo-link:hover { text-decoration: none; border-bottom: none !important; } .navbar nav { margin-left: auto; display: flex; align-items: center; } .navbar nav a { color: white; text-decoration: none; padding: 5px 8px; font-size: 14px; } .navbar .subscribe { background-color: #334e6f; color: white; border: none; padding: 8px 15px; margin-left: 20px; cursor: pointer; font-size: 14px; font-weight: normal; border-radius: 0; line-height: 1; transition: filter 0.2s ease; } .subscribe:hover { filter: brightness(1.2); } footer { background: #1a355d; color: white; padding: 20px 0; } .footer { display: flex; justify-content: space-between; align-items: center; max-width: 960px; margin: 0 auto; padding: 0 20px; } .footer p { margin: 0; font-size: 12px; } .footer nav a { color: white; font-size: 12px; padding-left: 15px; } main { max-width: 960px; margin: 0 auto; padding: 0 20px; } h1.page-title { font-size: 24px; padding-bottom: 10px; border-bottom: 2px solid #1a355d; margin-top: 30px; margin-bottom: 15px; } .h1-series-title { font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; } .h1-subtitle { font-size: 14px; font-weight: bold; display: block; margin-top: 5px; } .hero { margin-bottom: 20px; } .hero-media { margin-bottom: 24px; } .hero-media img { border: 1px solid #eeeeee; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .hero-media p { font-size: 13px; font-style: italic; margin-top: 6px; text-align: left; } .content-narrow { max-width: 800px; margin: 0 auto; padding-bottom: 30px; } .series-toc { margin-top: 30px; margin-bottom: 0; } .series-toc p { margin: 0 0 0.5rem 0; line-height: 1.3; } .series-toc p:last-child { margin-bottom: 0; } .secondary-info-wrapper { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .content-media { display: flex; gap: 20px; margin-bottom: 30px; margin-top: 20px; width: 100%; margin-left: 0; padding: 0; } .media-container, .content-media > div { width: calc((100% - 20px) / 2); flex-shrink: 0; box-sizing: border-box; margin: 0; padding: 0; } .align-to-card-content h3, .align-to-card-content p { margin-left: 15px; } .content-media h3 { margin-top: 0; } .content-media img { width: 100%; height: auto; border: 1px solid #eeeeee; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } h2.insights { font-size: 20px; margin-top: 30px; margin-bottom: 15px; } .insights { margin-bottom: 40px; } .listing { padding: 15px 0; border-bottom: 1px solid #dddddd; } .listing:last-child { border-bottom: none; } .listing .title-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .listing h3 { font-size: 16px; margin-top: 0; margin-bottom: 0; } .listing h3 a { color: #1a355d; } article.listing li { margin-bottom: 0.25em; } .listing .title-row-info { white-space: nowrap; font-size: 12px; color: #777777; margin-left: 15px; font-weight: normal; text-align: right; flex-shrink: 0; } .listing .title-row-info .version-number { margin-right: 10px; } .listing p { margin-top: 5px; margin-bottom: 10px; } .cards { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; } .cards.homepage-cards { flex-wrap: nowrap; margin-bottom: 25px; } .card { background-color: #f0f8ff; padding: 15px 15px 20px 15px; border-radius: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; flex: 1 1 calc(50% - 10px); box-sizing: border-box; } .cards.homepage-cards .card { flex: 0 0 calc(50% - 10px); } .card h3 { font-size: 16px; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #1a355d; margin-top: 0; } .card p { margin: 0; } @media (max-width: 768px) { main { padding: 0 10px; } .navbar { flex-direction: column; align-items: center; padding-top: 15px; padding-bottom: 15px; } .navbar .logo { margin-bottom: 4px; } .navbar nav { flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: center; margin: 0; } .navbar nav a { width: auto; text-align: center; padding: 5px 8px; flex-shrink: 0; } .navbar .subscribe { display: block; margin: 12px auto 0 auto; } .page-title { font-size: 22px !important; padding-bottom: 5px !important; margin-top: 15px !important; } .h1-subtitle { display: block; margin-top: 5px; } h2.insights { font-size: 18px; } h2 { font-size: 18px; } .content-media h3 { font-size: 16px; } .card h3 { font-size: 14px; } .listing h3 { font-size: 15px; } footer { padding: 8px 0; } .footer { flex-direction: column; align-items: center; text-align: center; padding: 4px 10px; } .footer p { margin-bottom: 8px; } .footer nav { margin-bottom: 8px; } .footer nav:last-child { margin-bottom: 0; } .footer nav a { padding: 0 6px; } .cards { flex-direction: column; gap: 15px; margin-bottom: 25px; margin-top: 0 !important; } .card { flex: 1 1 100%; margin: 0 !important; } .cards.homepage-cards .card { flex: 1 1 100%; } .content-media { flex-direction: column; width: 100%; margin: 0; padding: 0; } .content-media .media-container { order: -1; width: 100%; max-width: 100%; flex-shrink: 1; padding-left: 0; } .content-media .content-text { width: 100%; } .align-to-card-content h3, .align-to-card-content p { margin-left: 0; } } hr { border: 0; border-top: 2px solid #1a355d; margin: 30px 0; } .caption { font-size: 13px; font-style: italic; color: #555555; margin-top: 14px; text-align: left; } .content-text-flex { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; } .caption-group { margin-top: auto; } .caption-group p:last-child, .content-text-flex div:first-child p:first-child { margin-bottom: 0; margin-top: 0; } @media (max-width: 768px) { .hero + .content-media.mobile-reorder { margin-top: 0 !important; } main .content-media.mobile-reorder { display: flex; flex-direction: column; gap: 0 !important; margin-top: 20px !important; margin-bottom: 0 !important; } main .content-media.mobile-reorder::after { content: ""; display: block; width: 100%; border-top: 2px solid #1a355d; margin-top: 24px; order: 4; } main .mobile-reorder:last-of-type::after { display: none; } main .mobile-reorder .content-text { display: contents; } main .mobile-reorder .content-text > div:first-child { order: 1; display: block !important; width: 100%; } main .mobile-reorder h3 { margin-top: 0 !important; margin-bottom: 12px !important; } main .mobile-reorder .media-container { order: 2; width: 100% !important; margin: 22px 0 4px 0 !important; padding: 0 !important; } main .mobile-reorder .media-container img { margin: 0 !important; } main .mobile-reorder .caption-group { order: 3; display: block !important; margin: 0 !important; padding: 0 !important; } main .mobile-reorder .caption-group p { margin-top: 8px !important; margin-bottom: 0 !important; } main .mobile-reorder .caption-group p:first-child { margin-top: 0 !important; } } ul.bullet-list, ol.bullet-list { padding-left: 20px; list-style-type: disc; margin-top: 15px; } h3 + ul.bullet-list, h3 + ol.bullet-list { margin-top: 0 !important; } ul.bullet-list li, ol.bullet-list li { margin-bottom: 0.725em; } ul.bullet-list li:last-child, ol.bullet-list li:last-child { margin-bottom: 0; } .page-nav { display: flex; justify-content: space-between; font-size: 14px; margin-top: 30px; margin-bottom: 40px; gap: 20px; } .page-nav .nav-prev { flex: 1; text-align: left; } .page-nav .nav-next { flex: 1; text-align: right; } @media (max-width: 768px) { .page-nav { flex-direction: column; align-items: center; text-align: center; gap: 8px; } .page-nav .nav-prev, .page-nav .nav-next { width: 100%; text-align: center; } }