/* ========================================================================== GCA article list (template: listArticleGCA) One repeating card; the grid makes the first two cards on each page large. Matches the existing grid-6 / 244 layout sizes and breakpoints. v2: works with EasyDNN's article_list_wrapper div. v3: adds the "Essential reads" row (template listEssentialGCA). v4: adds the GCA Green Pages panel (template listPartnersGCA). v5: section headings (.gca-section-title) styled to match the page H1. v6: more space above and below section headings. v7: keylines removed. v8: gold keyline under each section heading. v9: sublines in light grey. v10: sublines in elza-narrow 200, gold. v11: letter spacing matched to the skin (3.5px on headings). v12: "In the latest issue" strip, full-width cream band with magazine green (HTML module gca-latest-issue.html). v13: Green Pages section on the same full-width cream band. v14: more space at the top and bottom of the Green Pages band. v15: same extra space on the "In the latest issue" band. v16: topic page header (H1, intro, related topics). v17: issue card labels in the summary style (section name only). v18: headline hover (green #1a7132 + underline) and tighter label-to-headline spacing. v19: issue card category at 0.9rem. v20: issue number line in the magazine style (ISSUE 86 OCTOBER 2026). v21: issue number line 40% smaller. v22: issue number line spacing in proportion (em-based). v23: two-column topic page header (gca-topic-head2). v24: header keyline removed. v25: ALTERNATIVE issue strip, contents-page layout (.gca-issue2). v26: section sublines in the header tagline grey (#767676). v27: issue buttons uppercase with 8px rounded corners. v28: search results list (template listSearchGCA / List_Article_Search.htm), at the end. v29: issue strip, two topic-matched stories side by side (.gca-issue2__leads), at the end. v30: homepage lead section (.gca-lead, template List_Article_GCA_Lead.htm), at the end. Breakpoints: <37.5rem phone | 37.5-56.1875rem tablet | 56.25-79.9375rem laptop | >=80rem desktop ========================================================================== */ /* ---------- Grid ---------- */ /* EasyDNN wraps the cards in its own div (e.g. .edn_639_article_list_wrapper). display: contents makes that wrapper invisible to layout, so the cards become grid items of .gca-list on every module, whatever its ID. */ .gca-list > [class*="_article_list_wrapper"] { display: contents; } .gca-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; width: 100%; position: relative; } .gca-list .gca-card { list-style: none; min-width: 0; } @media (min-width: 37.5rem) { .gca-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } @media (min-width: 56.25rem) { .gca-list { gap: 2rem; } } @media (min-width: 80rem) { .gca-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* first two cards on each page span two columns */ .gca-list .gca-card:nth-child(-n+2) { grid-column: span 2; } } /* ---------- Card text: standard (small) cards = old layout C ---------- */ .gca-list .card-body .gca-card__meta { font-size: 0.9rem; line-height: 1.16; margin-bottom: 5px; color: #363636; } .gca-list .card-body .gca-card__title { font-size: 1.7rem; line-height: 1.1; margin-bottom: 5px; font-weight: 500; color: #1a1a1a; } .gca-list .card-body .gca-card__summary { color: #363636; font-size: 1.1rem; line-height: 1.5em; margin-bottom: 0; font-weight: 400; } @media (min-width: 37.5rem) and (max-width: 56.1875rem) { .gca-list .card-body .gca-card__meta { margin-bottom: 1px; font-size: 0.9rem; line-height: 1.15; } .gca-list .card-body .gca-card__title { font-size: 1.425rem; line-height: 1.15; font-weight: 400; } .gca-list .card-body .gca-card__summary { display: none; } } @media (min-width: 56.25rem) and (max-width: 79.9375rem) { .gca-list .card-body .gca-card__meta { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 0.25rem; } .gca-list .card-body .gca-card__title { font-size: 1.56rem; line-height: 1.2; font-weight: 400; } .gca-list .card-body .gca-card__summary { font-size: 1.2rem; line-height: 1.4; } } @media (min-width: 80rem) { .gca-list .card-body .gca-card__meta { font-size: 0.8rem; line-height: 1.3; font-weight: 400; margin-bottom: 0.22rem; } .gca-list .card-body .gca-card__title { font-size: 1.4rem; line-height: 1.2; font-weight: 500; } .gca-list .card-body .gca-card__summary { font-size: 1.1rem; line-height: 1.4; } } /* ---------- Card text: first two cards = old layouts A/B ---------- */ .gca-list .gca-card:nth-child(1) .card-body .gca-card__summary { line-height: 1.16; } .gca-list .gca-card:nth-child(1) .card-body .gca-card__meta { color: #1a1a1a; } @media (min-width: 56.25rem) and (max-width: 79.9375rem) { .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__meta { font-size: 1.12rem; } .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__title { font-size: 1.82rem; } .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__summary { font-size: 1.2rem; line-height: 1.16; } .gca-list .gca-card:nth-child(2) .card-body .gca-card__summary { font-size: 1.4rem; } } @media (min-width: 80rem) { .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__meta { font-size: 1rem; line-height: 1; margin-bottom: 0.25rem; } .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__title { font-size: 2.6rem; line-height: 1.2; font-weight: 500; } .gca-list .gca-card:nth-child(-n+2) .card-body .gca-card__summary { font-size: 1.2rem; line-height: 1.4; } } /* ========================================================================== GCA "Essential reads" row (template: listEssentialGCA / List_Article_Essential_4.htm) Up to 4 editor-chosen articles above the main topic list. Uses the same card markup as the main list, so the skin's card styles (fonts, colours, photo caption) apply. This block only sets the grid and the small-card text sizes. Phone: 1 column | Tablet: 2 x 2 | 900px+: 4 across ========================================================================== */ /* EasyDNN inserts its own wrapper div(s); make them invisible to layout */ .gca-essential [class*="_article_list_wrapper"], .gca-essential [class*="_article_list_wrapper"] > div:not([class]) { display: contents; } /* ---------- Section heading (HTML module above the list) ---------- */ .gca-essential-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin: 0 0 1rem; } .gca-essential-head h2 { margin: 0; } .gca-essential-head p { margin: 0; color: #5c5649; } /* ---------- Grid ---------- */ .gca-essential { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; width: 100%; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e3ded3; } .gca-essential .gca-card { list-style: none; min-width: 0; } @media (min-width: 37.5rem) { .gca-essential { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56.25rem) { .gca-essential { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } } /* ---------- Card text: same as the main list's small cards ---------- */ .gca-essential .card-body .gca-card__meta { font-size: 0.9rem; line-height: 1.16; margin-bottom: 5px; color: #363636; } .gca-essential .card-body .gca-card__title { font-size: 1.7rem; line-height: 1.1; margin-bottom: 5px; font-weight: 500; color: #1a1a1a; } .gca-essential .card-body .gca-card__summary { color: #363636; font-size: 1.1rem; line-height: 1.5em; margin-bottom: 0; font-weight: 400; } @media (min-width: 37.5rem) and (max-width: 56.1875rem) { .gca-essential .card-body .gca-card__meta { margin-bottom: 1px; font-size: 0.9rem; line-height: 1.15; } .gca-essential .card-body .gca-card__title { font-size: 1.425rem; line-height: 1.15; font-weight: 400; } .gca-essential .card-body .gca-card__summary { display: none; } } @media (min-width: 56.25rem) and (max-width: 79.9375rem) { .gca-essential .card-body .gca-card__meta { font-size: 0.9rem; line-height: 1.2; font-weight: 400; margin-bottom: 0.25rem; } .gca-essential .card-body .gca-card__title { font-size: 1.3rem; line-height: 1.2; font-weight: 400; } .gca-essential .card-body .gca-card__summary { display: none; } } @media (min-width: 80rem) { .gca-essential .card-body .gca-card__meta { font-size: 0.8rem; line-height: 1.3; font-weight: 400; margin-bottom: 0.22rem; } .gca-essential .card-body .gca-card__title { font-size: 1.4rem; line-height: 1.2; font-weight: 500; } .gca-essential .card-body .gca-card__summary { font-size: 1.1rem; line-height: 1.4; } } /* ========================================================================== GCA Green Pages panel (template: listPartnersGCA / List_Article_Partners_6.htm) Heading: HTML module above (.gca-partners-head). Tiles: list module. Tiles stretch to fill the row, whether there are 2 or 6 partners. ========================================================================== */ .gca-partners [class*="_article_list_wrapper"], .gca-partners [class*="_article_list_wrapper"] > div:not([class]) { display: contents; } /* ---------- Heading (HTML module) ---------- */ /* Sits above the beige panel, so any gap DNN adds between the two modules doesn't matter */ .gca-partners-head { margin: 2rem 0 1rem; } .gca-partners-head__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; } .gca-partners-head h2 { margin: 0; font-family: "minion-pro", Georgia, serif; font-size: 1.6rem; line-height: 1.2; font-weight: 500; color: #1a1a1a; } .gca-partners-head a { font-size: 1rem; font-weight: 600; color: #1a1a1a; text-decoration: underline; } .gca-partners-head a:hover { color: #2883bf; } .gca-partners-head p { margin: 0.35rem 0 0; font-size: 0.95rem; color: #5c5649; } /* ---------- Panel (list module) ---------- */ .gca-partners { box-sizing: border-box; background: #f5f2ea; border: 1px solid #e3ded3; padding: 1.25rem; margin: 0 0 2rem; } @media (min-width: 56.25rem) { .gca-partners-head h2 { font-size: 1.8rem; } .gca-partners { padding: 1.5rem; } } /* Tiles fill the row: 2 per row on phone, up to 6 on desktop */ .gca-partners__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; } @media (min-width: 80rem) { .gca-partners__grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } } .gca-partner { position: relative; min-width: 0; } .gca-partner .edn_adminActions { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 2; } .eds_news_Advantage .gca-partners a.gca-partner__link:not(.btn), .gca-partner__link { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; background: #ffffff; border: 1px solid #e3ded3; color: #1a1a1a; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .eds_news_Advantage .gca-partners a.gca-partner__link:not(.btn):hover, .gca-partner__link:hover, .gca-partner__link:focus-visible { border-color: #b8862b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-decoration: none; } /* Logo area: fixed height, whole logo shown, padded so it never touches the edge */ .gca-partner__logo { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 7.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid #efebe2; } .gca-partners .gca-partner__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; } .gca-partner__name { display: block; padding: 0.75rem 1rem; font-family: "minion-pro", Georgia, serif; font-size: 1rem; line-height: 1.25; font-weight: 500; color: #1a1a1a; } .gca-partner__link:hover .gca-partner__name { text-decoration: underline; } /* ========================================================================== Topic page section headings: match the page H1, slightly smaller Applies to "Technology long reads", "Latest technology coverage" and "Technology suppliers in GCA Green Pages". Add class="gca-section-title" to any other section H2 to give it the same look. ========================================================================== */ .gca-section-title, .gca-essential-head h2, .gca-partners-head h2, .eds_news_Advantage .gca-section-title { margin: 0; font-family: "elza-narrow", sans-serif; font-weight: 200; font-size: 1.4rem; line-height: 1.3; letter-spacing: 2.5px; text-transform: uppercase; color: #d7b87c; } @media (min-width: 56.25rem) { .gca-section-title, .gca-essential-head h2, .gca-partners-head h2, .eds_news_Advantage .gca-section-title { font-size: 1.6rem; letter-spacing: 3px; } } /* ---------- v6: spacing around section headings ---------- */ .gca-essential-head, .gca-partners-head { margin: 2.5rem 0 1.5rem; } .gca-essential-head p, .gca-partners-head p { margin-top: 0.4rem; } @media (min-width: 56.25rem) { .gca-essential-head, .gca-partners-head { margin: 3.5rem 0 2rem; } } /* ---------- v7: no keylines ---------- */ .gca-essential { border-bottom: 0; padding-bottom: 0; } .gca-partners, .gca-partners-head, .gca-partner__logo, .eds_news_Advantage .gca-partners a.gca-partner__link:not(.btn), .gca-partner__link { border: 0; } /* ---------- v8: gold keyline under each section heading ---------- */ .gca-essential-head, .gca-partners-head { padding-bottom: 0.75rem; border-bottom: 1px solid #d7b87c; } /* ---------- v9: sublines in light grey (lightest grey that stays readable on white) ---------- */ .gca-essential-head p, .gca-partners-head p, .eds_news_Advantage .gca-essential-head p, .eds_news_Advantage .gca-partners-head p { color: #767676; } /* ---------- v10: sublines in the heading typeface ---------- */ .gca-essential-head p, .gca-partners-head p, .eds_news_Advantage .gca-essential-head p, .eds_news_Advantage .gca-partners-head p { font-family: "elza-narrow", sans-serif; font-weight: 200; font-size: 1.05rem; letter-spacing: 0.5px; color: #d7b87c; } /* ---------- v11: letter spacing matched to the skin ---------- The skin uses 3.5px on the H1 and on its other H2s (.heading-a h2, .section-title) at every screen size, so the section headings now do the same. */ .gca-section-title, .gca-essential-head h2, .gca-partners-head h2, .eds_news_Advantage .gca-section-title { letter-spacing: 3.5px; } @media (min-width: 56.25rem) { .gca-section-title, .gca-essential-head h2, .gca-partners-head h2, .eds_news_Advantage .gca-section-title { letter-spacing: 3.5px; } } /* Sublines: normal case, so a light 1px keeps the thin font open without spreading the words */ .gca-essential-head p, .gca-partners-head p, .eds_news_Advantage .gca-essential-head p, .eds_news_Advantage .gca-partners-head p { letter-spacing: 1px; } /* ========================================================================== v12: "In the latest issue" strip (HTML module: gca-latest-issue.html) Full-width cream band (#f7f0e4) like the home page; content stays aligned with the page container. Accents from the cover: masthead green #1a7132. No skin change needed: the band is painted edge to edge with a clipped box-shadow, so it can't cause sideways scrolling. Phone: cover above, cards stacked | Tablet: 2 cards per row | 900px+: cover beside 3 cards ========================================================================== */ .gca-issue { --issue-bg: #f7f0e4; /* cream band */ --issue-card: #ffffff; --issue-green: #1a7132; /* cover masthead green */ --issue-green-dark: #134a2a; --issue-text: #1a1a1a; --issue-text-soft: #4d4a44; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 3rem 0; padding: 2.5rem 0; background: var(--issue-bg); color: var(--issue-text); /* full-width background */ box-shadow: 0 0 0 100vmax var(--issue-bg); clip-path: inset(0 -100vmax); } @media (min-width: 56.25rem) { .gca-issue { grid-template-columns: 11rem minmax(0, 1fr); gap: 2.5rem; padding: 3rem 0; align-items: start; } } /* Cover: shown whole at its natural shape, never cropped */ .gca-issue__cover { display: block; max-width: 10rem; } @media (min-width: 56.25rem) { .gca-issue__cover { max-width: none; } } .gca-issue .gca-issue__cover img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; aspect-ratio: auto; box-shadow: 0 8px 20px rgba(60, 45, 20, 0.22); transition: transform 0.2s ease; } .gca-issue__cover:hover img { transform: translateY(-3px); } /* Heading */ .gca-issue__body { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .gca-issue__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--issue-green); } .gca-issue .gca-section-title, .eds_news_Advantage .gca-issue .gca-section-title { color: var(--issue-green); } .gca-issue__head p, .eds_news_Advantage .gca-issue__head p { margin: 0; font-family: "elza-narrow", sans-serif; font-weight: 300; font-size: 1.05rem; letter-spacing: 1px; color: var(--issue-text-soft); } /* Cards */ .gca-issue__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } @media (min-width: 37.5rem) { .gca-issue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56.25rem) { .gca-issue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } .gca-issue a.gca-issue__item, .eds_news_Advantage .gca-issue a.gca-issue__item:not(.btn) { box-sizing: border-box; display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1.1rem 1.2rem 1.2rem; background: var(--issue-card); color: var(--issue-text); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .gca-issue a.gca-issue__item:hover, .gca-issue a.gca-issue__item:focus-visible { box-shadow: 0 4px 14px rgba(60, 45, 20, 0.12); transform: translateY(-2px); text-decoration: none; } .gca-issue__label { font-family: "elza-narrow", sans-serif; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--issue-green); } .gca-issue__title { font-family: "minion-pro", Georgia, serif; font-size: 1.4rem; line-height: 1.2; font-weight: 500; color: var(--issue-text); } .gca-issue__summary { font-family: "minion-pro", Georgia, serif; font-size: 1rem; line-height: 1.4; color: var(--issue-text-soft); } .gca-issue__cta { margin-top: auto; padding-top: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--issue-green); text-decoration: underline; text-underline-offset: 3px; } .gca-issue a.gca-issue__item:hover .gca-issue__cta { color: var(--issue-green-dark); } /* Button */ .gca-issue a.gca-issue__button, .eds_news_Advantage .gca-issue a.gca-issue__button:not(.btn) { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.5rem; background: var(--issue-green); color: #ffffff; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease; } .gca-issue a.gca-issue__button:hover, .gca-issue a.gca-issue__button:focus-visible { background: var(--issue-green-dark); color: #ffffff; text-decoration: none; } /* Screen-reader-only text ("opens in a new tab") */ .gca-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== v13: Green Pages section on the same full-width cream band as the issue strip Two modules make up this section: the heading (HTML module, .gca-partners-head) and the logo tiles (list module, .gca-partners). Both are painted edge to edge. The heading's band also reaches 4rem downwards, so any gap DNN leaves between the two modules is filled and the section reads as one block. ========================================================================== */ .gca-partners-head { --gp-bg: #f7f0e4; --gp-green: #1a7132; box-sizing: border-box; margin: 3rem 0 0; padding: 2.5rem 0 0.75rem; background: var(--gp-bg); box-shadow: 0 0 0 100vmax var(--gp-bg); clip-path: inset(0 -100vmax -4rem); border-bottom: 1px solid var(--gp-green); } .gca-partners-head h2, .gca-partners-head .gca-section-title, .eds_news_Advantage .gca-partners-head .gca-section-title { color: var(--gp-green); } .gca-partners-head p, .eds_news_Advantage .gca-partners-head p { color: #4d4a44; font-weight: 300; } .eds_news_Advantage .gca-partners-head a, .gca-partners-head a { color: var(--gp-green); } .gca-partners-head a:hover { color: #134a2a; } .gca-partners { box-sizing: border-box; margin: 0 0 3rem; padding: 1.5rem 0 2.5rem; background: #f7f0e4; box-shadow: 0 0 0 100vmax #f7f0e4; clip-path: inset(0 -100vmax); } @media (min-width: 56.25rem) { .gca-partners-head { padding-top: 3rem; } .gca-partners { padding: 2rem 0 3rem; } } /* Tiles: white on cream, lift on hover */ .eds_news_Advantage .gca-partners a.gca-partner__link:not(.btn), .gca-partner__link { background: #ffffff; transition: box-shadow 0.2s ease, transform 0.2s ease; } .eds_news_Advantage .gca-partners a.gca-partner__link:not(.btn):hover, .gca-partner__link:hover, .gca-partner__link:focus-visible { box-shadow: 0 4px 14px rgba(60, 45, 20, 0.12); transform: translateY(-2px); } /* ---------- v14: more space at the top and bottom of the Green Pages band ---------- */ .gca-partners-head { padding-top: 3.5rem; } .gca-partners { padding-bottom: 3.5rem; } @media (min-width: 56.25rem) { .gca-partners-head { padding-top: 4.5rem; } .gca-partners { padding-bottom: 4.5rem; } } /* ---------- v15: same extra space on the "In the latest issue" band ---------- */ .gca-issue { padding: 3.5rem 0; } @media (min-width: 56.25rem) { .gca-issue { padding: 4.5rem 0; } } /* ========================================================================== v16: Topic page header (HTML module: gca-topic-header-.html) Centred H1 in the site's gold elza-narrow style, a readable intro paragraph (kept to ~46rem wide), and a line of related-topic links. ========================================================================== */ .gca-topic-head { max-width: 48rem; margin: 1.5rem auto 1rem; text-align: center; } .gca-topic-head__title, .eds_news_Advantage .gca-topic-head__title { margin: 0 0 1.25rem; font-family: "elza-narrow", sans-serif; font-weight: 200; font-size: 1.75rem; line-height: 1.3; letter-spacing: 3.5px; text-transform: uppercase; color: #d7b87c; } @media (min-width: 56.25rem) { .gca-topic-head { margin-top: 2rem; } .gca-topic-head__title { font-size: 2rem; } } .gca-topic-head__intro, .eds_news_Advantage .gca-topic-head__intro { max-width: 46rem; margin: 0 auto; font-family: "minion-pro", Georgia, serif; font-size: 1.15rem; line-height: 1.6; color: #363636; } @media (min-width: 56.25rem) { .gca-topic-head__intro { font-size: 1.25rem; } } .gca-topic-head__related { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; margin-top: 1.25rem; font-family: "elza-narrow", sans-serif; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; color: #767676; } .eds_news_Advantage .gca-topic-head__related a, .gca-topic-head__related a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #d7b87c; padding-bottom: 1px; } .gca-topic-head__related a:hover, .gca-topic-head__related a:focus-visible { color: #1a7132; border-bottom-color: #1a7132; } /* Phones: long centred lines are hard to read, so the intro sits left-aligned */ @media (max-width: 37.4375rem) { .gca-topic-head__intro { text-align: left; } } /* ---------- v17: issue card labels in the summary style ---------- */ .gca-issue__label { font-family: "minion-pro", Georgia, serif; font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #4d4a44; } /* ---------- v18: issue card headline hover + label spacing ---------- */ /* Label sits tight above the headline, as in the main article cards */ .gca-issue a.gca-issue__item, .eds_news_Advantage .gca-issue a.gca-issue__item:not(.btn) { gap: 0; } .gca-issue__label { line-height: 1.2; margin-bottom: 0.3rem; } .gca-issue__title { line-height: 1.15; } .gca-issue__summary { margin-top: 0.5rem; } /* Headline turns the button green and underlines on hover / keyboard focus */ .gca-issue a.gca-issue__item:hover .gca-issue__title, .gca-issue a.gca-issue__item:focus-visible .gca-issue__title { color: #1a7132; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ---------- v19: issue card category size ---------- */ .gca-issue__label { font-size: 0.9rem; } /* ---------- v20: issue number line, magazine style (ISSUE 86 OCTOBER 2026) ---------- */ .gca-issue__head { align-items: center; } .gca-issue__head p.gca-issue__meta, .eds_news_Advantage .gca-issue__head p.gca-issue__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: "elza-narrow", sans-serif; font-weight: 300; font-size: 1.1rem; line-height: 1; letter-spacing: 2px; text-transform: uppercase; color: #1a1a1a; } .gca-issue__meta-num { font-family: "minion-pro", Georgia, serif; font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: 1px; text-transform: none; color: #1a7132; } @media (min-width: 56.25rem) { .gca-issue__head p.gca-issue__meta { font-size: 1.25rem; gap: 0.75rem; } .gca-issue__meta-num { font-size: 3rem; } } /* ---------- v21: issue number line 40% smaller ---------- */ .gca-issue__head p.gca-issue__meta, .eds_news_Advantage .gca-issue__head p.gca-issue__meta { font-size: 0.66rem; gap: 0.36rem; letter-spacing: 1.2px; } .gca-issue__meta-num { font-size: 1.56rem; } @media (min-width: 56.25rem) { .gca-issue__head p.gca-issue__meta, .eds_news_Advantage .gca-issue__head p.gca-issue__meta { font-size: 0.75rem; gap: 0.45rem; } .gca-issue__meta-num { font-size: 1.8rem; } } /* ---------- v22: issue number line spacing kept in proportion ---------- Letter spacing and gaps are now in em, so they scale with the text instead of staying fixed in px. Numerals sit tight together. */ .gca-issue__head p.gca-issue__meta, .eds_news_Advantage .gca-issue__head p.gca-issue__meta { gap: 0; letter-spacing: 0.12em; align-items: baseline; } .gca-issue__meta-word { white-space: nowrap; } .gca-issue__meta-num { letter-spacing: 0; margin: 0 0.25em; line-height: 0.9; position: relative; top: 0.05em; } @media (min-width: 56.25rem) { .gca-issue__head p.gca-issue__meta, .eds_news_Advantage .gca-issue__head p.gca-issue__meta { gap: 0; } } /* Cancel the letter-spacing after the final "E" of ISSUE so the gaps either side of 86 match */ .gca-issue__meta-word:first-child { margin-right: -0.12em; } /* ========================================================================== v23: Two-column topic page header (HTML module: gca-topic-header-.html) Left: breadcrumb, H1 ("Golf course" small above "TECHNOLOGY" large), tagline. Right: intro paragraph and a line of related-topic links. Stacks on phones and tablets; side by side from 900px. ========================================================================== */ .gca-topic-head2 { margin: 1.25rem 0 0; padding-bottom: 2.5rem; border-bottom: 1px solid #d7b87c; } .gca-topic-head2__crumbs { margin-bottom: 1.25rem; font-family: "elza-narrow", sans-serif; font-size: 0.85rem; letter-spacing: 0.5px; color: #767676; } .eds_news_Advantage .gca-topic-head2__crumbs a, .gca-topic-head2__crumbs a { color: #767676; text-decoration: none; } .gca-topic-head2__crumbs a:hover { color: #1a7132; text-decoration: underline; } .gca-topic-head2__crumbs span[aria-hidden] { margin: 0 0.3rem; } .gca-topic-head2__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 56.25rem) { .gca-topic-head2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; align-items: start; } } /* H1 */ .gca-topic-head2__title, .eds_news_Advantage .gca-topic-head2__title { margin: 0; font-weight: 200; color: #d7b87c; line-height: 1; } .gca-topic-head2__kicker { display: block; margin-bottom: 0.35rem; font-family: "elza-narrow", sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: #767676; } .gca-topic-head2__main { display: block; font-family: "elza-narrow", sans-serif; font-weight: 200; font-size: 2.6rem; letter-spacing: 3.5px; text-transform: uppercase; color: #d7b87c; overflow-wrap: anywhere; } @media (min-width: 56.25rem) { .gca-topic-head2__main { font-size: 3.4rem; } } .gca-topic-head2__tagline { margin: 0.9rem 0 0; font-family: "elza-narrow", sans-serif; font-weight: 300; font-size: 1rem; letter-spacing: 0.5px; color: #767676; } /* Intro */ .gca-topic-head2__intro, .eds_news_Advantage .gca-topic-head2__intro { margin: 0 0 1rem; font-family: "minion-pro", Georgia, serif; font-size: 1.2rem; line-height: 1.55; color: #1a1a1a; } @media (min-width: 56.25rem) { .gca-topic-head2__intro { font-size: 1.4rem; line-height: 1.5; } } .gca-topic-head2__more, .eds_news_Advantage .gca-topic-head2__more { margin: 0; font-family: "minion-pro", Georgia, serif; font-size: 1.05rem; line-height: 1.55; color: #4d4a44; } .eds_news_Advantage .gca-topic-head2__more a, .gca-topic-head2__more a { color: #1a1a1a; text-decoration: underline; text-decoration-color: #d7b87c; text-underline-offset: 3px; } .gca-topic-head2__more a:hover { color: #1a7132; text-decoration-color: #1a7132; } /* Never split the topic word mid-word: the title column grows to fit its longest word */ .gca-topic-head2__main { overflow-wrap: normal; word-break: keep-all; hyphens: none; } @media (min-width: 56.25rem) { .gca-topic-head2__grid { grid-template-columns: fit-content(42%) minmax(0, 1fr); } .gca-topic-head2__title-col { min-width: 16rem; } .gca-topic-head2__main { font-size: 3rem; } } /* ---------- v24: no keyline under the topic header ---------- */ .gca-topic-head2 { border-bottom: 0; padding-bottom: 1.5rem; } /* ========================================================================== v25: ALTERNATIVE "In the latest issue" layout (gca-latest-issue-alt.html) Reads like the magazine's contents page: big cover, one lead story, then a numbered contents list. Same full-width cream band and green. ========================================================================== */ .gca-issue2 { --i2-bg: #f7f0e4; --i2-green: #1a7132; --i2-green-dark: #134a2a; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 3rem 0; padding: 3.5rem 0; background: var(--i2-bg); box-shadow: 0 0 0 100vmax var(--i2-bg); clip-path: inset(0 -100vmax); color: #1a1a1a; } @media (min-width: 56.25rem) { .gca-issue2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; padding: 4.5rem 0; align-items: center; } } /* Big cover, slightly tilted shadow for a "printed" feel */ .gca-issue2__cover { display: block; max-width: 16rem; margin: 0 auto; } @media (min-width: 56.25rem) { .gca-issue2__cover { max-width: 24rem; } } .gca-issue2 .gca-issue2__cover img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgba(60, 45, 20, 0.28), 0 4px 10px rgba(60, 45, 20, 0.12); transition: transform 0.25s ease; } .gca-issue2__cover:hover img { transform: translateY(-4px); } /* Issue line + heading */ .gca-issue2__meta, .eds_news_Advantage .gca-issue2__meta { display: flex; align-items: baseline; margin: 0 0 0.5rem; font-family: "elza-narrow", sans-serif; font-weight: 300; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1a1a; } .gca-issue2__meta-word:first-child { margin-right: -0.12em; } .gca-issue2__meta-num { margin: 0 0.25em; font-family: "minion-pro", Georgia, serif; font-size: 2.2rem; line-height: 0.9; letter-spacing: 0; color: var(--i2-green); } .gca-issue2 .gca-issue2__heading, .eds_news_Advantage .gca-issue2 .gca-issue2__heading { margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--i2-green); color: var(--i2-green); } /* Lead story */ .gca-issue2 a.gca-issue2__lead, .eds_news_Advantage .gca-issue2 a.gca-issue2__lead:not(.btn) { display: block; margin-bottom: 1.75rem; color: #1a1a1a; text-decoration: none; } .gca-issue2__lead-label { display: block; margin-bottom: 0.3rem; font-family: "minion-pro", Georgia, serif; font-size: 0.95rem; color: #4d4a44; } .gca-issue2__lead-title { display: block; font-family: "minion-pro", Georgia, serif; font-size: 2rem; line-height: 1.1; font-weight: 500; } @media (min-width: 56.25rem) { .gca-issue2__lead-title { font-size: 2.6rem; } } .gca-issue2__lead-text { display: block; margin-top: 0.6rem; font-family: "minion-pro", Georgia, serif; font-size: 1.15rem; line-height: 1.5; color: #4d4a44; } .gca-issue2__lead-cta { display: inline-block; margin-top: 0.75rem; font-weight: 600; color: var(--i2-green); text-decoration: underline; text-underline-offset: 3px; } .gca-issue2 a.gca-issue2__lead:hover .gca-issue2__lead-title, .gca-issue2 a.gca-issue2__lead:focus-visible .gca-issue2__lead-title { color: var(--i2-green); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* Contents list */ .gca-issue2__contents-title, .eds_news_Advantage .gca-issue2__contents-title { margin: 0 0 0.5rem; font-family: "elza-narrow", sans-serif; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #4d4a44; } .gca-issue2__list { list-style: none; margin: 0 0 1.75rem; padding: 0; border-top: 1px solid #e3d6bf; } .gca-issue2__list li { border-bottom: 1px solid #e3d6bf; } .gca-issue2__list a, .eds_news_Advantage .gca-issue2__list a:not(.btn) { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.7rem 0; color: #1a1a1a; text-decoration: none; } .gca-issue2__page { font-family: "minion-pro", Georgia, serif; font-size: 1.6rem; line-height: 1; color: var(--i2-green); } .gca-issue2__item-title { display: block; font-family: "minion-pro", Georgia, serif; font-size: 1.2rem; line-height: 1.25; font-weight: 500; } .gca-issue2__item-text { display: block; font-family: "minion-pro", Georgia, serif; font-size: 0.98rem; line-height: 1.4; color: #4d4a44; } .gca-issue2__list a:hover .gca-issue2__item-title, .gca-issue2__list a:focus-visible .gca-issue2__item-title { color: var(--i2-green); text-decoration: underline; text-underline-offset: 3px; } /* Button */ .gca-issue2 a.gca-issue2__button, .eds_news_Advantage .gca-issue2 a.gca-issue2__button:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.5rem; background: var(--i2-green); color: #ffffff; font-weight: 600; text-decoration: none; } .gca-issue2 a.gca-issue2__button:hover, .gca-issue2 a.gca-issue2__button:focus-visible { background: var(--i2-green-dark); color: #ffffff; } /* ---------- v26: section sublines in the same grey as the header tagline ---------- */ .gca-essential-head p, .eds_news_Advantage .gca-essential-head p, .gca-section-title + p, .eds_news_Advantage .gca-section-title + p { color: #767676; } /* ---------- v27: issue buttons uppercase, 8px rounded corners ---------- */ .gca-issue a.gca-issue__button, .eds_news_Advantage .gca-issue a.gca-issue__button:not(.btn), .gca-issue2 a.gca-issue2__button, .eds_news_Advantage .gca-issue2 a.gca-issue2__button:not(.btn) { border-radius: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; } /* ========================================================================== v28: Search results (template: listSearchGCA / List_Article_Search.htm) One result per row: image left, text right. Stacks on phones with a smaller image beside the text, so results stay scannable. ========================================================================== */ .gca-search [class*="_article_list_wrapper"], .gca-search [class*="_article_list_wrapper"] > div:not([class]) { display: contents; } .gca-search { display: flex; flex-direction: column; margin: 1.5rem 0 2rem; } .gca-search__item { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr); /* phone: small thumbnail */ gap: 0.9rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid #ece7dc; } .gca-search__item:first-child { padding-top: 0; } @media (min-width: 37.5rem) { .gca-search__item { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem 0; } } @media (min-width: 56.25rem) { .gca-search__item { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.5rem; padding: 2rem 0; } } /* Results without an image: text spans the full width */ .gca-search__item > .gca-search__body:first-child, .gca-search__item > .edn_adminActions + .gca-search__body { grid-column: 1 / -1; } .gca-search__item .edn_adminActions { position: absolute; top: 0.5rem; right: 0; z-index: 2; } /* Image */ .gca-search__media { position: relative; overflow: hidden; } .gca-search__media a { display: block; } .gca-search__media img { display: block; width: 100%; height: auto; aspect-ratio: 950 / 534; object-fit: cover; transition: transform 0.3s ease; } .gca-search__item:hover .gca-search__media img { transform: scale(1.03); } /* Photo credit: hidden on the small phone thumbnail, where it can't be read */ @media (max-width: 37.4375rem) { .gca-search__media .photoCaption-small { display: none; } } /* Text */ .gca-search__body { min-width: 0; } .gca-search__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; margin-bottom: 0.3rem; font-family: "minion-pro", Georgia, serif; font-size: 0.85rem; line-height: 1.2; color: #363636; } .gca-search__cat a, .eds_news_Advantage .gca-search__cat a:not(.btn) { color: #363636; text-decoration: none; } .gca-search__cat a:hover { color: #2883bf; text-decoration: underline; } /* EasyDNN outputs categories as a list: show them inline, comma separated */ .gca-search__cat ul { display: inline; margin: 0; padding: 0; list-style: none; } .gca-search__cat li { display: inline; } .gca-search__cat li + li::before { content: ", "; } .gca-search__pipe { color: #e2a83b; } .gca-search__title, .eds_news_Advantage .gca-search__title { margin: 0 0 0.35rem; font-family: "minion-pro", Georgia, serif; font-size: 1.2rem; line-height: 1.2; font-weight: 500; color: #1a1a1a; } @media (min-width: 56.25rem) { .gca-search__title { font-size: 1.5rem; } } .gca-search__title a, .eds_news_Advantage .gca-search__title a:link, .eds_news_Advantage .gca-search__title a:visited { color: #1a1a1a !important; text-decoration: none; } .gca-search__title a:hover, .gca-search__title a:focus-visible, .eds_news_Advantage .gca-search__title a:hover { color: #2883bf !important; text-decoration: underline; text-underline-offset: 3px; } .gca-search__summary { font-family: "minion-pro", Georgia, serif; font-size: 1.05rem; line-height: 1.5; color: #363636; } .gca-search__summary p { margin: 0; } /* Phones: keep each result short */ @media (max-width: 37.4375rem) { .gca-search__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; } } /* No dividing lines between results, to match the current search page */ .gca-search__item { border-bottom: 0; } /* ========================================================================== v29: "In the latest issue", two topic-matched stories side by side. Use when an issue has two pieces that genuinely fit the topic:

Restoration in this issue

two a.gca-issue2__lead
Then "Also in this issue" lists the rest. One match: use a single lead, no wrapper. ========================================================================== */ .gca-issue2__leads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0 0 1.75rem; padding-top: 0.75rem; border-top: 1px solid #e3d6bf; } @media (min-width: 37.5rem) { .gca-issue2__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .gca-issue2 .gca-issue2__leads a.gca-issue2__lead, .eds_news_Advantage .gca-issue2 .gca-issue2__leads a.gca-issue2__lead:not(.btn) { margin-bottom: 0; } .gca-issue2__leads .gca-issue2__lead-title { font-size: 1.6rem; } @media (min-width: 56.25rem) { .gca-issue2__leads .gca-issue2__lead-title { font-size: 1.8rem; } } .gca-issue2__leads .gca-issue2__lead-text { font-size: 1.05rem; } /* ========================================================================== v30: Homepage lead section (template: List_Article_GCA_Lead.htm), added 12 Nov 2026 Same layout as the old .rose-grid-5 (List_Article_Multi_9_ArticleB), but by position in the list instead of per-article classes (rose-grid-5-a ... -m). Phone (<37.5rem): one per row | tablet: lead full width, then 2 per row | desktop (>=56.25rem): lead 2 x 2 on the left, 2-5 beside it, then rows of 4. ========================================================================== */ .gca-lead { display: grid; gap: 0.5rem; width: 100%; position: relative; grid-template-columns: minmax(0, 1fr); } .gca-lead > .gca-lead__item { list-style: none; min-width: 0; } @media (min-width: 37.5rem) and (max-width: 56.1875rem) { .gca-lead { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .gca-lead > .gca-lead__item { grid-column: span 2; } .gca-lead > .gca-lead__item:first-child { grid-column: 1 / -1; } } @media (min-width: 56.25rem) { .gca-lead { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .gca-lead > .gca-lead__item:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; } } @media (min-width: 80rem) { .gca-lead { gap: 2rem; } } /* ========================================================================== v31: GCA logo row (template: listArticleGCA / List_Article_GCA_Logos.htm) Homepage module 1191. Logos only, in equal tiles; each logo is scaled to fit its tile without cropping or stretching. 2 per row on phone, 3 on tablet, 4 on desktop. ========================================================================== */ .gca-logos [class*="_article_list_wrapper"], .gca-logos [class*="_article_list_wrapper"] > div:not([class]) { display: contents; } .gca-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0 0 2rem; padding: 0; } @media (min-width: 37.5rem) { .gca-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } @media (min-width: 56.25rem) { .gca-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } .gca-logo { position: relative; min-width: 0; margin: 0; } .gca-logo .edn_adminActions { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 2; } /* Tile: fixed 16:9 box, so every logo gets the same space */ .gca-logo__link { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 1rem 1.25rem; background: #fff; border: 1px solid #e3ded3; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gca-logo__link:hover, .gca-logo__link:focus-visible { border-color: #2883bf; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Logo: 80% of the tile, scaled to fit, never cropped or stretched */ .gca-logo__img { display: block; width: 70%; height: 70%; max-width: 70%; max-height: 70%; object-fit: contain; }