diff --git a/.gitignore b/.gitignore index b9fc9fe..0dcc3b7 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ migration-work/footer-validation/ .hlx/.da-token.json content +drafts # Analysis and testing artifacts screenshots/ diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css new file mode 100644 index 0000000..ab467a3 --- /dev/null +++ b/blocks/banner/banner.css @@ -0,0 +1,169 @@ +/* Banner - full-bleed background-image with navy fade overlay. + Caps and centers past --page-max-width on ultra-wide screens. */ +.banner-container .banner-wrapper { + max-width: var(--page-max-width); + margin: 0 auto; + padding: 0; +} + +.banner { + position: relative; + min-height: 320px; + overflow: hidden; + padding: 0; +} + +.banner picture { + position: absolute; + inset: 0; + z-index: initial; +} + +.banner img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 50% 50%; +} + +.banner > div:first-child { + position: absolute; + inset: 0; + margin: 0; + display: block; + height: 100%; + width: 100%; +} + +.banner::before { + content: ''; + position: absolute; + inset: 0; + z-index: 1; + background-image: linear-gradient( + 90deg, + var(--heading-color) 0%, + var(--heading-color) 30%, + rgb(0 24 113 / 0%) 80% + ); + pointer-events: none; +} + +.banner > div:last-child { + position: relative; + z-index: 2; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 320px; + box-sizing: border-box; + padding: 32px 24px; +} + +.banner > div:last-child > div { + width: 100%; +} + +.banner > div:first-child > div { + display: block; + height: 100%; + width: 100%; +} + +.banner.no-image { + background-color: var(--heading-color); +} + +.banner.no-image > div:first-child, +.banner.no-image::before { + display: none; +} + +.banner h1, +.banner h2 { + margin: 0 0 16px; + color: #fff; + font-size: 32px; + font-weight: 500; + line-height: 1.25; +} + +.banner h1 a:any-link, +.banner h2 a:any-link { + color: #fff; + text-decoration: none; +} + +.banner p { + margin: 0 0 15px; + color: #fff; + font-size: 18px; + line-height: 1.5; +} + +.banner > div:last-child p a:any-link, +main .banner a.button:any-link { + position: relative; + display: inline-block; + margin: 8px 0 0; + padding: 0 32px 0 0; + background: transparent; + border: 0; + color: #80d2f2; + font-family: var(--heading-font-family); + font-size: 1.25rem; + font-weight: 400; + line-height: 2.25rem; + text-decoration: none; + white-space: normal; + transition: color 0.3s ease; +} + +.banner > div:last-child p a:any-link::after, +main .banner a.button:any-link::after { + content: '\2192'; + position: absolute; + top: 0; + right: 0; + transition: transform 0.3s ease; +} + +.banner > div:last-child p a:any-link:hover, +.banner > div:last-child p a:any-link:focus-visible, +main .banner a.button:any-link:hover, +main .banner a.button:any-link:focus-visible { + color: #80d2f2; + text-decoration: underline; +} + +.banner > div:last-child p a:any-link:hover::after, +.banner > div:last-child p a:any-link:focus-visible::after, +main .banner a.button:any-link:hover::after, +main .banner a.button:any-link:focus-visible::after { + transform: translateX(5px); +} + +@media (width >= 900px) { + .banner { + min-height: clamp(400px, 29.25vw, 640px); + } + + .banner > div:last-child { + min-height: clamp(400px, 29.25vw, 640px); + max-width: 49%; + padding: 40px 0 40px 8.33%; + } + + .banner h1, + .banner h2 { + font-size: 44px; + line-height: 1.27; + margin-bottom: 24px; + } + + .banner p { + font-size: 20px; + line-height: 1.5; + } +} diff --git a/blocks/banner/banner.js b/blocks/banner/banner.js new file mode 100644 index 0000000..a84b6cb --- /dev/null +++ b/blocks/banner/banner.js @@ -0,0 +1,9 @@ +/** + * Decorates banner block + * @param {Element} block The banner block element + */ +export default function decorate(block) { + if (!block.querySelector(':scope > div:first-child picture')) { + block.classList.add('no-image'); + } +} diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 37c7f86..b726d4a 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -8,17 +8,36 @@ gap: 32px; } +/* Cards attached to hero - remove top spacing */ +.cards-container:has(.cards.attached-to-hero) { + padding-top: 0; +} + +/* Light variant is full-bleed up to 1920px - background spans the viewport, content stays inset via padding. + Beyond 1920px the background caps and centers instead of stretching indefinitely. */ +.cards-container:has(.cards.light) .cards-wrapper { + max-width: var(--page-max-width); + margin: 0 auto; + padding: 0; +} + +.cards.attached-to-hero { + margin-top: 0; + padding-top: 0; +} + .cards > ul > li { display: flex; - flex-direction: row; + flex-direction: column; align-items: flex-start; - gap: 24px; + gap: 16px; background-color: transparent; border: 0; } .cards .cards-card-image { - flex: 0 0 auto; + flex: 0 0 40%; + max-width: 40%; line-height: 0; } @@ -28,8 +47,9 @@ } .cards .cards-card-image img { - width: 190px; - height: 190px; + width: 100%; + height: auto; + aspect-ratio: 1 / 1; object-fit: cover; } @@ -101,53 +121,28 @@ @media (width >= 900px) { .cards > ul { grid-template-columns: 1fr 1fr; - gap: 24px 48px; - } -} - -/* Story variant with paleblue section - large full-width cards */ -@media (width >= 900px) { - .section.paleblue .cards > ul { - grid-template-columns: 1fr; - gap: 24px; + gap: 48px 64px; } - .section.paleblue .cards > ul > li { - align-items: center; + .cards > ul > li { + flex-direction: row; gap: 48px; } - .section.paleblue .cards > ul > li:nth-child(odd) { - flex-direction: row-reverse; - } - - .section.paleblue .cards .cards-card-image { - flex: 1 1 55%; - max-width: 55%; - } - - .section.paleblue .cards .cards-card-image img { - width: 100%; - height: auto; - aspect-ratio: 646 / 283; - object-fit: cover; - } - - .section.paleblue .cards .cards-card-body { - flex: 1 1 45%; + .cards .cards-card-image { + flex: 0 0 190px; + max-width: 190px; } +} - .section.paleblue .cards .cards-card-body h2, - .section.paleblue .cards .cards-card-body h3, - .section.paleblue .cards .cards-card-body h4 { - font-family: var(--heading-font-family); - font-weight: 500; - font-size: 28px; - line-height: 36px; - } +/* Light variant - pale blue background */ +.cards.light { + background-color: var(--paleblue-color); + padding: 32px 24px; +} - .section.paleblue .cards .cards-card-body p { - color: var(--text-color); - line-height: 30px; +@media (width >= 900px) { + .cards.light { + padding: 48px 8.33%; } } diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index be14bd4..dc44d36 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,9 +1,19 @@ /* Columns - styled columns for featured content */ +.columns-container .columns-wrapper { + max-width: var(--page-max-width); + margin: 0 auto; +} + .columns > div { display: flex; flex-direction: column; } +/* Vertical spacing between rows when a block has more than one (e.g. alternating rows) */ +.columns > div + div { + margin-top: 24px; +} + .columns img { display: block; width: 100%; @@ -79,7 +89,7 @@ } .columns.columns-2-cols .columns-img-col img { - height: 100%; + aspect-ratio: 16 / 9; object-fit: cover; } @@ -109,31 +119,59 @@ } .columns.columns-2-cols p a:any-link { + display: inline-block; color: var(--link-color); + font-family: var(--heading-font-family); + font-weight: 500; font-size: 20px; - font-weight: 400; + line-height: 36px; text-decoration: none; } +.columns.columns-2-cols p a:any-link::after { + content: ""; + display: inline-block; + width: 1.1em; + height: 0.7em; + margin-left: 0.4em; + background-color: currentcolor; + mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; +} + .columns.columns-2-cols p a:hover { - text-decoration: underline; + color: var(--link-hover-color); + text-decoration: none; } @media (width >= 900px) { .columns.columns-2-cols > div { - align-items: stretch; + align-items: center; flex-direction: row; + gap: 0; } .columns.columns-2-cols > div > div { - flex: 0 1 57%; + flex: 0 1 45%; order: 0; - padding: 32px 58px 32px 32px; + padding: 32px; } .columns.columns-2-cols > div > .columns-img-col { - flex: 0 1 43%; + flex: 0 1 55%; order: 1; padding: 0; } } + +/* Feature variant - no background tint, for rows alternating on a white section */ +.columns.columns-2-cols.feature > div { + background-color: transparent; +} + +@media (width >= 900px) { + /* respect each row's own authoring order instead of always forcing image to the right */ + .columns.columns-2-cols.feature > div > div, + .columns.columns-2-cols.feature > div > .columns-img-col { + order: unset; + } +} diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index bc848a3..a1eb9f1 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,6 +1,8 @@ -/* Hero - Full-bleed background-image banner with navy fade overlay */ +/* Hero - Full-bleed background-image banner with navy fade overlay. + Caps and centers past --page-max-width on ultra-wide screens. */ .hero-container .hero-wrapper { - max-width: unset; + max-width: var(--page-max-width); + margin: 0 auto; padding: 0; } @@ -41,8 +43,8 @@ background-image: linear-gradient( 90deg, var(--heading-color) 0%, - var(--heading-color) 70%, - rgb(0 24 113 / 55%) 100% + var(--heading-color) 30%, + rgb(0 24 113 / 0%) 80% ); pointer-events: none; } @@ -82,7 +84,7 @@ .hero h2 { margin: 0 0 32px; color: #fff; - font-size: var(--heading-size-xxl, 44px); + font-size: var(--heading-font-size-xxl); font-weight: 500; line-height: 1.27; max-width: initial; @@ -97,7 +99,7 @@ .hero p { margin: 0 0 15px; color: #fff; - font-size: var(--body-font-size-m, 20px); + font-size: var(--body-font-size-m); line-height: 1.5; } @@ -111,7 +113,7 @@ main .hero a.button:any-link { background: transparent; color: #fff; font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs, 16px); + font-size: var(--body-font-size-xs); font-weight: 500; line-height: 1.125; text-decoration: none; @@ -127,34 +129,33 @@ main .hero a.button:any-link:focus-visible { text-decoration: none; } +/* Hero attached to content below (e.g., cards) */ +.hero.hero-attached { + min-height: 320px; +} + +.hero.hero-attached > div:last-child { + padding-bottom: 0; + min-height: 320px; +} + @media (width >= 900px) { .hero { - min-height: 421px; - } - - .hero::before { - background-image: linear-gradient( - 90deg, - var(--heading-color) 0%, - var(--heading-color) 45%, - rgb(0 24 113 / 0%) 75% - ); + min-height: clamp(400px, 29.25vw, 640px); } .hero > div:last-child { - min-height: 421px; + min-height: clamp(400px, 29.25vw, 640px); max-width: 49%; padding: 40px 0 40px 8.33%; } - .hero h1, - .hero h2 { - font-size: 44px; - line-height: 56px; + .hero.hero-attached { + min-height: clamp(400px, 29.25vw, 640px); } - .hero p { - font-size: 20px; - line-height: 30px; + .hero.hero-attached > div:last-child { + min-height: clamp(400px, 29.25vw, 640px); + padding-bottom: 0; } -} \ No newline at end of file +} diff --git a/drafts/kiran/index.html b/drafts/kiran/index.html deleted file mode 100644 index 0ab4315..0000000 --- a/drafts/kiran/index.html +++ /dev/null @@ -1,6 +0,0 @@ - - -
-
AIG

