/* ============================================================================ Highland Institute — plain-CSS distribution ---------------------------------------------------------------------------- Batteries-included, NO build step, NO Tailwind. Link this one file in any HTML page and use the .hi-* classes directly. Pulls its values from tokens.css (kept alongside), so the two travel together. Light is the default. For the dark theme add a class/attribute to : or (For Tailwind projects use tailwind.preset.ts + base.css instead.) ========================================================================= */ @import url("tokens.css"); /* --- Reset / base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { border-color: var(--hi-line); } html, body { min-height: 100%; } body { margin: 0; font-family: var(--hi-font-sans); background-color: var(--hi-bg); color: var(--hi-text); line-height: var(--hi-leading-body); text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--hi-duration) ease, color var(--hi-duration) ease; } h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: var(--hi-track-heading); } p { margin: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--hi-focus); outline-offset: 2px; } /* --- Typography ----------------------------------------------------------- */ .hi-display { font-size: clamp(3rem, 6vw + 1rem, 5rem); font-weight: 800; letter-spacing: var(--hi-track-display); line-height: var(--hi-leading-display); } .hi-lead { font-size: clamp(1.5rem, 2vw + 1rem, 2.35rem); font-weight: 500; letter-spacing: var(--hi-track-lead); line-height: var(--hi-leading-lead); } .hi-body { font-size: clamp(1rem, 0.5vw + 0.9rem, 1.5rem); line-height: var(--hi-leading-body); } .hi-caption { font-size: 0.95rem; font-weight: 500; letter-spacing: var(--hi-track-tight); } .hi-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--hi-track-label); } .hi-halo { text-shadow: var(--hi-text-halo); } /* for text over imagery */ .hi-soft { color: var(--hi-text-soft); } .hi-muted { color: var(--hi-text-muted); } .hi-accent { color: var(--hi-accent); } /* theme-aware gold */ .hi-cream { color: var(--hi-cream); } /* literal brand cream */ .hi-gold { color: var(--hi-gold); } /* literal brand gold */ /* --- Layout --------------------------------------------------------------- */ .hi-container { width: 100%; max-width: var(--hi-container-max); margin-inline: auto; padding-inline: var(--hi-space-md); } @media (min-width: 640px) { .hi-container { padding-inline: var(--hi-space-lg); } } /* --- Backgrounds ---------------------------------------------------------- */ .hi-bg { background-color: var(--hi-bg); } /* theme-aware */ .hi-bg-ink { background-color: var(--hi-ink-850); } /* always dark */ .hi-bg-brand { background-color: var(--hi-ink-900); background-image: var(--hi-grad-brand); } /* dark hero */ /* light-theme hero ground: warm paper with a faint gold wash */ .hi-bg-paper { background-color: var(--hi-bg); background-image: radial-gradient(circle at top left, rgba(201, 177, 135, 0.18), transparent 46%); } /* --- Surfaces ------------------------------------------------------------- */ .hi-card { border: 1px solid var(--hi-line-soft); border-radius: var(--hi-radius-lg); background: var(--hi-surface); box-shadow: var(--hi-shadow-card); padding: var(--hi-space-lg); } .hi-dark .hi-card { box-shadow: none; } /* dark cards sit flat on ink */ .hi-glass { border: 1px solid var(--hi-line); border-radius: var(--hi-radius-sheet); background-image: var(--hi-glass-fill); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--hi-shadow-card); padding: var(--hi-space-lg); } .hi-rule { height: 1px; border: 0; background: var(--hi-line); } .hi-badge { display: inline-flex; align-items: center; border: 1px solid var(--hi-line); border-radius: var(--hi-radius-pill); padding: 0.55rem 1rem; font-size: 0.85rem; } /* --- Buttons -------------------------------------------------------------- */ .hi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; height: 3rem; padding-inline: var(--hi-space-md); font-size: 0.95rem; border: 1px solid transparent; border-radius: var(--hi-radius-btn); font-family: inherit; font-weight: 500; letter-spacing: var(--hi-track-tight); text-decoration: none; cursor: pointer; will-change: transform; transition: color, background-color, border-color, transform, box-shadow, opacity; transition-duration: var(--hi-duration); transition-timing-function: ease-out; } .hi-btn--md { height: 3rem; padding-inline: var(--hi-space-md); font-size: 0.95rem; } .hi-btn--lg { height: 3.35rem; padding-inline: var(--hi-space-lg); font-size: 0.98rem; } .hi-btn:hover { transform: var(--hi-lift); } .hi-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hi-bg), 0 0 0 4px var(--hi-focus); } /* primary = THEME-AWARE high-contrast CTA: white-on-dark, ink-on-light. Use this for the main call to action when a page may render in either theme. light / dark / ghost below are fixed (non-adaptive) variants. */ .hi-btn--primary { background: var(--hi-text); color: var(--hi-bg); border-color: var(--hi-text); box-shadow: var(--hi-shadow-sm); } .hi-btn--primary:hover { box-shadow: var(--hi-shadow-md); opacity: 0.94; } /* light = white fill / ink text · dark = ink fill / white text · ghost = text */ .hi-btn--light { background: var(--hi-white); color: var(--hi-surface-ink); border-color: var(--hi-line-strong); box-shadow: var(--hi-shadow-sm); } .hi-btn--light:hover { background: rgba(255, 255, 255, 0.92); box-shadow: var(--hi-shadow-md); } .hi-btn--dark { background: var(--hi-surface-ink-2); color: var(--hi-white); border-color: var(--hi-surface-ink-2); } .hi-btn--dark:hover { background: #262626; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); } .hi-btn--ghost { background: transparent; color: var(--hi-text); text-underline-offset: 4px; } .hi-btn--ghost:hover { text-decoration: underline; color: var(--hi-text-soft); } /* --- Newsletter pill (email field + submit fused into one capsule) -------- */ .hi-pill { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.375rem; border-radius: 0.96rem; border: 1px solid var(--hi-line-strong); background: rgba(255, 255, 255, 0.92); box-shadow: var(--hi-shadow-sm); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .hi-pill__input { min-width: 0; flex: 1; height: 2.75rem; padding-inline: 1rem; border: 0; border-radius: 0.78rem; background: transparent; color: var(--hi-surface-ink); font-family: inherit; font-size: 0.9rem; font-weight: 500; letter-spacing: var(--hi-track-tight); } .hi-pill__input::placeholder { color: #a3a3a3; } .hi-pill__input:focus-visible { outline: none; } .hi-pill .hi-btn { height: 2.75rem; } /* dark / on-glass variant */ .hi-pill--dark { border-color: var(--hi-border-soft); background: rgba(255, 255, 255, 0.08); box-shadow: var(--hi-shadow-lg); } .hi-pill--dark .hi-pill__input { color: var(--hi-white); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); } .hi-pill--dark .hi-pill__input::placeholder { color: rgba(255, 255, 255, 0.42); } /* --- Crest medallion lockup (white seal + concentric hairline rings) ------ */ .hi-medallion { position: relative; display: grid; place-items: center; height: 5.5rem; width: 5.5rem; border-radius: 50%; background: var(--hi-white); border: 1px solid var(--hi-line-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); } .hi-medallion::before, .hi-medallion::after { content: ""; position: absolute; border-radius: 50%; } .hi-medallion::before { inset: 0.184rem; border: 1px solid rgba(212, 212, 212, 0.7); } .hi-medallion::after { inset: 0.347rem; border: 1px solid rgba(212, 212, 212, 0.5); } .hi-medallion img { position: relative; height: 100%; width: 100%; object-fit: contain; padding: 0.5rem; } .hi-medallion--sm { height: 3rem; width: 3rem; border-radius: var(--hi-radius-md); } .hi-medallion--sm::before { inset: 0.16rem; border-radius: calc(var(--hi-radius-md) - 0.16rem); } .hi-medallion--sm::after { inset: 0.3rem; border-radius: calc(var(--hi-radius-md) - 0.3rem); } .hi-medallion--sm img { border-radius: inherit; padding: 0.3rem; } /* --- Motion --------------------------------------------------------------- */ @keyframes hi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.32rem); } } .hi-float { animation: hi-float 3.8s ease-in-out infinite; }