/* ===================================================================== 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; /* Defensive: paired with body { overflow-x: hidden } below to properly clip any descendant that exceeds viewport width. Without it on html, the html element itself scrolls and body's clipping doesn't take effect. */ overflow-x: hidden; max-width: 100vw; } @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; /* Defensive: any rogue child that exceeds viewport width will be clipped rather than causing a horizontal scrollbar across the whole page. Mobile-only — desktop content can still grow if intentional (full-bleed sections, etc.). */ overflow-x: hidden; } ::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. On mobile: single row (brand left, avatar right), no stacked nav. On desktop: row with brand on the left, nav + avatar cluster right. */ .hm-header__inner { width: 100%; padding: 0.625rem var(--hm-pad-x); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 992px) { .hm-header__inner { padding: 1rem var(--hm-pad-x); } } /* MOBILE header adjustments — compact the brand and hide the primary nav (the avatar dropdown takes over navigation). */ @media (max-width: 991.98px) { .hm-header__right .hm-nav { display: none; } .hm-brand__mark { font-size: 1.125rem; } .hm-brand__tag { display: none; } } /* The mobile-only nav items inside the avatar menu only appear on mobile — desktop has the .hm-nav available so they'd be redundant. */ @media (min-width: 992px) { .hm-avatar__nav-mobile { display: none; } } /* 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, NATURAL CONTENT HEIGHT 992+ : 1fr 1fr (50/50 — typical 1080p / desktop), 100vh-110px 1600+ : 0.85fr 1.15fr (gentle slide toward visual) 2200+ : 1fr 2fr (right panel = 2/3, used at 4K) The poster-tall min-height is desktop-only — on mobile each panel grows to fit its content so dashboard/auth/profile/etc. don't have acres of empty space. */ .hm-split { display: grid; width: 100%; } @media (min-width: 992px) { .hm-split { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 110px); } } @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 { /* MOBILE: position fixed at the bottom of the VIEWPORT (not the panel), so the chat box is always available regardless of how much content is above it. Both panels scroll naturally above the fixed bar. iOS safe-area-inset keeps it above the home indicator on notched phones. DESKTOP (≥992px): falls back to position: absolute anchored to .hm-split__left's bottom (the existing two-column layout). */ position: fixed; left: 0; right: 0; bottom: 0; padding: var(--hm-pad-x) var(--hm-pad-x) calc(var(--hm-pad-x) + env(safe-area-inset-bottom, 0px)); background-color: rgba(248,243,238,0.96); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-top: 1px solid var(--hm-rule); z-index: 1020; /* above content, below sticky header (1030) */ 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; } @media (min-width: 992px) { .hm-chatbar-wrap { /* Desktop two-column layout: anchor to the bottom of the left panel instead of the viewport, with symmetric pad-x margins. */ position: absolute; bottom: var(--hm-pad-y); left: var(--hm-pad-x); right: var(--hm-pad-x); padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 0; z-index: auto; } } /* --------------------------------------------------------------------- 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 */ } /* Hide suggestion pills on mobile — the chat bar is fixed to the viewport bottom there, leaving no useful spot for a floating pill above it. Pills are a desktop affordance only. */ @media (max-width: 991.98px) { .hm-suggest { display: none !important; } } .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. */ /* AUTH PAGE: on mobile, the form panel is the primary focus. Hide the editorial supplemental copy (lead + two cards) and tighten the headline so the user gets to the form fast. The headline + eyebrow stay visible to set context. */ @media (max-width: 991.98px) { /* Hard viewport bound — prevent any descendant from forcing the split layout wider than the screen. */ .hm-split, .hm-split__left, .hm-split__right { max-width: 100vw; overflow-x: hidden; } .hm-auth__supplemental { display: none; } /* Brand inside the form is duplicated from the page header on mobile. */ .hm-auth__form-brand { display: none; } .hm-display.hm-auth__headline { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); } /* Frame is the dark-panel sign-in card. On desktop it's clamped to ~40% of the right panel width; on mobile we want it to fill the panel so the form is easy to read and tap. */ .hm-split__right .hm-frame { width: 100%; max-width: 100%; min-width: 0; /* Drop the nested 1rem padding on mobile so the inner card has more breathing room. The .hm-frame is just a translucent shell on the dark panel — its outer padding is decorative. */ padding: 0; /* No outer shadow on mobile either; the card already has its own border + the dark panel surrounds it. */ box-shadow: none; } /* Inner card padding trimmed so form fields and buttons fit. */ .hm-split__right .hm-frame__inner { padding: 1.25rem; min-width: 0; } /* Trim the dark right panel's horizontal padding so the form has more usable width. Default pad-x can be ~20-32px each side. */ .hm-split__right:has(.hm-frame) { padding: 1rem 0.75rem; } /* Tight auth-page left column on mobile so the form panel lands above the fold. The default --hm-pad-y is too tall for a page where the editorial is just an eyebrow + a 2-line headline. */ .hm-split__left:has(.hm-auth__headline) { padding-block: 1.25rem 1rem; } /* Eyebrow margin tighter so headline sits closer */ .hm-split__left:has(.hm-auth__headline) .hm-eyebrow { margin-bottom: 0.625rem; } /* Compact the form fields — tighter gaps so the entire form fits in the viewport without scrolling. */ .hm-split__right .hm-frame .hm-field { gap: 0.375rem; margin-bottom: 0.625rem; } .hm-split__right .hm-frame .form-control { padding: 0.625rem 0.875rem; font-size: 0.9375rem; } /* Tighten button padding inside the auth form on mobile so a row of "Sign in" + "Use a passkey" fits without forcing wider widths. */ .hm-split__right .hm-frame .btn { padding: 0.625rem 1rem; font-size: 0.8125rem; } /* Trim the "quiet security" footer note margin so it doesn't push the form past the viewport. */ .hm-split__right .hm-frame .border-top-hm { margin-top: 1rem !important; padding-top: 0.875rem !important; } } /* MOBILE: the chat box is position: fixed at the viewport bottom in the chatbar rule above, so panels need bottom padding to keep content from being trapped under it. Applies to ANY split layout on mobile, not just prep mode. */ @media (max-width: 991.98px) { .hm-split__left, .hm-split__right { padding-bottom: calc(var(--hm-pad-y) + 5.5rem + env(safe-area-inset-bottom, 0px)); } /* In prep mode the left panel can be much shorter than the right. Reset its minimum height so the page doesn't reserve a tall empty stretch under Hailey's message before the prep card. */ .hm-split__left:has(.hm-hailey) { min-height: 0; } /* The hero split's calc(100vh - 110px) min-height was sized for the marketing hero where the editorial column needs to feel poster-tall. In prep mode on mobile, that wastes space — let it shrink. */ .hm-split:has([data-hm-prep]) { min-height: 0; } .hm-split:has([data-hm-prep]) .hm-split__left { min-height: 0; padding-block: var(--hm-pad-y); } .hm-split:has([data-hm-prep]) .hm-split__right { min-height: 0; } } @media (min-width: 992px) { .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 */ } .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, 80%, 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 --------------------------------------------------------------------- */