/* Adding top margin on the container for phone - it was resting on the sticky nav */ @media (max-width: 768px) { .layout-container { margin-top: 0; /* adjust as needed */ } } /* ─── CLAUDE SUGGESTED BODY COPY RULES ────────── ──────────────────────── */ /* ─── cf-type -body: body copy ──────────────────────────────────────────── */ .pillar-body, .report-body, .person-body, .taxonomy-body, .insight-body { font-family: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.75; letter-spacing: 0.01em; color: var(--insight-body-color, oklch(0.215 0.149 264)); max-width: 72ch; padding: 0 0 32px 32px; } .pillar-body p, .report-body p, .person-body p, .taxonomy-body p, .insight-body p { margin-bottom: 1.4em; } .pillar-body h2, .report-body h2, .person-body h2, .taxonomy-body h2, .insight-body h2, .pillar-body h3, .report-body h3, .person-body h3, .taxonomy-body h3, .insight-body h3 { font-size: 1.1em; font-weight: 700; margin-top: 2em; margin-bottom: 0.5em; letter-spacing: 0; } .pillar-body a, .report-body a, .person-body a, .taxonomy-body a, .insight-body a { color: inherit; text-decoration: underline; text-decoration-color: oklch(0.215 0.149 264 / 40%); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; } .pillar-body a:hover, .report-body a:hover, .person-body a:hover, .taxonomy-body a:hover, .insight-body a:hover { text-decoration-color: oklch(0.215 0.149 264); } /* ─── CLAUDE SUGGESTED BODY COPY RULES ────────── ──────────────────────── */ /* ─── Shared rules for all content title/header classes ─────────────────── */ .cfinsight-title, .cfperson-title, .cfreport-title, .cfpillar-title, .taxonomy-header { color: var(--insight-body-color); font-size: clamp(36px, 4vw, 52px); font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.1; letter-spacing: -0.01em; /* margin: 0; */ display: block; margin-top: 2rem; margin-bottom: 1rem; } /* ─── Paragraph spacing ──────────────────────────────────────────────────── */ .cfinsight-title p, .cfperson-title p, .cfreport-title p, .cfpillar-title p, .taxonomy-header p { margin-bottom: 1.4em; } /* ─── Subheadings ────────────────────────────────────────────────────────── */ .cfinsight-title h2, .cfinsight-title h3, .cfperson-title h2, .cfperson-title h3, .cfreport-title h2, .cfreport-title h3, .cfpillar-title h2, .cfpillar-title h3, .taxonomy-header h2, .taxonomy-header h3 { font-size: 1.1em; font-weight: 700; margin-top: 2em; margin-bottom: 0.5em; letter-spacing: 0; } /* ─── Inline links ───────────────────────────────────────────────────────── */ .cfinsight-title a, .cfperson-title a, .cfreport-title a, .cfpillar-title a, .taxonomy-header a { color: inherit; text-decoration: underline; text-decoration-color: oklch(0.215 0.149 264 / 40%); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; } .cfinsight-title a:hover, .cfperson-title a:hover, .cfreport-title a:hover, .cfpillar-title a:hover, .taxonomy-header a:hover { text-decoration-color: oklch(0.215 0.149 264); } /* ─── / CLAUDE SUGGESTED BODY COPY RULES ────────── ─────────────────────── */ /* */ .site-footer__inner { /* ========================================================== * TYPOGRAPHY * ========================================================== */ --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ========================================================== * SHAPE, SPACING, SHADOWS * ========================================================== */ --radius: 0.5rem; --spacing: 0.25rem; --tracking-normal: 0em; color:#325C40; } /* */ /* COPY FROM THEME OVERRIDE */ /* COPY FROM THEME OVERRIDE */ /* COPY FROM THEME OVERRIDE */ /* COPY FROM THEME OVERRIDE */ /* COPY FROM THEME OVERRIDE */ /** * @file theme.css * Clarity Factory brand theme for Mercury (Drupal CMS). * * Drop this file in the web root (next to index.php) and clear * Drupal's cache. Mercury automatically picks it up — no sub-theme * needed. See CUSTOMIZING.md in the Mercury theme directory. * * Colour source: colors.png in the project root. * Colour space: OKLCH (Mercury's default; required for color-mix()). * * Core palette * Clarity Sky Blue #7eb9e6 oklch(0.762 0.089 242.2) * Clarity Leaf Green #4a6b68 oklch(0.502 0.038 189.0) * Clarity Apple Green #7ee6a1 oklch(0.844 0.138 153.4) * * Secondary palette * Light #81d8d0 oklch(0.825 0.085 188.2) * Mid #69758c oklch(0.561 0.039 263.4) * Dark #192c29 oklch(0.276 0.026 183.4) * * Accent / data palette * Mauve (destructive) #d99998 oklch(0.745 0.077 20.0) */ /* ============================================================ * LIGHT MODE * ============================================================ */ /* New colors : 2026-0505 * / /* Section #EAF3FB Card #FFFFFF / oklch(96.0% 0.014 245) Heading #000067 / oklch(23.2% 0.161 264) Body #69758C / oklch(56.1% 0.039 263) Icon #B6CCDC Deep Navy shade #00005C oklch(21.5% 0.149 264)*/ :root { /* --- Page surface --- */ --background: oklch(1 0 0); /* #ffffff */ /* --foreground: oklch(0.502 0.038 189.0); Clarity Leaf Green #4a6b68 */ --foreground:oklch(21.5% 0.149 264); /* --- Primary brand colour --- * Clarity Sky Blue — CTAs, links, focus rings. */ --primary: oklch(0.762 0.089 242.2); /* #7eb9e6 */ --primary-foreground: oklch(1 0 0); /* white */ /* --- Secondary / control surfaces --- */ --secondary: oklch(0.895 0.007 234.0); /* #d8dde0 */ --secondary-foreground: oklch(0.502 0.038 189.0); /* Leaf Green */ /* --- Muted UI (metadata, helper text) --- */ --muted: oklch(0.949 0.013 229.1); /* #e6f0f5 */ --muted-foreground: oklch(0.561 0.039 263.4); /* Sec Mid #69758c */ /* --- Accent colour --- * Clarity Apple Green — highlights, success states. */ --accent: oklch(0.844 0.138 153.4); /* #7ee6a1 */ --accent-foreground: oklch(0.276 0.026 183.4); /* Sec Dark #192c29 */ /* --- Cards & containers --- */ --card: oklch(0.975 0.003 229.9); /* #f5f7f8 */ --card-foreground: var(--foreground); /* --- Borders / inputs --- */ --border: oklch(0.895 0.007 234.0); /* #d8dde0 */ --input: var(--border); /* --- Destructive actions --- */ --destructive: oklch(0.745 0.077 20.0); /* Accent Mauve #d99998 */ --destructive-foreground: oklch(1 0 0); /* ========================================================== * TYPOGRAPHY * ========================================================== */ --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ========================================================== * SHAPE, SPACING, SHADOWS * ========================================================== */ --radius: 0.5rem; --spacing: 0.25rem; --tracking-normal: 0em; /* Navbar height — used by Mercury hero billboard overlay */ --navbar-height: calc(var(--spacing) * 15); @media (min-width: 768px) { --navbar-height: calc(var(--spacing) * 18); } /* Shadow tokens (Mercury compiled CSS references these) */ --shadow-x: 0; --shadow-y: 1px; --shadow-blur: 3px; --shadow-spread: 0px; --shadow-opacity: 0.1; --shadow-color: oklch(0 0 0); --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1); --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1); --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1); --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1); } /* ============================================================ * DARK MODE * ============================================================ * Uses the same brand palette shifted onto Sec Dark backgrounds. */ .dark { --background: oklch(0.276 0.026 183.4); /* Sec Dark #192c29 */ --foreground: oklch(0.949 0.013 229.1); /* #e6f0f5 */ --card: oklch(0.350 0.026 184.6); /* #2b3f3c */ --card-foreground: var(--foreground); --primary: oklch(0.762 0.089 242.2); /* Sky Blue */ --primary-foreground: oklch(0.276 0.026 183.4); /* Sec Dark */ --secondary: oklch(0.502 0.038 189.0); /* Leaf Green */ --secondary-foreground: oklch(0.949 0.013 229.1); --muted: oklch(0.350 0.026 184.6); /* #2b3f3c */ --muted-foreground: oklch(0.895 0.007 234.0); /* #d8dde0 */ --accent: oklch(0.844 0.138 153.4); /* Apple Green */ --accent-foreground: oklch(0.276 0.026 183.4); /* Sec Dark */ --border: oklch(0.502 0.038 189.0); /* Leaf Green */ --input: var(--border); --destructive: oklch(0.745 0.077 20.0); /* Accent Mauve */ --destructive-foreground: oklch(0.276 0.026 183.4); --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 0.5rem; --spacing: 0.25rem; --shadow-x: 0; --shadow-y: 1px; --shadow-blur: 3px; --shadow-spread: 0px; --shadow-opacity: 0.1; --shadow-color: oklch(0 0 0); --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1); } /* ============================================================ * REPORT PAGE * ============================================================ */ /* */ .layout__region.layout__region--first picture img { border: 2px solid #e5ecf0; margin-bottom:10%; } /* */ .layout__region.layout__region--second { padding-left:3%; } /* pdf download link */ .layout__region.layout__region--second a[href*="/pdfs"] { /* your badge styles */ display: inline-block; padding: 1.05rem 2.5rem; background-color: #cbf5da; color: #4a6b68; border-radius: 10px; /* pill shape */ font-weight: 600; text-decoration: none; line-height: 1; /* NEW SPACING */ margin-top: 1.75rem; /* space above */ margin-right: 0.5rem; /* space to the right */ } /* Hover state for download pdf link */ .layout__region.layout__region--second a[href*="/pdfs"]:hover { background-color: #b1f0c7; /* slightly darker */ } /* the container of the field area */ .contextual-region.view.view-report-teaser-card.view-id-report_teaser_card { margin-top:3%; padding-top:3%; border-top: 1px solid rgba(74, 107, 104, 0.2); } /* the container of the teaser cards */ .contextual-region.view.view-report-teaser-card.view-id-report_teaser_card.view-content { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* the teaser card, the image and the title */ .report-teaser-card.views-row { vertical-align:top; display: inline-block; width:10%; margin-right:4%; font-weight: bold; } /* padding on the teaser card image */ .report-teaser-card.views-row img { margin-bottom:4%; border: 1px solid rgba(74, 107, 104, 0.2); } /* */ /* */ /* */ /* */ /* ============================================================ * SITE WIDE * ============================================================ */ /* Makes any link to a taxonomy page into a pill button */ a[href*="/taxonomy/term"] { /* your badge styles */ display: inline-block; padding: 0.35rem 0.9rem; background-color: #e5ecf0; color: #4a6b68; border-radius: 9999px; /* pill shape */ font-size: var(--text-sm); font-weight: 600; text-decoration: none; line-height: 1; /* NEW SPACING */ margin-top: 0.75rem; /* space above */ margin-right: 0.5rem; /* space to the right */ } /* Hover state for the taxonomy terms */ a[href*="/taxonomy/term"]:hover { background-color: #d6efff; /* slightly darker */ } /* Makes the taxonomy term flex across the page*/ /* .layout--twocol-section.layout--twocol-section--75-25 .layout__region--first > div > div { display: flex; flex-wrap: wrap; gap: 0.75rem; } */ /* On two page layout builder 75-25 split - adds padding .layout.layout--twocol-section.layout--twocol-section--75-25 div { padding-right:1%; padding-top:.5%; }*/ /* ADDRESS ON URL */ /* .layout--twocol-section.layout--twocol-section--75-25 .layout__region--first a[href="/taxonomy/term/9"] { } */