/* ============================================================ Harness Intelligence (Hi) — Brand CSS Single entry point for a plain HTML/CSS site. Link THIS one file in your : It pulls in the fonts, design tokens, and base reset, then layers on ready-to-use component classes (.hi-btn, .hi-card, .hi-tile, etc). Every value comes from the Hi design tokens — never hard-code a hex; reach for a var(--hi-*) token instead. ============================================================ */ /* ---- Foundations: fonts, tokens, base reset ---- */ @import url('tokens/fonts.css'); @import url('tokens/colors.css'); @import url('tokens/typography.css'); @import url('tokens/spacing.css'); @import url('tokens/effects.css'); @import url('tokens/base.css'); /* ============================================================ LAYOUT ============================================================ */ .hi-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .hi-container--narrow { max-width: var(--container-narrow); } .hi-measure { max-width: var(--measure); } /* Section rhythm — alternate white and --surface-alt for cadence */ .hi-section { padding-block: var(--section-pad-y); } .hi-section--alt { background: var(--surface-alt); } .hi-section--wash { background: var(--surface-wash); } .hi-section--dark { background: var(--surface-dark); color: rgba(255,255,255,.92); } .hi-section--brand { background: var(--surface-invert); color: var(--hi-white); } .hi-section--dark h1, .hi-section--dark h2, .hi-section--dark h3, .hi-section--dark h4, .hi-section--brand h1, .hi-section--brand h2, .hi-section--brand h3, .hi-section--brand h4 { color: var(--hi-white); } .hi-stack { display: flex; flex-direction: column; gap: var(--space-4); } .hi-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .hi-grid { display: grid; gap: var(--gutter); } .hi-grid--2 { grid-template-columns: repeat(2, 1fr); } .hi-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .hi-grid--2, .hi-grid--3 { grid-template-columns: 1fr; } } /* ============================================================ TYPOGRAPHY HELPERS Body defaults to Roboto Light 300 / 1.8 leading (from base.css). Headings default to Noto Serif 700 (from base.css). These helpers cover the recurring named roles. ============================================================ */ .hi-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; } .hi-lede { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text-muted); font-weight: var(--fw-light); } .hi-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } /* Mono eyebrow — the kicker above almost every heading */ .hi-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-eyebrow-size); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); font-weight: var(--fw-regular); } /* The accent device: flip exactly one phrase per headline to orange */ .hi-accent { color: var(--color-primary); } .hi-section--brand .hi-accent, .hi-section--dark .hi-accent { color: var(--hi-white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 6px; } /* ============================================================ BUTTON — the signature pill. Orange primary carries every CTA. ============================================================ */ .hi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 28px; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; border-radius: var(--radius-pill); border: 2px solid transparent; background: var(--hi-orange); color: var(--hi-white); box-shadow: var(--shadow-button); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hi-btn:hover { transform: translateY(-2px); background: var(--hi-orange-press); color: var(--hi-white); box-shadow: var(--shadow-button-h); } .hi-btn:active { background: var(--hi-orange-press); transform: translateY(0); } .hi-btn[disabled], .hi-btn.is-disabled { opacity: .5; box-shadow: none; cursor: not-allowed; transform: none; } .hi-btn--secondary { background: var(--hi-white); color: var(--hi-orange); border-color: var(--hi-orange); box-shadow: none; font-weight: 400; } .hi-btn--secondary:hover { background: var(--hi-orange-wash); color: var(--hi-orange); box-shadow: none; } .hi-btn--ghost { background: transparent; color: var(--text-body); box-shadow: none; } .hi-btn--ghost:hover { background: var(--hi-cloud); color: var(--text-body); box-shadow: none; } .hi-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; } .hi-btn--lg { height: 56px; padding: 0 34px; font-size: 16px; } /* ============================================================ CARD — the soft container. 16px radius, hairline border, low shadow. Add data-accent color on an inline style for the 3px top rule. ============================================================ */ .hi-card { background: var(--surface-card); border: 1px solid var(--hi-line); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hi-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } /* Colored top-accent rule — set the color inline, e.g. style="--hi-card-accent: var(--hi-blue)" */ .hi-card--accent { border-top: 3px solid var(--hi-card-accent, var(--hi-orange)); } /* ============================================================ TAG — pill label for programs / topics / filters. ============================================================ */ .hi-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; border-radius: var(--radius-pill); border: 2px solid var(--hi-orange); color: var(--hi-orange); background: transparent; } .hi-tag--solid { background: var(--hi-orange); color: var(--hi-white); border-color: var(--hi-orange); } /* ============================================================ BADGE — tiny mono status marker (Coming Soon / New / Live). ============================================================ */ .hi-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; background: var(--hi-orange-wash); color: var(--hi-orange-press); } .hi-badge--blue { background: #E7F1FA; color: var(--hi-blue); } .hi-badge--green { background: #EDF7E7; color: #4E9E2E; } .hi-badge--gold { background: #FDF4DE; color: #B8862A; } .hi-badge--neutral { background: var(--hi-cloud); color: var(--hi-slate); } /* ============================================================ PROGRAM TILE — the periodic-element mark. The brand's icon system. Set the fill color inline: style="--hi-tile-color: var(--hi-blue)". ============================================================ */ .hi-tile-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; } .hi-tile { width: 120px; height: 133px; padding: 14px; background: var(--hi-tile-color, var(--hi-orange)); color: var(--hi-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .hi-tile__num { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1; } .hi-tile__sym { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 900; font-size: 60px; letter-spacing: -0.04em; line-height: .85; } .hi-tile__cap { text-align: center; font-family: var(--font-body); font-weight: 400; font-size: 9px; letter-spacing: .04em; opacity: .95; } .hi-tile__label { font-family: var(--font-body); font-weight: 700; font-size: 12px; color: var(--text-strong); text-align: center; max-width: 140px; } /* ============================================================ STAT — big serif figure + quiet label. ============================================================ */ .hi-stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 64px; line-height: 1; letter-spacing: var(--ls-display); color: var(--color-primary); } .hi-stat__label { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); } /* ============================================================ TESTIMONIAL — serif pull-quote with the orange left-rule. ============================================================ */ .hi-quote { border-left: var(--border-accent) solid var(--hi-orange); padding-left: var(--space-4); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 30px; line-height: var(--lh-snug); color: var(--text-strong); text-wrap: pretty; } .hi-quote--sm { font-size: 18px; } .hi-quote--md { font-size: 22px; } .hi-quote__author { display: block; margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); } /* ============================================================ INPUT — quiet underline field, orange focus rule. No boxes. ============================================================ */ .hi-field { display: flex; flex-direction: column; gap: var(--space-2); } .hi-field__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); } .hi-input { font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-body-lg); color: var(--text-strong); background: transparent; border: none; border-bottom: 1px solid var(--hi-line); padding: var(--space-2) 0; transition: border-color var(--dur-base) var(--ease-out); } .hi-input::placeholder { color: var(--hi-silver); } .hi-input:focus { outline: none; border-bottom: 2px solid var(--hi-orange); box-shadow: none; } /* ============================================================ NAV & FOOTER — sticky nav, orange top-rule footer. ============================================================ */ .hi-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hi-line); } .hi-nav__links { display: flex; align-items: center; gap: var(--space-5); } .hi-nav__links a { color: var(--text-body); font-size: var(--fs-sm); } .hi-nav__links a:hover { color: var(--hi-orange); } .hi-footer { border-top: var(--border-accent) solid var(--hi-orange); background: var(--hi-cloud); padding-block: var(--space-7); }