/* ========================================================================== GOLFRAW — "Golf Vibe" theme layer (championship green & white) -------------------------------------------------------------------------- Loaded AFTER each page's inline shell CSS, so it wins the cascade. Every shell generation defines its palette through custom properties; this file re-points those tokens, then overrides the handful of rules that hardcode a colour or a red accent. Removing the THEME block from restores the original design in full. Palette masters #0A4D2E primary green — headings, pills, dark surfaces canopy #06331E deepest green — hero, footer, dark panels fairway #1B7A43 interactive accent — links, CTAs (white on it 5.36:1) bright #2FB35C rings / indicators only, never body text canvas #F7FAF7 turf-tint page ground; cards are pure white ink #0B1F15 green-black text muted #55655B secondary text (5.9:1 on white) hairline #E5E7EB dividers; line-strong #CBD5CF amber #A85F06 the one non-green: semantic caution, replaces red where red meant "warning", not "brand" ========================================================================== */ html:root { --gr-forest: #0A4D2E; --gr-deep: #06331E; --gr-green: #1B7A43; --gr-bright: #2FB35C; --gr-canvas: #F7FAF7; --gr-white: #FFFFFF; --gr-ink: #0B1F15; --gr-muted: #55655B; --gr-line: #E5E7EB; --gr-line-strong: #CBD5CF; --gr-soft: #EAF4EE; --gr-mint: #E6F4EA; --gr-silver: #E2E8F0; --gr-amber: #A85F06; --gr-amber-soft: #FFF4DD; --gr-ease: cubic-bezier(.2, .7, .2, 1); --gr-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --gr-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Inter', system-ui, Arial, sans-serif; /* ---- re-point every shell generation's tokens ---- */ --flag: var(--gr-green); --fairway: var(--gr-forest); --fairway-deep: var(--gr-deep); --paper: var(--gr-canvas); --white: var(--gr-white); --ink: var(--gr-ink); --grey: var(--gr-muted); --green: var(--gr-green); --positive: var(--gr-green); --positive-soft: var(--gr-soft); --soft-green: var(--gr-soft); --forest: var(--gr-forest); --forest-strong: var(--gr-deep); --forest-soft: var(--gr-soft); --deep: var(--gr-deep); --focus: var(--gr-green); --canvas: var(--gr-canvas); --muted: var(--gr-muted); --soft: var(--gr-soft); --accent: var(--gr-forest); --accent-deep: var(--gr-deep); --wash: var(--gr-soft); --red: var(--gr-amber); --caution: var(--gr-amber); --caution-soft: var(--gr-amber-soft); } /* ========================================================================== TYPOGRAPHY — Inter for body and UI, Plus Jakarta Sans for headlines. Both are single variable files, preloaded from . The *Fallback faces are Arial metric-matched to each web font (frequency-weighted advance widths), so if a swap ever happens, text occupies the same space: no CLS. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/public/fonts/inter-var.woff2') format('woff2'); } @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 107.48%; ascent-override: 90.14%; descent-override: 22.44%; line-gap-override: 0%; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/public/fonts/plus-jakarta-sans-var.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 106.05%; ascent-override: 97.88%; descent-override: 20.93%; line-gap-override: 0%; } body, button, input, select, textarea { font-family: var(--gr-sans); } body { background: var(--gr-canvas); color: var(--gr-ink); line-height: 1.7; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, .logo, .article-head h1, .article-body h2, .article-body h3, .hub-hero h1, .doc-hero h1, .rc-player .nm, .r-card .nm, .guide-card h3, .rel-card h3, .story h3, .pcard h3, .myth h3, .faq-item h3 { font-family: var(--gr-display); } h1, .article-head h1, .hub-hero h1, .doc-hero h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.06; text-transform: none; text-wrap: balance; } .article-head h1 { font-size: clamp(31px, 4.4vw, 54px); margin-bottom: 20px; } h2, .article-body h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1.14; text-transform: none; text-wrap: balance; } .article-body h2 { font-size: clamp(23px, 2.8vw, 31px); border-top: 1px solid var(--gr-line); padding-top: 24px; margin: 46px 0 16px; } .article-body h3 { font-weight: 700; letter-spacing: -.012em; } .article-body h3::before { color: var(--gr-green); } .standfirst, .dek { font-family: var(--gr-sans); font-weight: 450; font-size: clamp(18px, 2.3vw, 20.5px); line-height: 1.55; letter-spacing: -.005em; color: var(--gr-muted); } .article-body { font-size: 17.5px; line-height: 1.72; } .article-body p { margin-bottom: 22px; } .article-body a { color: var(--gr-green); text-decoration: underline; text-decoration-color: var(--gr-line-strong); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s, color .2s; } .article-body a:hover { text-decoration-color: var(--gr-green); color: var(--gr-forest); } blockquote.pull { font-family: var(--gr-display); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; text-transform: none; border: 1px solid var(--gr-line-strong); border-left: 8px solid var(--gr-green); border-radius: 0 12px 12px 0; } /* ========================================================================== BRAND — the wordmark stands alone: pure typography, no mark, no badge. Masters green on light surfaces, pure white on dark ones. ========================================================================== */ .logo { display: inline-flex; align-items: baseline; gap: .18em; color: var(--gr-forest); font-weight: 800; font-size: 25px; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; transform-origin: left center; transition: transform .3s var(--gr-ease), color .2s; } .logo::before { content: none; } .logo .raw, .logo > span { color: var(--gr-forest); font-weight: 500; letter-spacing: .01em; } .logo .tag { display: none; } .site-footer .logo, .f-logo, .f-logo .raw, .board-header .logo, .board-header .logo span { color: #fff; } .gr-scrolled .logo { transform: scale(.94); } @media (max-width: 760px) { .logo { font-size: 22px; } } /* ========================================================================== HEADER & NAVIGATION — quiet, wide-set, editorial. Height never changes on scroll (transform-only compaction), so there is no CLS. ========================================================================== */ .site-header, body > header, .board-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--gr-line); transition: background .3s, box-shadow .3s, border-color .3s; } .gr-scrolled .site-header, .gr-scrolled body > header, .gr-scrolled .board-header { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 8px 26px rgba(6, 51, 30, .09), 0 1px 0 rgba(6, 51, 30, .04); border-bottom-color: transparent; } .nav-links { gap: 1.75rem; } .nav-links a { font-family: var(--gr-sans); font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gr-forest); padding: 8px 0; border: none; border-radius: 0; background: transparent; position: relative; transition: color .2s; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--gr-green); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--gr-ease); } .nav-links a:hover, .nav-links a:focus-visible { background: transparent; color: var(--gr-green); } .nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); } .nav-links a.hot { background: var(--gr-forest); color: #fff; padding: 8px 14px; border-radius: 999px; margin-left: 0; } .nav-links a.hot::after { content: none; } /* Search: a compact icon button. The link text stays in the DOM for screen readers and search engines; only its rendering is replaced by the glyph. */ .nav-links a.nav-search { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gr-line-strong); border-radius: 999px; color: var(--gr-forest); text-indent: -9999px; overflow: hidden; white-space: nowrap; background: url("data:image/svg+xml;utf8,") center / 17px 17px no-repeat; transition: border-color .2s, background-color .2s, transform .2s var(--gr-ease); } .nav-links a.nav-search::after { content: none; } .nav-links a.nav-search:hover, .nav-links a.nav-search:focus-visible { border-color: var(--gr-green); background-color: var(--gr-soft); } .burger { border: 1px solid var(--gr-line-strong); border-radius: 999px; padding: 10px 11px; transition: background-color .2s, border-color .2s; } .burger span { background: var(--gr-forest); } .burger:hover { background: var(--gr-soft); border-color: var(--gr-green); } @media (max-width: 760px) { .nav-links { gap: 0; background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .nav-links a { border-top: 1px solid var(--gr-line); padding: 14px 20px; } .nav-links a::after { content: none; } .nav-links a.nav-search { width: auto; height: auto; text-indent: 0; background-image: none; border: none; border-top: 1px solid var(--gr-line); border-radius: 0; justify-content: flex-start; padding: 14px 20px; } } /* ========================================================================== HOMEPAGE HERO — every line of text on the canopy green must clear WCAG AA. ========================================================================== */ .hero { border-bottom: 1px solid var(--gr-line); } .hero-main { background: var(--gr-deep); border-right: none; } .hero-main .eyebrow { color: var(--gr-mint); } .hero-main .eyebrow .chip { background: var(--gr-green); color: #fff; border-radius: 4px; } .hero-main h1.hero-topic { color: #fff; font-family: var(--gr-display); font-weight: 800; text-transform: none; letter-spacing: -.03em; line-height: 1.02; } .hero-main h1.hero-topic .b { color: #fff; background: var(--gr-green); border-radius: 4px; } .hero-main .hero-punch, .hero-main .hero-punch mark { color: #fff; } .hero-main p { color: var(--gr-silver); font-size: 17px; } .hero-meta, .hero-meta b { color: var(--gr-mint); } .hero-meta b { color: #fff; } .cta-btn { background: var(--gr-green); border-color: var(--gr-green); border-radius: 10px; font-weight: 700; letter-spacing: .05em; } .cta-btn:hover { background: var(--gr-bright); border-color: var(--gr-bright); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(6, 51, 30, .28); } .cta-btn:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgba(6, 51, 30, .25); } .cta-link { color: var(--gr-mint); border-bottom-color: var(--gr-bright); } .cta-link:hover { color: #fff; } /* ---- "The GolfRaw Method" data card: numbers removed, hairline rows ---- */ .rating-card { border-left: 1px solid var(--gr-line); } .rc-head { border-bottom: 1px solid var(--gr-line); color: var(--gr-muted); } .rc-head .stamp { border: 1px solid var(--gr-green); color: var(--gr-green); border-radius: 4px; transform: none; font-weight: 600; } .evidence-card .rc-player { background: #fff; border-bottom: 1px solid var(--gr-line); } .rc-player .nm { font-weight: 800; text-transform: none; letter-spacing: -.02em; font-size: 24px; color: var(--gr-forest); } .rc-player .ev { color: var(--gr-muted); } .evidence-item { grid-template-columns: 1fr; gap: 0; padding: 16px 22px; border-bottom: 1px solid var(--gr-line); } .evidence-item .evidence-no { display: none; } .evidence-item b { font-family: var(--gr-sans); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: -.005em; color: var(--gr-forest); } .evidence-item small { font-family: var(--gr-sans); font-size: 13px; color: var(--gr-muted); margin-top: 3px; } .rc-total, .evidence-total { background: var(--gr-forest); } .rc-total .lbl { color: var(--gr-mint); } .rc-total .big sup { color: var(--gr-bright); } /* ========================================================================== PURGE RED — the rules that used the red accent for meaning, re-pointed ========================================================================== */ .crumbs a { color: var(--gr-green); } .article-head .cat, .cat.pill { background: var(--gr-forest); color: #fff; border-radius: 999px; padding: 6px 12px; letter-spacing: .14em; } .badge-red, .badge.badge-red { background: var(--gr-green); color: #fff; } .byline .live-upd { color: var(--gr-green); } .ticker { background: var(--gr-deep); border-bottom-color: var(--gr-green); } .sec-head { border-bottom: 2px solid var(--gr-forest); } .hub-hero { border-bottom-color: var(--gr-forest); } .hub-hero .eyebrow, .eyebrow, .vc-eyebrow, .ab-tag, .panel-head .step, .fc-n, .section-kicker { color: var(--gr-green); } .rel-card .cat, .aside-item .mono, .coming-soon-box .cs-label { color: var(--gr-green); } .aside-item:hover, .rel-card:hover h3, .guide-card:hover h3, .story:hover h3 { text-decoration-color: var(--gr-green); } input:focus, select:focus, textarea:focus { outline-color: var(--gr-green); } /* semantic negatives: red meant "warning" here, so they become amber, not green */ html .gr-lk-btn.danger { color: var(--gr-amber); border-color: #E8D2AE; } html .gr-lk-btn.danger:hover, html .gr-lk-btn.danger:focus-visible { background: var(--gr-amber); color: #fff; border-color: var(--gr-amber); } .err { border-color: var(--gr-amber); } .tally b.warn { color: var(--gr-amber); } .stat-cell .n.red { color: #F2C078; } .verify { border-color: var(--gr-amber); background: var(--gr-amber-soft); } /* ========================================================================== SURFACES, CARDS, BUTTONS ========================================================================== */ .site-footer { background: var(--gr-deep); color: #A9C4B3; border-top: 4px solid var(--gr-green); } .site-footer a:hover { color: #fff; } .newsletter-section { background-color: var(--gr-deep) !important; border-left-color: var(--gr-green) !important; border-radius: 0 14px 14px 0; } .newsletter-section h2, .newsletter-section p { font-family: var(--gr-sans) !important; } #rawgolf-newsletter-form button { background-color: var(--gr-green) !important; font-family: var(--gr-sans) !important; transition: background-color .2s, transform .2s var(--gr-ease), box-shadow .25s var(--gr-ease) !important; } #rawgolf-newsletter-form button:hover { background-color: var(--gr-bright) !important; } #rawgolf-newsletter-form input { border-radius: 8px 0 0 8px !important; font-family: var(--gr-sans) !important; } #rawgolf-newsletter-form button { border-radius: 0 8px 8px 0 !important; } .guide-card, .news-grid > article, .news-grid > a, .story, .tool-card, .rel-card, .r-card, .coverage-card, .aside-box, .takeaways, .pcard, .myth, .faq-item, .vault-item, .evidence-item { transition: transform .3s var(--gr-ease), box-shadow .3s var(--gr-ease), background-color .2s, border-color .2s; } .guide-card, .aside-box, .takeaways, .pcard, .myth, .coverage-card { border-color: var(--gr-line-strong); border-radius: 12px; background: var(--gr-white); } .guide-card:hover, .tool-card:hover, .coverage-card:hover, .pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(6, 51, 30, .10), 0 2px 6px rgba(6, 51, 30, .05); } .guide-card:hover { border-color: var(--gr-green); } .tool-card:hover { background: #0D5C3A; } .rel-card:hover, .story:hover, .aside-item:hover { background: var(--gr-soft); } .aside-box .ab-head { background: var(--gr-forest); border-radius: 10px 10px 0 0; } .aside-item { border-bottom-color: var(--gr-line); transition: background-color .2s, padding-left .2s var(--gr-ease); } .aside-item:hover { padding-left: 22px; text-decoration: none; } .card-thumb { border-radius: 10px 10px 0 0; } .lead-img > img, figure.lead-img img, figure.inline-fig img { border-color: var(--gr-line-strong); border-radius: 12px; } .lead-img figcaption, figure figcaption { color: var(--gr-muted); } .btn, .card-cta, .pcta, .cs-back, a.button, button.button, button[type="submit"] { transition: color .2s, background-color .2s, border-color .2s, transform .25s var(--gr-ease), box-shadow .25s var(--gr-ease); will-change: transform; } .btn:hover, .card-cta:hover, .pcta:hover, a.button:hover, button.button:hover, button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(6, 51, 30, .18); background: var(--gr-green); border-color: var(--gr-green); color: #fff; } .btn:active, .card-cta:active, .pcta:active, a.button:active, button.button:active, button[type="submit"]:active, #rawgolf-newsletter-form button:active { transform: translateY(0) scale(.98) !important; box-shadow: 0 2px 6px rgba(6, 51, 30, .16) !important; transition-duration: .08s !important; } .pcta { background: var(--gr-green); border-color: var(--gr-forest); border-radius: 10px; } .pcta:hover { background: var(--gr-forest); } .pcard-kicker, .takeaways .section-label, .verify .section-label, .sourcing .section-label { color: var(--gr-green); } .verdict-box, .raw-verdict, .related { background: var(--gr-forest); border-left-color: var(--gr-bright); border-radius: 0 14px 14px 0; } .lead-stat { background: var(--gr-deep); border-left-color: var(--gr-bright); border-radius: 0 12px 12px 0; } .myth { border-left-color: var(--gr-green); } .aff-disclosure { border-left-color: var(--gr-green); } .cmp-scroll thead th, .table-wrap thead th, .table-container thead th { background: var(--gr-forest); } :focus-visible { outline: 3px solid var(--gr-bright); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gr-soft); color: var(--gr-forest); } /* ========================================================================== SCROLL REVEALS — opacity/transform only, so nothing shifts layout. Hidden state applies only once JS has run (html.gr-js); no-JS readers and crawlers always see everything. A 2.5s fallback in forces everything visible if the observer script never arrives. ========================================================================== */ .gr-js .gr-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--gr-ease), transform .55s var(--gr-ease); transition-delay: calc(var(--gr-i, 0) * 55ms); will-change: opacity, transform; } .gr-js .gr-reveal.is-in, .gr-reveal-all .gr-reveal { opacity: 1; transform: none; } .gr-js .gr-reveal.is-in { will-change: auto; } @media (prefers-reduced-motion: reduce) { .gr-reveal, .gr-js .gr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .site-header, .logo, .btn, .card-cta, .pcta, .guide-card, .tool-card, .aside-item, .nav-links a, button { transition: none !important; } .guide-card:hover, .tool-card:hover, .btn:hover, .card-cta:hover, .pcta:hover, .cta-btn:hover { transform: none !important; } } /* ========================================================================== EDITORIAL SECTIONS — numbering purged, hairline system, magazine cards. The section numbers, story catalog badges and footer "P-0n" codes are stripped from the markup by apply_theme.py; the display:none rules below only guard against a regenerated fragment reintroducing one. ========================================================================== */ .sec-head h2 .idx, .idx, .story .n, .fc-n { display: none !important; } /* section headers: display type, sentence case, a short green accent line above and a hairline below instead of the 3px ink rule */ .sec-head { border-bottom: 1px solid var(--gr-line); padding-bottom: 16px; margin-bottom: 28px; align-items: flex-end; } .sec-head h2 { position: relative; padding-top: 14px; font-family: var(--gr-display); font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.022em; line-height: 1.05; text-transform: none; color: var(--gr-forest); } .sec-head h2::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--gr-green); } .sec-head a { font-family: var(--gr-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--gr-green); border-bottom: 1px solid var(--gr-line-strong); padding-bottom: 3px; transition: color .2s, border-color .2s; } .sec-head a:hover { color: var(--gr-forest); border-bottom-color: var(--gr-green); } .ratings .sec-head { border-bottom-color: rgba(255, 255, 255, .18); } .ratings .sec-head h2 { color: #fff; } .coverage-card .hub-no, .tool-card .tc-kicker { color: var(--gr-green); } /* ---- news / guides cards: hairline-separated magazine grid ---- */ .news-grid { border: 1px solid var(--gr-line); background: var(--gr-line); gap: 1px; border-radius: 12px; overflow: hidden; } .news-grid > .news, .news-grid > .news:nth-child(n), .news-grid > .news:nth-last-child(n) { border: 0 !important; } .news { padding: 22px; background: var(--gr-white); transition: transform .3s var(--gr-ease), box-shadow .3s var(--gr-ease), background-color .2s; } .news:hover { background: var(--gr-white); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(6, 51, 30, .10), 0 2px 6px rgba(6, 51, 30, .05); z-index: 1; } .news:hover h3 { text-decoration-color: var(--gr-green); text-decoration-thickness: 2px; } /* strict thumbnail sizing: the image link becomes a 16:9 frame capped at 260px, so no card can turn into a full-width poster */ .news > a:first-child { display: block; aspect-ratio: 16 / 9; max-height: 260px; overflow: hidden; border-radius: 8px; margin-bottom: 16px; background: var(--gr-soft); } .news > a:first-child img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .news .cat { color: var(--gr-green); } .news h3 { font-family: var(--gr-display); font-weight: 700; font-size: 18.5px; letter-spacing: -.015em; } .news p { color: var(--gr-muted); } .news .meta { border-top: 1px solid var(--gr-line); color: var(--gr-muted); } .news.lead { background: var(--gr-forest); } .news.lead:hover { background: var(--gr-deep); } .news.lead p { color: var(--gr-silver); } .news.lead .meta { color: var(--gr-mint); border-top-color: rgba(255, 255, 255, .18); } /* the Raw Guides section: two balanced columns, one on phones */ .news-grid.guides-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .news-grid.guides-grid { grid-template-columns: 1fr; } } /* ---- Swing Analysis + The Vault: one hairline system for both columns ---- */ .split { align-items: start; gap: 48px; } .story { grid-template-columns: 1fr auto; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--gr-silver); } .story .d { grid-column: auto; } .story h3 { font-family: var(--gr-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.012em; transition: color .2s; } .story:hover h3 { color: var(--gr-green); text-decoration-color: var(--gr-green); text-decoration-thickness: 2px; } .story-list .rel-card { padding: 16px 0; border-right: none; border-bottom: 1px solid var(--gr-silver); border-radius: 0; background: transparent; } .story-list .rel-card:hover { background: transparent; } .story-list .rel-card:hover h3 { color: var(--gr-green); text-decoration-color: var(--gr-green); } .story-list .rel-card .cat { color: var(--gr-green); } .vault-box { border: 1px solid var(--gr-silver); border-radius: 12px; padding: 28px; background: var(--gr-white); } .vault-box .eyebrow { color: var(--gr-green); } .vault-box h3 { font-family: var(--gr-display); font-weight: 800; text-transform: none; letter-spacing: -.02em; color: var(--gr-forest); } .vault-item { border-top: 1px solid var(--gr-silver); transition: color .2s; } .vault-item b { color: var(--gr-green); } .vault-item:hover span { color: var(--gr-green); text-decoration-color: var(--gr-green); } /* ---- Raw Tools + coverage: same hairline discipline on dark and light ---- */ .tools-grid { border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; overflow: hidden; } .tools-grid .tool-card, .tools-grid .tool-card:nth-child(n), .tools-grid .tool-card:nth-last-child(n) { border-color: rgba(255, 255, 255, .12) !important; } .tool-card { background: var(--gr-deep); } .tool-card h3 { font-family: var(--gr-display); text-transform: none; letter-spacing: -.02em; } .tool-card p { color: var(--gr-mint); opacity: .85; } .tool-card .tc-cta { border-bottom-color: var(--gr-bright); } .coverage-grid { border: 1px solid var(--gr-line); background: var(--gr-line); gap: 1px; border-radius: 12px; overflow: hidden; } .coverage-card, .coverage-card:last-child { border: 0 !important; } .coverage-card h3 { font-family: var(--gr-display); text-transform: none; letter-spacing: -.022em; color: var(--gr-forest); } .coverage-card .hub-example { border-top-color: var(--gr-line); } .coverage-card .hub-example a:hover { color: var(--gr-green); text-decoration-color: var(--gr-green); } .fc-link { gap: 4px; }