/* ===================================================================== FAQ Friday Newsletters — shared layout CSS Consumes design tokens from colors_and_type.css. Screen + print. Masthead variants via [data-mh="a|b|c"] on . ===================================================================== */ .nl * { box-sizing: border-box; } .nl { --pillar: var(--ag-blue); max-width: 820px; margin: 0 auto; background: var(--ag-white); color: var(--ag-ink); } .nl[data-pillar="print"] { --pillar: var(--ag-yellow); } .nl[data-pillar="marketing"] { --pillar: var(--ag-green); } .nl[data-pillar="signs"] { --pillar: var(--ag-blue); } .nl[data-pillar="technology"] { --pillar: var(--ag-maroon); } /* ---------- MASTHEAD ---------- */ .nl-mh { background: var(--ag-rich-black); color: var(--ag-white); padding: 30px 72px 30px; position: relative; overflow: visible; } /* master photo in the banner, faded into the black on its left edge */ .nl-mh-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 0; pointer-events: none; overflow: hidden; } .nl-mh-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 30%, #000 66%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 30%, #000 66%); } .nl-mh-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,15,17,.9) 0%, rgba(15,15,17,.18) 40%, rgba(15,15,17,0) 78%); } .nl-mh-top, .nl-loc, .nl-eyebrow, .nl-mh-meta, .nl-q, .nl-mh-foot { position: relative; z-index: 1; } .nl-loc, .nl-mh-meta { text-shadow: 0 1px 6px rgba(0,0,0,.7); } .nl-q { text-shadow: 0 2px 14px rgba(0,0,0,.45); } [data-mh="b"] .nl-mh-photo, [data-mh="c"] .nl-mh-photo { display: none; } .nl-mh-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .nl-mh-top img { height: 44px; width: auto; display: block; } .nl-loc { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: var(--tracking-eyebrow); color: var(--ag-white); text-transform: uppercase; margin: 10px 0 7px; } .nl-mh-top .nl-loc { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: var(--tracking-eyebrow); color: var(--ag-gray-300); text-transform: uppercase; }.nl-eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 13px; color: var(--ag-red); margin: 0 0 3px; } .nl-pill { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin: 0; font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; padding: 6px 12px; border-radius: 4px; color: var(--ag-white); background: var(--ag-blue); } .nl-pill-row { position: relative; z-index: 5; margin: 14px 0 0; } .nl[data-pillar="signs"] .nl-pill { background: var(--color-pillar-signs); color: var(--ag-white); } .nl[data-pillar="marketing"] .nl-pill { background: var(--color-pillar-marketing); color: var(--ag-white); } .nl[data-pillar="print"] .nl-pill { background: var(--color-pillar-print); color: var(--ag-rich-black); } .nl[data-pillar="technology"] .nl-pill { background: var(--color-pillar-technology); color: var(--ag-white); } /* ---- pillar capsule as a library-nav button ---- */ .nl-pillnav { position: relative; display: inline-block; } .nl-pill-btn { border: 0; cursor: pointer; box-shadow: 0 1.5px 0 rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.18); transition: filter .15s ease, transform .06s ease, box-shadow .15s ease; } .nl-pill-btn:hover { filter: brightness(1.09); } .nl-pill-btn:active { transform: translateY(1px); box-shadow: 0 0.5px 0 rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.18); } .nl-pill-btn:focus-visible { outline: 2px solid var(--ag-white); outline-offset: 2px; } .nl-pill-caret { display: block; margin-top: 1px; transition: transform .2s cubic-bezier(.2,0,0,1); } .nl-pillnav.open .nl-pill-caret { transform: rotate(180deg); } .nl:has(.nl-pillnav.open) .nl-mh { z-index: 60; } .nl-pillmenu { position: absolute; top: calc(100% + 9px); left: 0; z-index: 40; width: 340px; max-width: 80vw; max-height: 62vh; overflow-y: auto; background: var(--ag-white,#fff); color: var(--ag-ink,#1a1a1c); border: 1px solid var(--ag-gray-200,#e3e3e0); border-radius: 9px; box-shadow: 0 16px 40px rgba(0,0,0,.22); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; text-transform: none; letter-spacing: normal; } .nl-pillnav.open .nl-pillmenu { opacity: 1; visibility: visible; transform: translateY(0); } .nl-pillmenu-head { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--ag-gray-400,#75787b); padding: 4px 8px 9px; } .nl-pillmenu-group { padding: 5px 0; } .nl-pillmenu-group + .nl-pillmenu-group { border-top: 1px solid var(--ag-gray-100,#f0f0ee); } .nl-pillmenu-cat { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--ag-gray-500,#4a4d50); padding: 6px 8px 5px; } .nl-pillmenu-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--ag-blue); flex: 0 0 auto; } .nl-pillmenu-group[data-pillar="signs"] .nl-pillmenu-dot { background: var(--color-pillar-signs); } .nl-pillmenu-group[data-pillar="marketing"] .nl-pillmenu-dot { background: var(--color-pillar-marketing); } .nl-pillmenu-group[data-pillar="print"] .nl-pillmenu-dot { background: var(--color-pillar-print); } .nl-pillmenu-group[data-pillar="technology"] .nl-pillmenu-dot { background: var(--color-pillar-technology); } .nl-pillmenu-item { display: block; text-decoration: none; padding: 7px 8px; border-radius: 5px; color: var(--ag-ink,#1a1a1c); } .nl-pillmenu-item:hover { background: var(--ag-gray-100,#f4f4f2); } .nl-pillmenu-item.is-current { background: var(--ag-gray-100,#f4f4f2); } .nl-pillmenu-issue { display: block; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; color: var(--ag-gray-400,#75787b); } .nl-pillmenu-q { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.3; color: var(--ag-ink,#1a1a1c); margin-top: 1px; } .nl-pillmenu-item.is-current .nl-pillmenu-q { color: var(--ag-red,#da291c); } .nl-mh-meta { font-family: var(--font-body); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ag-gray-300); margin: 0 0 14px; } .nl-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ag-white); margin: 0; max-width: 15ch; } .nl-q .dot { color: var(--ag-red); } .nl-mh-foot { display: flex; align-items: center; gap: 16px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); } .nl-mh-foot .nl-slogan { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; color: var(--ag-gray-300); } .nl-mh-foot .nl-slogan::before { content: ""; width: 26px; height: 3px; background: var(--ag-red); display: block; } .nl-mh-foot .nl-meta { margin-left: auto; font-family: var(--font-body); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ag-gray-300); } /* Masthead variant B — quiet white, editorial */ [data-mh="b"] .nl-mh { background: var(--ag-white); color: var(--ag-ink); padding-bottom: 34px; } [data-mh="b"] .nl-mh-top img { content: none; } [data-mh="b"] .nl-mh-top .nl-loc { color: var(--ag-gray-500); } [data-mh="b"] .nl-q { color: var(--ag-rich-black); } [data-mh="b"] .nl-q .dot { color: var(--ag-red); } [data-mh="b"] .nl-mh-foot { border-top-color: var(--ag-gray-200); } [data-mh="b"] .nl-mh-foot .nl-slogan, [data-mh="b"] .nl-mh-foot .nl-meta { color: var(--ag-gray-500); } /* Masthead variant C — AG Red band */ [data-mh="c"] .nl-mh { background: var(--ag-red); color: var(--ag-white); } [data-mh="c"] .nl-eyebrow { color: var(--ag-rich-black); } [data-mh="c"] .nl-q { color: var(--ag-white); } [data-mh="c"] .nl-q .dot { color: var(--ag-rich-black); } [data-mh="c"] .nl-mh-foot { border-top-color: rgba(255,255,255,0.28); } [data-mh="c"] .nl-mh-foot .nl-slogan::before { background: var(--ag-white); } [data-mh="c"] .nl-mh-foot .nl-slogan, [data-mh="c"] .nl-mh-foot .nl-meta { color: rgba(255,255,255,0.85); } /* ---------- LEDE (the short answer) ---------- */ .nl-lede { padding: 40px 72px 8px; } .nl-lede .nl-kicker { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; color: var(--ag-red); margin: 0 0 16px; display: flex; align-items: center; gap: 12px; } .nl-lede .nl-kicker::before { content: ""; width: 26px; height: 3px; background: var(--ag-red); display: block; } .nl-lede .nl-answer { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 27px); line-height: 1.24; letter-spacing: -0.01em; color: var(--ag-rich-black); margin: 0 0 20px; } .nl-lede .nl-p { color: var(--ag-gray-700); } /* ---------- PULL-QUOTE (digital highlight) ---------- */ .nl-pullquote { margin: 20px 72px 30px; padding: 22px 0 20px; border-top: 2px solid var(--ag-rich-black); border-bottom: 2px solid var(--ag-rich-black); } .nl-pullquote-group .nl-pullquote:not(:first-child) { margin-top: -8px; } .nl-pq-text { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.6vw, 33px); line-height: 1.24; letter-spacing: -0.01em; color: var(--ag-rich-black); text-wrap: pretty; margin: 0; } .nl-pq-text strong { font-weight: 800; color: var(--ag-red); } .nl-pq-source { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11px; color: var(--ag-gray-500); margin: 16px 0 0; } /* placed lower in the body flow — tighten the side margins to the column */ .nl-body .nl-pullquote { margin-left: 0; margin-right: 0; } @media (max-width: 560px) { .nl-pullquote { margin-left: 22px; margin-right: 22px; } .nl-body .nl-pullquote { margin-left: 0; margin-right: 0; } } /* compact variant — subtle stat emphasis for the print editions */ .nl-pullquote-compact { margin: 12px 0 14px; padding: 12px 0 11px; border-top-width: 1.5px; border-bottom-width: 1.5px; break-inside: avoid; } .nl-pullquote-compact .nl-pq-text { font-size: 17px; line-height: 1.3; font-weight: 600; } .nl-pullquote-compact .nl-pq-text strong { font-weight: 800; } .nl-pullquote-compact .nl-pq-source { font-size: 9.5px; margin-top: 9px; } /* ---------- BODY ---------- */ .nl-body { padding: 8px 72px 20px; } .nl-section { margin: 34px 0 0; } .nl-h { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ag-rich-black); margin: 0 0 12px; padding-top: 22px; border-top: 1px solid var(--ag-gray-200); } .nl-p { font-family: var(--font-body); font-size: 15px; line-height: 1.62; color: var(--ag-ink); margin: 0 0 13px; } /* first body section sits right under the gallery — no divider needed */ .nl-body .nl-section:first-child .nl-h { border-top: none; padding-top: 0; } .nl-p strong { font-weight: var(--fw-bold); color: var(--ag-rich-black); } .nl-p em { font-style: italic; } /* featured stat — inline red pill */ .nl-stat { background: var(--ag-red); color: #fff; font-weight: var(--fw-bold); padding: 1px 9px; border-radius: 999px; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .nl-lede .nl-stat { font-size: 0.92em; } .nl-lead { margin-top: 15px; } .nl-source { font-family: var(--font-body); font-style: italic; font-size: 12.5px; line-height: 1.5; color: var(--ag-gray-500); margin: 0 0 13px; padding-left: 14px; border-left: 2px solid var(--ag-gray-200); } .nl-source strong { font-weight: var(--fw-bold); font-style: normal; } /* numbered steps */ .nl-steps { list-style: none; counter-reset: step; margin: 4px 0 13px; padding: 0; } .nl-steps li { counter-increment: step; position: relative; padding: 0 0 14px 46px; font-family: var(--font-body); font-size: 15px; line-height: 1.58; color: var(--ag-ink); } .nl-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--ag-red); width: 32px; } .nl-steps li strong { font-weight: var(--fw-bold); color: var(--ag-rich-black); } .nl-steps li em { font-style: italic; } /* ---------- ONE HONEST CATCH callout ---------- */ .nl-catch { margin: 34px 0 0; background: var(--ag-gray-tint-5); border-left: 4px solid var(--ag-red); padding: 26px 30px 12px; } .nl-catch .nl-catch-tag { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11.5px; color: var(--ag-red); margin: 0 0 10px; } .nl-catch .nl-h { border-top: none; padding-top: 0; margin-bottom: 10px; font-size: 19px; } .nl-catch .nl-p { color: var(--ag-gray-900); } /* ---------- CTA action band ---------- */ .nl-cta { background: var(--ag-red); color: var(--ag-white); margin: 40px 0 0; padding: 34px 72px 36px; } .nl-cta .nl-cta-tag { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11.5px; color: rgba(255,255,255,0.8); margin: 0 0 12px; } .nl-cta h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.12; color: var(--ag-white); margin: 0 0 12px; } .nl-cta .nl-p { color: rgba(255,255,255,0.92); font-size: 15px; } .nl-cta .nl-p strong { color: var(--ag-white); } .nl-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; background: var(--ag-white); color: var(--ag-red); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 15px; text-decoration: none; padding: 14px 26px; border-radius: var(--radius-md); border: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .nl-btn:hover { background: var(--ag-rich-black); color: var(--ag-white); border-bottom: 0; } .nl-btn .arw { font-weight: var(--fw-bold); } /* print CTA — label only, no button */ .nl-cta-label { display: inline-block; margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ag-white); } .nl-cta-label .arw { color: var(--ag-rich-black); } /* ---------- DIGITAL: product gallery (four square tiles) ---------- */ .nl-gallery { padding: 36px 72px 40px; background: var(--ag-gray-tint-5); border-top: 1px solid var(--ag-gray-200); } .nl-gallery-head { margin-bottom: 20px; } .nl-gallery-tag { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; color: var(--ag-red); margin: 0 0 8px; display: flex; align-items: center; gap: 12px; } .nl-gallery-tag::before { content:""; width: 26px; height: 3px; background: var(--ag-red); display:block; } .nl-gallery-head h4 { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--ag-rich-black); margin: 0 0 4px; } .nl-gallery-sub { font-family: var(--font-body); font-size: 14px; color: var(--ag-gray-700); margin: 0; } .nl-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .nl-gallery-grid--3 { grid-template-columns: repeat(3, 1fr); } .nl-gallery-grid--4 { grid-template-columns: repeat(4, 1fr); } .nl-tile { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--ag-gray-200); background: var(--ag-gray-200); cursor: zoom-in; } .nl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, .4s) var(--ease-standard, ease); } .nl-tile:hover img, .nl-tile:focus-within img { transform: scale(1.06); } .nl-tile-cue { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(26,26,28,.62); color: #fff; border-radius: var(--radius-sm); font-size: 14px; line-height: 1; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); pointer-events: none; } .nl-tile:hover .nl-tile-cue, .nl-tile:focus-within .nl-tile-cue { opacity: 1; } .nl-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--font-body); font-size: 11px; line-height: 1.3; color: #fff; padding: 16px 10px 8px; background: linear-gradient(to top, rgba(15,15,17,.82) 0%, rgba(15,15,17,.45) 55%, transparent 100%); } /* zoom affordance on any zoomable image */ .nl-zoom { cursor: zoom-in; } .nl-social-row img.nl-zoom { transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .nl-social-row img.nl-zoom:hover, .nl-social-row img.nl-zoom:focus { transform: translateY(-3px) scale(1.03); outline: 2px solid var(--ag-red); outline-offset: 2px; } /* ---------- lightbox ---------- */ .nl-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(10,10,12,.9); padding: 4vmin; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); } .nl-lightbox.open { display: flex; opacity: 1; } .nl-lightbox .nl-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 92vw; max-height: 92vh; } .nl-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; display: block; box-shadow: 0 24px 70px rgba(0,0,0,.5); border-radius: var(--radius-sm); } .nl-lightbox figcaption { font-family: var(--font-body); font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.86); text-align: center; } .nl-lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); } .nl-lb-close:hover { background: var(--ag-red); } /* ---------- DIGITAL: social strip ---------- */ .nl-social { background: var(--ag-gray-100); color: var(--ag-ink); padding: 32px 72px 34px; } .nl-social .nl-social-tag { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; color: var(--ag-red); margin: 0 0 4px; } .nl-social h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ag-rich-black); margin: 0 0 18px; } .nl-social-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .nl-social-row img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.12); } /* ---------- DIGITAL: subscribe + footer ---------- */ .nl-subscribe { background: var(--ag-gray-tint-5); border-top: 3px solid var(--ag-red); padding: 34px 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; } .nl-subscribe .nl-sub-copy { flex: 1 1 300px; } .nl-subscribe h4 { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ag-rich-black); margin: 0 0 6px; } .nl-subscribe p { font-family: var(--font-body); font-size: 14px; color: var(--ag-gray-700); margin: 0; } .nl-sub-form { display: flex; gap: 8px; flex: 1 1 320px; } .nl-sub-form input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 15px; padding: 13px 14px; border: 1px solid var(--ag-gray-300); border-radius: var(--radius-md); background: var(--ag-white); color: var(--ag-ink); } .nl-sub-form input:focus { outline: 2px solid var(--ag-rich-black); outline-offset: 1px; } .nl-sub-form .nl-btn { margin-top: 0; background: var(--ag-red); color: var(--ag-white); white-space: nowrap; } .nl-sub-form .nl-btn:hover { background: var(--ag-red-deep); color: var(--ag-white); } .nl-foot { background: var(--ag-rich-black); color: var(--ag-gray-300); padding: 30px 72px 34px; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-end; } .nl-foot .nl-foot-brand { flex: 1 1 260px; } .nl-foot img { height: 22px; margin-bottom: 12px; display: block; } .nl-foot .nl-foot-slogan { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--ag-red); } .nl-foot .nl-foot-slogan::before { content: ""; width: 22px; height: 3px; background: var(--ag-red); display: block; flex: 0 0 auto; } .nl-foot .nl-contact { font-family: var(--font-body); font-size: 13px; line-height: 1.7; } .nl-foot .nl-contact a { color: var(--ag-gray-300); } .nl-foot .nl-contact a:hover { color: var(--ag-white); } .nl-foot .nl-foot-tag { flex: 1 1 220px; text-align: right; font-family: var(--font-body); font-size: 12px; font-style: italic; color: var(--ag-gray-500); line-height: 1.6; } .nl-foot-legal { flex-basis: 100%; width: 100%; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--font-body); font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.5); } /* ---------- PRINT: contact footer band ---------- */ .nl-print-contact { background: var(--ag-rich-black); color: var(--ag-white); padding: 20px 0.5in; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; } .nl-print-contact img { height: 20px; } .nl-print-contact .pc-items { display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.02em; color: var(--ag-gray-300); } .nl-print-contact .pc-items b { color: var(--ag-white); font-weight: var(--fw-bold); } .nl-print-contact .pc-slogan { margin-left: auto; font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 10.5px; color: var(--ag-red); } .nl-print-contact .pc-legal { flex-basis: 100%; width: 100%; margin-top: 8px; font-family: var(--font-body); font-size: 8px; line-height: 1.4; color: rgba(255,255,255,0.5); } /* responsive */ @media (max-width: 640px) { .nl-mh, .nl-lede, .nl-body, .nl-cta, .nl-social, .nl-subscribe, .nl-foot, .nl-gallery { padding-left: 24px; padding-right: 24px; } .nl-mh-foot { flex-wrap: wrap; } .nl-mh-foot .nl-meta { margin-left: 0; } .nl-social-row { grid-template-columns: repeat(3, 1fr); } .nl-gallery-grid, .nl-gallery-grid--3, .nl-gallery-grid--4 { grid-template-columns: repeat(2, 1fr); } .nl-mh-photo { width: 74%; opacity: .5; } .nl-foot .nl-foot-tag { text-align: left; } }