/* ================================================================= * Solace Mining Design System * Adapted from crestmark-design-spec.md (2026-05-31) * * Activation: add class="txh-redesign" to on any page that * should pick up this design system. Pages without the class stay * on the legacy main.css styles. * ================================================================= */ /* --- Font ----------------------------------------------------------- */ @import url('../fonts/vendor/webfonts.css'); /* ================================================================= * DESIGN TOKENS — scoped to .txh-redesign so legacy pages untouched * ================================================================= */ .txh-redesign { /* --- Colour: surfaces ----------------------------------------- */ --color-bg-page: #FFFFFF; --color-bg-dark: #0E1334; /* Sapphire */ --color-bg-dark-40: rgba(14, 19, 52, 0.40); --color-surface-warm: #F2F7FD; /* faint ice */ --color-surface-warm-alt: #F8FBFE; --color-surface-card: #FFFFFF; /* --- Colour: ink ---------------------------------------------- */ --color-ink-primary: #0A0A0A; /* Rich Black */ --color-ink-body: #0A0A0A; /* Rich Black */ --color-ink-muted: #636363; --color-ink-white: #FFFFFF; /* --- Colour: accents (per spec — dark CTA primary, red sparing) */ --color-accent-dark: #004DC0; /* Tech Blue CTA */ --color-accent-red: #004DC0; /* Tech Blue brand mark */ /* --- Status semantics (TXH-specific, not in Crestmark) -------- */ --status-success: #386641; --status-warning: #F59E0B; --status-danger: #CC0000; /* --- Typography ---------------------------------------------- */ --font-display: 'General Sans', 'Host Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'General Sans', 'Host Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (px values from spec, kept literal) */ --text-h1: 58px; --text-h2: 32px; --text-h3: 28px; --text-stat: 56px; --text-body-lg: 20px; --text-body: 16px; --text-sm: 14px; /* Line-heights computed per spec */ --lh-h1: 68px; --lh-h2: 40px; --lh-h3: 32px; --lh-stat: 61.6px; --lh-body-lg: 24px; --lh-body: 22.4px; --lh-sm: 16.8px; /* Tracking */ --tracking-h1: -1.1px; --tracking-h2: -1px; --tracking-eyebrow: 0.5px; /* Weights — Crestmark uses 400 / 500 / 600 only */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* --- Spacing (4px base unit) -------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-15: 60px; --space-20: 80px; --space-30: 120px; /* Section + container */ --section-py: 60px; --section-py-hero: 120px; --container-max: 1200px; --container-px: 40px; --container-px-sm: 16px; /* --- Radii ---------------------------------------------------- */ --radius-card: 8px; --radius-input: 4px; --radius-pill: 30px; --radius-circle: 50%; /* --- Motion --------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 400ms; /* No shadows in spec — depth via contrast only. */ --shadow-none: none; } /* ================================================================= * GLOBAL BASE — body, headings, links * ================================================================= */ .txh-redesign { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-ink-body); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; } .txh-redesign *, .txh-redesign *::before, .txh-redesign *::after { box-sizing: border-box; } .txh-redesign h1, .txh-redesign h2, .txh-redesign h3, .txh-redesign h4, .txh-redesign h5, .txh-redesign h6 { font-family: var(--font-display); color: var(--color-ink-primary); margin: 0; font-weight: var(--fw-medium); } .txh-redesign h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); font-weight: var(--fw-regular); } .txh-redesign h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); } .txh-redesign h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); } .txh-redesign p { margin: 0; color: var(--color-ink-body); } .txh-redesign a { color: inherit; text-decoration: none; } .txh-redesign img { max-width: 100%; height: auto; display: block; } .txh-redesign ul, .txh-redesign ol { margin: 0; padding: 0; list-style: none; } .txh-redesign button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ================================================================= * LAYOUT PRIMITIVES — container + section * ================================================================= */ .txh-redesign .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); width: 100%; } .txh-redesign .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .txh-redesign .section--warm { background: var(--color-surface-warm); } .txh-redesign .section--white { background: var(--color-bg-page); } .txh-redesign .section--dark { background: var(--color-bg-dark); color: var(--color-ink-white); } .txh-redesign .section--dark h1, .txh-redesign .section--dark h2, .txh-redesign .section--dark h3, .txh-redesign .section--dark p { color: var(--color-ink-white); } /* ================================================================= * RESPONSIVE * Crestmark spec uses a fixed-width transform:scale() — we use real * breakpoints per the spec's rebuild guidance (Section H). * ================================================================= */ @media (max-width: 768px) { .txh-redesign { --text-h1: 40px; --text-h2: 26px; --text-stat: 44px; --lh-h1: 48px; --lh-h2: 32px; --lh-stat: 48px; --section-py: 48px; --section-py-hero: 80px; } .txh-redesign .container { padding-left: var(--container-px-sm); padding-right: var(--container-px-sm); } } /* ================================================================= * COMPONENTS * ================================================================= */ /* --- Button (D.3 / D.4) ------------------------------------------- */ .txh-redesign .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-body); line-height: 1; font-weight: var(--fw-regular); padding: 10px 16px; border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); min-height: 42px; } .txh-redesign .btn:focus-visible { outline: 2px solid var(--color-accent-red); outline-offset: 2px; } /* Primary CTA — dark pill (used everywhere except nav) */ .txh-redesign .btn--primary { background: var(--color-accent-dark); color: var(--color-ink-white); } .txh-redesign .btn--primary:hover { background: #0E1334; } /* Nav CTA — white pill */ .txh-redesign .btn--nav { background: var(--color-ink-white); color: var(--color-ink-body); } .txh-redesign .btn--nav:hover { background: #F1F1F1; } /* Ghost — for dark-bg secondary actions (404, hero secondary) */ .txh-redesign .btn--ghost { background: transparent; color: var(--color-ink-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .txh-redesign .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } /* Form-style submit (D.14) — rectangular, muted */ .txh-redesign .btn--submit { background: var(--color-ink-muted); color: var(--color-ink-white); padding: 12px 28px; border-radius: var(--radius-input); min-height: 46px; width: 100%; } .txh-redesign .btn--submit:hover { background: var(--color-ink-primary); } /* --- Eyebrow Label (D.1, with TXH mono divergence) ---------------- */ .txh-redesign .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: var(--lh-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-muted); } .txh-redesign .eyebrow__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent-red); } .txh-redesign .eyebrow__icon svg { width: 100%; height: 100%; display: block; } /* --- Section Header Block (D.2) ----------------------------------- */ .txh-redesign .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 760px; } .txh-redesign .section-header--center { align-items: center; margin-left: auto; margin-right: auto; text-align: center; } .txh-redesign .section-header__title { /* inherits h2 styles */ } .txh-redesign .section-header__body { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } .txh-redesign .section-header__cta { margin-top: var(--space-2); } /* When the header sits in a 2-col layout with grid on the right, stretch helper drops the max-width cap. */ .txh-redesign .section-header--wide { max-width: none; } /* --- Card: Icon-Top Feature (D.5) --------------------------------- */ .txh-redesign .card-feature { background: var(--color-surface-warm); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); overflow: clip; } .txh-redesign .card-feature__icon { width: 20px; height: 20px; color: var(--color-ink-primary); } .txh-redesign .card-feature__icon svg { width: 100%; height: 100%; display: block; } .txh-redesign .card-feature__title { font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body-lg); color: var(--color-ink-primary); } .txh-redesign .card-feature__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } /* --- Card: Image-Top Feature (D.6) -------------------------------- */ .txh-redesign .card-image { display: flex; flex-direction: column; overflow: clip; border-radius: var(--radius-card); } .txh-redesign .card-image__media { width: 100%; aspect-ratio: 470 / 250; overflow: clip; background: var(--color-surface-warm); } .txh-redesign .card-image__media img { width: 100%; height: 100%; object-fit: cover; } .txh-redesign .card-image__body { background: var(--color-surface-warm); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .txh-redesign .card-image__icon { width: 20px; height: 20px; color: var(--color-ink-primary); } .txh-redesign .card-image__title { font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body-lg); color: var(--color-ink-primary); } .txh-redesign .card-image__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } /* --- Card: Stat Counter (D.7) ------------------------------------- */ .txh-redesign .card-stat { background: var(--color-surface-card); border-radius: var(--radius-card); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; min-height: 234px; position: relative; overflow: clip; } .txh-redesign .card-stat__icon { position: absolute; top: var(--space-6); right: var(--space-6); width: 24px; height: 35px; color: var(--color-ink-body); } .txh-redesign .card-stat__icon svg { width: 100%; height: 100%; display: block; } .txh-redesign .card-stat__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); max-width: calc(100% - 40px); /* avoid clashing with the absolute icon */ } .txh-redesign .card-stat__value { font-family: var(--font-display); font-size: var(--text-stat); font-weight: var(--fw-medium); line-height: var(--lh-stat); color: var(--color-ink-primary); letter-spacing: -0.5px; } /* --- Grid utilities ----------------------------------------------- */ .txh-redesign .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .txh-redesign .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 768px) { .txh-redesign .grid-2, .txh-redesign .grid-3 { grid-template-columns: 1fr; gap: var(--space-4); } } /* --- Testimonial Block (D.13) ------------------------------------- */ .txh-redesign .testimonial { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-10); align-items: flex-start; } .txh-redesign .testimonial__quote { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-medium); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); color: var(--color-ink-primary); } .txh-redesign .testimonial__attribution { display: flex; align-items: center; gap: var(--space-3); } .txh-redesign .testimonial__portrait { width: 40px; height: 40px; border-radius: var(--radius-input); object-fit: cover; flex-shrink: 0; } .txh-redesign .testimonial__name { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--fw-regular); color: var(--color-ink-primary); } .txh-redesign .testimonial__role { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-ink-muted); } @media (max-width: 768px) { .txh-redesign .testimonial { grid-template-columns: 1fr; gap: var(--space-6); } .txh-redesign .testimonial__quote { font-size: 24px; line-height: 30px; } } /* --- FAQ Accordion (D.10) ----------------------------------------- */ .txh-redesign .accordion { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } .txh-redesign .accordion__item { background: var(--color-surface-card); border-radius: var(--radius-card); overflow: hidden; } .txh-redesign .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding: var(--space-5); text-align: left; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--color-ink-primary); background: var(--color-surface-card); border: none; cursor: pointer; } .txh-redesign .accordion__icon { width: 26px; height: 26px; border-radius: var(--radius-circle); background: var(--color-ink-primary); color: var(--color-ink-white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .txh-redesign .accordion__icon::before, .txh-redesign .accordion__icon::after { content: ''; position: absolute; background: var(--color-ink-white); border-radius: 1px; } .txh-redesign .accordion__icon::before { width: 10px; height: 2px; } .txh-redesign .accordion__icon::after { width: 2px; height: 10px; transition: transform var(--dur-base) var(--ease-out); } .txh-redesign .accordion__item[open] .accordion__icon::after, .txh-redesign .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); /* + becomes × visually (— + crossed bar) */ } .txh-redesign .accordion__body { padding: 0 var(--space-5) var(--space-5); color: var(--color-ink-muted); font-size: var(--text-body); line-height: var(--lh-body); } /* --- Navbar (D.12) ------------------------------------------------ */ .txh-redesign .navbar { position: sticky; top: 0; z-index: 100; width: 100%; background: var(--color-bg-dark-40); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } /* When scrolled past hero — toggled by JS adding .is-scrolled */ .txh-redesign .navbar.is-scrolled { background: var(--color-bg-page); backdrop-filter: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } /* When page has no hero behind (about, contact, etc.), solid from start */ .txh-redesign .navbar--solid { background: var(--color-bg-page); backdrop-filter: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .txh-redesign .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 66px; padding: var(--space-3) 0; } .txh-redesign .navbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-white); } .txh-redesign .navbar.is-scrolled .navbar__brand, .txh-redesign .navbar--solid .navbar__brand { color: var(--color-ink-primary); } .txh-redesign .navbar__brand img { height: 26px; width: auto; } /* Wordmark swaps with the nav background: white over the hero, dark once scrolled or on solid (white) pages. */ .txh-redesign .navbar__logo { display: block; } .txh-redesign .navbar__logo--dark { display: none; } .txh-redesign .navbar.is-scrolled .navbar__logo--light, .txh-redesign .navbar--solid .navbar__logo--light { display: none; } .txh-redesign .navbar.is-scrolled .navbar__logo--dark, .txh-redesign .navbar--solid .navbar__logo--dark { display: block; } .txh-redesign .navbar__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; } .txh-redesign .navbar__link { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-white); transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .txh-redesign .navbar.is-scrolled .navbar__link, .txh-redesign .navbar--solid .navbar__link { color: var(--color-ink-body); } .txh-redesign .navbar__link:hover { opacity: 0.7; } .txh-redesign .navbar__cta { /* dark pill on dark nav doesn't pop; nav uses white pill (D.4) */ } .txh-redesign .navbar__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: inherit; } .txh-redesign .navbar__toggle svg { width: 24px; height: 24px; } @media (max-width: 768px) { .txh-redesign .navbar__links, .txh-redesign .navbar__cta { display: none; } .txh-redesign .navbar__toggle { display: inline-flex; } } /* --- Forms (D.14 adapted) ----------------------------------------- */ .txh-redesign .form-card { background: var(--color-surface-card); border-radius: var(--radius-card); padding: var(--space-8); max-width: 480px; width: 100%; margin: 0 auto; } .txh-redesign .form-card--wide { max-width: 760px; } .txh-redesign .form-card__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-8); } .txh-redesign .form-card__header h1 { font-size: 28px; line-height: 32px; letter-spacing: -0.4px; font-weight: var(--fw-medium); } .txh-redesign .form-card__header p { color: var(--color-ink-muted); } .txh-redesign .form-stack { display: flex; flex-direction: column; gap: var(--space-5); } .txh-redesign .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .txh-redesign .form-field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-ink-body); } .txh-redesign .form-field__input { background: var(--color-surface-warm); border: 1px solid transparent; border-radius: var(--radius-input); padding: 12px 16px; height: 48px; font-family: inherit; font-size: var(--text-body); color: var(--color-ink-body); width: 100%; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .txh-redesign .form-field__input:focus { outline: none; border-color: var(--color-ink-primary); background: var(--color-bg-page); } .txh-redesign .form-field__input::placeholder { color: var(--color-ink-muted); } .txh-redesign textarea.form-field__input { min-height: 120px; resize: vertical; padding: 12px 16px; height: auto; line-height: 1.5; } .txh-redesign .form-field__hint { font-size: var(--text-sm); color: var(--color-ink-muted); } .txh-redesign .form-field--with-action { position: relative; } .txh-redesign .form-field__action { position: absolute; right: 12px; top: 38px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--color-ink-muted); cursor: pointer; background: none; border: none; } .txh-redesign .form-link { font-size: var(--text-sm); color: var(--color-ink-primary); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--dur-base) var(--ease-out); } .txh-redesign .form-link:hover { text-decoration-color: var(--color-ink-primary); } .txh-redesign .form-footer { text-align: center; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-ink-muted); } .txh-redesign .form-footer a { color: var(--color-ink-primary); font-weight: var(--fw-medium); } /* --- Auth Page Shell ---------------------------------------------- */ .txh-redesign .auth-page { min-height: calc(100vh - 66px); background: var(--color-surface-warm); display: flex; align-items: center; padding: var(--space-10) 0; } /* --- Hero (C.2) --------------------------------------------------- */ .txh-redesign .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg-dark); color: var(--color-ink-white); overflow: hidden; isolation: isolate; } /* Kill the legacy main.css `.hero::after` overlay that paints over the hero text/buttons and blocks clicks. The redesign uses .hero__bg::after. */ .txh-redesign .hero::after { content: none; } .txh-redesign .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .txh-redesign .hero__bg img, .txh-redesign .hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } .txh-redesign .hero__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.35) 35%, rgba(13, 13, 13, 0.85) 100%); } .txh-redesign .hero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: var(--section-py-hero); padding-bottom: var(--space-15); } .txh-redesign .hero__content { display: flex; flex-direction: column; gap: var(--space-5); max-width: 760px; } .txh-redesign .hero .eyebrow { color: var(--color-ink-white); } .txh-redesign .hero .eyebrow__icon { color: var(--color-ink-white); } .txh-redesign .hero__title { color: var(--color-ink-white); } .txh-redesign .hero__subtitle { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: rgba(255, 255, 255, 0.85); max-width: 640px; } .txh-redesign .hero__cta-row { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .txh-redesign .hero__divider { position: relative; z-index: 1; background: var(--color-bg-page); min-height: 88px; display: flex; align-items: center; justify-content: center; } .txh-redesign .hero__arrow { width: 32px; height: 32px; border-radius: var(--radius-circle); background: var(--color-ink-primary); color: var(--color-ink-white); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } @media (max-width: 768px) { .txh-redesign .hero { min-height: 100vh; } .txh-redesign .hero__subtitle { font-size: 16px; line-height: 22px; } } /* --- Footer ------------------------------------------------------- */ .txh-redesign .footer { background: var(--color-bg-page); padding-top: var(--space-10); } .txh-redesign .footer__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); max-width: 760px; margin: 0 auto; } .txh-redesign .footer__nav { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-10); padding-bottom: var(--space-5); font-size: var(--text-body); color: var(--color-ink-body); } .txh-redesign .footer__nav a { color: var(--color-ink-body); transition: opacity var(--dur-base) var(--ease-out); } .txh-redesign .footer__nav a:hover { opacity: 0.6; } /* Secondary legal links row — smaller, muted */ .txh-redesign .footer__legal { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-ink-muted); } .txh-redesign .footer__legal a { color: var(--color-ink-muted); transition: color var(--dur-base) var(--ease-out); } .txh-redesign .footer__legal a:hover { color: var(--color-accent-dark); } .txh-redesign .footer__sep { color: var(--color-ink-body); opacity: 0.5; } /* Copyright — centered */ .txh-redesign .footer__credits { display: flex; justify-content: center; align-items: center; text-align: center; padding: var(--space-5) 0; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: var(--text-sm); color: var(--color-ink-muted); } /* --- Legal documents (privacy / terms / etc.) -------------------- */ .txh-redesign .legal-doc { max-width: 820px; margin: 0 auto; } .txh-redesign .legal-doc__title { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin: 14px 0 8px; } .txh-redesign .legal-doc__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted); margin-bottom: var(--space-5); } .txh-redesign .legal-doc__intro { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-ink-body); padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid rgba(10, 10, 10, 0.08); } .txh-redesign .legal-doc__section { margin-bottom: var(--space-8); } .txh-redesign .legal-doc__section h2 { font-size: 21px; line-height: 1.25; margin-bottom: var(--space-3); } .txh-redesign .legal-doc__section p { color: var(--color-ink-muted); line-height: 1.7; } .txh-redesign .legal-doc__section a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; } /* --- Utility: hidden ---------------------------------------------- */ .txh-redesign .hidden { display: none !important; } /* --- Loader (auth pages) ------------------------------------------ */ .txh-redesign #loader { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; background: rgba(13, 13, 13, 0.55); opacity: 1; transition: opacity 0.3s var(--ease-out); } .txh-redesign #loader.hidden { display: none !important; } .txh-redesign #loader.fade-out { opacity: 0; pointer-events: none; } .txh-redesign .line-loader { display: flex; gap: 4px; height: 40px; align-items: flex-end; } .txh-redesign .line-loader div { width: 6px; height: 10px; background: #FFFFFF; border-radius: 4px; animation: txhWave 1s ease-in-out infinite; } .txh-redesign .line-loader div:nth-child(2) { animation-delay: 0.1s; } .txh-redesign .line-loader div:nth-child(3) { animation-delay: 0.2s; } .txh-redesign .line-loader div:nth-child(4) { animation-delay: 0.3s; } .txh-redesign .line-loader div:nth-child(5) { animation-delay: 0.4s; } @keyframes txhWave { 0%, 100% { height: 10px; opacity: 0.6; } 50% { height: 30px; opacity: 1; } } /* --- Toast (auth pages) — on-brand dark card + accent bar --------- */ .txh-redesign #toast-container { position: fixed; top: 24px; right: 24px; z-index: 13001; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .txh-redesign .toast { display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 360px; padding: 14px 18px 14px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; background: #0A0A0A; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; pointer-events: auto; animation: txhToastIn 0.4s ease forwards, txhToastOut 0.4s ease 3.6s forwards; } .txh-redesign .toast::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; } .txh-redesign .toast.success::before { background: #386641; } .txh-redesign .toast.success .iconify { color: #6FBF73; } .txh-redesign .toast.error::before { background: #004DC0; } .txh-redesign .toast.error .iconify { color: #F26464; } .txh-redesign .toast.info::before { background: #FFFFFF; } .txh-redesign .toast.info .iconify { color: #FFFFFF; } .txh-redesign .toast.warning::before { background: #E8A33D; } .txh-redesign .toast.warning .iconify { color: #E8A33D; } .txh-redesign .toast .iconify { font-size: 22px; flex-shrink: 0; } .txh-redesign .toast-message { flex: 1; line-height: 1.4; } @keyframes txhToastIn { from { opacity: 0; transform: translateY(-15px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes txhToastOut { to { opacity: 0; transform: translateY(-15px); } } /* ================================================================= * Plan cards (public catalog) — defined plan/pricing cards * Tokens only; sits on .section--warm / --white. * ================================================================= */ .txh-redesign .plan-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-card); border: 1px solid rgba(26, 26, 26, 0.10); border-radius: var(--radius-card); height: 100%; } .txh-redesign .plan-card__tier { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-muted); } .txh-redesign .plan-card__roi { font-family: var(--font-display); font-size: var(--text-stat); line-height: 1; font-weight: var(--fw-regular); color: var(--color-ink-primary); overflow-wrap: anywhere; } .txh-redesign .plan-card__roi small { font-size: var(--text-h3); color: var(--color-ink-muted); } .txh-redesign .plan-card__name { font-size: var(--text-body-lg); font-weight: var(--fw-medium); color: var(--color-ink-primary); } .txh-redesign .plan-card__meta { list-style: none; margin: 0; padding: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid rgba(26, 26, 26, 0.08); } .txh-redesign .plan-card__meta li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); } .txh-redesign .plan-card__meta li strong { color: var(--color-ink-primary); font-weight: var(--fw-medium); text-align: right; } .txh-redesign .plan-card__summary { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-muted); margin-top: auto; } /* Product variant (X-Rewards) */ .txh-redesign .plan-card--product { padding: 0; overflow: hidden; } .txh-redesign .plan-card--product .plan-card__media { aspect-ratio: 470 / 300; background: var(--color-surface-warm); } .txh-redesign .plan-card--product .plan-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .txh-redesign .plan-card--product .plan-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .txh-redesign .plan-card__badge { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; color: var(--color-accent-red); border: 1px solid var(--color-accent-red); border-radius: var(--radius-pill); padding: 2px 10px; } .txh-redesign .plan-card__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; } .txh-redesign .plan-card__price-member { font-family: var(--font-display); font-size: var(--text-h3); color: var(--color-ink-primary); } .txh-redesign .plan-card__price-retail { font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: line-through; } /* ================================================================= * FLOATING DOCK NAVBAR + CENTERED HERO (Solace Mining redesign) * Overrides the legacy sticky .navbar with a floating pill. * ================================================================= */ /* The wrapper is transparent and fixed; the pill is .navbar__inner */ .txh-redesign .navbar--dock { display: block; /* override legacy main.css `.navbar{display:none}` ≤992px */ position: fixed; top: var(--space-4); left: 0; right: 0; width: 100%; z-index: 200; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; padding: 0; } .txh-redesign .navbar--dock .navbar__inner { min-height: 0; padding: 9px 10px 9px 18px; gap: var(--space-5); border-radius: 999px; background: rgba(14, 19, 52, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 34px rgba(7, 8, 15, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .txh-redesign .navbar--dock.is-scrolled .navbar__inner { background: rgba(8, 9, 18, 0.88); border-color: rgba(255, 255, 255, 0.14); } /* Keep the dock white/visible on scroll — defeat legacy .navbar.is-scrolled rules that turn the wrapper white and the text dark. */ .txh-redesign .navbar--dock.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } .txh-redesign .navbar--dock.is-scrolled .navbar__brand, .txh-redesign .navbar--dock.is-scrolled .navbar__wordmark { color: #fff; } .txh-redesign .navbar--dock.is-scrolled .navbar__link { color: rgba(255, 255, 255, 0.82); } .txh-redesign .navbar--dock.is-scrolled .navbar__link:hover { color: #fff; } .txh-redesign .navbar--dock.is-scrolled .navbar__toggle { color: #fff; } /* Placeholder brand: mark + wordmark */ .txh-redesign .navbar--dock .navbar__brand { color: #fff; gap: var(--space-2); } .txh-redesign .navbar__mark { width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; } .txh-redesign .navbar__mark svg, .txh-redesign .navbar__mark img { width: 100%; height: 100%; display: block; object-fit: contain; } .txh-redesign .navbar__wordmark { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; letter-spacing: -0.3px; line-height: 1; color: #fff; } .txh-redesign .navbar__wordmark em { font-style: normal; font-weight: var(--fw-regular); color: #D8ECF9; } /* Links + actions on the dark pill */ .txh-redesign .navbar--dock .navbar__links { gap: var(--space-5); } .txh-redesign .navbar--dock .navbar__link { color: rgba(255, 255, 255, 0.82); font-size: var(--text-sm); white-space: nowrap; } .txh-redesign .navbar--dock .navbar__link:hover { color: #fff; opacity: 1; } .txh-redesign .navbar__actions { display: inline-flex; align-items: center; gap: var(--space-2); } .txh-redesign .navbar--dock .btn { min-height: 38px; padding: 8px 16px; font-size: var(--text-sm); } .txh-redesign .navbar--dock .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30); } .txh-redesign .navbar--dock .navbar__toggle { color: #fff; } /* Fixed dock floats over hero pages; non-hero pages get top clearance */ .txh-redesign .navbar--dock + :not(.hero) { padding-top: 132px; } /* Secondary button visible on light surfaces (plans-section "Sign in") */ .txh-redesign .btn--line { background: transparent; color: var(--color-ink-primary); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.18); } .txh-redesign .btn--line:hover { background: rgba(10, 10, 10, 0.04); } /* Centered hero variant */ .txh-redesign .hero--center .hero__inner { align-items: center; } .txh-redesign .hero--center .hero__content { align-items: center; text-align: center; max-width: 820px; margin: 0 auto; } .txh-redesign .hero--center .hero__subtitle { margin-inline: auto; } .txh-redesign .hero--center .hero__cta-row { justify-content: center; } .txh-redesign .hero--center .eyebrow { justify-content: center; } /* How-it-works steps (homepage) */ .txh-redesign .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: stepnum; } .txh-redesign .step { position: relative; counter-increment: stepnum; background: var(--color-surface-card); border: 1px solid rgba(10, 10, 10, 0.08); border-radius: 16px; padding: var(--space-10) var(--space-8); min-height: 230px; text-align: left; overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); } .txh-redesign .step:hover { transform: translateY(-4px); border-color: rgba(0, 77, 192, 0.25); box-shadow: 0 20px 44px -22px rgba(14, 19, 52, 0.35); } /* Faint oversized ghost numeral in the corner */ .txh-redesign .step::after { content: counter(stepnum); position: absolute; right: 18px; bottom: -14px; font-family: var(--font-display); font-size: 120px; font-weight: 600; line-height: 1; color: rgba(0, 77, 192, 0.05); pointer-events: none; } .txh-redesign .step__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #2C6BFF, #004DC0); color: #fff; font-family: var(--font-mono); font-size: 20px; font-weight: 500; box-shadow: 0 8px 18px -6px rgba(0, 77, 192, 0.5); margin-bottom: var(--space-6); } .txh-redesign .step__title { font-size: 22px; line-height: 1.2; margin-bottom: var(--space-3); } .txh-redesign .step__desc { color: var(--color-ink-muted); font-size: 15px; line-height: 1.55; } /* --- Dock responsive --------------------------------------------- */ @media (max-width: 1040px) { .txh-redesign .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { /* Defeat legacy main.css `.navbar.navbar-mobile-active` fullscreen-green overlay: keep our dock as a floating dropdown, not a slide-in panel. */ .txh-redesign .navbar--dock, .txh-redesign .navbar--dock.navbar-mobile-active { display: block; position: fixed; top: var(--space-4); left: 0; right: 0; width: 100%; height: auto; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin: 0; opacity: 1; transform: none; overflow: visible; align-items: stretch; } .txh-redesign .navbar--dock .navbar__links, .txh-redesign .navbar--dock .navbar__actions { display: none; } .txh-redesign .navbar--dock .navbar__toggle { display: inline-flex; } /* Expand the pill into a dropdown card when toggled */ .txh-redesign .navbar--dock .navbar__inner { flex-wrap: wrap; border-radius: 20px; padding: 10px 12px 10px 18px; transition: padding .25s var(--ease-out); } .txh-redesign .navbar--dock .navbar__brand { order: 1; margin-right: auto; } .txh-redesign .navbar--dock .navbar__toggle { order: 2; } /* Open state: give the dropdown room to breathe */ .txh-redesign .navbar--dock.navbar-mobile-active .navbar__inner { padding: 12px 14px 16px; } .txh-redesign .navbar--dock.navbar-mobile-active .navbar__links { display: flex; flex-direction: column; align-items: stretch; order: 3; width: 100%; gap: 4px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } .txh-redesign .navbar--dock.navbar-mobile-active .navbar__link { padding: 13px 14px; border-radius: 12px; color: #fff; font-size: var(--text-body); transition: background-color .2s var(--ease-out); } .txh-redesign .navbar--dock.navbar-mobile-active .navbar__link:hover, .txh-redesign .navbar--dock.navbar-mobile-active .navbar__link:active { background: rgba(255, 255, 255, 0.08); opacity: 1; } .txh-redesign .navbar--dock.navbar-mobile-active .navbar__actions { display: flex; order: 4; width: 100%; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); } .txh-redesign .navbar--dock.navbar-mobile-active .navbar__actions .btn { flex: 1; min-height: 46px; } .txh-redesign .navbar--dock.navbar-mobile-active.appear .navbar__links { opacity: 1; transform: none; } } /* --- Hamburger → X (main.js toggles .active on the button) --------- */ .txh-redesign .navbar__burger { position: relative; display: inline-block; width: 22px; height: 16px; } .txh-redesign .navbar__burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), top .3s var(--ease-out), opacity .2s var(--ease-out); } .txh-redesign .navbar__burger i:nth-child(1) { top: 0; } .txh-redesign .navbar__burger i:nth-child(2) { top: 7px; } .txh-redesign .navbar__burger i:nth-child(3) { top: 14px; } .txh-redesign .navbar__toggle.active .navbar__burger i:nth-child(1) { top: 7px; transform: rotate(45deg); } .txh-redesign .navbar__toggle.active .navbar__burger i:nth-child(2) { opacity: 0; } .txh-redesign .navbar__toggle.active .navbar__burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); } @media (max-width: 560px) { .txh-redesign .steps { grid-template-columns: 1fr; } } /* Footer placeholder wordmark (dark, on light footer) */ .txh-redesign .footer__wordmark { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 22px; letter-spacing: -0.4px; color: var(--color-ink-primary); } .txh-redesign .footer__wordmark em { font-style: normal; font-weight: var(--fw-regular); color: var(--color-accent-dark); } /* Mining contract tiers: 3 across the top, last row (Platinum/VIP) centered */ .txh-redesign .plan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); } .txh-redesign .plan-grid .plan-card { flex: 0 1 calc((100% - 2 * var(--space-6)) / 3); min-width: 260px; margin: 0; } @media (max-width: 860px) { .txh-redesign .plan-grid .plan-card { flex-basis: calc((100% - var(--space-6)) / 2); } } @media (max-width: 560px) { .txh-redesign .plan-grid .plan-card { flex-basis: 100%; } }