/* ========================================================================== EnTrustOS design tokens — "Sage-Tinted Panels" Drop into your marketing site and reference via var(--…). Colors & ratios are authoritative; type sizes are web-rebased from the slide system (slides run larger). Adjust --fs-* freely. ========================================================================== */ /* Font import — place in or top of CSS: @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); */ :root { /* ---- Brand core ---- */ --navy: #20406F; /* primary — headings, key text, dark cards */ --navy-deep: #1B3257; /* alt dark band */ --sage: #94AE8A; /* accent — highlights, rules, icons */ --sage-deep: #3C5A33; /* text on light-sage surfaces */ --sage-muted: #6E8A66; /* eyebrow / kicker / label text */ /* ---- Surfaces & neutrals ---- */ --bg: #FAF8F3; /* page background (warm off-white) */ --panel-sage: #EDF1E8; /* primary tinted card */ --panel-sage-lg: #E5EEDF; /* emphasis / "opportunity" card */ --divider-sage: #E9EFE4; /* section divider background */ --panel-gray: #EDEFF3; /* legacy / neutral content card */ --border-gray: #DDE1E8; /* card borders */ --hairline: #ECEEF2; /* table row separators */ --border-sage: #C7D7BB; /* border on sage surfaces */ --border-sage-2: #D3DEC8; /* softer border on sage */ /* ---- Text ---- */ --text-heading: #20406F; --text-body: #52585F; --text-secondary:#7A828C; --text-muted: #8A909A; --on-navy: #D6DEEA; /* body text on navy */ --on-navy-soft: #C8D4E6; --on-navy-muted: #9DB0CC; /* ---- Semantic ---- */ --positive: #6E8A66; /* ✓ / EnTrustOS + WM content */ --negative: #C49A9A; /* ✗ / legacy content */ /* ---- Typography ---- */ --font-display: 'EB Garamond', Georgia, serif; --font-body: Arial, Helvetica, sans-serif; /* web-rebased sizes (fluid) */ --fs-hero: clamp(2.75rem, 5vw, 5rem); /* ~44–80px */ --fs-h2: clamp(2rem, 3.2vw, 2.75rem); /* ~32–44px */ --fs-card-title: 1.375rem; /* 22px */ --fs-stat: clamp(3rem, 5vw, 4.5rem); /* 48–72px */ --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-eyebrow: 0.8125rem; /* 13px */ --fs-micro: 0.6875rem; /* 11px */ --lh-tight: 1.08; --lh-body: 1.5; /* ---- Structure ---- */ --radius-panel: 12px; --radius-card: 14px; --radius-band: 10px; --card-pad: 1.5rem; /* 24px */ --grid-gap: 1.25rem; /* 20px */ --accent-w: 50px; /* eyebrow rule width */ --accent-h: 3px; --shadow-soft: 0 8px 30px rgba(30, 45, 80, .13); } /* ========================================================================== Suggested base styles (optional — delete what you don't need) ========================================================================== */ body { background: var(--bg); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } h1, h2, h3 { font-family: var(--font-display); color: var(--text-heading); font-weight: 500; line-height: var(--lh-tight); } /* Eyebrow / kicker */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--sage-muted); } /* Accent rule that sits above hero headlines */ .accent-rule { width: var(--accent-w); height: var(--accent-h); background: var(--sage); border: 0; margin: 0 0 1.5rem; } /* Tinted card */ .card { background: var(--panel-sage); border-radius: var(--radius-panel); padding: var(--card-pad); } .card--emphasis { background: var(--panel-sage-lg); border-top: 4px solid var(--sage); } .card--legacy { background: var(--panel-gray); border: 1px solid var(--border-gray); } .card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title); color: var(--navy); } /* Navy callout band */ .callout { background: var(--navy); color: var(--on-navy); border-radius: var(--radius-band); padding: 1rem 1.5rem; } /* Big stat numeral */ .stat { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-stat); color: var(--navy); line-height: 1; }