AIG Reports Excellent First Quarter 2026 Results

AIG is delivering on the ambitious three-year plan and guidance that we outlined at our Investor Day in 2025, supporting our clients, executing strategic initiatives with pace, and advancing our AI strategy. Prasad Demo

Learn more

Eric Anderson interviewed by Yahoo! Finance

Eric Andersen Talks with Yahoo! Finance

AIG President & Chief Executive Officer Eric Andersen discusses the evolving risk landscape and priorities for AIG.

Watch the video

AIG Women's open trophy on the golf green

Celebrate the 2026 AIG Women's Open

AIG is proud to support the incredible athletes inspiring the next generation of golf champions.

Read more

About AIG

We are American International Group, Inc, (AIG), a leading global insurance organization providing a wide range of property casualty insurance and other financial services. We provide world-class products and expertise to businesses and individuals in more than 200 countries and jurisdictions through AIG operations, licenses and authorizations as well as network partners. And we are committed to using our insights and thought leadership to not only manage risks, but to make real positive differences in every community we serve. Get to know us better.

Individuals

Explore our industry-leading solutions for individuals, from travel and personal accident insurance to coverage for Private Clients.

Discover product & services

Businesses

Discover how we're helping businesses identify emerging challenges and reduce risk, so they can reach their full potential.

