/* ===================================================================== HandleMy — Editorial Theme for Bootstrap 5.3 Shared across the HandleMy ecosystem (handlemy.world + sub-services) --------------------------------------------------------------------- Load AFTER bootstrap.min.css. This file overrides Bootstrap variables via :root and adds editorial components prefixed with .hm-* ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens — parent palette (handlemy.world) --------------------------------------------------------------------- */ :root { /* Raw palette */ --hm-sage: #A3B18A; --hm-clay: #9C6644; --hm-sand: #EDE0D4; --hm-forest: #344E41; --hm-rust: #BC6C25; --hm-cream: #F8F3EE; --hm-dark: #1E2D25; --hm-text: #2E2E2E; --hm-muted: #7A7060; /* Semantic roles (these are what components reference) */ --hm-bg: var(--hm-cream); --hm-surface: var(--hm-sand); --hm-ink: var(--hm-dark); --hm-accent: var(--hm-rust); --hm-accent-alt: var(--hm-clay); --hm-quiet: var(--hm-muted); --hm-rule: rgba(156,102,68,0.12); --hm-rule-strong: rgba(156,102,68,0.28); --hm-dark-bg: var(--hm-forest); /* Tinted surfaces */ --hm-sage-soft: rgba(163,177,138,0.22); --hm-sage-softer: rgba(163,177,138,0.12); --hm-sand-soft: rgba(237,224,212,0.55); --hm-sand-softer: rgba(237,224,212,0.32); --hm-cream-soft: rgba(248,243,238,0.85); /* Type */ --hm-font-serif: Georgia, "Times New Roman", "Droid Serif", serif; --hm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; /* Track / letter-spacing presets used in editorial labels */ --hm-track-eyebrow: 0.32em; --hm-track-micro: 0.28em; --hm-track-tight: 0.24em; /* Fluid horizontal padding used by every full-width wrapper. Scales smoothly from mobile (1.25rem) to ultrawide (4rem). */ --hm-pad-x: clamp(1.25rem, 4vw, 4rem); /* Fluid vertical padding for editorial sections. */ --hm-pad-y: clamp(3rem, 6vw, 6rem); /* Centered max-width for non-hero content (header, footer, rail, principles, inner-page containers). Hero/split panels stay full-bleed. Bumping this in one place re-aligns every chrome wrapper. */ --hm-content-max: 1200px; /* ----- Bootstrap variable overrides ----- */ --bs-body-bg: var(--hm-bg); --bs-body-color: var(--hm-text); --bs-body-font-family: var(--hm-font-sans); --bs-body-font-size: 1rem; --bs-body-line-height: 1.6; --bs-emphasis-color: var(--hm-ink); --bs-link-color: var(--hm-accent); --bs-link-hover-color: var(--hm-accent-alt); --bs-border-color: var(--hm-rule); --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-primary: #344E41; --bs-primary-rgb: 52,78,65; --bs-secondary-color: var(--hm-quiet); } /* --------------------------------------------------------------------- 2. Per-site palette overrides Set Each child site only swaps the accent + dark surface tones. --------------------------------------------------------------------- */ [data-site="art"] { --hm-accent: #C96E4B; --hm-accent-alt: #8E3F22; --hm-sage: #D9B8A1; --hm-forest: #2D2A3E; --hm-dark-bg: #2D2A3E; } [data-site="business"] { --hm-accent: #2F5D8C; --hm-accent-alt: #16334D; --hm-sage: #9FB5C9; --hm-forest: #0F2A40; --hm-dark-bg: #0F2A40; } [data-site="finance"] { --hm-accent: #4F6D7A; --hm-accent-alt: #243B45; --hm-sage: #B8C7CC; --hm-forest: #1B2A30; --hm-dark-bg: #1B2A30; } [data-site="money"] { --hm-accent: #2F6F5E; --hm-accent-alt: #1B4A3E; --hm-sage: #B7D1BF; --hm-forest: #102A21; --hm-dark-bg: #102A21; } [data-site="party"] { --hm-accent: #D83F73; --hm-accent-alt: #96214C; --hm-sage: #EDBFD1; --hm-forest: #3E0E24; --hm-dark-bg: #3E0E24; } [data-site="store"] { --hm-accent: #B9642D; --hm-accent-alt: #7E3A12; --hm-sage: #DCC7A1; --hm-forest: #2B1C0E; --hm-dark-bg: #2B1C0E; } [data-site="website"] { --hm-accent: #45678A; --hm-accent-alt: #253F5C; --hm-sage: #AFC0D1; --hm-forest: #12233A; --hm-dark-bg: #12233A; } [data-site="health"] { --hm-accent: #4B8B7F; --hm-accent-alt: #1F5A50; --hm-sage: #B5D6CC; --hm-forest: #0D2E28; --hm-dark-bg: #0D2E28; } [data-site="casa"] { --hm-accent: #C66B3D; /* warm terracotta — hearth */ --hm-accent-alt: #7A3514; --hm-sage: #DBB89C; --hm-forest: #2A1810; --hm-dark-bg: #2A1810; } [data-site="house"] { --hm-accent: #8B5A3C; /* earthy brick — structure */ --hm-accent-alt: #4F2E18; --hm-sage: #C9B59C; --hm-forest: #1F1208; --hm-dark-bg: #1F1208; } [data-site="net"] { --hm-accent: #4A7AAA; /* steel blue — connectivity */ --hm-accent-alt: #1E3F66; --hm-sage: #AAC2D9; --hm-forest: #0A1828; --hm-dark-bg: #0A1828; } [data-site="org"] { --hm-accent: #C09246; /* warm gold — community */ --hm-accent-alt: #75501C; --hm-sage: #DCC59A; --hm-forest: #2B1E08; --hm-dark-bg: #2B1E08; } /* --------------------------------------------------------------------- 3. Base & typography --------------------------------------------------------------------- */ /* Root font-size scales up at large viewports so 4K / ultrawide monitors get a small text bump without users having to zoom. Everything in the theme sized in `rem` grows proportionally — no per-element overrides required. Scaling is intentionally moderate so the baseline reads as editorial, not oversized. */ html { font-size: 16px; scroll-behavior: smooth; } @media (min-width: 2000px) { html { font-size: 17px; } } @media (min-width: 2800px) { html { font-size: 18px; } } @media (min-width: 3600px) { html { font-size: 19px; } } /* Content-max also opens up a bit on ultrawide so the centered 1200px body doesn't feel marooned in the middle of 4K. */ @media (min-width: 2200px) { :root { --hm-content-max: 1400px; } } @media (min-width: 2800px) { :root { --hm-content-max: 1600px; } } body { font-family: var(--bs-body-font-family); color: var(--bs-body-color); background-color: var(--bs-body-bg); font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--hm-sage); color: var(--hm-ink); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .hm-serif { font-family: var(--hm-font-serif); color: var(--hm-ink); font-weight: 400; letter-spacing: -0.01em; margin-top: 0; /* Distribute wrap evenly across lines instead of leaving orphans. Modern browsers only; older browsers fall back to normal wrap. */ text-wrap: balance; } h1, .h1 { font-size: clamp(1.875rem, 3vw + 0.75rem, 3rem); line-height: 1.05; } h2, .h2 { font-size: clamp(1.5rem, 1.5vw + 0.5rem, 2.125rem); line-height: 1.15; } h3, .h3 { font-size: clamp(1.25rem, 1vw + 0.5rem, 1.5rem); line-height: 1.25; } h4, .h4 { font-size: 1.125rem; line-height: 1.35; } h5, .h5 { font-size: 1rem; line-height: 1.4; } h6, .h6 { font-size: 0.875rem; line-height: 1.45; } .hm-display { font-family: var(--hm-font-serif); color: var(--hm-ink); font-size: clamp(2.25rem, 3.75vw + 0.5rem, 3.75rem); line-height: 1.02; letter-spacing: -0.015em; font-weight: 400; text-wrap: balance; } .hm-italic { font-style: italic; } .hm-italic-accent { font-style: italic; color: var(--hm-accent-alt); } /* Sage flourish under a word or short phrase. ── DESIGN RULE: only wrap a SINGLE WORD or non-breaking phrase in this span. A multi-word span can wrap mid-phrase at narrow column widths and produce two stacked underlines instead of one continuous flourish. If you want a multi-word emphasis, join the words with non-breaking spaces ( ) so they wrap as a unit, or split the underline into the keyword only. Uses native text-decoration so the rule sits below the baseline at any font size; skip-ink:none keeps it continuous through descenders; the offset/thickness are tuned for Georgia at display sizes. */ .hm-underline-accent { text-decoration-line: underline; text-decoration-color: var(--hm-sage); text-decoration-thickness: 4px; text-underline-offset: 0.22em; text-decoration-skip-ink: none; } .hm-lead { font-size: 1rem; line-height: 1.7; color: var(--hm-quiet); max-width: 34rem; } .hm-quiet { color: var(--hm-quiet) !important; } .hm-ink { color: var(--hm-ink) !important; } .hm-accent { color: var(--hm-accent) !important; } a { color: var(--bs-link-color); text-decoration: none; transition: color .15s; } a:hover { color: var(--bs-link-hover-color); } /* --------------------------------------------------------------------- 4. Editorial micro-elements --------------------------------------------------------------------- */ /* Eyebrow: small uppercase label with leading rule */ .hm-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--hm-font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--hm-track-eyebrow); color: var(--hm-accent); font-weight: 500; margin-bottom: 1.5rem; } .hm-eyebrow::before { content: ""; display: block; width: 2rem; height: 1px; background-color: var(--hm-accent); } .hm-eyebrow--plain::before { display: none; } .hm-eyebrow--muted { color: var(--hm-quiet); } .hm-eyebrow--muted::before { background-color: var(--hm-quiet); } .hm-eyebrow--on-dark { color: rgba(237,224,212,0.78); } .hm-eyebrow--on-dark::before { background-color: rgba(237,224,212,0.5); } /* Micro label (no rule) */ .hm-micro { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--hm-track-micro); color: var(--hm-quiet); font-family: var(--hm-font-sans); font-weight: 500; } .hm-micro--accent { color: var(--hm-accent); } .hm-micro--tight { letter-spacing: var(--hm-track-tight); } /* Pills */ .hm-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; background-color: var(--hm-sage-soft); color: var(--hm-forest); border: 0; } /* Decorative dot bullet (used in footnote rows) */ .hm-dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background-color: var(--hm-sage); } /* Editorial measure helper (max line length) */ .hm-measure { max-width: 42rem; } .hm-measure-sm { max-width: 32rem; } .hm-measure-xs { max-width: 24rem; } /* --------------------------------------------------------------------- 5. Brand wordmark --------------------------------------------------------------------- */ .hm-brand { display: inline-block; text-decoration: none; } .hm-brand__mark { font-family: var(--hm-font-serif); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; color: var(--hm-forest); line-height: 1; } .hm-brand__mark .hm-brand__em { color: var(--hm-accent); font-style: italic; } .hm-brand__tag { font-size: 0.875rem; color: var(--hm-quiet); margin-top: 0.375rem; } .hm-brand--sm .hm-brand__mark { font-size: 1.3rem; } /* --------------------------------------------------------------------- 6. Container & layout primitives --------------------------------------------------------------------- */ /* Standard content container — capped at --hm-content-max and centered. Use this for any non-hero page chrome (article body, listings, profile, dashboards, etc.) so it lines up with the header and footer. For full-bleed layouts (.hm-split, .hm-rail, .hm-principles, .hm-footer) the wrapper element is full width and the *__inner element is capped. */ .hm-container { width: 100%; max-width: var(--hm-content-max); margin-inline: auto; padding-inline: var(--hm-pad-x); } /* Opt-in: edge-to-edge container, used for sections that intentionally want to ignore the content cap. */ .hm-container--bleed { max-width: none; } .hm-section { padding-block: var(--hm-pad-y); } .hm-section--lg { padding-block: clamp(4rem, 8vw, 8rem); } .hm-section--sm { padding-block: clamp(2rem, 4vw, 3rem); } /* --------------------------------------------------------------------- 7. Header (sticky, sand-on-cream, blurred) --------------------------------------------------------------------- */ .hm-header { position: sticky; top: 0; z-index: 1030; background-color: rgba(248,243,238,0.94); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hm-rule); } /* Header is FULL WIDTH (fluid) — chrome spans the viewport while the footer and main content are capped at --hm-content-max. The padding still scales with viewport via --hm-pad-x. */ .hm-header__inner { width: 100%; padding: 1rem var(--hm-pad-x); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 992px) { .hm-header__inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* Right-side cluster on the header: nav + avatar menu side by side. */ .hm-header__right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .hm-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hm-nav__link { padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--hm-quiet); text-decoration: none; border: 1px solid var(--hm-rule); background: transparent; transition: color .15s, background-color .15s, border-color .15s; font-family: var(--hm-font-sans); } .hm-nav__link:hover { color: var(--hm-ink); } .hm-nav__link.is-active, .hm-nav__link[aria-current="page"] { background-color: var(--hm-forest); color: var(--hm-sand); border-color: transparent; } /* --------------------------------------------------------------------- 8. Split layout (hero with content + dark visual panel) --------------------------------------------------------------------- */ /* Hero split: stays full-bleed (no max-width). The two columns shift ratio responsively so the dark visual panel takes more of the canvas on bigger displays: <992 : single column, stacked 992+ : 1fr 1fr (50/50 — typical 1080p / desktop) 1600+ : 0.85fr 1.15fr (gentle slide toward visual) 2200+ : 1fr 2fr (right panel = 2/3, used at 4K) */ .hm-split { display: grid; width: 100%; min-height: calc(100vh - 110px); } @media (min-width: 992px) { .hm-split { grid-template-columns: 1fr 1fr; } } @media (min-width: 1600px) { .hm-split { grid-template-columns: 0.85fr 1.15fr; } } @media (min-width: 2200px) { .hm-split { grid-template-columns: 1fr 2fr; } } .hm-split__left { position: relative; /* containing block for absolute .hm-chatbar-wrap */ display: flex; align-items: center; padding: var(--hm-pad-y) var(--hm-pad-x); border-bottom: 1px solid var(--hm-rule); } @media (min-width: 992px) { .hm-split__left { border-bottom: 0; border-right: 1px solid var(--hm-rule); } } .hm-split__right { position: relative; /* Sits above .hm-split__left so any content overflowing from the left panel (e.g. the .hm-suggest pill sliding off the right edge) visually slides UNDER the right panel instead of on top of it. */ z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(2.5rem, 5vw, 5rem) var(--hm-pad-x); background-color: var(--hm-dark-bg); color: rgba(237,224,212,0.88); } /* Ambient gradient overlay used in dark panels */ .hm-dark-glow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 32% 38%, rgba(163,177,138,0.23), transparent 32%), radial-gradient(circle at 72% 68%, rgba(188,108,37,0.18), transparent 28%); pointer-events: none; } /* Right-panel background video. Loaded last (after window.load) by initRightPanelVideo() in handlemy.js, then JS fades it in (inline opacity, so OS reduced-motion can't suppress it) and the existing .hm-leaf + .hm-dark-stage content fades out simultaneously. */ .hm-rp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 3; /* above leaves + dark stage */ pointer-events: none; } /* Forest-tinted darkening overlay sitting one z-step above the video. color-mix() lets us reference the theme token, so changing --hm-forest re-tints the overlay automatically. JS fades it in alongside the video. Bump the percentage if you want it darker. */ .hm-rp-overlay { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--hm-forest) 85%, transparent); opacity: 0; z-index: 4; /* above the video */ pointer-events: none; } /* Decorative glyphs scattered across dark panel */ .hm-leaf { position: absolute; opacity: 0.2; font-size: 1.5rem; z-index: 0; pointer-events: none; } .hm-leaf--a { top: 14%; left: 12%; font-size: 1.75rem; } .hm-leaf--b { bottom: 18%; left: 24%; font-size: 1.25rem; } .hm-leaf--c { top: 62%; right: 18%; font-size: 1.125rem; } /* --------------------------------------------------------------------- 9. Orb (radial center visual on dark panel) --------------------------------------------------------------------- */ .hm-orb { position: relative; z-index: 1; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(237,224,212,0.16); background: radial-gradient(circle at 35% 35%, rgba(163,177,138,0.95), rgba(52,78,65,0.88)); display: flex; align-items: center; justify-content: center; margin-inline: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.4); } .hm-orb__glyph { font-size: 3.75rem; } .hm-on-dark-caption { font-family: var(--hm-font-serif); font-style: italic; color: rgba(237,224,212,0.78); font-size: 1.75rem; text-align: center; margin-top: 2rem; line-height: 1.2; } .hm-on-dark-subcaption { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.34em; color: rgba(163,177,138,0.72); text-align: center; margin-top: 0.5rem; } /* --------------------------------------------------------------------- 10. Cards --------------------------------------------------------------------- */ .hm-card { border: 1px solid var(--hm-rule); background-color: var(--hm-cream-soft); padding: 1.25rem; } .hm-card--p-lg { padding: 1.5rem; } .hm-card--p-xl { padding: 1.75rem; } .hm-card--sand { background-color: var(--hm-sand); border-color: var(--hm-rule-strong); } .hm-card--sand-soft { background-color: var(--hm-sand-soft); } .hm-card--sand-softer { background-color: var(--hm-sand-softer); } .hm-card--sage { background-color: var(--hm-sage-soft); border-color: rgba(163,177,138,0.35); } .hm-card--sage-soft { background-color: var(--hm-sage-softer); } .hm-card--cream { background-color: var(--hm-cream-soft); } .hm-card__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--hm-track-tight); color: var(--hm-quiet); font-family: var(--hm-font-sans); font-weight: 500; } .hm-card__number { font-family: var(--hm-font-serif); font-size: 1.75rem; color: var(--hm-ink); margin: 0.5rem 0 0; line-height: 1; } .hm-card__title { font-family: var(--hm-font-serif); color: var(--hm-ink); font-size: 1.25rem; line-height: 1.25; margin: 0.5rem 0 0; font-weight: 400; } .hm-card__body { font-size: 0.875rem; line-height: 1.65; color: var(--hm-quiet); margin: 0.625rem 0 0; } /* Stat card grid (3-up) */ .hm-stats { display: grid; gap: 1rem; margin-top: 3rem; } @media (min-width: 576px) { .hm-stats { grid-template-columns: repeat(3, 1fr); } } /* --------------------------------------------------------------------- 11. Buttons --------------------------------------------------------------------- */ .btn { border-radius: 0; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; font-family: var(--hm-font-sans); transition: transform .15s, background-color .15s, color .15s, border-color .15s; border-width: 1px; letter-spacing: 0.01em; } .btn-hm-primary { background-color: var(--hm-accent); color: var(--hm-cream); border: 1px solid var(--hm-accent); } .btn-hm-primary:hover, .btn-hm-primary:focus { background-color: var(--hm-accent-alt); border-color: var(--hm-accent-alt); color: var(--hm-cream); transform: translateY(-2px); } .btn-hm-outline { background: transparent; color: var(--hm-forest); border: 1px solid rgba(52,78,65,0.28); } .btn-hm-outline:hover, .btn-hm-outline:focus { background-color: rgba(0,0,0,0.05); color: var(--hm-forest); border-color: rgba(52,78,65,0.45); } .btn-hm-ghost { background: transparent; color: var(--hm-quiet); border: 1px solid var(--hm-rule); } .btn-hm-ghost:hover { color: var(--hm-ink); border-color: var(--hm-rule-strong); } .btn-hm-on-dark { background-color: rgba(248,243,238,0.08); color: rgba(237,224,212,0.95); border: 1px solid rgba(237,224,212,0.2); } .btn-hm-on-dark:hover { background-color: rgba(248,243,238,0.16); color: var(--hm-cream); } /* --------------------------------------------------------------------- 12. Forms --------------------------------------------------------------------- */ .hm-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .hm-field__label, .form-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--hm-track-tight); color: var(--hm-quiet); font-family: var(--hm-font-sans); font-weight: 500; margin-bottom: 0; } .form-control, .form-select, .hm-field__input { border-radius: 0; border: 1px solid var(--hm-rule); background-color: rgba(248,243,238,0.92); padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--hm-ink); font-family: inherit; width: 100%; line-height: 1.4; } .form-control::placeholder { color: var(--hm-quiet); opacity: 0.7; } .form-control:focus, .form-select:focus, .hm-field__input:focus { border-color: var(--hm-accent); box-shadow: 0 0 0 3px rgba(188,108,37,0.15); background-color: var(--hm-cream); color: var(--hm-ink); outline: none; } .form-control:disabled, .form-control[readonly] { background-color: var(--hm-sand-softer); color: var(--hm-quiet); } .is-invalid.form-control, .form-control.is-invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); } .invalid-feedback { font-size: 0.8125rem; color: #C0392B; margin-top: 0.375rem; } .form-check-input { border-radius: 0; border: 1px solid var(--hm-rule-strong); } .form-check-input:checked { background-color: var(--hm-accent); border-color: var(--hm-accent); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(188,108,37,0.15); border-color: var(--hm-accent); } /* --------------------------------------------------------------------- 12a. Stack — vertical column wrapper used inside .hm-split__left. Lets the editorial .hm-measure (capped at 42rem) and the chat bar (95% of panel width) live as siblings without breaking the flex centering on .hm-split__left, which expects a single child. --------------------------------------------------------------------- */ .hm-stack { display: flex; flex-direction: column; width: 100%; } /* --------------------------------------------------------------------- 12b. Chat bar (animated entrance) The chat bar wrapper appears at the bottom of the editorial column. Width is 95% of the panel content area (the .hm-stack is full panel width). Animates grid-template-rows from 0fr → 1fr on data-hm-state="visible" for a clean grow-from-zero entrance. --------------------------------------------------------------------- */ .hm-chatbar-wrap { /* Anchored to the bottom of .hm-split__left so the chat bar sits near the viewport bottom regardless of how tall the editorial content above it is. Symmetric margins: same pad-x on the left and the right, so width is derived from left + right. */ position: absolute; bottom: var(--hm-pad-y); left: var(--hm-pad-x); right: var(--hm-pad-x); display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .85s cubic-bezier(0.16, 1, 0.3, 1) .4s, opacity .55s ease .55s; } /* --------------------------------------------------------------------- 12c2. Avatar menu — circular initial / image button that toggles a Bootstrap dropdown. Lives in the header's right cluster next to the primary nav. --------------------------------------------------------------------- */ .hm-avatar { position: relative; } .hm-avatar__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; background-color: var(--hm-sage-soft); border: 1px solid var(--hm-rule-strong); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; overflow: hidden; } .hm-avatar__btn:hover, .hm-avatar__btn[aria-expanded="true"] { background-color: var(--hm-sage); border-color: var(--hm-forest); } .hm-avatar__initial { font-family: var(--hm-font-serif); font-size: 1rem; font-weight: 600; color: var(--hm-forest); line-height: 1; } .hm-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; } .hm-avatar__menu.dropdown-menu { border-radius: 0; border: 1px solid var(--hm-rule-strong); background-color: var(--hm-cream); padding: 0.5rem 0; min-width: 14rem; font-family: var(--hm-font-sans); box-shadow: 0 22px 55px -22px rgba(31,42,33,0.28); margin-top: 0.5rem !important; } .hm-avatar__head { padding: 0.75rem 1rem; } .hm-avatar__name { font-family: var(--hm-font-serif); font-size: 1.0625rem; color: var(--hm-ink); line-height: 1.2; } .hm-avatar__email { font-size: 0.8125rem; color: var(--hm-quiet); margin-top: 0.125rem; } /* Bootstrap dropdown item overrides — bring them into the editorial palette without using Bootstrap's default blue hover. */ .hm-avatar__menu .dropdown-item { padding: 0.55rem 1rem; font-size: 0.875rem; color: var(--hm-forest); font-family: var(--hm-font-sans); } .hm-avatar__menu .dropdown-item:hover, .hm-avatar__menu .dropdown-item:focus { background-color: var(--hm-sand-softer); color: var(--hm-ink); } .hm-avatar__menu .dropdown-item:active { background-color: var(--hm-sand); color: var(--hm-ink); } .hm-avatar__menu .dropdown-divider { border-top: 1px solid var(--hm-rule); margin: 0.375rem 0; opacity: 1; } /* --------------------------------------------------------------------- 12c. Suggestion pills — slide in from off-left, hold above the chat bar for 8s, slide off-right (under the right panel via the z-index trick on .hm-split__right), swap text, repeat. Built dynamically by initSuggestions() in handlemy.js; the translateX animation is driven by JS rAF so it can't be suppressed by prefers-reduced-motion at the OS level. --------------------------------------------------------------------- */ .hm-suggest { position: absolute; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 0; /* `bottom` is set inline by JS so it sits gap-px above the chat bar */ } .hm-suggest__pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background-color: var(--hm-cream); color: var(--hm-ink); font-family: var(--hm-font-sans); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--hm-rule-strong); border-radius: 999px; cursor: pointer; pointer-events: auto; white-space: nowrap; box-shadow: 0 8px 22px -12px rgba(31,42,33,0.25); /* Start hidden so an empty pill (before first cycle()) doesn't show up in the panel. JS sets visibility:visible the moment the first cycle runs. */ visibility: hidden; /* Start off-screen left; JS animates translateX inline. Don't put `transform` in the transition list — JS rAF would fight it. */ transform: translateX(-400%); transition: background-color .15s, color .15s, border-color .15s; } .hm-suggest__pill::before { content: "→"; color: var(--hm-accent); font-weight: 600; } .hm-suggest__pill:hover { background-color: var(--hm-sand); border-color: var(--hm-accent); } .hm-chatbar-wrap[data-hm-state="visible"] { grid-template-rows: 1fr; opacity: 1; } /* The grid child must be `overflow: hidden; min-height: 0;` for the 0fr → 1fr trick to actually clip during the transition. */ .hm-chatbar-wrap > * { overflow: hidden; min-height: 0; } /* The chat bar is the page's primary call-to-action — visually distinct from the surrounding editorial content via: - sand surface against the cream page background - 4px rust accent flag on the left edge (editorial marker) - generous padding so it reads as a hero input, not a form field - drop shadow that lifts it off the page surface - serif prompt scaled close to headline weight so it competes for attention with the editorial copy above. */ .hm-chatbar { /* No margin-top needed — .hm-chatbar-wrap is absolutely positioned at the bottom of the panel by .hm-chatbar-wrap. */ margin-top: 0; padding: 2.25rem 2.25rem 2rem; background-color: var(--hm-sand); border: 1px solid var(--hm-rule-strong); border-left: 4px solid var(--hm-accent); box-shadow: 0 22px 55px -22px rgba(31,42,33,0.28); transform: translateY(14px); transition: transform .85s cubic-bezier(0.16, 1, 0.3, 1) .45s; } .hm-chatbar-wrap[data-hm-state="visible"] .hm-chatbar { transform: translateY(0); } .hm-chatbar__form { display: flex; flex-direction: column; gap: 1.25rem; } .hm-chatbar__prompt { display: block; font-family: var(--hm-font-serif); font-size: clamp(1.5rem, 1.25vw + 0.85rem, 2.25rem); line-height: 1.2; color: var(--hm-ink); letter-spacing: -0.01em; margin: 0; cursor: text; text-wrap: balance; } .hm-chatbar__row { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--hm-rule-strong); background-color: #ffffff; transition: border-color .15s, box-shadow .15s; } .hm-chatbar__row:focus-within { border-color: var(--hm-accent); box-shadow: 0 0 0 3px rgba(188,108,37,0.15); } .hm-chatbar__input { flex: 1 1 auto; min-width: 0; border: 0; padding: 1.25rem 1.5rem; font-size: 1.0625rem; background: transparent; color: var(--hm-ink); font-family: inherit; outline: none; } .hm-chatbar__input::placeholder { color: var(--hm-quiet); opacity: 0.75; } .hm-chatbar__submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.85rem; border: 0; background-color: var(--hm-accent); color: var(--hm-cream); font-family: var(--hm-font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: background-color .15s, transform .15s; } .hm-chatbar__submit:hover, .hm-chatbar__submit:focus-visible { background-color: var(--hm-accent-alt); } .hm-chatbar__submit-arrow { display: inline-block; transition: transform .2s ease; } .hm-chatbar__submit:hover .hm-chatbar__submit-arrow { transform: translateX(3px); } /* One-time attention pulse on the input row, triggered when the chat bar reaches its visible state. Soft expanding rust glow that fades in and back out — runs once, ~1.2s after entrance. */ @keyframes hm-chatbar-attention { 0% { box-shadow: 0 0 0 0 rgba(188,108,37, 0); } 35% { box-shadow: 0 0 0 12px rgba(188,108,37, 0.20); } 100% { box-shadow: 0 0 0 0 rgba(188,108,37, 0); } } .hm-chatbar-wrap[data-hm-state="visible"] .hm-chatbar__row { animation: hm-chatbar-attention 2s ease 1.2s 1 both; } /* --------------------------------------------------------------------- 12d. Reveal — staggered fade/slide entrance for editorial content Add .hm-reveal to any element that should fade+slide into view after page load. Set --hm-reveal-delay (in seconds) per item for a sequential cascade. JS adds .is-in on DOMContentLoaded which triggers the transitions. --------------------------------------------------------------------- */ .hm-reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease var(--hm-reveal-delay, 0s), transform .75s cubic-bezier(0.16, 1, 0.3, 1) var(--hm-reveal-delay, 0s); will-change: opacity, transform; } .hm-reveal.is-in { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------------------- 12e. Stepback — wrapper that scales AND translates its contents up-and-left to give the chat bar focal-point status. Animation is driven by JS (initEngagement in handlemy.js) using a vanilla requestAnimationFrame loop that sets `transform` inline (so OS prefers-reduced-motion can't silence it). Origin is `top left` so the scale anchor and the translate direction reinforce each other — the content visibly slides up-left as it shrinks. --------------------------------------------------------------------- */ .hm-stepback { transform-origin: top left; will-change: transform; } /* --------------------------------------------------------------------- 12f. Hailey message — left-panel response shown in /prep mode. Replaces the marketing copy with a focused conversational message from Hailey, the assistant persona. --------------------------------------------------------------------- */ .hm-hailey { display: flex; flex-direction: column; gap: 1.5rem; } .hm-hailey__head { display: flex; align-items: center; gap: 1rem; } .hm-hailey__avatar { width: 3rem; height: 3rem; border-radius: 50%; background-color: var(--hm-sage); border: 1px solid var(--hm-forest); display: inline-flex; align-items: center; justify-content: center; font-family: var(--hm-font-serif); font-size: 1.25rem; font-weight: 600; color: var(--hm-forest); flex-shrink: 0; } .hm-hailey__id { display: flex; flex-direction: column; gap: 0.125rem; } .hm-hailey__name { font-family: var(--hm-font-serif); font-size: 1.125rem; color: var(--hm-ink); line-height: 1.1; } .hm-hailey__tone { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--hm-quiet); font-family: var(--hm-font-sans); } .hm-hailey__tone--ready { color: var(--hm-accent); } .hm-hailey__tone--thinking { color: var(--hm-quiet); } .hm-hailey__tone--clarifying { color: var(--hm-accent-alt); } .hm-hailey__message { font-family: var(--hm-font-serif); font-size: clamp(1.4rem, 1.5vw + 0.85rem, 2rem); line-height: 1.35; color: var(--hm-ink); margin: 0; text-wrap: pretty; } .hm-hailey__echo { border-top: 1px solid var(--hm-rule); padding-top: 1.25rem; margin-top: 0.5rem; } .hm-hailey__echo-text { font-family: var(--hm-font-serif); font-style: italic; font-size: 1rem; color: var(--hm-quiet); margin-top: 0.5rem; line-height: 1.5; } /* --------------------------------------------------------------------- 12g. Prep panel — right-panel structured response card. Shown inside .hm-frame on the dark forest panel. Reuses the editorial micro-elements (.hm-eyebrow, .hm-micro) and the existing form styling so it sits naturally in the system. --------------------------------------------------------------------- */ /* PREP MODE LAYOUT In prep mode, the .hm-split is locked to exactly viewport height (instead of min-height) so the grid row can't grow with the prep card's content. That gives the right panel a fixed container to scroll INSIDE, and lets the left panel — which is otherwise free to grow with content — sit static at viewport height with the chat box absolute-pinned at the bottom. • Left panel: static, no scroll, no overflow. Hailey at top, chat box at bottom, both always visible. • Right panel: independent vertical scroll. Tall prep cards scroll within the panel without affecting anything else. • Mobile (< 992px): the split goes back to its natural min-height model so the page scrolls normally and the user can swipe through the stacked panels. */ .hm-split__left:has(.hm-hailey) { align-items: flex-start; overflow: hidden; /* left panel never scrolls */ min-height: 0; /* let the grid row constrain it */ } @media (min-width: 992px) { .hm-split:has([data-hm-prep]) { height: calc(100vh - 110px); /* lock total grid height */ min-height: calc(100vh - 110px); } .hm-split__right:has([data-hm-prep]) { align-items: flex-start; overflow-y: auto; overflow-x: hidden; min-height: 0; /* critical: lets the grid item shrink below its content height so the overflow-y: auto can actually scroll */ /* Subtle cream-tinted scrollbar — doesn't read as a system widget. */ scrollbar-width: thin; scrollbar-color: rgba(237,224,212,0.3) transparent; } .hm-split__right:has([data-hm-prep])::-webkit-scrollbar { width: 8px; } .hm-split__right:has([data-hm-prep])::-webkit-scrollbar-track { background: transparent; } .hm-split__right:has([data-hm-prep])::-webkit-scrollbar-thumb { background-color: rgba(237,224,212,0.25); border-radius: 4px; } .hm-split__right:has([data-hm-prep])::-webkit-scrollbar-thumb:hover { background-color: rgba(237,224,212,0.45); } } .hm-prep__head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--hm-rule); margin-bottom: 1.25rem; } .hm-prep__head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .hm-prep__level-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--hm-quiet); font-family: var(--hm-font-sans); padding: 0.25rem 0.625rem; border: 1px solid var(--hm-rule-strong); background: var(--hm-cream); } .hm-prep__title { font-family: var(--hm-font-serif); font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); line-height: 1.15; color: var(--hm-ink); margin: 0.75rem 0 0.5rem; font-weight: 400; } .hm-prep__summary { font-size: 0.9375rem; line-height: 1.6; color: var(--hm-quiet); margin: 0; } .hm-prep__section { padding-block: 1.25rem; border-top: 1px solid var(--hm-rule); } .hm-prep__section:first-of-type { border-top: 0; padding-top: 0; } /* ---- Hierarchical chain ---------------------------------------- */ .hm-prep__chain { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } /* SERVICE (top level) */ .hm-prep__svc { border: 1px solid var(--hm-rule); background-color: var(--hm-cream-soft); padding: 0.875rem 1rem 1rem; } .hm-prep__svc--exists { background-color: var(--hm-sand-softer); } .hm-prep__svc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .hm-prep__svc-id { display: flex; align-items: center; gap: 0.625rem; } .hm-prep__svc-name { font-family: var(--hm-font-serif); font-size: 1.0625rem; color: var(--hm-ink); font-weight: 500; } .hm-prep__svc-note { font-size: 0.8125rem; color: var(--hm-quiet); margin: 0.5rem 0 0.75rem; line-height: 1.5; font-style: italic; } /* CATEGORY (nested under service) */ .hm-prep__cat { margin-top: 0.75rem; padding-left: 1rem; border-left: 2px solid var(--hm-rule-strong); } .hm-prep__cat:first-of-type { margin-top: 0.875rem; } .hm-prep__cat-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .hm-prep__cat-id { display: flex; align-items: center; gap: 0.5rem; } .hm-prep__cat-name { font-family: var(--hm-font-sans); font-size: 0.875rem; color: var(--hm-ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* TASK (nested under category) */ .hm-prep__tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .hm-prep__task { background-color: var(--hm-sand-softer); border: 1px solid var(--hm-rule); padding: 0.625rem 0.75rem; } .hm-prep__svc--exists .hm-prep__task { background-color: var(--hm-cream-soft); } .hm-prep__task-row { display: flex; align-items: flex-start; gap: 0.625rem; } .hm-prep__task-body { flex: 1 1 auto; min-width: 0; } .hm-prep__task-name { font-family: var(--hm-font-sans); font-size: 0.9375rem; color: var(--hm-ink); line-height: 1.35; } .hm-prep__task-meta { font-size: 0.7rem; color: var(--hm-quiet); text-transform: uppercase; letter-spacing: 0.1em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin-top: 0.375rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .hm-prep__task-handler { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--hm-forest); } .hm-prep__task-duration { color: var(--hm-quiet); } .hm-prep__step-dot { color: var(--hm-quiet); opacity: 0.6; } /* ---- Level tags (S/C/T/H badge) -------------------------------- */ /* Tiny mono letter chip showing which hierarchy level this row is. */ .hm-prep__level-tag { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.6875rem; font-weight: 700; color: var(--hm-cream); background-color: var(--hm-forest); border-radius: 2px; flex-shrink: 0; line-height: 1; } .hm-prep__level-tag--task { background-color: var(--hm-accent); } .hm-prep__level-tag--handler { width: 1rem; height: 1rem; font-size: 0.625rem; background-color: var(--hm-sage); color: var(--hm-forest); } /* ---- State pills (Will enable / Already enabled / etc.) -------- */ .hm-prep__state { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--hm-font-sans); font-weight: 500; padding: 0.25rem 0.5rem; border: 1px solid currentColor; white-space: nowrap; } .hm-prep__state--enable { color: var(--hm-accent); } .hm-prep__state--exists { color: var(--hm-quiet); opacity: 0.8; } .hm-prep__state--create { color: var(--hm-accent); } /* Costs + timeframe two-column block */ .hm-prep__split { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .hm-prep__split { grid-template-columns: 1.4fr 1fr; } } .hm-prep__split-col { display: flex; flex-direction: column; gap: 0.75rem; } .hm-prep__costs { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .hm-prep__costs li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9375rem; padding: 0.25rem 0; border-bottom: 1px dotted var(--hm-rule); } .hm-prep__costs li:last-child { border-bottom: 0; border-top: 1px solid var(--hm-rule-strong); padding-top: 0.625rem; margin-top: 0.25rem; font-weight: 500; } .hm-prep__cost-label { color: var(--hm-text); } .hm-prep__cost-amount { color: var(--hm-ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875rem; } .hm-prep__timeframe { font-family: var(--hm-font-serif); font-size: 1.25rem; color: var(--hm-ink); line-height: 1.3; margin-top: 0.5rem; } .hm-prep__section--needs { background-color: var(--hm-sage-softer); margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(163,177,138,0.4); border-top: 1px solid rgba(163,177,138,0.4); } .hm-prep__needs { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 0.75rem; } .hm-prep__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } /* --------------------------------------------------------------------- 13. Section rail (sand strip with service links) --------------------------------------------------------------------- */ /* Service rail — full-viewport-width ticker on a sage band. Adds a green note to the page that's distinct from the sand tones used in cards and the dark forest used in the right panel. The .hm-rail__track is a single horizontal flex row containing TWO copies of the same .hm-rail__list, so JS can translate the track continuously and reset seamlessly when one full copy has scrolled past. */ .hm-rail { border-top: 1px solid rgba(52,78,65,0.18); border-bottom: 1px solid rgba(52,78,65,0.18); background-color: var(--hm-sage); overflow: hidden; /* clip off-screen track items */ } .hm-rail__inner { width: 100%; /* fluid 100vw — no max-width cap */ } .hm-rail__track { display: flex; width: max-content; /* track is as wide as both lists combined */ will-change: transform; } .hm-rail__list { list-style: none; margin: 0; padding: 1.5rem 0; display: flex; flex-shrink: 0; /* don't shrink — keep both copies at natural size */ align-items: center; gap: clamp(2.5rem, 5vw, 5rem); /* generous spacing between items */ padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); /* gap-equivalent padding at the edges so the seam is invisible */ } .hm-rail__item { display: inline-block; font-size: 0.9375rem; color: var(--hm-forest); text-decoration: none; font-family: var(--hm-font-sans); white-space: nowrap; transition: color .15s; } .hm-rail__item:hover { color: var(--hm-accent); } .hm-rail__item--quiet { color: var(--hm-quiet); font-style: italic; } /* --------------------------------------------------------------------- 14. Three-up principles section --------------------------------------------------------------------- */ .hm-principles { border-top: 1px solid var(--hm-rule); border-bottom: 1px solid var(--hm-rule); background-color: var(--hm-sand); } .hm-principles__inner { width: 100%; max-width: var(--hm-content-max); margin-inline: auto; display: grid; } @media (min-width: 768px) { .hm-principles__inner { grid-template-columns: repeat(3, 1fr); } } .hm-principle { padding: 2rem var(--hm-pad-x); } @media (min-width: 768px) { .hm-principle + .hm-principle { border-left: 1px solid var(--hm-rule); } } /* --------------------------------------------------------------------- 15. Frame (translucent bordered card used over dark panels) --------------------------------------------------------------------- */ /* Translucent bordered frame that floats on the dark right panel. Width is sized as a percentage of the PARENT panel (not the viewport), so the ratio holds whether the right panel is 600px wide on a laptop or 2500px wide on a 4K monitor. - default (.hm-frame, used by auth/login): ~40% of parent - .hm-frame--wide (used by dashboard signals): ~70% of parent The min/max bounds keep it usable on tiny screens and prevent it from stretching past readable line lengths on absurdly wide ones. */ .hm-frame { position: relative; z-index: 1; background-color: rgba(248,243,238,0.1); border: 1px solid rgba(237,224,212,0.14); padding: 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: clamp(320px, 40%, 1100px); max-width: 100%; margin-inline: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .hm-frame--wide { width: clamp(480px, 70%, 1800px); } /* Stage wrapper for visual content that lives directly on the dark right panel (e.g. the home page orb + cards). Same parent-percentage sizing principle. ~60% of parent at all sizes. */ .hm-dark-stage { position: relative; z-index: 1; width: clamp(320px, 60%, 1200px); max-width: 100%; margin-inline: auto; } .hm-frame__inner { background-color: rgba(248,243,238,0.92); border: 1px solid var(--hm-rule); padding: 1.5rem; } @media (min-width: 768px) { .hm-frame__inner { padding: 1.75rem; } } .hm-frame__caption { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.28em; color: rgba(237,224,212,0.72); padding-inline: 0.5rem; } /* --------------------------------------------------------------------- 16. Article / long-form --------------------------------------------------------------------- */ .hm-article { max-width: 44rem; margin-inline: auto; } .hm-article p, .hm-article ul, .hm-article ol, .hm-article blockquote { font-size: 1.0625rem; line-height: 1.8; color: var(--hm-text); margin-bottom: 1.25rem; } .hm-article h2 { margin-top: 3rem; margin-bottom: 1rem; } .hm-article h3 { margin-top: 2.25rem; margin-bottom: 0.75rem; } .hm-article blockquote { border-left: 3px solid var(--hm-sage); padding-left: 1.25rem; font-family: var(--hm-font-serif); font-style: italic; color: var(--hm-ink); } .hm-article a { border-bottom: 1px solid var(--hm-rule-strong); } .hm-article a:hover { border-bottom-color: var(--hm-accent); } /* --------------------------------------------------------------------- 17. Footer --------------------------------------------------------------------- */ .hm-footer { border-top: 1px solid var(--hm-rule); background-color: var(--hm-cream); margin-top: 4rem; } .hm-footer__inner { width: 100%; max-width: var(--hm-content-max); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.5rem) var(--hm-pad-x) clamp(1.5rem, 3vw, 2.5rem); } .hm-footer__grid { display: grid; gap: 2.5rem; } @media (min-width: 768px) { .hm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .hm-footer__heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--hm-track-micro); color: var(--hm-quiet); margin-bottom: 1rem; font-family: var(--hm-font-sans); font-weight: 500; } .hm-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; } .hm-footer__list a { color: var(--hm-forest); text-decoration: none; } .hm-footer__list a:hover { color: var(--hm-accent); } .hm-footer__legal { border-top: 1px solid var(--hm-rule); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8125rem; color: var(--hm-quiet); } /* --------------------------------------------------------------------- 18. Misc utilities --------------------------------------------------------------------- */ .hm-rule-x { display: block; height: 1px; background-color: var(--hm-rule); border: 0; } .hm-bar { display: block; width: 2rem; height: 1px; background-color: var(--hm-accent); } .bg-hm-cream { background-color: var(--hm-cream) !important; } .bg-hm-sand { background-color: var(--hm-sand) !important; } .bg-hm-forest { background-color: var(--hm-forest) !important; color: var(--hm-cream); } .bg-hm-sage-soft { background-color: var(--hm-sage-soft) !important; } .border-hm { border: 1px solid var(--hm-rule) !important; } .border-top-hm { border-top: 1px solid var(--hm-rule) !important; } .border-end-hm { border-right: 1px solid var(--hm-rule) !important; } .border-bot-hm { border-bottom: 1px solid var(--hm-rule) !important; } .border-start-hm{ border-left: 1px solid var(--hm-rule) !important; } .text-hm-accent { color: var(--hm-accent) !important; } .text-hm-quiet { color: var(--hm-quiet) !important; } .text-hm-ink { color: var(--hm-ink) !important; } /* --------------------------------------------------------------------- 19. Tables (used on dashboards) --------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--hm-text); --bs-table-border-color: var(--hm-rule); font-size: 0.9375rem; } .table > :not(caption) > * > * { padding: 0.875rem 1rem; } .table thead th { font-family: var(--hm-font-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--hm-track-tight); color: var(--hm-quiet); font-weight: 500; background: var(--hm-sand-softer); } /* --------------------------------------------------------------------- 20. Reduced-motion --------------------------------------------------------------------- */