/* =========================== HOUSE HERMETICA DESIGN SYSTEM v3.3 Full-bleed geometric architecture Session 1 Integration: 09 Jan 2026 Updated: 13 Jan 2026 - Formula Art & Layout Extensions Veritas ante Omnia =========================== */ /* =========================== 0. FONT LOADING =========================== */ /* Font loading moved to HTML for preconnect performance */ /* =========================== 1. DESIGN TOKENS =========================== */ :root { /* Core palette */ --hh-text-main: var(--hh-text-dark); --hh-text-body: #c0bfbd; /* Dark-section body text: between light and muted-light */ --hh-bg-light: #fafaf9; --hh-bg-dark: #0a0a0a; --hh-surface-light: #ffffff; --hh-surface-dark: #151515; --hh-text-dark: #0d0d0d; --hh-text-light: #f5f5f4; --hh-text-muted-dark: #525252; --hh-text-muted-light: #a3a3a3; --hh-border-light: rgba(0, 0, 0, 0.08); --hh-border-dark: rgba(255, 255, 255, 0.12); /* Alchemical palette — four stages, three tones each */ --hh-rubedo: #8b1b1b; --hh-rubedo-light: #ac3030; --hh-rubedo-dark: #610b0b; --hh-citrinitas: #ba9859; --hh-citrinitas-light: #d1b782; --hh-citrinitas-dark: #5c4520; --hh-albedo: #d4dcc3; --hh-albedo-light: #f0f4e8; --hh-albedo-dark: #8a9a6f; --hh-nigredo: #1c2631; --hh-nigredo-light: #3C4A59; --hh-nigredo-dark: #0b1016; /* Platform accent — defaults to rubedo, overridden per [data-platform] */ --hh-accent: var(--hh-rubedo); --hh-accent-light: var(--hh-rubedo-light); --hh-accent-dark: var(--hh-rubedo-dark); --hh-accent-bg: color-mix(in srgb, var(--hh-accent) 20%, var(--hh-bg-dark)); --hh-gold: #ba9859; /* Alias for formula displays */ /* Alchemical metal gradients */ --hh-metal-lead: linear-gradient(135deg, #3d3d3d, #2a2a2a, #4a4a4a); --hh-metal-tin: linear-gradient(135deg, #8a8a8a, #6e6e6e, #a0a0a0); --hh-metal-iron: linear-gradient(135deg, #6b4423, #4d3015, #8a5a30); --hh-metal-copper: linear-gradient(135deg, #c8844a, #a86830, #e0a060); --hh-metal-mercury: linear-gradient(135deg, #c9c9c9, #e8e8e8, #b0b0b0); --hh-metal-silver: linear-gradient(135deg, #e8e8e8, #ffffff, #d0d0d0); --hh-metal-gold: linear-gradient(135deg, #d4af37, #f4d03f, #b8960c); /* Flat metal colours (for text/borders where gradients won't work) */ --hh-metal-lead-flat: #3d3d3d; --hh-metal-tin-flat: #8a8a8a; --hh-metal-iron-flat: #6b4423; --hh-metal-copper-flat: #c8844a; --hh-metal-mercury-flat: #c9c9c9; --hh-metal-silver-flat: #e8e8e8; --hh-metal-gold-flat: #d4af37; /* TRINITI element colours */ --hh-fire: #b35632; --hh-water: #315a7a; --hh-air: #4c5b3e; --hh-earth: #3d3229; /* TRINITI Shadow palette — forensics/diagnostic panels */ --hh-fire-shadow: #6e3520; --hh-water-shadow: #1f3a4f; --hh-air-shadow: #303a26; --hh-earth-shadow: #28201a; /* Signal quality colours (forensics) */ --hh-sig-high: #2a8a64; --hh-sig-good: #4da66a; --hh-sig-mid: #a8892e; --hh-sig-low: #a84545; /* TRINITI RGB values - for transparency effects */ --hh-fire-rgb: 179, 86, 50; --hh-water-rgb: 49, 90, 122; --hh-air-rgb: 76, 91, 62; --hh-earth-rgb: 61, 50, 41; --hh-citrinitas-rgb: 186, 152, 89; /* #ba9859 */ /* Stream accents — map to element colours */ --hh-accent-scientific: var(--hh-fire); --hh-accent-sacred: var(--hh-water); /* Layout */ --hh-gutter: clamp(1.5rem, 5vw, 4rem); --hh-content-max: 1400px; --hh-section-padding: clamp(4rem, 12vh, 10rem); /* Typography */ --hh-font-sans: "Alegreya Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hh-font-serif: "Alegreya", "Times New Roman", serif; --hh-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --hh-fs-xs: 0.75rem; --hh-fs-sm: 0.875rem; --hh-fs-body: 1rem; --hh-fs-body-lg: 1.4rem; --hh-fs-h4: 1.125rem; --hh-fs-h3: 1.75rem; --hh-fs-h2: 2.5rem; --hh-fs-h1: 3.2rem; --hh-letter-heading: 0.02em; --hh-letter-label: 0.16em; /* Motion */ --hh-ease: cubic-bezier(0.16, 0.5, 0.3, 1); --hh-duration-fast: 180ms; --hh-duration-med: 320ms; --hh-duration-slow: 600ms; } /* STREAM OVERRIDES */ [data-stream="scientific"] { --hh-primary-accent: var(--hh-fire); } [data-stream="sacred"] { --hh-primary-accent: var(--hh-water); } [data-stream="scientific"] .sacred-only { display: none !important; } [data-stream="sacred"] .scientific-only { display: none !important; } /* PLATFORM ACCENT OVERRIDES */ [data-platform="portica"] { --hh-accent: var(--hh-nigredo); --hh-accent-light: var(--hh-nigredo-light); --hh-accent-dark: var(--hh-nigredo-dark); } [data-platform="palatium"] { --hh-accent: var(--hh-citrinitas); --hh-accent-light: var(--hh-citrinitas-light); --hh-accent-dark: var(--hh-citrinitas-dark); } [data-platform="triniti"] { --hh-accent: var(--hh-albedo); --hh-accent-light: var(--hh-albedo-light); --hh-accent-dark: var(--hh-albedo-dark); } /* =========================== 2. RESET / BASE =========================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { margin: 0; min-height: 100vh; font-family: var(--hh-font-sans); font-size: var(--hh-fs-body); line-height: 1.6; color: var(--hh-text-dark); background: var(--hh-bg-light); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } img, picture, video, canvas { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--hh-accent); outline-offset: 3px; } /* Text link styling */ .hh-section__inner a:not([class]), .hh-feature-card a:not([class]), .hh-accordion__body a:not([class]) { color: var(--hh-fire); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .hh-section__inner a:not([class]):hover, .hh-feature-card a:not([class]):hover, .hh-accordion__body a:not([class]):hover { border-bottom-color: var(--hh-fire); } /* =========================== 3. TYPOGRAPHY =========================== */ h1, h2, h3 { font-family: var(--hh-font-serif); letter-spacing: var(--hh-letter-heading); font-weight: 500; line-height: 1.1; margin: 2rem 0 1.5rem; } h4, h5, h6 { font-family: var(--hh-font-sans); text-transform: uppercase; letter-spacing: var(--hh-letter-label); font-weight: 600; margin: 1rem 0 0.75rem; } /* First heading in section has no top margin */ .hh-section__inner > h1:first-child, .hh-section__inner > h2:first-child, .hh-section__inner > h3:first-child, .hh-section__inner > h4:first-child { margin-top: 0; } /* Heading immediately after label (span or div) has no top margin */ .hh-label + h1, .hh-label + h2, .hh-label + h3, .hh-label + h4, div.hh-label + h1, div.hh-label + h2, div.hh-label + h3, div.hh-label + h4, hh-feature-card__number + h1, hh-feature-card__number + h2, hh-feature-card__number + h3, hh-feature-card__number + h4, div.hh-feature-card__number + h1, div.hh-feature-card__number + h2, div.hh-feature-card__number + h3, div.hh-feature-card__number + h4 { margin-top: 0; } h1 { font-size: clamp(2rem, 4.8vw, var(--hh-fs-h1)); } h2 { font-size: clamp(2rem, 4vw, var(--hh-fs-h2)); margin-bottom: 1rem; } h3 { font-size: clamp(1.5rem, 3vw, var(--hh-fs-h3)); } h4 { font-size: var(--hh-fs-h4); } p { margin: 0 0 1.25rem; line-height: 1.7; } .hh-label { font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); text-transform: uppercase; letter-spacing: var(--hh-letter-label); font-weight: 600; display: inline-block; margin-bottom: 0.75rem; } .hh-mono { font-family: var(--hh-font-mono); font-size: var(--hh-fs-sm); } .hh-intro-text { font-size: var(--hh-fs-body-lg); margin-bottom: 1.5rem; line-height: 1.6; } /* =========================== 4. BUTTON SYSTEM =========================== */ .hh-btn-primary, .hh-btn--primary, .hh-btn-secondary, .hh-btn--secondary, .hh-btn--light, .hh-btn--ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; cursor: pointer; transition: all var(--hh-duration-med) var(--hh-ease); text-decoration: none; border: 2px solid var(--hh-accent); } .hh-btn-primary, .hh-btn--primary { background-color: var(--hh-accent); color: var(--hh-text-light); } .hh-btn-primary:hover, .hh-btn--primary:hover { background-color: var(--hh-accent-light); border-color: var(--hh-accent-light); color: var(--hh-text-light); } .hh-btn-secondary, .hh-btn--secondary { background-color: transparent; color: var(--hh-accent); } .hh-btn-secondary:hover, .hh-btn--secondary:hover { background-color: var(--hh-accent); color: var(--hh-text-light); } /* Secondary on dark/accent sections: lighter border and text */ .hh-section--dark .hh-btn-secondary, .hh-section--dark .hh-btn--secondary, .hh-section--accent .hh-btn-secondary, .hh-section--accent .hh-btn--secondary, .hh-section--accent-bg .hh-btn-secondary, .hh-section--accent-bg .hh-btn--secondary { border-color: var(--hh-accent-light); color: var(--hh-accent-light); } .hh-section--dark .hh-btn-secondary:hover, .hh-section--dark .hh-btn--secondary:hover, .hh-section--accent .hh-btn-secondary:hover, .hh-section--accent .hh-btn--secondary:hover, .hh-section--accent-bg .hh-btn-secondary:hover, .hh-section--accent-bg .hh-btn--secondary:hover { background-color: var(--hh-accent-light); color: var(--hh-text-light); } .hh-btn--light { background-color: var(--hh-text-light); color: var(--hh-accent); border-color: var(--hh-text-light); } .hh-btn--light:hover { background-color: transparent; color: var(--hh-text-light); border-color: var(--hh-text-light); } .hh-btn--ghost { background-color: transparent; color: var(--hh-text-light); border-color: rgba(255, 255, 255, 0.35); } .hh-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.08); border-color: var(--hh-text-light); } /* Button size variants */ .hh-btn--sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; } .hh-btn--lg, .hh-btn--large { padding: 1.25rem 3rem; font-size: 1.0625rem; } .hh-btn-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; } .hh-btn-group--stacked { flex-direction: column; gap: 0.5rem; } .hh-btn-group--stacked .hh-btn { width: 100%; } /* =========================== 5. ANIMATED BACKGROUND SYSTEM =========================== */ .hh-page { position: relative; min-height: 100vh; overflow-x: hidden; } .hh-bg-shapes { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; } .hh-shape { position: absolute; filter: blur(140px); opacity: 0.28; } .hh-shape-1 { width: 700px; height: 700px; background: rgba(139, 27, 27, 0.6); top: -15%; right: -5%; animation: hhShapeFloat1 45s ease-in-out infinite; } .hh-shape-2 { width: 650px; height: 650px; background: rgba(201, 169, 97, 0.5); bottom: -15%; left: -5%; animation: hhShapeFloat2 50s ease-in-out infinite reverse; } .hh-shape-3 { width: 600px; height: 600px; background: rgba(45, 62, 80, 0.4); top: 35%; left: 45%; animation: hhShapeFloat3 48s ease-in-out infinite; } @keyframes hhShapeFloat1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(-60px, 80px) scale(1.08) rotate(8deg); } 50% { transform: translate(40px, -50px) scale(0.95) rotate(-5deg); } 75% { transform: translate(-30px, -70px) scale(1.05) rotate(12deg); } } @keyframes hhShapeFloat2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(70px, -60px) scale(1.1) rotate(-10deg); } 50% { transform: translate(-45px, 55px) scale(0.92) rotate(7deg); } 75% { transform: translate(35px, 75px) scale(1.06) rotate(-15deg); } } @keyframes hhShapeFloat3 { 0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } 25% { transform: translate(calc(-50% + 50px), calc(-50% - 70px)) scale(1.12) rotate(10deg); } 50% { transform: translate(calc(-50% - 55px), calc(-50% + 60px)) scale(0.90) rotate(-8deg); } 75% { transform: translate(calc(-50% + 40px), calc(-50% + 50px)) scale(1.04) rotate(14deg); } } /* =========================== 6. GLOBAL HEADER =========================== */ .hh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 250, 249, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hh-border-light); transition: transform 0.3s ease; color: var(--hh-text-dark); /* Header always light bg — force dark text regardless of body class */ } .hh-header--hidden { transform: translateY(-100%); } .hh-header__brand { display: flex; align-items: center; gap: 0.75rem; font-family: var(--hh-font-serif); font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; } .hh-header__brand span:last-child { white-space: nowrap; } /* Header logo styling */ .hh-header__logo { height: 60px; width: auto; display: inline-block; margin-right: 0.5rem; } .hh-header__glyph { font-size: 1.3rem; } .hh-header__nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; margin-right: 2rem; } .hh-nav-link { font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--hh-text-muted-dark); padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: color var(--hh-duration-med) var(--hh-ease), border-color var(--hh-duration-med) var(--hh-ease); } .hh-nav-link:hover, .hh-nav-link.active { color: var(--hh-accent); border-bottom-color: var(--hh-accent); } /* Nexus button - RED, normal weight text, smaller icon */ .hh-nav-link--nexus { background: var(--hh-accent); color: var(--hh-text-light); border: none; padding: 0.35rem 1rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; height: 34px; cursor: pointer; } .hh-nav-link--nexus .hh-glyph-nexus { font-size: 0.85em; line-height: 1; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; height: 34px; } .hh-nav-link--nexus:hover { background: var(--hh-accent); color: var(--hh-text-light); } /* Signed-in: muted version of accent, same on all platforms */ .hh-nav-link--nexus.hh-nav-link--nexus-signed-in { opacity: 0.6; } .hh-nav-link--nexus.hh-nav-link--nexus-signed-in:hover { opacity: 0.85; } .hh-header__actions { display: flex; align-items: center; gap: 1.5rem; } /*.hh-toggle-group { border: 1px solid var(--hh-border-light); background: #e8e8e8; padding: 2px; display: inline-flex; gap: 2px; margin-left: auto; width: auto; flex-shrink: 0; align-self: flex-start; /* Don't stretch vertically flex: 0 0 auto; /* Do NOT grow display: inline-flex; /* Not flex }*/ .hh-toggle { font-family: var(--hh-font-sans); color: var(--hh-text-dark); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--hh-fs-xs); padding: 0.25rem 0.75rem; background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; border-radius: 1px; line-height: 1; } .hh-toggle[aria-pressed="true"] { background: #e8e8e8; color: var(--hh-text-light); } .hh-toggle--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; height: 28px; } /* Stream toggle */ .hh-toggle-group--stream { margin-left: auto; background: #e0e0e0; padding: 2px; border: none; } .hh-toggle--stream { color: #999; transition: background-color 0.15s ease, color 0.15s ease; } .hh-toggle--stream:hover { background-color: rgba(0, 0, 0, 0.08); color: #555; } .hh-toggle--stream[aria-pressed="true"] { background-color: var(--hh-surface-light); color: #333; } /* Language toggle */ .hh-toggle-group--lang { background: #d8d6d2; padding: 2px; height: 36px; border: none; } .hh-toggle--lang { color: #888; font-weight: 500; height: 30px; transition: background-color 0.15s ease, color 0.15s ease; } .hh-toggle--lang:hover { background-color: rgba(0, 0, 0, 0.1); color: #555; } .hh-toggle--lang[aria-pressed="true"] { background-color: #bbb8b3; color: #333; } .hh-btn-nexus { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; border: 1px solid var(--hh-accent); background: transparent; color: var(--hh-accent); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; cursor: pointer; transition: background-color var(--hh-duration-med) var(--hh-ease), color var(--hh-duration-med) var(--hh-ease); } .hh-btn-nexus:hover { background-color: var(--hh-accent); color: var(--hh-text-light); } .hh-btn-nexus__text { display: inline; } .hh-glyph-nexus { display: inline-block; font-family: serif; font-size: 1.2rem; line-height: 1; } .hh-menu-toggle { display: none; width: 30px; height: 24px; position: relative; cursor: pointer; background: transparent; border: none; padding: 0; z-index: 101; } .hh-menu-toggle span { display: block; position: absolute; height: 3px; width: 100%; background: var(--hh-accent); border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; } .hh-menu-toggle span:nth-child(1) { top: 0; } .hh-menu-toggle span:nth-child(2) { top: 10px; } .hh-menu-toggle span:nth-child(3) { top: 20px; } .hh-menu-toggle.active span:nth-child(1) { top: 10px; transform: rotate(135deg); } .hh-menu-toggle.active span:nth-child(2) { opacity: 0; left: -60px; } .hh-menu-toggle.active span:nth-child(3) { top: 10px; transform: rotate(-135deg); } /* =========================== 7. HERMETIC CALENDAR BAR =========================== */ .hh-calendar-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: var(--hh-surface-dark); border-top: 1px solid var(--hh-border-dark); padding: 0.5rem var(--hh-gutter); } .hh-calendar-bar__inner { margin: 0 auto; padding: 0.5rem 2rem; padding-left: calc(var(--hh-logo-overhang) + 3rem); display: block; /* NOT flex */ overflow: hidden; /* Clearfix */ min-height: 30px; } .hh-calendar-bar__left { float: left; /* SIMPLE FLOAT */ display: inline-flex; /* Inner items use flex */ align-items: center; gap: 0.75rem; padding-top: 3px; } .hh-calendar-bar__item { align-items: center; display: flex; gap: 0.5rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } .hh-calendar-bar__glyph { font-size: 1rem; color: var(--hh-citrinitas); } .hh-calendar-bar__label { color: var(--hh-text-muted-light); } .hh-toggle__icon { font-size: 0.9em; margin-right: 0.15em; } .hh-calendar-bar__value { color: var(--hh-citrinitas); font-weight: 500; text-decoration: none; transition: color var(--hh-duration-med) var(--hh-ease); } .hh-calendar-bar__value:hover { color: var(--hh-citrinitas-light); } .hh-calendar-bar .hh-toggle-group { float: right; border: none; background: rgba(255, 255, 255, 0.06); padding: 2px; display: flex; gap: 2px; } .hh-calendar-bar .hh-toggle { color: rgba(255, 255, 255, 0.35); } .hh-calendar-bar .hh-toggle--sm { padding: 0.3rem 0.7rem; font-size: 0.75rem; line-height: 1; height: 28px; } .hh-calendar-bar .hh-toggle[aria-pressed="true"] { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); } .hh-calendar-bar .hh-toggle:hover { background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); } /* =========================== 8. ALIGNMENT SYSTEM - LOGO OVERHANG (12 Jan 2026) All content starts beneath "HOUSE HERMETICA" text Logo overhangs to the left =========================== */ :root { --hh-logo-overhang: 40px; /* Logo width + padding */ } /* ALL content sections - fixed left margin */ .hh-section__inner, .hh-section__inner--narrow-right, .hh-container, .hh-calendar-bar__inner, .hh-footer__inner { max-width: calc(1100px + var(--hh-logo-overhang)); margin: 0 auto; padding: 0 2rem; padding-left: calc(var(--hh-logo-overhang) + 5rem); /* Fixed offset */ } /* Header ONLY - no left offset (logo overhangs) */ .hh-header__inner { max-width: calc(1100px + var(--hh-logo-overhang)); margin: 0 auto; padding: 1rem 2rem; padding-left: calc(var(--hh-logo-overhang) + 0rem); display: flex; align-items: center; justify-content: space-between; } /* Sections */ .hh-section { position: relative; width: 100%; padding: var(--hh-section-padding) 0; z-index: 1; } .hh-section--dark { background-color: var(--hh-bg-dark); color: var(--hh-text-light); } /* Body text in dark sections: softer than headings */ .hh-section--dark p { color: var(--hh-text-body); } .hh-section--dark .hh-intro-text { color: var(--hh-text-body); } .hh-section--light { background-color: var(--hh-bg-light); color: var(--hh-text-dark); } .hh-section--subtle { background: linear-gradient( to bottom, rgba(139, 27, 27, 0.09), /* Subtle accent tint top */ rgba(186, 152, 89, 0.12) /* Gold tint bottom */ ); border-top: 1px solid rgba(139, 27, 27, 0.08); border-bottom: 1px solid rgba(201, 169, 97, 0.08); } .hh-section--carousel { padding: 4rem 0; } .hh-section--light .hh-label { color: var(--hh-accent); } .hh-section--dark .hh-label { color: var(--hh-citrinitas); } .hh-section--accent { background-color: var(--hh-accent); color: var(--hh-text-light); } .hh-section--accent-bg { background-color: var(--hh-accent-bg); color: var(--hh-text-light); background-repeat: no-repeat; overflow: hidden; } .hh-section__title-left { margin-left: 0; margin-right: auto; margin-bottom: 3rem; max-width: 480px; /* FIXED width for left column */ } .hh-section__content-indent { margin-left: 530px; /* FIXED offset for right column */ margin-right: 0; max-width: calc(100% - 530px); } /* Section closer - prominent end statement */ .hh-section--closer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-style: italic; opacity: 0.9; } .hh-section--light .hh-section--closer { border-top-color: rgba(0, 0, 0, 0.1); } .hh-hero-section { display: flex; align-items: flex-start; padding-top: 9rem; padding-bottom: 2.5rem; } /* =========================== 9. GRID SYSTEMS =========================== */ .hh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; } .hh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .hh-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 3rem; } .hh-grid-2--align-start { align-items: start; } /* Asymmetric grid for MQ section and similar layouts */ .hh-grid-2-asymmetric { display: grid; grid-template-columns: 2fr 3fr; gap: 4rem; align-items: start; } .hh-grid-2-asymmetric--right { display: grid; grid-template-columns: 3fr 2fr; gap: 4rem; align-items: start; } /* First heading in any grid column should align with adjacent columns */ .hh-grid-2-asymmetric > *:first-child > h1:first-child, .hh-grid-2-asymmetric > *:first-child > h2:first-child, .hh-grid-2-asymmetric > *:first-child > h3:first-child, .hh-grid-2-asymmetric > * > h1:first-child, .hh-grid-2-asymmetric > * > h2:first-child, .hh-grid-2-asymmetric > * > h3:first-child, .hh-grid-2-asymmetric--right > * > h1:first-child, .hh-grid-2-asymmetric--right > * > h2:first-child, .hh-grid-2-asymmetric--right > * > h3:first-child, .hh-grid-2 > * > h1:first-child, .hh-grid-2 > * > h2:first-child, .hh-grid-2 > * > h3:first-child, .hh-grid-3 > * > h1:first-child, .hh-grid-3 > * > h2:first-child, .hh-grid-3 > * > h3:first-child { margin-top: 0; } @media (max-width: 968px) { .hh-grid-2-asymmetric { grid-template-columns: 1fr; gap: 1rem; } .hh-grid-2-asymmetric--right { grid-template-columns: 1fr; gap: 1rem; } } /* =========================== 10. FEATURE CARDS =========================== */ .hh-feature { padding: 2.5rem 2rem; border: 1px solid var(--hh-border-light); background: var(--hh-surface-light); transition: border-color 0.6s ease, /* SLOW glow */ box-shadow 0.6s ease; } .hh-feature h4 { min-height: 2.5em; } .hh-section--dark .hh-feature { border-color: var(--hh-border-dark); background: var(--hh-surface-dark); } .hh-feature:hover { border-color: var(--hh-accent); } .hh-feature__icon { font-size: 2.5rem; margin-bottom: 1.5rem; display: block; } /* NEW: Large icon variant for platform logos */ .hh-feature__icon--large { height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .hh-feature__icon--large img { max-height: 100%; max-width: 100%; object-fit: contain; } /* NEW: Platform name (logo text underneath logo) */ .hh-feature__name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--hh-gold); margin: 0 0 0.5rem 0; display: block; } /* NEW: Subtitle under platform name */ .hh-feature__subtitle { font-size: 0.875rem; font-weight: 600; text-align: center; color: var(--hh-text-muted-dark); margin: 0 0 1rem 0; letter-spacing: 0.05em; display: block; } .hh-section--dark .hh-feature__subtitle { color: var(--hh-text-muted-light); } .hh-feature__title { font-size: var(--hh-fs-h4); margin-bottom: 1rem; color: var(--hh-text-dark); } .hh-section--dark .hh-feature__title { color: var(--hh-citrinitas-light); } .hh-feature__desc { font-size: var(--hh-fs-sm); line-height: 1.7; color: var(--hh-text-muted-dark); } .hh-section--dark .hh-feature__desc { color: var(--hh-text-muted-light); } .hh-feature__link { font-size: var(--hh-fs-sm); color: var(--hh-accent); margin-top: 1rem; display: inline-block; text-decoration: none; transition: color var(--hh-duration-med) var(--hh-ease); } .hh-feature__link:hover { color: var(--hh-accent); } .hh-section--dark .hh-feature__link { color: var(--hh-citrinitas); } .hh-section--dark .hh-feature__link:hover { color: var(--hh-citrinitas-light); } .hh-feature__icon--fire { color: var(--hh-accent); } .hh-feature__icon--water { color: var(--hh-accent-scientific); } .hh-feature__icon--air { color: var(--hh-citrinitas); } /* =========================== 11. FORMULA DISPLAYS =========================== */ /* Simple centered formula (existing) */ .hh-formula-display { font-family: 'Crimson Pro', serif; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hh-citrinitas); text-align: center; line-height: 1.3; margin: 2rem auto; max-width: 600px; } .hh-formula-term { font-style: italic; font-weight: 600; } /* NEW: Artistic formula display (for MQ section) */ .hh-formula-art { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem 1rem; margin: 2rem 0; font-family: var(--hh-font-serif); } .hh-formula-mq { font-size: 4rem; font-weight: 500; color: var(--hh-text-main); letter-spacing: 0.05em; } .hh-formula-mq--small { font-size: 1.5rem; } .hh-section--dark .hh-formula-mq { color: var(--hh-text-dark); } .hh-formula-equals { font-size: 3rem; color: var(--hh-text-muted-dark); margin: 0 0.5rem; } .hh-section--dark .hh-formula-equals { color: var(--hh-text-muted-light); } .hh-formula-root { font-size: 4.5rem; color: var(--hh-text-muted-dark); font-weight: 300; line-height: 1; } .hh-formula-product { display: flex; align-items: center; gap: 0.75rem; } .hh-formula-term--large { font-size: 3.5rem; color: var(--hh-gold); /* font-style: italic; */ font-weight: 600; } .hh-formula-term--i1 { color: var(--hh-fire); /* Red for Initiation */ } .hh-formula-term--i2 { color: var(--hh-water); /* Blue for Investigation */ } .hh-formula-term--i3 { color: var(--hh-air); /* Green for Integration */ } .hh-formula-multiply { font-size: 2.5rem; color: var(--hh-text-muted-dark); font-weight: 300; } .hh-section--dark .hh-formula-multiply { color: var(--hh-text-muted-light); } /* Geometric mean explanation text - italicise */ .hh-formula-note { font-style: italic; font-size: 0.95rem; color: var(--hh-text-muted-dark); margin-top: 1rem; } .hh-section--dark .hh-formula-note { color: var(--hh-text-muted-light); } /* NEW: Dimensions list (for MQ faculties) */ .hh-dimensions-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .hh-dimension h4 { font-size: 1.125rem; font-weight: 600; color: var(--hh-text-main); margin-bottom: 0.5rem; } .hh-section--dark .hh-dimension h4 { color: var(--hh-text-light); } .hh-dimension p { font-size: 0.95rem; line-height: 1.6; color: var(--hh-text-muted-dark); margin: 0; } .hh-section--dark .hh-dimension p { color: var(--hh-text-muted-light); } /* =========================== 12. EXPLAINER & CONTENT BOXES =========================== */ .hh-explainer { max-width: 900px; margin: 0 auto; } .hh-explainer__diagram { margin: 3rem 0; padding: 3rem; background: var(--hh-surface-light); border: 2px solid var(--hh-border-light); text-align: center; } .hh-section--dark .hh-explainer__diagram { background: var(--hh-surface-dark); border-color: var(--hh-border-dark); } .hh-explainer__formula { font-family: var(--hh-font-mono); font-size: var(--hh-fs-body-lg); color: var(--hh-accent); margin: 2rem 0; padding: 1.5rem; background: rgba(139, 27, 27, 0.05); border-left: 4px solid var(--hh-accent); } .hh-section--dark .hh-explainer__formula { background: rgba(139, 27, 27, 0.15); } /* Subtle info box for technical details */ .hh-info-box { background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--hh-citrinitas); padding: 1.5rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; } .hh-section--light .hh-info-box { background: rgba(0, 0, 0, 0.02); border-left-color: var(--hh-water); } .hh-info-box h4 { margin-top: 0; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; } .hh-info-box p { margin-bottom: 0.75rem; } .hh-info-box p:last-child { margin-bottom: 0; } .hh-info-box--fire, .hh-section--light .hh-info-box--fire { border-left-color: var(--hh-fire); background: var(--hh-fire); color: var(--hh-text-light); } .hh-info-box--fire .hh-decan-header, .hh-info-box--fire h4 { color: var(--hh-text-light); } .hh-info-box--fire p, .hh-info-box--fire strong { color: rgba(255, 255, 255, 0.8); } .hh-info-box--water, .hh-section--light .hh-info-box--water { border-left-color: var(--hh-water); background: var(--hh-water); color: var(--hh-text-light); } .hh-info-box--water .hh-decan-header, .hh-info-box--water h4 { color: var(--hh-text-light); } .hh-info-box--water p, .hh-info-box--water strong { color: rgba(255, 255, 255, 0.8); } .hh-decan-header { font-size: 1.5rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin-bottom: 1rem; letter-spacing: 0.02em; } .hh-decan-header__sub { font-size: 0.875rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); margin-left: 0.25rem; } /* Base emphasis - grey */ .hh-feature-card--emphasis { border: 0px solid #808080; box-shadow: 0 4px 20px rgba(128, 128, 128, 0.15); background-color: rgba(128, 128, 128, 0.3); padding: 2rem 1.5rem; } /* Fire variant - Initiation */ .hh-feature-card--emphasis.hh-feature-card--fire { border-color: #b35632; box-shadow: 0 4px 20px rgba(179, 86, 50, 0.15); background-color: rgba(179, 86, 50, 0.3); } /* Water variant - Investigation */ .hh-feature-card--emphasis.hh-feature-card--water { border-color: #315a7a; box-shadow: 0 4px 20px rgba(49, 90, 122, 0.15); background-color: rgba(49, 90, 122, 0.3); } /* Citrinitas variant - Integration */ .hh-feature-card--emphasis.hh-feature-card--citrinitas { border-color: #c9a961; box-shadow: 0 4px 20px rgba(201, 169, 97, 0.15); background-color: rgba(201, 169, 97, 0.3); } .hh-badge { display: inline-block; font-size: var(--hh-fs-sm); /* MATCH BUTTON */ text-transform: uppercase; letter-spacing: 0.12em; padding: 0.75rem 1.25rem; /* MATCH .hh-btn--sm */ background: var(--hh-citrinitas); color: var(--hh-bg-dark); font-weight: 600; margin-top: 0.5rem; line-height: 1; } /* NEW: Entity explainer (for dual-entity structure) */ .hh-entity-explainer h3 { text-align: left; margin-bottom: 2rem; color: var(--hh-text-main); } .hh-section--dark .hh-entity-explainer h3 { color: var(--hh-text-light); } .hh-entity-explainer h4 { text-align: left; font-size: 1.125rem; color: var(--hh-gold); margin-bottom: 0.75rem; } .hh-entity-explainer p { text-align: left; font-size: 0.95rem; line-height: 1.7; color: var(--hh-text-muted-dark); } .hh-section--dark .hh-entity-explainer p { color: var(--hh-text-muted-light); } /* =========================== 13. CODE-STYLE CONTENT BOXES =========================== */ .hh-code-box { position: relative; margin-top: 3rem; padding: 2.5rem 2rem 2rem; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--hh-font-mono); font-size: var(--hh-fs-sm); line-height: 1.8; } .hh-code-box pre { margin: 0; color: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: inherit; line-height: inherit; } .hh-code-box__label { position: absolute; top: -0.6rem; left: 1.5rem; background: #333; color: rgba(255, 255, 255, 0.6); padding: 0.25rem 1rem; font-size: var(--hh-fs-xs); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.12); } .hh-code-cursor { display: inline-block; width: 0.5em; height: 1.2em; background: var(--hh-citrinitas); margin-left: 0.2em; vertical-align: text-bottom; animation: hhCodeBlink 1s step-end infinite; } @keyframes hhCodeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .hh-callout { margin: 1.5rem 0; padding: 1rem; background: rgba(201, 169, 97, 0.1); border-left: 3px solid var(--hh-citrinitas); font-style: italic; } .hh-callout-box { margin-top: 3rem; padding: 1.25rem; border-left: 3px solid var(--hh-border-light); background: rgba(0, 0, 0, 0.03); } .hh-section--dark .hh-callout-box { border-color: var(--hh-border-dark); background: rgba(255, 255, 255, 0.03); } .hh-callout-box__text { font-size: var(--hh-fs-body-lg); font-style: italic; margin: 0; line-height: 1.7; } .hh-principle-box { padding: 2rem; border: 1px solid var(--hh-border-light); background: var(--hh-surface-light); margin-bottom: 3rem; } .hh-section--dark .hh-principle-box { border-color: var(--hh-border-dark); background: var(--hh-surface-dark); } .hh-principle-box h3 { font-size: var(--hh-fs-h3); margin-bottom: 1rem; font-style: italic; } .hh-principle-box p { margin: 0; line-height: 1.7; } .hh-callout-box--large { padding: 3rem; border: 2px solid var(--hh-citrinitas); background: rgba(201, 169, 97, 0.05); margin-bottom: 3rem; } .hh-callout-box__text--large { font-size: var(--hh-fs-h2); line-height: 1.4; } .hh-principle-box--centered { text-align: center; max-width: 800px; margin: 3rem auto; padding: 3rem; background: rgba(201, 169, 97, 0.05); border: 2px solid var(--hh-citrinitas); } .hh-principle-box__motto { font-size: var(--hh-fs-h3); font-style: italic; color: var(--hh-citrinitas); margin: 1.5rem 0; font-family: var(--hh-font-serif); } .hh-principle-box--centered p { text-align: center; font-size: var(--hh-fs-body-lg); } .hh-research-box { margin-top: 3rem; padding: 2.5rem; background: var(--hh-surface-light); border: 1px solid var(--hh-border-light); } .hh-section--dark .hh-research-box { background: var(--hh-surface-dark); border-color: var(--hh-border-dark); } .hh-research-box h3 { margin-bottom: 1.5rem; } .hh-research-box__list { line-height: 1.8; margin-left: 1.5rem; } .hh-research-box__footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hh-border-light); } .hh-section--dark .hh-research-box__footer { border-top-color: var(--hh-border-dark); } .hh-stream-box { padding: 1.5rem; margin-bottom: 1.5rem; color: var(--hh-text-light); } .hh-stream-box h4 { color: var(--hh-text-light); margin-bottom: 0.5rem; font-size: var(--hh-fs-base); letter-spacing: 0.04em; text-transform: uppercase; } .hh-stream-box--scientific { background: var(--hh-fire); } .hh-stream-box--sacred { background: var(--hh-water); } .hh-stream-box p { font-size: var(--hh-fs-sm); margin: 0; color: rgba(255, 255, 255, 0.9); } /* =========================== STREAM TOGGLE (Larger version than stream-bar for content areas) =========================== */ .hh-stream-toggle { display: inline-flex; gap: 0.25rem; border: 2px solid var(--hh-border-light); background: var(--hh-surface-light); padding: 4px; margin: 2rem 0; } .hh-section--dark .hh-stream-toggle { border-color: var(--hh-border-dark); background: var(--hh-surface-dark); } .hh-stream-toggle__btn { padding: 0.75rem 1.5rem; /* Larger than stream-bar */ border: none; background: transparent; color: var(--hh-text-muted-dark); font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; cursor: pointer; transition: all var(--hh-duration-fast) var(--hh-ease); } .hh-section--dark .hh-stream-toggle__btn { color: var(--hh-text-muted-light); } .hh-stream-toggle__btn.active { background-color: var(--hh-accent); color: var(--hh-text-light); } .hh-stream-toggle__btn:hover:not(.active) { background-color: rgba(0, 0, 0, 0.06); color: var(--hh-text-dark); } /* =========================== 14. FORM SYSTEM =========================== */ /* Form Groups & Layout */ .form-group { margin-bottom: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; gap: 1.5rem; } } /* Labels */ .form-label { font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-text-dark); display: block; margin-bottom: 0.5rem; } .hh-section--dark .form-label { color: var(--hh-text-light); } .form-label.required::after { content: " *"; color: var(--hh-accent); } /* Text Inputs & Selects */ .form-input, .form-select { width: 100%; padding: 0.875rem 1rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-body); color: var(--hh-text-dark); background: var(--hh-surface-light); border: 1px solid var(--hh-border-light); transition: border-color var(--hh-duration-med) var(--hh-ease); } .hh-section--dark .form-input, .hh-section--dark .form-select { color: var(--hh-text-light); background: var(--hh-surface-dark); border-color: var(--hh-border-dark); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--hh-accent); } .form-input::placeholder { color: var(--hh-text-muted-dark); opacity: 0.6; } .hh-section--dark .form-input::placeholder { color: var(--hh-text-muted-light); } /* Select Dropdown Arrow */ .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230d0d0d' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.5rem; cursor: pointer; } .hh-section--dark .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f5f5f4' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); } /* Form Hints */ .form-hint { font-size: var(--hh-fs-xs); color: var(--hh-text-muted-dark); margin-top: 0.375rem; display: block; line-height: 1.4; } .hh-section--dark .form-hint { color: var(--hh-text-muted-light); } /* Radio Buttons */ .radio-group { display: flex; flex-direction: column; gap: 0.75rem; } .radio-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--hh-border-light); background: var(--hh-surface-light); cursor: pointer; transition: all var(--hh-duration-med) var(--hh-ease); } .hh-section--dark .radio-option { border-color: var(--hh-border-dark); background: var(--hh-surface-dark); } .radio-option:hover { border-color: var(--hh-accent); } .radio-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--hh-accent); cursor: pointer; } .radio-option label { font-size: var(--hh-fs-body); color: var(--hh-text-dark); cursor: pointer; flex: 1; margin: 0; } .hh-section--dark .radio-option label { color: var(--hh-text-light); } /* Special category radio option (for AI systems) */ .radio-option.special-category { border-color: var(--hh-citrinitas); background: rgba(201, 169, 97, 0.05); } .hh-section--dark .radio-option.special-category { background: rgba(201, 169, 97, 0.08); } /* Checkboxes */ .checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; padding: 0.5rem 0; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 0.125rem; accent-color: var(--hh-accent); cursor: pointer; flex-shrink: 0; } .checkbox-label span { font-size: var(--hh-fs-sm); color: var(--hh-text-dark); line-height: 1.5; } .hh-section--dark .checkbox-label span { color: var(--hh-text-light); } /* Validation States */ .form-input.error, .form-select.error { border-color: #dc2626; } .form-input.success, .form-select.success { border-color: #22c55e; } .form-error-message { font-size: var(--hh-fs-xs); color: #dc2626; margin-top: 0.375rem; display: block; } .form-success-message { font-size: var(--hh-fs-xs); color: #22c55e; margin-top: 0.375rem; display: block; } /* Alert Boxes (for form-level messages) */ .alert-box { padding: 1rem 1.25rem; border-radius: 2px; margin-bottom: 1.5rem; font-size: var(--hh-fs-sm); line-height: 1.5; } .alert-box--error { background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.3); color: #dc2626; } .alert-box--success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; } .alert-box--hidden { display: none; } /* OAuth / External Login Buttons */ .btn-oauth { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1.5rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0.02em; border: 1px solid var(--hh-border-light); background: var(--hh-surface-light); color: var(--hh-text-dark); cursor: pointer; transition: all var(--hh-duration-med) var(--hh-ease); } .hh-section--dark .btn-oauth { border-color: var(--hh-border-dark); background: var(--hh-surface-dark); color: var(--hh-text-light); } .btn-oauth:hover:not(:disabled) { border-color: var(--hh-accent); background: rgba(139, 27, 27, 0.05); } .btn-oauth:disabled { opacity: 0.5; cursor: not-allowed; } .btn-oauth svg { flex-shrink: 0; } /* Dividers */ .form-divider { display: flex; align-items: center; text-align: center; margin: 2rem 0; color: var(--hh-text-muted-dark); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; } .hh-section--dark .form-divider { color: var(--hh-text-muted-light); } .form-divider::before, .form-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--hh-border-light); } .hh-section--dark .form-divider::before, .hh-section--dark .form-divider::after { border-bottom-color: var(--hh-border-dark); } .form-divider span { padding: 0 1rem; } /* Form Section Headers */ .form-section-header { font-family: var(--hh-font-serif); font-size: var(--hh-fs-h4); font-weight: 500; color: var(--hh-text-dark); margin: 2.5rem 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hh-border-light); } .hh-section--dark .form-section-header { color: var(--hh-text-light); border-bottom-color: var(--hh-border-dark); } .form-section-header:first-child { margin-top: 0; } /* Submit Buttons (use existing hh-btn--primary) */ .hh-btn--full { width: 100%; justify-content: center; } .hh-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; } /* =========================== 15. NEXUS OVERLAY MODAL =========================== */ .hh-nexus-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--hh-ease); } .hh-nexus-overlay.active { opacity: 1; pointer-events: auto; } .hh-nexus-modal { background: var(--hh-surface-light); max-width: 640px; width: 92%; max-height: 90vh; overflow-y: auto; padding: 0; position: relative; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4); } .hh-nexus-modal__header { padding: 0.75rem 1rem 0.75rem 1.25rem; border-bottom: 1px solid var(--hh-border-light); background: #d9d6d1; display: flex; align-items: center; justify-content: space-between; } .hh-nexus-modal__id { font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--hh-accent); } .hh-nexus-modal__close { position: static; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; color: var(--hh-text-muted-dark); font-size: 1.25rem; line-height: 1; transition: color 0.2s ease; } .hh-nexus-modal__close:hover { color: var(--hh-accent); } /* Auth-gate mode: hide close button, prevent overlay dismiss */ .hh-nexus-overlay--required .hh-nexus-modal__close { display: none; } .hh-nexus-modal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; } .hh-nexus-section { padding: 2.5rem 2rem; border-right: 1px solid var(--hh-border-light); } .hh-nexus-section:last-child { border-right: none; } .hh-nexus-section__title { font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: var(--hh-letter-label); font-weight: 600; color: var(--hh-text-muted-dark); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hh-border-light); } .hh-nexus-links { display: flex; flex-direction: column; gap: 0.5rem; } .hh-nexus-link { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid transparent; background: transparent; transition: all var(--hh-duration-med) var(--hh-ease); cursor: pointer; text-decoration: none; } .hh-nexus-link:hover { background: rgba(139, 27, 27, 0.05); border-color: var(--hh-border-light); } .hh-nexus-link--primary { background: var(--hh-accent); border-color: var(--hh-accent); } .hh-nexus-link--primary:hover { background: var(--hh-accent-light); border-color: var(--hh-accent-light); } .hh-nexus-link--primary .hh-nexus-link__name, .hh-nexus-link--primary .hh-nexus-link__desc { color: var(--hh-text-light); } .hh-nexus-link__icon { font-size: 1.5rem; flex-shrink: 0; } .hh-nexus-link__content { display: flex; flex-direction: column; gap: 0.125rem; } .hh-nexus-link__name { font-size: var(--hh-fs-body); font-weight: 600; color: var(--hh-text-dark); } .hh-nexus-link__desc { font-size: var(--hh-fs-xs); color: var(--hh-text-muted-dark); } /* Compact platform list */ .hh-nexus-modal__platforms { padding: 0.75rem 1.5rem 1rem; background: #eae8e4; } /* Platform grid title */ .hh-nexus-pgrid__title { display: block; font-family: var(--hh-font-sans); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hh-text-muted-dark); margin-bottom: 0.375rem; } /* 2x3 platform grid */ .hh-nexus-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .hh-nexus-pgrid__cell { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.375rem; padding: 0.5rem 0.5rem; text-decoration: none; color: inherit; transition: background 0.15s ease; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .hh-nexus-pgrid__logo { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; } .hh-nexus-pgrid__sep { color: var(--hh-text-muted-dark); font-size: 0.75rem; } .hh-nexus-pgrid__cell:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, 0.06); } /* Remove bottom border on last row */ .hh-nexus-pgrid__cell:nth-last-child(-n+2) { border-bottom: none; } .hh-nexus-pgrid__cell:hover { background: rgba(139, 27, 27, 0.04); } .hh-nexus-pgrid__name { font-family: var(--hh-font-sans); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hh-text-dark); } .hh-nexus-pgrid__role { font-family: var(--hh-font-serif); font-size: 0.8125rem; color: var(--hh-text-muted-dark); } /* =========================== USER SECTION IN NEXUS MODAL =========================== */ .hh-nexus-user-section { padding: 1rem 1.5rem; border-bottom: 1px solid var(--hh-border-light); background: #e2dfda; } /* ---- Profile: header + flat 4-column data grid ---- */ .hh-nexus-profile__header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.625rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .hh-nexus-profile__identity { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; } .hh-nexus-profile__name { font-family: var(--hh-font-serif); font-size: 1rem; font-weight: 400; color: var(--hh-text-dark); white-space: nowrap; } .hh-nexus-profile__email { font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); color: var(--hh-text-muted-dark); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Actions: Settings + Sign Out in header row */ .hh-nexus-profile__actions { display: flex; align-items: baseline; gap: 1rem; flex-shrink: 0; } .hh-nexus-profile__actions a, .hh-nexus-profile__actions button { font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-accent); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; transition: opacity 0.2s; white-space: nowrap; } .hh-nexus-profile__actions a:hover, .hh-nexus-profile__actions button:hover { opacity: 0.7; } .hh-nexus-profile__baseline-link.hh-nexus-profile__baseline-link { background: var(--hh-accent); color: #fff; padding: 0.25rem 0.625rem; border-radius: 2px; letter-spacing: 0.06em; } .hh-nexus-profile__baseline-link.hh-nexus-profile__baseline-link:hover { opacity: 0.85; } /* Data grid: row-based layout with variable column counts */ .hh-nexus-profile__grid { display: flex; flex-direction: column; } .hh-nexus-profile__row { display: grid; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .hh-nexus-profile__row:last-child { border-bottom: none; } .hh-nexus-profile__row--2col { grid-template-columns: 1fr 1fr; } .hh-nexus-profile__row--3col { grid-template-columns: 1fr 1fr 1fr; } .hh-nexus-profile__pair { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0.5rem; } .hh-nexus-profile__pair--muted .hh-nexus-profile__key, .hh-nexus-profile__pair--muted .hh-nexus-profile__val { opacity: 0.35; } /* Vertical dividers between pairs */ .hh-nexus-profile__row > .hh-nexus-profile__pair + .hh-nexus-profile__pair { border-left: 1px solid rgba(0, 0, 0, 0.06); padding-left: 0.75rem; } .hh-nexus-profile__key { font-family: var(--hh-font-sans); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hh-text-muted-dark); white-space: nowrap; } .hh-nexus-profile__val { font-family: var(--hh-font-sans); font-size: 0.8125rem; font-weight: 500; color: var(--hh-text-dark); } /* Tradition badge: stream-specific colour backgrounds */ .hh-nexus-profile__val--tradition { background: var(--hh-fire); color: #fff; padding: 0.125rem 0.5rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; } .hh-nexus-profile__val--tradition-sacred { background: var(--hh-water); } /* Tier colours */ .hh-nexus-profile__val--lead { color: var(--hh-metal-lead-flat, #5a5a5a); } .hh-nexus-profile__val--tin { color: var(--hh-metal-tin-flat, #7a8a8a); } .hh-nexus-profile__val--iron { color: var(--hh-metal-iron-flat, #8a6a4a); } .hh-nexus-profile__val--copper { color: var(--hh-metal-copper-flat, #b87333); } .hh-nexus-profile__val--mercury { color: var(--hh-metal-mercury-flat, #8a9aaa); } .hh-nexus-profile__val--silver { color: var(--hh-metal-silver-flat, #a0a0a0); } .hh-nexus-profile__val--gold { color: var(--hh-metal-gold-flat, #c5a030); font-weight: 700; } /* CTA link below grid */ /* ---- Mobile compact profile ---- */ .hh-nexus-profile--compact .hh-nexus-profile__compact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .hh-nexus-profile--compact .hh-nexus-profile__name { font-family: var(--hh-font-serif); font-size: 1rem; font-weight: 400; color: var(--hh-text-dark); } .hh-nexus-profile__mq-compact { font-family: var(--hh-font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--hh-text-dark); letter-spacing: 0.04em; } .hh-nexus-profile__compact-actions { display: flex; gap: 1rem; margin-top: 0.5rem; } .hh-nexus-profile__link { font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-accent); text-decoration: none; transition: opacity 0.2s; } .hh-nexus-profile__link:hover { opacity: 0.7; } .hh-nexus-profile__link--btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-accent); } /* ---- Mobile nav + language selector inside NEXUS modal ---- */ .hh-nexus-mobile-nav { padding: 1.25rem 0 0; margin-top: 1rem; border-top: 1px solid var(--hh-border-light); } .hh-nexus-mobile-nav nav { display: flex; flex-direction: column; gap: 0; } .hh-nexus-nav-link { display: block; padding: 0.625rem 0; font-family: var(--hh-font-sans); font-size: 0.875rem; font-weight: 500; color: var(--hh-text-dark); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: color 0.2s; } .hh-nexus-nav-link:last-child { border-bottom: none; } .hh-nexus-nav-link.active { color: var(--hh-accent); font-weight: 600; } .hh-nexus-nav-link:hover { color: var(--hh-accent); } .hh-nexus-mobile-lang { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0 0; margin-top: 0.5rem; } .hh-nexus-mobile-lang__sep { color: var(--hh-text-muted-dark); font-size: 0.75rem; } /* Metal tier badge colours (border) */ .hh-badge--lead { border-color: var(--hh-metal-lead-flat); } .hh-badge--tin { border-color: var(--hh-metal-tin-flat); } .hh-badge--iron { border-color: var(--hh-metal-iron-flat); } .hh-badge--copper { border-color: var(--hh-metal-copper-flat); } .hh-badge--mercury { border-color: var(--hh-metal-mercury-flat); } .hh-badge--silver { border-color: var(--hh-metal-silver-flat); } .hh-badge--gold { border-color: var(--hh-metal-gold-flat); } /* MQ tier badge: single continuous metallic gradient + 1px keyline */ .hh-badge--mq-tier > * { background: transparent; } .hh-badge--mq-tier.hh-badge--lead { background: var(--hh-metal-lead); color: #bbb; border: 1px solid rgba(255, 255, 255, 0.1); } .hh-badge--mq-tier.hh-badge--tin { background: var(--hh-metal-tin); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); } .hh-badge--mq-tier.hh-badge--iron { background: var(--hh-metal-iron); color: #d4b896; border: 1px solid rgba(255, 255, 255, 0.1); } .hh-badge--mq-tier.hh-badge--copper { background: var(--hh-metal-copper); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); } .hh-badge--mq-tier.hh-badge--mercury { background: var(--hh-metal-mercury); color: #333; border: 1px solid rgba(255, 255, 255, 0.2); } .hh-badge--mq-tier.hh-badge--silver { background: var(--hh-metal-silver); color: #444; border: 1px solid rgba(255, 255, 255, 0.25); } .hh-badge--mq-tier.hh-badge--gold { background: var(--hh-metal-gold); color: #5a4000; border: 1px solid rgba(255, 255, 255, 0.2); } /* Alchemical stage badge colours (shared across baseline, nexus, forensics) */ .hh-badge--nigredo { background: var(--hh-nigredo); color: var(--hh-text-muted-light); } .hh-badge--albedo { background: var(--hh-albedo); color: var(--hh-text-dark); } .hh-badge--citrinitas { background: var(--hh-citrinitas); color: #0a0a0f; } .hh-badge--citrinitas-dark { background: var(--hh-citrinitas-dark); color: var(--hh-text-light); } .hh-badge--rubedo { background: var(--hh-rubedo); color: #ffffff; } /* Element badge colours */ .hh-badge--fire { background: var(--hh-fire); color: #ffffff; } .hh-badge--water { background: var(--hh-water); color: #ffffff; } .hh-badge--air { background: var(--hh-air); color: #ffffff; } .hh-badge--earth { background: var(--hh-earth); color: #ffffff; } /* Muted engagement badges */ .hh-badge--muted { background: rgba(255, 255, 255, 0.06); color: var(--hh-text-muted-light); border: 1px solid rgba(255, 255, 255, 0.1); } /* Subtle accent badges (initiate, early adopter) */ .hh-badge--accent-subtle { background: rgba(139, 27, 27, 0.15); color: var(--hh-text-muted-light); border: 1px solid rgba(139, 27, 27, 0.3); } /* Stream tint badges (legacy, retained) */ .hh-badge--scientific { background: rgba(60, 74, 89, 0.5); color: var(--hh-text-light); } .hh-badge--sacred { background: rgba(49, 90, 122, 0.5); color: var(--hh-text-light); } /* Stream colour indicators (reusable) */ .stream-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-left: 0.3rem; } .stream-indicator.stream-scientific { background: var(--hh-fire); } .stream-indicator.stream-sacred { background: var(--hh-water); } /* Guest user info */ .hh-nexus-guest-info { text-align: center; } /* NEXUS Auth Forms (login/register tabs) */ .hh-nexus-auth { display: flex; flex-direction: column; gap: 1rem; } .hh-nexus-auth__tabs { display: flex; border-bottom: 2px solid var(--hh-border-light); } .hh-nexus-auth__tab { flex: 1; padding: 0.75rem 1rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-text-muted-dark); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .hh-nexus-auth__tab:hover { color: var(--hh-text-dark); } .hh-nexus-auth__tab.active { color: var(--hh-accent); border-bottom-color: var(--hh-accent); } .hh-nexus-auth__msg { padding: 0.75rem 1rem; font-size: var(--hh-fs-sm); border-radius: 4px; text-align: center; } .hh-nexus-auth__msg--error { background: rgba(139, 27, 27, 0.1); color: var(--hh-rubedo-light); border: 1px solid rgba(139, 27, 27, 0.25); } .hh-nexus-auth__msg--success { background: rgba(42, 138, 100, 0.1); color: var(--hh-sig-high); border: 1px solid rgba(42, 138, 100, 0.25); } .hh-nexus-auth__form .form-group { margin-bottom: 1rem; } /* Force light-theme inputs inside nexus modal regardless of page context */ .hh-nexus-modal .form-input, .hh-nexus-modal .form-select { color: var(--hh-text-dark); background: var(--hh-surface-light); border-color: var(--hh-border-light); } .hh-nexus-modal .form-input::placeholder { color: var(--hh-text-muted-dark); } .radio-group--inline { flex-direction: row; } /* Mobile adjustments */ @media (max-width: 640px) { .hh-nexus-user-section { padding: 1.25rem; } .radio-group--inline { flex-direction: column; } } /* ============================================ MODAL SYSTEM (for help/info modals) ============================================ */ .hh-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; align-items: center; justify-content: center; } .hh-modal.show { display: flex; } .hh-modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); } .hh-modal__container { position: relative; background: var(--hh-surface-light); border: 0px solid var(--hh-border-light); border-radius: 0px; max-width: 1100px; max-height: 90vh; width: 90%; overflow-y: auto; z-index: 10001; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .hh-modal__close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; font-size: 2rem; color: var(--hh-text-muted); cursor: pointer; line-height: 1; padding: 0.5rem; z-index: 10002; transition: color var(--hh-duration-fast) var(--hh-ease); } .hh-modal__close:hover { color: var(--hh-accent); } .hh-modal__header { padding: 2rem 3rem 1rem; border-bottom: 1px solid var(--hh-border-light); } .hh-modal__header h2 { font-family: var(--hh-font-serif); font-size: 2rem; margin: 0; color: var(--hh-text-dark); } .hh-modal__body { padding: 2rem 3rem; } .hh-modal__body--two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .hh-modal__column h3 { font-family: var(--hh-font-serif); font-size: 1.5rem; margin: 0 0 1rem 0; color: var(--hh-text-dark); } .hh-modal__column h4 { font-family: var(--hh-font-sans); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.5rem 0 0.75rem 0; color: var(--hh-accent); } .hh-modal__column p { margin: 0 0 1rem 0; line-height: 1.6; } .hh-modal__footer { padding: 1.5rem 3rem 2rem; border-top: 1px solid var(--hh-border-light); display: flex; justify-content: flex-start; align-items: center; } .hh-checkbox-label { display: flex; align-items: center; gap: 0.75rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); color: var(--hh-text-muted); cursor: pointer; user-select: none; } .hh-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .hh-list { list-style: none; padding: 0; margin: 0 0 1rem 0; } .hh-list li { padding: 0.25rem 0 0.25rem 1.5rem; position: relative; line-height: 1.6; } .hh-list li::before { content: "•"; position: absolute; left: 0; color: var(--hh-accent); font-weight: bold; } .hh-list ul { list-style: none; padding-left: 1.5rem; margin-top: 0.5rem; } /* Responsive */ @media (max-width: 480px) { .hh-modal__body--two-column { grid-template-columns: 1fr; gap: 2rem; } .hh-modal__header, .hh-modal__body, .hh-modal__footer { padding-left: 1.5rem; padding-right: 1.5rem; } } /* =========================== 16. FOOTER STYLES =========================== */ .hh-footer { background: var(--hh-surface-dark); color: var(--hh-text-light); padding: 3rem 0 4rem; margin-top: auto; } .hh-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; } .hh-footer__col h5 { font-family: var(--hh-font-sans); font-size: var(--hh-fs-h4); text-transform: uppercase; letter-spacing: var(--hh-letter-label); font-weight: 600; color: var(--hh-citrinitas); margin-bottom: 1rem; } .hh-footer__desc { font-size: var(--hh-fs-sm); line-height: 1.6; color: var(--hh-text-muted-light); margin-bottom: 1rem; } .hh-footer__links { display: flex; flex-direction: column; gap: 0.5rem; } .hh-footer__link { font-size: var(--hh-fs-sm); color: var(--hh-text-muted-light); text-decoration: none; transition: color var(--hh-duration-med) var(--hh-ease); display: inline-block; } .hh-footer__link:hover { color: var(--hh-citrinitas); } .hh-footer__link--soon { opacity: 0.4; pointer-events: none; cursor: default; } .hh-footer__status { display: flex; align-items: center; gap: 0.5rem; font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); text-transform: uppercase; letter-spacing: 0.1em; } .hh-footer__status-glyph { font-size: 1rem; } .hh-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--hh-border-dark); font-size: var(--hh-fs-xs); color: var(--hh-text-muted-light); text-transform: uppercase; letter-spacing: 0.1em; } .hh-footer__bottom a { font-size: inherit; } .hh-footer__bottom-sep { margin: 0 0.5rem; opacity: 0.4; } /* =========================== 17a. ACCORDION =========================== */ .hh-accordion { margin-top: 1.5rem; } .hh-accordion__item { border-bottom: 1px solid var(--hh-border-light); margin-bottom: 0.25rem; } .hh-section--dark .hh-accordion__item { border-bottom-color: var(--hh-border-dark); } .hh-accordion__item:last-child { border-bottom: none; } .hh-accordion__trigger { width: 100%; padding: 1rem 1.5rem; background-color: rgba(139, 27, 27, 0.05); border: none; text-align: left; font-family: var(--hh-font-sans); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background-color var(--hh-duration-med) var(--hh-ease); color: inherit; font-size: inherit; line-height: inherit; } .hh-section--dark .hh-accordion__trigger { background-color: rgba(255, 255, 255, 0.05); } .hh-accordion__trigger:hover { background-color: rgba(139, 27, 27, 0.1); } .hh-section--dark .hh-accordion__trigger:hover { background-color: rgba(255, 255, 255, 0.1); } .hh-accordion__icon { font-size: 1rem; transition: transform var(--hh-duration-med) var(--hh-ease); } .hh-accordion__trigger[aria-expanded="true"] .hh-accordion__icon { transform: rotate(180deg); } .hh-accordion__content { max-height: 0; overflow: hidden; transition: max-height var(--hh-duration-slow) var(--hh-ease); } .hh-accordion__content[aria-hidden="false"] { max-height: 1000px; } .hh-accordion__body { padding: 1.5rem; font-size: var(--hh-fs-body); line-height: 1.7; } .hh-accordion__body h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; } .hh-accordion__body ul { margin: 0.75rem 0 0 1.5rem; line-height: 1.8; } .hh-accordion__body ul li:last-child { padding-bottom: 0.75rem; } .hh-accordion__body p + h4 { margin-top: 1.5rem; } .hh-accordion__body p + p { margin-top: 1rem; } /* =========================== 17b. SELECT DROPDOWN SYSTEM =========================== */ .hh-select { padding: 0.5rem 2rem 0.5rem 1rem; border: 1px solid var(--hh-border-light); background-color: var(--hh-surface-light); background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230d0d0d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; font-family: var(--hh-font-sans); font-size: var(--hh-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: all var(--hh-duration-fast) var(--hh-ease); } .hh-section--dark .hh-select { border-color: var(--hh-border-dark); background-color: var(--hh-surface-dark); color: var(--hh-text-light); background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23f5f5f4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .hh-select:hover { border-color: var(--hh-accent); } .hh-select:focus { outline: 2px solid var(--hh-accent); outline-offset: 2px; } .hh-select option { background-color: var(--hh-surface-light); color: var(--hh-text-dark); padding: 0.5rem; } .hh-section--dark .hh-select option { background-color: var(--hh-surface-dark); color: var(--hh-text-light); } /* =========================== 17c. TAB SYSTEM Universal tabbed interface for baseline, Portica, etc. =========================== */ .hh-tabs { width: 100%; margin: 0; } .hh-tab-triggers { display: flex; gap: 0; border-bottom: 2px solid var(--hh-border-light); background: transparent; } .hh-section--dark .hh-tab-triggers { border-bottom-color: var(--hh-border-dark); } .hh-tab-trigger { flex: 1; padding: 1rem 2rem; background: transparent; border: none; font-family: var(--hh-font-sans); font-size: var(--hh-fs-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hh-text-muted-dark); cursor: pointer; position: relative; transition: color var(--hh-duration-med) var(--hh-ease); } .hh-section--dark .hh-tab-trigger { color: var(--hh-text-muted-light); } .hh-tab-trigger:hover:not(.active) { color: var(--hh-text-dark); } .hh-section--dark .hh-tab-trigger:hover:not(.active) { color: var(--hh-text-light); } .hh-tab-trigger.active { color: var(--hh-accent); } .hh-section--dark .hh-tab-trigger.active { color: var(--hh-citrinitas); } /* Tab underline removed (Session 65) */ .hh-tab-trigger:disabled { opacity: 0.4; cursor: not-allowed; } .hh-tab-content { display: none; opacity: 0; transition: opacity var(--hh-duration-med) var(--hh-ease); } .hh-tab-content.active { display: block; opacity: 1; } /* Sticky View Control Bar */ .hh-view-control-bar { position: relative; /* Not sticky */ z-index: 90; background: var(--hh-bg-dark); border-bottom: 1px solid var(--hh-border-dark); padding: 1rem 0; margin-bottom: 2rem; } .hh-view-control-bar__inner { max-width: calc(1100px + var(--hh-logo-overhang)); margin: 0 auto; padding: 0 2rem; padding-left: calc(var(--hh-logo-overhang) + 5rem); display: flex; align-items: center; justify-content: space-between; } .hh-view-control-bar .hh-tab-triggers { border: none; margin: 0; gap: 1rem; } .hh-view-control-bar .hh-tab-trigger { flex: 0 0 auto; padding: 0.5rem 1.5rem; border: 1px solid var(--hh-border-dark); background: var(--hh-surface-dark); } .hh-view-control-bar .hh-tab-trigger.active { background: var(--hh-accent); border-color: var(--hh-accent); color: var(--hh-text-light); } .hh-view-control-bar .hh-tab-trigger.active::after { display: none; } .hh-view-control-bar__context { font-size: var(--hh-fs-sm); color: var(--hh-text-muted-light); text-transform: uppercase; letter-spacing: 0.08em; } /* Achievement Badges */ .hh-achievement-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--hh-citrinitas); color: var(--hh-bg-dark); font-family: var(--hh-font-sans); font-size: var(--hh-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; box-shadow: 0 2px 8px rgba(201, 169, 97, 0.4); margin: 0.5rem; } .hh-achievement-badge__icon { font-size: 1.2em; } .hh-achievement-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } /* Responsive */ @media (max-width: 480px) { .hh-view-control-bar__inner { flex-direction: column; gap: 1rem; align-items: flex-start; } .hh-view-control-bar .hh-tab-triggers { width: 100%; } .hh-view-control-bar .hh-tab-trigger { flex: 1; } } /* =========================== 18. WIDGETS & UTILITIES =========================== */ /* Text colors - Elements */ .hh-color-fire { color: var(--hh-fire); } .hh-color-water { color: var(--hh-water); } .hh-color-air { color: var(--hh-air); } .hh-color-earth { color: var(--hh-earth); } /* Text colors - Metals */ .hh-color-lead { color: var(--hh-metal-lead-flat); } .hh-color-tin { color: var(--hh-metal-tin-flat); } .hh-color-iron { color: var(--hh-metal-iron-flat); } .hh-color-copper { color: var(--hh-metal-copper-flat); } .hh-color-mercury { color: var(--hh-metal-mercury-flat); } .hh-color-silver { color: var(--hh-metal-silver-flat); } .hh-color-gold { color: var(--hh-metal-gold-flat); } /* Text colors - Core */ .hh-color-citrinitas { color: var(--hh-citrinitas); } .hh-color-nigredo { color: var(--hh-nigredo); } .hh-color-albedo { color: var(--hh-albedo); } .hh-color-rubedo { color: var(--hh-rubedo); } /* Background colors - Elements */ .hh-bg-fire { background-color: var(--hh-fire); } .hh-bg-water { background-color: var(--hh-water); } .hh-bg-air { background-color: var(--hh-air); } .hh-bg-earth { background-color: var(--hh-earth); } /* Border colors - Elements */ .hh-border-fire { border-color: var(--hh-fire); } .hh-border-water { border-color: var(--hh-water); } .hh-border-air { border-color: var(--hh-air); } .hh-border-earth { border-color: var(--hh-earth); } .hh-status-widget { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border: 1px solid var(--hh-border-light); background: var(--hh-surface-light); } .hh-status-widget__dot { width: 10px; height: 10px; background-color: #10b981; border-radius: 50%; animation: hhStatusPulse 2s ease-in-out infinite; } @keyframes hhStatusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.9); } } .hh-glyph-air::before { content: "🜁"; } .hh-glyph-fire::before { content: "🜂"; } .hh-glyph-water::before { content: "🜄"; } .hh-glyph-earth::before { content: "🜃"; } .hh-glyph-crucible::before { content: "🩹"; } .hh-glyph-alembic::before { content: "🪔"; } .hh-glyph-retort::before { content: "🫖"; } .hh-glyph-gold::before { content: "🜚"; } .hh-glyph-silver::before { content: "🜛"; } .hh-glyph-mercury::before { content: "☿"; } .hh-glyph-sulfur::before { content: "🜍"; } .hh-glyph-salt::before { content: "🜔"; } .hh-text-muted { font-size: var(--hh-fs-sm); color: var(--hh-text-muted-dark); } .hh-section--dark .hh-text-muted { color: var(--hh-text-muted-light); } .hh-list { margin: 1rem 0; line-height: 1.8; margin-left: 1.5rem; } .hh-text-center { text-align: center; } .hh-mb-2 { margin-bottom: 2rem; } .hh-mb-4 { margin-bottom: 4rem; } /* =========================== 19. RESPONSIVE BREAKPOINTS =========================== */ /* Large screens get more breathing room .hh-section__inner, .hh-container { padding: 0 3rem; } }*/ @media (min-width: 481px) and (max-width: 1024px) { :root { --hh-logo-overhang: 0px; --hh-section-padding: clamp(3rem, 8vh, 6rem); } .hh-section__inner, .hh-section__inner--narrow-right, .hh-container, .hh-calendar-bar__inner, .hh-footer__inner { padding: 0 2rem; max-width: 100%; } .hh-header__inner { padding: 1rem 2rem; max-width: 100%; } .hh-header__nav { display: flex !important; gap: 1.5rem; } .hh-nav-link { font-size: 0.75rem; padding: 0.4rem 0; } /* Badges: compact for tablet so hero row fits one line */ .hh-badge { font-size: 0.75rem; padding: 0.5rem 0.9rem; } .hh-nav-link--nexus { padding: 0.35rem 1rem; } .hh-header__actions { gap: 1rem; } .hh-btn-nexus { padding: 0.4rem 1rem; font-size: 0.75rem; } .hh-section__content-indent { margin-left: 0; max-width: 100%; } .hh-header__brand { font-size: 0.95rem; margin-left: -5px; } .hh-header__brand span:last-child { display: none; } .hh-calendar-bar { padding: 0.3rem 0; } .hh-calendar-bar__inner { padding: 0 2rem; font-size: 0.7rem; gap: 2rem; } .hh-calendar-bar__left { gap: 0.75rem; } .hh-calendar-bar__item { font-size: 0.7rem; gap: 0.35rem; } .hh-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .hh-footer__col:first-child { grid-column: 1 / -1; } .hh-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .hh-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* hh-grid-2: stays 2-col on tablet (collapses to 1-col at phone 480px only) */ /* NEXUS modal: keep full-width profile grid but tighten padding */ .hh-nexus-modal { width: 94%; max-width: 580px; } /* MQ formula + note: side-by-side on tablet */ .hh-mq-left { display: grid; grid-template-columns: auto 1fr; gap: 0 2rem; align-items: center; } .hh-mq-left > .hh-label, .hh-mq-left > h2 { grid-column: 1 / -1; } .hh-formula-art { gap: 0.4rem 0.6rem; white-space: nowrap; font-size: clamp(0.7rem, 2.5vw, 1rem); } .hh-formula-note { margin-top: 0; font-size: 0.85rem; line-height: 1.6; } .hh-formula-mq { font-size: 2.75em; } .hh-formula-equals { font-size: 2em; } .hh-formula-root { font-size: 3em; } .hh-formula-term--large { font-size: 2.25em; } .hh-formula-multiply { font-size: 1.75em; } .hh-formula-product { gap: 0.5rem; } } @media (max-width: 480px) { :root { --hh-logo-overhang: 0px; --hh-section-padding: clamp(2.5rem, 8vh, 5rem); } /* Prevent horizontal overflow on mobile */ html, body { overflow-x: hidden; } .hh-section__inner, .hh-container, .hh-calendar-bar__inner, .hh-footer__inner { padding: 0 1rem; padding-left: 1rem; max-width: 100%; } .hh-header__inner { padding: 0.75rem 1rem; padding-left: 1rem; max-width: 100%; box-sizing: border-box; } /* Hide hamburger: NEXUS diamond replaces it */ .hh-menu-toggle { display: none; } /* Hide brand text on mobile — logo only */ .hh-header__brand span { display: none; } .hh-header__brand { gap: 0; } .hh-header__logo { height: 52px; margin-left: -6px; /* Compensate for SVG internal whitespace */ } /* Hide desktop nav links on mobile */ .hh-header__nav { display: flex; align-items: center; gap: 0; margin: 0; } .hh-header__nav .hh-nav-link:not(.hh-nav-link--nexus) { display: none; } /* NEXUS button visible in header as mobile menu trigger */ .hh-nav-link--nexus { display: flex; font-size: 0.75rem; padding: 0.4rem 0.75rem; height: auto; background: var(--hh-accent); color: var(--hh-text-light); } /* Hide language selector from header on mobile (moves into modal) */ .hh-header__actions { display: none; } .hh-section__content-indent { margin-left: 0; max-width: 100%; } .hh-section__title-left { margin-left: 0; } /* Larger, more prominent section titles */ .hh-section__title-left h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); /* LARGER */ margin-bottom: 1rem; } /* Subtitle styling - italicize */ .hh-section__subtitle { font-size: 1.25rem; font-style: italic; /* ITALICIZED */ color: var(--hh-text-muted-dark); margin-bottom: 2rem; } .hh-section--dark .hh-section__subtitle { color: var(--hh-text-muted-light); } .hh-section__inner--narrow-right, .hh-section__inner--full { margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .hh-hero-section { padding-top: 7rem; } /* Grid-4: keep 2-col on phone (icon/stat cards) */ .hh-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* Grid-3: stack on phone (text-heavy content panels) */ .hh-grid-3 { grid-template-columns: 1fr; gap: 0.75rem; } .hh-grid-2 { grid-template-columns: 1fr; gap: 1rem; } /* Compact cards on phone: tighter padding and smaller text */ .hh-feature { padding: 1.25rem 1rem; } .hh-feature__icon { font-size: 1.75rem; margin-bottom: 0.75rem; } .hh-feature__icon--large { height: 60px; margin-bottom: 0.75rem; } .hh-feature__name { font-size: 1rem; } .hh-feature h4, .hh-feature__title { font-size: 0.95rem; margin-bottom: 0.5rem; } .hh-feature p, .hh-feature__desc { font-size: 0.8rem; line-height: 1.5; } .hh-feature__number { font-size: 1.5rem; } .hh-feature-card { padding: 1.25rem 1rem; } .hh-feature-card h4 { font-size: 0.95rem; margin-bottom: 0.5rem; } .hh-feature-card p { font-size: 0.8rem; line-height: 1.5; } /* Code boxes: tighten and allow wrapping on phone */ .hh-code-box { padding: 1.5rem 1rem 1rem; font-size: 0.75rem; } .hh-code-box pre { white-space: pre-wrap; word-break: break-word; } .hh-calendar-bar { padding: 0.3rem 0; } .hh-calendar-bar__inner { padding: 0.3rem 1rem; font-size: 0.65rem; } .hh-calendar-bar__left { gap: 0.5rem; } .hh-calendar-bar__item { gap: 0.25rem; font-size: 0.65rem; } /* Hide labels on mobile, show only values */ .hh-calendar-bar__label { display: none; } /* Hide sun/moon on mobile (sacred), keep decan only */ .hh-calendar-bar__item.sacred-only:not(:last-of-type) { display: none; } /* Shorten toggle text: SCI / SAC */ .hh-calendar-bar .hh-toggle { padding: 0.25rem 0.5rem; font-size: 0; } .hh-calendar-bar .hh-toggle::before { font-size: 0.65rem; } .hh-calendar-bar .hh-toggle[data-stream-toggle="scientific"]::before { content: 'SCI'; } .hh-calendar-bar .hh-toggle[data-stream-toggle="sacred"]::before { content: 'SAC'; } /* Stream bar: truncate decan text, align left text with toggle vertically */ #hh-decan-sci, #hh-decan-sacred { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } .hh-calendar-bar__left { padding-top: 4px; } .hh-btn-nexus__text { display: none; } .hh-btn-nexus { padding: 0.5rem 0.75rem; } /* MQ formula: scale to screen width on phone, fill content area */ .hh-formula-art { gap: 0.15rem 0.3rem; white-space: nowrap; font-size: clamp(0.7rem, 4.5vw, 1rem); width: 100%; justify-content: center; } .hh-formula-mq--small { font-size: inherit; } .hh-formula-mq { font-size: 2.75em; } .hh-formula-equals { font-size: 2em; margin: 0 0.15em; } .hh-formula-root { font-size: 3em; } .hh-formula-term--large { font-size: 2.25em; } .hh-formula-multiply { font-size: 1.5em; } .hh-formula-product { gap: 0.2em; } .hh-footer { padding: 2.5rem 0 3.5rem; } .hh-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .hh-footer__col:first-child { grid-column: 1 / -1; } .hh-footer__bottom { flex-direction: column; text-align: center; gap: 0.4rem; } .hh-nexus-modal { width: 96%; max-height: 90vh; } .hh-nexus-modal__header { padding: 1rem 1.25rem 0.75rem; } .hh-nexus-modal__platforms { padding: 0.75rem 1rem 1rem; } .hh-nexus-user-section { padding: 1rem; } /* Profile grid: keep 3-col rows, shrink font */ .hh-nexus-profile__row--3col { grid-template-columns: 1fr 1fr 1fr; } .hh-nexus-profile__key { font-size: 0.5625rem; } .hh-nexus-profile__val { font-size: 0.75rem; } .hh-nexus-profile__pair { padding: 0.25rem 0.375rem; gap: 0.25rem; } /* Platform grid: 3-col on phone (6 items, 2 rows) */ .hh-nexus-pgrid { grid-template-columns: repeat(3, 1fr); } .hh-nexus-pgrid__cell:nth-child(odd) { border-right: none; } .hh-nexus-pgrid__cell:not(:nth-child(3n)) { border-right: 1px solid rgba(0, 0, 0, 0.06); } .hh-nexus-pgrid__sep, .hh-nexus-pgrid__role { display: none; } .hh-nexus-pgrid__cell { flex-direction: column; text-align: center; padding: 0.5rem 0.25rem; gap: 0.25rem; } .hh-nexus-pgrid__name { font-size: 0.5625rem; } /* Buttons: full width on phone */ .hh-btn-group { flex-direction: column; } .hh-btn-group a, .hh-btn-group button { width: 100%; text-align: center; box-sizing: border-box; } } @media (max-width: 374px) { .hh-header__brand { font-size: 0.9rem; } .hh-calendar-bar__inner { font-size: 0.6rem; } } /* (old nexus grid rules removed — now using compact list) */ /* =========================== TOOLTIPS & INFO ICONS =========================== */ .hh-tooltip { position: relative; display: inline-block; cursor: help; } .hh-tooltip__content { visibility: hidden; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); width: 240px; background: var(--hh-surface-dark); color: var(--hh-text-light); text-align: left; text-transform: none; font-weight: 400; padding: 0.75rem 1rem; border: 1px solid var(--hh-border-dark); font-family: var(--hh-font-sans); font-size: 0.8rem; line-height: 1.5; z-index: 50000; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); pointer-events: none; } .hh-tooltip__content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: var(--hh-border-dark) transparent transparent transparent; } .hh-tooltip:hover .hh-tooltip__content { visibility: visible; opacity: 1; } /* Nexus button: preserve inline-flex when tooltip class is added */ .hh-nav-link--nexus.hh-tooltip { display: inline-flex; } /* Nexus button tooltip: position below, right-aligned */ .hh-nav-link--nexus .hh-tooltip__content { bottom: auto; top: calc(100% + 0.5rem); left: auto; right: 0; transform: none; width: auto; white-space: nowrap; letter-spacing: normal; } .hh-nav-link--nexus .hh-tooltip__content::after { top: auto; bottom: 100%; left: auto; right: 1rem; border-color: transparent transparent var(--hh-border-dark) transparent; } /* Badge tooltip (achievement badges, MQ tier badges) */ .baseline-achievement-badge__tooltip { position: absolute; left: 110%; top: 50%; transform: translateY(-50%); padding: 0.75rem 1rem; background: var(--hh-surface-dark); border: 1px solid var(--hh-border-dark); color: var(--hh-text-muted-light); font-size: 0.875rem; font-family: var(--hh-font-sans); text-transform: none; letter-spacing: 0; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 50000; } .baseline-achievement-badge__tooltip strong { display: block; color: #fff; margin-bottom: 0.25rem; font-size: 0.9rem; } /* Glance badge tooltip: position below, right-aligned */ .baseline-glance-box__badge .baseline-achievement-badge__tooltip { left: auto; right: 0; top: calc(100% + 0.5rem); transform: none; white-space: normal; min-width: 180px; } .baseline-achievement-badge:hover .baseline-achievement-badge__tooltip { opacity: 1; visibility: visible; } .hh-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--hh-accent); color: white; border-radius: 50%; font-size: 0.75rem; font-weight: 700; margin-left: 0.5rem; cursor: help; vertical-align: middle; } /* =========================== END CORE SYSTEM v3.3 =========================== */