Discover product & services

Risk Managers

Explore the products and tools we offer to help build an effective risk management program.

Discover products & services Multinational Log In

Brokers & Agents

Learn why AIG is the best partner to develop market-leading risk solutions for our clients.

Discover products & services Log In now

style

paleblue

AIG Performance & Initiatives

Eric Andersen

President and CEO Eric Andersen Affirms AIG's Strategy in Message to Clients and Partners

Eric Andersen discusses opportunities for AIG's next chapter in support of our valued clients and trusted partners.

Leaders meet at the AIG Client Forum in London

AIG Client Forum London

AIG leaders hosted clients in London for a three-day forum as part of our commitment to help them navigate complex risks and capture new opportunities.

Watch the video

Investor Day 2025

AIG Investor Day 2025

The CEOs of Palantir and Anthropic join Peter Zaffino and CNBC's Sara Eisen for a discussion on how AI is reshaping insurance.

Watch the video

AIG Newsroom

Building Resilience in a Rapidly Changing Landscape

Building Resilience in a Rapidly Changing Landscape

At AIG's North America Client Summit, our leaders underscored the importance of AIG's technical expertise to help clients make forward-looking insurance decisions.

Watch the video

View all stories

Explore AIG Careers around the world

Find your place on the diverse team of experts and move your career—and world—forward.

