/* ============================================================================ IAMTrusted Consumer Portal — global.css Shared foundation: webfonts, design tokens, base reset, and the components that appear on every page (nav, footer, buttons, kicker, verify bar, feature card, step list, container). Page-specific layout lives in home.css / search.css. ============================================================================ */ /* ============================================================ IAM Design System — Webfonts (self-hosted, real files) Headings/UI: Metropolis (Thin→Black + italics) · Body: Roboto ============================================================ */ @font-face { font-family: 'Metropolis'; font-weight: 100; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Thin.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 200; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-ExtraLight.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 300; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Light.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Regular.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Medium.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Bold.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 800; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-ExtraBold.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 900; font-style: normal; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-Black.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 100; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-ThinItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 200; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-ExtraLightItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 300; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 400; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 500; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-MediumItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 600; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 700; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-BoldItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 800; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-ExtraBoldItalic.woff2') format('woff2'); } @font-face { font-family: 'Metropolis'; font-weight: 900; font-style: italic; font-display: swap; src: url('../assets/fonts/metropolis/Metropolis-BlackItalic.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/roboto/Roboto-Regular.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/roboto/Roboto-Medium.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/roboto/Roboto-Bold.woff2') format('woff2'); } /* IAM Design System — Color tokens Base palette from the Consumer Portal handoff (v1.1). Hex values are authoritative — do not round or snap. Semantic aliases sit on top so product code references intent, not raw hues. */ :root { /* ---- Base palette ---------------------------------------------- */ --iam-blue: #1B75BC; /* primary brand blue */ --iam-blue-dk: #0F4E85; /* hover / deep navy */ --iam-blue-mid: #1565A8; /* mid blue (hero gradient stop) */ --iam-blue-navy: #0D3A63; /* hero gradient floor */ --iam-blue-tint: #E8F3FB; /* pale blue fill (icon chips, hovers) */ --iam-orange: #E87722; /* CTA / accent */ --iam-orange-dk: #C9621A; /* CTA hover */ --iam-orange-tint: #FFF3E8; /* pale orange fill */ --iam-gold: #C9A84C; /* IAMTrusted badge accent */ --iam-cream: #FDF8F2; /* IAMTrusted section background */ --iam-cream-dk: #EDE5D8; /* cream border / divider */ --iam-bg: #F2F4F7; /* app / page background */ --iam-white: #FFFFFF; --iam-text: #111827; /* primary text */ --iam-text-mid: #374151; /* mid-emphasis text */ --iam-text-muted: #6B7280; /* secondary text */ --iam-text-faint: #9CA3AF; /* tertiary / placeholder */ --iam-border: #E5E7EB; /* hairlines, field borders */ --iam-border-lt: #F3F4F6; /* faint dividers */ /* Semantic status */ --iam-success: #2F8A3F; /* active filter chip */ --iam-success-dk: #256F32; --iam-danger: #DC2626; /* On-blue (text/borders over the navy hero) */ --iam-on-blue: rgba(255,255,255,0.92); --iam-on-blue-muted: rgba(255,255,255,0.70); --iam-on-blue-faint: rgba(255,255,255,0.45); --iam-on-blue-border: rgba(255,255,255,0.16); --iam-on-blue-surface: rgba(255,255,255,0.08); /* ---- Semantic aliases ----------------------------------------- */ --color-brand: var(--iam-blue); --color-brand-hover: var(--iam-blue-dk); --color-cta: var(--iam-orange); --color-cta-hover: var(--iam-orange-dk); --surface-page: var(--iam-bg); --surface-card: var(--iam-white); --surface-cream: var(--iam-cream); --surface-tint: var(--iam-blue-tint); --text-heading: var(--iam-text); --text-body: var(--iam-text); --text-muted: var(--iam-text-muted); --text-placeholder: var(--iam-text-faint); --text-on-brand: var(--iam-white); --border-default: var(--iam-border); --border-subtle: var(--iam-border-lt); --border-focus: var(--iam-blue); /* Hero / association gradients (exact from portal CSS) */ --gradient-hero: radial-gradient(ellipse 70% 90% at 50% 0%, #3A7FC1 0%, #2B5F9A 45%, #1A3F6F 100%); /* @kind color */ --gradient-band: linear-gradient(135deg, var(--iam-blue-dk) 0%, var(--iam-blue) 100%); --gradient-association: linear-gradient(135deg, var(--iam-blue-dk) 0%, var(--iam-blue) 100%); --gradient-cream: linear-gradient(180deg, #FFFFFF 0%, var(--iam-cream) 100%); --gradient-highlight: linear-gradient(0deg, #7DD4FC 0%, #BAE8FF 100%); /* @kind color */ } /* IAM Design System — Typography tokens Headings: Metropolis (geometric, tight, weighted 600–800 in use) Body: Roboto (400/500/700) Base font-size scales up on large displays (see handoff): 16 → 17px @1920 → 19px @2560. All sizes are rem so the scale cascades. */ :root { --font-heading: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ /* Type scale (rem, on a 16px root) */ --text-xs: 0.75rem; /* 12px — kickers, tag labels, meta */ --text-sm: 0.875rem; /* 14px — small body, chips, form labels */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead paragraph */ --text-lg: 1.375rem; /* 22px — card titles */ --text-xl: 1.75rem; /* 28px — section subheads */ --text-2xl: 2.25rem; /* 36px — section titles */ --text-3xl: 3rem; /* 48px — hero headline */ --text-stat: 2.75rem; /* 44px — stat numbers */ /* Line heights */ --leading-tight: 1.1; --leading-heading: 1.2; --leading-snug: 1.4; --leading-body: 1.65; /* Letter spacing */ --tracking-kicker: 0.14em; /* uppercase eyebrow labels */ --tracking-heading: -0.01em; /* Metropolis headings pull in slightly */ --tracking-normal: 0; /* Semantic roles */ --type-kicker: var(--fw-bold) var(--text-xs)/1.2 var(--font-heading); --type-h1: var(--fw-extrabold) var(--text-3xl)/var(--leading-heading) var(--font-heading); --type-h2: var(--fw-bold) var(--text-2xl)/var(--leading-heading) var(--font-heading); --type-h3: var(--fw-semibold) var(--text-lg)/var(--leading-snug) var(--font-heading); --type-body: var(--fw-regular) var(--text-base)/var(--leading-body) var(--font-body); --type-small: var(--fw-regular) var(--text-sm)/var(--leading-snug) var(--font-body); } @media (min-width: 1920px) { :root { font-size: 17px; } } @media (min-width: 2560px) { :root { font-size: 19px; } } /* IAM Design System — Spacing & layout tokens 4px base rhythm. Content containers cap at 1280px (handoff). */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Section rhythm */ --section-y: 80px; /* vertical padding on major page bands */ --gutter: 24px; /* grid gutter */ --container-max: 1280px; /* content container cap */ --container-pad: 24px; /* container side padding */ } /* IAM Design System — Effects: radii, borders, shadows, motion Button radius is 5px throughout (handoff, explicit). Cards use a slightly larger radius. Shadows are soft, cool-grey, never heavy. */ :root { /* Radii */ --radius-xs: 4px; --radius-sm: 5px; /* buttons, inputs, tags — the house radius */ --radius-md: 8px; /* small cards, chips */ --radius-lg: 12px; /* cards, panels, search widget */ --radius-xl: 16px; /* large feature panels */ --radius-pill: 999px; /* filter chips, badges */ /* Border widths */ --border-hair: 1px; --border-thick: 2px; /* Shadows — soft, cool, layered */ --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05); --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.07), 0 2px 4px rgba(17, 24, 39, 0.04); --shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.10), 0 4px 10px rgba(17, 24, 39, 0.05); --shadow-xl: 0 24px 60px rgba(13, 58, 99, 0.18); --shadow-focus: 0 0 0 3px rgba(27, 117, 188, 0.12); /* focus ring */ /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ --reveal-dur: 600ms; /* @kind other */ } /* ------------------------------------------------------------------------- Root font-size reset. Bricks core sets html{font-size:62.5%} (10px-root convention). The IAM design system's rem scale assumes the browser default 16px root — restore it. Do not remove: without this, every rem on the site renders at 62.5%. ------------------------------------------------------------------------- */ html { font-size: 100%; } /* ------------------------------------------------------------------------- Responsive token overrides. Variables only, so this file keeps its charter (no component selectors) and stays safe to load in the builder panel. --container-pad drops to 16px at XS. This is a port completion, not new design: the demo carried it in css/global.css's responsive block and it was dropped in the move to WordPress. It tightens the header, the footer, and every ported .container section at once. ------------------------------------------------------------------------- */ @media (max-width: 375px) { :root { --container-pad: 16px; } } /* ------------------------------------------------------------------------- Large-screen root scale — RESTORED from the demo's css/global.css. These two steps were deleted during the root font-size fix; the deletion was collateral, not intentional. Everything on the site is rem-based, so stepping the root scales type, spacing and components together, which is the demo's original intent for wide displays. Written as percentages, not px, to stay consistent with the html{100%} reset above and to avoid re-tangling with Bricks' own html{62.5%}. 106.25% = 17px 118.75% = 19px Note: a 2560px-wide *screen* has a slightly narrower viewport once scrollbar and window chrome are subtracted, so a 2560 monitor lands on the 1920 step. Lower the second breakpoint or raise the first if 17px proves too small in practice. ------------------------------------------------------------------------- */ @media (min-width: 1920px) { html { font-size: 106.25%; } } @media (min-width: 2560px) { html { font-size: 118.75%; } }