View Careers

Title

AIG Insurance Home | AIG US

Description

American International Group, Inc, (AIG), is a global insurance organization providing a range of insurance and other financial services. Get to know us better.

Image

- - diff --git a/favicon.ico b/favicon.ico index 96ab42c..80f1c3f 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/fonts/jost-variable.woff2 b/fonts/jost-variable.woff2 new file mode 100644 index 0000000..58bbeb1 Binary files /dev/null and b/fonts/jost-variable.woff2 differ diff --git a/fonts/roboto-bold.woff2 b/fonts/roboto-bold.woff2 deleted file mode 100644 index 4aeda71..0000000 Binary files a/fonts/roboto-bold.woff2 and /dev/null differ diff --git a/fonts/roboto-condensed-bold.woff2 b/fonts/roboto-condensed-bold.woff2 deleted file mode 100644 index dd0eb2b..0000000 Binary files a/fonts/roboto-condensed-bold.woff2 and /dev/null differ diff --git a/fonts/roboto-medium.woff2 b/fonts/roboto-medium.woff2 deleted file mode 100644 index 8b1aebb..0000000 Binary files a/fonts/roboto-medium.woff2 and /dev/null differ diff --git a/fonts/roboto-regular.woff2 b/fonts/roboto-regular.woff2 deleted file mode 100644 index b65a361..0000000 Binary files a/fonts/roboto-regular.woff2 and /dev/null differ diff --git a/fonts/source-sans-3-variable.woff2 b/fonts/source-sans-3-variable.woff2 new file mode 100644 index 0000000..df5ead1 Binary files /dev/null and b/fonts/source-sans-3-variable.woff2 differ diff --git a/head.html b/head.html index e8e2355..0e35703 100644 --- a/head.html +++ b/head.html @@ -4,9 +4,6 @@ move-to-http-header="true" /> - - - diff --git a/scripts/scripts.js b/scripts/scripts.js index e588a78..e2c5020 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -76,6 +76,29 @@ function buildWidgetAutoBlocks(main) { }); } +/** + * Detects hero + cards pattern and applies attached styling classes + * Must run after decorateBlocks so block classes exist + * @param {Element} main The container element + */ +function buildHeroCardsAutoBlocks(main) { + const sections = [...main.querySelectorAll('.section')]; + sections.forEach((section) => { + const blocks = [...section.querySelectorAll(':scope > div[class*="-wrapper"] > div[class]')]; + if (blocks.length >= 2) { + const firstBlock = blocks[0]; + const secondBlock = blocks[1]; + + if (firstBlock.classList.contains('hero') && secondBlock.classList.contains('cards')) { + firstBlock.classList.add('hero-attached'); + secondBlock.classList.add('attached-to-hero'); + // eslint-disable-next-line no-console + console.log('Hero + Cards auto-blocking applied'); + } + } + }); +} + /** * Builds all synthetic blocks in a container element. * @param {Element} main The container element @@ -178,6 +201,7 @@ export function decorateMain(main) { decorateSections(main); decorateSectionMetadata(main); decorateBlocks(main); + buildHeroCardsAutoBlocks(main); // Run after blocks are decorated decorateButtons(main); } diff --git a/styles/brand.css b/styles/brand.css index 3656343..bb3e1be 100644 --- a/styles/brand.css +++ b/styles/brand.css @@ -2,8 +2,8 @@ :root { /* fonts — AIG uses proprietary Futura PT (headings) + Source Sans Pro (body). Headings map to a geometric-sans system stack; body to Source Sans 3 (open equivalent). */ - --heading-font-family: "Jost", "Century Gothic", "Twentieth Century", "URW Geometric", "Avenir Next", avenir, helvetica, arial, sans-serif; - --body-font-family: "Source Sans 3", "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif; + --heading-font-family: jost, "Century Gothic", "Twentieth Century", "URW Geometric", "Avenir Next", avenir, helvetica, arial, sans-serif; + --body-font-family: sourcesans, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif; /* colors */ --background-color: #fff; @@ -14,14 +14,8 @@ --paleblue-color: #c7dbf4; /* spacing */ - --section-padding: 100px; --nav-height: 64px; - /* heading sizes (desktop) */ - --heading-size-xxl: 44px; - --heading-size-xl: 44px; - --heading-size-l: 24px; - --heading-size-m: 20px; - --heading-size-s: 18px; - --heading-size-xs: 16px; + /* full-bleed sections cap and center beyond this width, matching production */ + --page-max-width: 1920px; } diff --git a/styles/fonts.css b/styles/fonts.css index 319c400..17493d0 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,36 +1,21 @@ /* stylelint-disable max-line-length */ -@font-face { - font-family: roboto-condensed; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/roboto-condensed-bold.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: roboto; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/roboto-bold.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} +/* Jost - Variable font for headings (weights 400-700) */ @font-face { - font-family: roboto; + font-family: jost; font-style: normal; - font-weight: 500; + font-weight: 400 700; font-display: swap; - src: url('../fonts/roboto-medium.woff2') format('woff2'); + src: url('../fonts/jost-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +/* Source Sans 3 - Variable font for body text (weights 400-700) */ @font-face { - font-family: roboto; + font-family: sourcesans; font-style: normal; - font-weight: 400; + font-weight: 400 700; font-display: swap; - src: url('../fonts/roboto-regular.woff2') format('woff2'); + src: url('../fonts/source-sans-3-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } diff --git a/styles/styles.css b/styles/styles.css index 46aa7ca..4ed4527 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -13,15 +13,9 @@ @import url('brand.css'); :root { - /* colors */ - --background-color: #fff; + /* colors (base colors defined in brand.css) */ --light-color: #f2f6fc; --dark-color: #001871; - --text-color: #343741; - --link-color: #1352de; - --link-hover-color: #23527c; - - /* fonts (families defined in brand.css) */ /* body sizes */ --body-font-size-m: 20px; @@ -35,25 +29,13 @@ --heading-font-size-m: 20px; --heading-font-size-s: 18px; --heading-font-size-xs: 16px; - - /* nav height */ - --nav-height: 64px; } @media (width >= 900px) { :root { - /* body sizes */ - --body-font-size-m: 20px; - --body-font-size-s: 18px; - --body-font-size-xs: 16px; - - /* heading sizes */ + /* only xxl/xl grow at desktop - l/m/s/xs and body sizes stay constant across breakpoints */ --heading-font-size-xxl: 44px; --heading-font-size-xl: 44px; - --heading-font-size-l: 24px; - --heading-font-size-m: 20px; - --heading-font-size-s: 18px; - --heading-font-size-xs: 16px; } }