/* ============================================================================= PROVIDENCE MINING: MARKETING / PUBLIC PAGES Page-level styles built ONLY on design-system.css tokens (no new palette). Depends on: design-system.css (.ds-scope.ds-dark on ). ========================================================================== */ .pm-public{ background: radial-gradient(900px 500px at 85% -8%, rgba(252,1,80,.20), transparent 60%), radial-gradient(700px 500px at -10% 8%, rgba(175,1,44,.16), transparent 55%), var(--ds-dark-bg); min-height:100vh; overflow-x:hidden; } .pm-skip{ position:absolute; left:-999px; top:8px; z-index:2000; background:var(--ds-brand-500); color:#fff; padding:10px 16px; border-radius:var(--ds-radius-sm); } .pm-skip:focus{ left:16px; } .pm-hide-sm{ } img{ max-width:100%; } /* ---------- Navigation ---------- */ .pm-nav{ position:sticky; top:0; z-index:var(--ds-z-sticky); transition:background var(--ds-transition), border-color var(--ds-transition); border-bottom:1px solid transparent; } .pm-nav.is-scrolled{ background:rgba(10,7,16,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color:var(--ds-glass-line); } .pm-nav__inner{ max-width:var(--ds-container); margin-inline:auto; padding:14px var(--ds-gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--ds-space-4); } .pm-nav__brand{ flex:0 0 auto; } .pm-nav__brand img{ display:block; height:40px; width:auto; } .pm-show-sm{ display:none; } .pm-nav__links{ display:flex; align-items:center; gap:var(--ds-space-6); } .pm-nav__links .ds-navlink{ color:var(--ds-dark-ink-2); } .pm-nav__links .ds-navlink:hover{ color:#fff; } .pm-nav__actions{ display:flex; align-items:center; gap:var(--ds-space-3); } .pm-lang select{ background:var(--ds-glass); color:var(--ds-dark-ink-2); border:1px solid var(--ds-glass-line); border-radius:var(--ds-radius-pill); padding:8px 14px; font:inherit; font-size:var(--ds-text-sm); cursor:pointer; } .pm-lang select option{ color:#222; } .pm-nav__toggle{ display:none; flex-direction:column; gap:4px; width:42px; height:42px; align-items:center; justify-content:center; background:var(--ds-glass); border:1px solid var(--ds-glass-line); border-radius:var(--ds-radius-sm); cursor:pointer; } .pm-nav__toggle span{ width:18px; height:2px; background:#fff; border-radius:2px; transition:transform var(--ds-transition), opacity var(--ds-transition); } .pm-nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .pm-nav__toggle.is-open span:nth-child(2){ opacity:0; } .pm-nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- */ .pm-hero{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(56px,9vw,120px) 0 var(--ds-space-20); } /* Glass-building backdrop photo, kept faint so it reads as atmosphere not content */ .pm-hero::before{ content:""; position:absolute; inset:0; z-index:-2; background:url(../../images/txh-home.webp) center 20%/cover no-repeat; opacity:.22; } /* Symmetric scrim for the centered hero: a soft vignette + magenta glow that keeps the centered copy readable and melts the photo into the dark base */ .pm-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(130% 100% at 50% 42%, rgba(10,7,16,.58) 0%, rgba(10,7,16,.84) 100%), linear-gradient(0deg, var(--ds-dark-bg) 2%, rgba(10,7,16,0) 60%), radial-gradient(1100px 460px at 50% 0%, rgba(252,1,80,.14), transparent 62%); } /* Centered single-column hero */ .pm-hero__grid{ display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; max-width:820px; margin-inline:auto; } .pm-hero h1{ font-size:clamp(2.3rem,4.8vw,3.6rem); letter-spacing:var(--ds-tracking-tighter); margin:var(--ds-space-4) 0 var(--ds-space-5); } .pm-hero p{ font-size:var(--ds-text-md); color:var(--ds-dark-ink-2); max-width:54ch; margin-inline:auto; } .pm-hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ds-space-3); margin-top:var(--ds-space-8); } .pm-hero__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ds-space-6); margin-top:var(--ds-space-10); } .pm-hero__trust .k{ font-family:var(--ds-font-mono); font-weight:300; font-size:var(--ds-text-2xl); color:#fff; } .pm-hero__trust .l{ font-size:var(--ds-text-sm); color:var(--ds-dark-ink-3); } /* ---------- Clients marquee ---------- */ .pm-clients{ border-block:1px solid var(--ds-glass-line); padding:var(--ds-space-8) 0; } .pm-clients__label{ text-align:center; color:var(--ds-dark-ink-3); font-family:var(--ds-font-mono); font-size:var(--ds-text-xs); text-transform:uppercase; letter-spacing:var(--ds-tracking-label); margin-bottom:var(--ds-space-5); } .pm-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .pm-marquee__track{ display:flex; align-items:center; gap:var(--ds-space-16); width:max-content; animation:pm-scroll 34s linear infinite; } .pm-marquee img{ height:34px; opacity:.62; filter:grayscale(1) brightness(1.6); transition:opacity var(--ds-transition); } .pm-marquee img:hover{ opacity:1; } @keyframes pm-scroll{ to{ transform:translateX(-50%); } } /* ---------- Section scaffolding ---------- */ .pm-section{ padding:var(--ds-space-20) 0; } .pm-section--tight{ padding:var(--ds-space-16) 0; } .pm-head{ max-width:60ch; margin-bottom:var(--ds-space-12); } .pm-head--center{ margin-inline:auto; text-align:center; } .pm-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin:var(--ds-space-3) 0 var(--ds-space-3); } .pm-head p{ color:var(--ds-dark-ink-2); font-size:var(--ds-text-md); } /* ---------- Split (image + copy) ---------- */ .pm-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-space-16); align-items:center; } .pm-split--rev .pm-split__media{ order:2; } .pm-split__media img{ width:100%; border-radius:var(--ds-radius-xl); border:1px solid var(--ds-glass-line); } .pm-split h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:var(--ds-space-4); } .pm-split p{ color:var(--ds-dark-ink-2); } /* ---------- Feature grid ---------- */ .pm-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ds-gutter); } .pm-feature{ padding:var(--ds-space-8); } .pm-feature__icon{ width:52px; height:52px; border-radius:var(--ds-radius-md); display:grid; place-items:center; font-size:22px; color:var(--ds-brand-300); background:rgba(252,1,80,.12); border:1px solid var(--ds-glass-line); margin-bottom:var(--ds-space-5); } .pm-feature h5{ margin-bottom:var(--ds-space-2); } .pm-feature p{ color:var(--ds-dark-ink-2); font-size:var(--ds-text-base); margin:0; } /* ---------- Steps (how it works) ---------- */ .pm-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ds-gutter); counter-reset:step; } .pm-step{ padding:var(--ds-space-8); } .pm-step__n{ font-family:var(--ds-font-mono); color:var(--ds-brand-400); font-size:var(--ds-text-sm); letter-spacing:.06em; margin-bottom:var(--ds-space-4); } .pm-step h5{ margin-bottom:var(--ds-space-2); } .pm-step p{ color:var(--ds-dark-ink-2); margin:0; } /* ---------- Investment plans ---------- */ .pm-plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ds-gutter); } .pm-plan{ position:relative; padding:var(--ds-space-8) var(--ds-space-6); display:flex; flex-direction:column; } .pm-plan__tier{ font-family:var(--ds-font-mono); font-size:var(--ds-text-xs); letter-spacing:var(--ds-tracking-label); text-transform:uppercase; color:var(--ds-brand-300); } .pm-plan__range{ font-family:var(--ds-font-display); font-weight:600; font-size:var(--ds-text-xl); color:#fff; margin:var(--ds-space-2) 0 var(--ds-space-1); } .pm-plan__range sup{ font-size:var(--ds-text-xs); color:var(--ds-dark-ink-3); font-weight:400; letter-spacing:.05em; } .pm-plan__roi{ font-family:var(--ds-font-mono); font-weight:300; font-size:clamp(2.4rem,4vw,3rem); color:#fff; line-height:1; margin:var(--ds-space-4) 0; } .pm-plan__roi span{ font-size:var(--ds-text-base); color:var(--ds-dark-ink-3); } .pm-plan__list{ list-style:none; padding:0; margin:0 0 var(--ds-space-6); display:flex; flex-direction:column; gap:var(--ds-space-3); } .pm-plan__list li{ display:flex; justify-content:space-between; font-size:var(--ds-text-base); color:var(--ds-dark-ink-2); border-bottom:1px solid var(--ds-glass-line); padding-bottom:var(--ds-space-3); } .pm-plan__list li b{ color:#fff; font-weight:600; } .pm-plan .ds-btn{ margin-top:auto; } .pm-plan--featured{ border-color:rgba(252,1,80,.5); box-shadow:var(--ds-glass-inset), var(--ds-brand-glow); } .pm-plan__badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ds-brand-gradient); color:#fff; font-size:var(--ds-text-xs); font-weight:600; padding:4px 12px; border-radius:var(--ds-radius-pill); box-shadow:var(--ds-brand-glow); } /* ---------- Team ---------- */ .pm-team{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ds-gutter); } .pm-member{ overflow:hidden; text-align:center; } .pm-member__img{ position:relative; aspect-ratio:1/1; overflow:hidden; } .pm-member__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--ds-dur-slow) var(--ds-ease-out); } .pm-member:hover .pm-member__img img{ transform:scale(1.05); } .pm-member__social{ position:absolute; inset:auto 0 0 0; display:flex; gap:10px; justify-content:center; padding:12px; background:linear-gradient(0deg, rgba(10,7,16,.85), transparent); opacity:0; transition:opacity var(--ds-transition); } .pm-member:hover .pm-member__social{ opacity:1; } .pm-member__social a{ color:#fff; width:32px; height:32px; border-radius:50%; background:var(--ds-glass); display:grid; place-items:center; } .pm-member__body{ padding:var(--ds-space-5); } .pm-member__body h5{ margin-bottom:2px; } .pm-member__role{ color:var(--ds-brand-300); font-size:var(--ds-text-sm); } /* ---------- FAQ accordion ---------- */ .pm-faq{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-space-12); align-items:start; } .pm-faq__video{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--ds-radius-lg); } .pm-acc{ display:flex; flex-direction:column; gap:var(--ds-space-3); } .pm-acc__item{ border:1px solid var(--ds-glass-line); border-radius:var(--ds-radius-md); background:var(--ds-glass); box-shadow:var(--ds-glass-inset); overflow:hidden; } .pm-acc__head{ width:100%; text-align:left; background:none; border:0; cursor:pointer; color:#fff; font-family:var(--ds-font-display); font-weight:600; font-size:var(--ds-text-md); padding:var(--ds-space-5); display:flex; justify-content:space-between; align-items:center; gap:var(--ds-space-4); } .pm-acc__head::after{ content:"+"; font-size:22px; color:var(--ds-brand-400); transition:transform var(--ds-transition); } .pm-acc__item.is-open .pm-acc__head::after{ content:"+"; transform:rotate(45deg); } .pm-acc__body{ max-height:0; overflow:hidden; transition:max-height var(--ds-dur-slow) var(--ds-ease); } .pm-acc__item.is-open .pm-acc__body{ max-height:600px; } .pm-acc__body > div{ padding:0 var(--ds-space-5) var(--ds-space-5); color:var(--ds-dark-ink-2); } .pm-acc__body p{ color:var(--ds-dark-ink-2); } /* ---------- Contact ---------- */ .pm-contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--ds-space-12); align-items:start; } .pm-contact .ds-card{ background:var(--ds-glass); border-color:var(--ds-glass-line); } .pm-contact-info{ display:flex; flex-direction:column; gap:var(--ds-space-5); } .pm-contact-item{ display:flex; gap:var(--ds-space-4); align-items:flex-start; } .pm-contact-item .ic{ width:46px; height:46px; flex:0 0 46px; border-radius:var(--ds-radius-md); display:grid; place-items:center; background:rgba(252,1,80,.12); border:1px solid var(--ds-glass-line); color:var(--ds-brand-300); font-size:19px; } .pm-contact-item h6{ color:#fff; margin:0 0 2px; font-size:var(--ds-text-base); } .pm-contact-item span{ color:var(--ds-dark-ink-2); } .pm-formmsg{ display:none; margin-top:var(--ds-space-4); } .pm-formmsg.is-on{ display:flex; } /* ---------- Activity toast (social proof, preserved feature) ---------- */ .pm-toast{ position:fixed; left:18px; bottom:20px; z-index:var(--ds-z-toast); max-width:320px; padding:var(--ds-space-4); background:var(--ds-glass-2); border:1px solid var(--ds-glass-line); border-radius:var(--ds-radius-md); box-shadow:var(--ds-shadow-lg), var(--ds-glass-inset); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color:#fff; font-size:var(--ds-text-sm); display:flex; gap:10px; align-items:center; opacity:0; transform:translateY(12px); transition:opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); pointer-events:none; } .pm-toast.is-on{ opacity:1; transform:none; } .pm-toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--ds-success); flex:0 0 8px; box-shadow:0 0 0 4px rgba(30,224,172,.18); } /* ---------- Footer ---------- */ .pm-footer{ border-top:1px solid var(--ds-glass-line); padding:var(--ds-space-20) 0 var(--ds-space-8); margin-top:var(--ds-space-20); } .pm-footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:var(--ds-space-10); } .pm-footer__brand p{ margin-top:var(--ds-space-4); max-width:38ch; font-size:var(--ds-text-base); } .pm-footer__title{ color:#fff; font-size:var(--ds-text-sm); text-transform:uppercase; letter-spacing:var(--ds-tracking-label); margin-bottom:var(--ds-space-4); } .pm-footer__links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--ds-space-3); } .pm-footer__links a{ color:var(--ds-dark-ink-2); font-size:var(--ds-text-base); } .pm-footer__links a:hover{ color:var(--ds-brand-300); } .pm-social{ list-style:none; padding:0; margin:var(--ds-space-5) 0 0; display:flex; gap:10px; } .pm-social a{ width:38px; height:38px; border-radius:var(--ds-radius-sm); display:grid; place-items:center; color:#fff; background:var(--ds-glass); border:1px solid var(--ds-glass-line); transition:background var(--ds-transition); } .pm-social a:hover{ background:rgba(252,1,80,.2); } .pm-footer__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--ds-space-3); border-top:1px solid var(--ds-glass-line); margin-top:var(--ds-space-12); padding-top:var(--ds-space-6); font-size:var(--ds-text-sm); } /* ---------- Back to top ---------- */ .pm-totop{ position:fixed; right:20px; bottom:20px; z-index:var(--ds-z-sticky); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--ds-brand-gradient); box-shadow:var(--ds-brand-glow); opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--ds-transition); } .pm-totop.is-visible{ opacity:1; visibility:visible; transform:none; } /* ---------- Legal / prose pages ---------- */ .pm-legal{ padding:var(--ds-space-16) 0 var(--ds-space-12); } .pm-legal__head{ text-align:center; margin-bottom:var(--ds-space-12); } .ds-prose{ max-width:78ch; margin-inline:auto; color:var(--ds-dark-ink-2); font-size:var(--ds-text-md); line-height:1.75; } .ds-prose h1,.ds-prose h2,.ds-prose h3,.ds-prose h4{ color:#fff; margin:var(--ds-space-8) 0 var(--ds-space-3); } .ds-prose h1{ margin-top:0; } .ds-prose p,.ds-prose li{ color:var(--ds-dark-ink-2); } .ds-prose a{ color:var(--ds-brand-300); } .ds-prose ul,.ds-prose ol{ padding-left:1.3em; margin-bottom:var(--ds-space-5); } /* ---------- Reviews ---------- */ .pm-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ds-gutter); } .pm-review{ padding:var(--ds-space-8); } .pm-review__desc{ color:var(--ds-dark-ink-2); font-size:var(--ds-text-md); line-height:1.6; margin-bottom:var(--ds-space-5); } .pm-review__who{ display:flex; align-items:center; gap:var(--ds-space-3); } .pm-review__who img{ width:34px; height:26px; border-radius:4px; object-fit:cover; } .pm-review__who h3{ font-size:var(--ds-text-base); margin:0; color:#fff; } .pm-review__who small{ color:var(--ds-dark-ink-3); } /* ---------- Authentication ---------- */ .pm-auth{ display:flex; align-items:center; justify-content:center; padding:var(--ds-space-16) 0 var(--ds-space-20); min-height:72vh; } .pm-auth__card{ width:100%; max-width:452px; } .pm-auth__card .ds-card__body{ padding:var(--ds-space-8); } .pm-auth__head{ text-align:center; margin-bottom:var(--ds-space-8); } .pm-auth__head h1{ font-size:var(--ds-text-2xl); margin:var(--ds-space-4) 0 var(--ds-space-2); } .pm-auth__head p{ color:var(--ds-dark-ink-2); font-size:var(--ds-text-base); margin:0; } .pm-auth__mark{ width:52px; height:52px; margin:0 auto; border-radius:var(--ds-radius-md); display:grid; place-items:center; background:var(--ds-brand-gradient); box-shadow:var(--ds-brand-glow), var(--ds-glass-inset); color:#fff; font-size:22px; } .pm-auth__foot{ text-align:center; margin-top:var(--ds-space-6); color:var(--ds-dark-ink-2); font-size:var(--ds-text-base); } .pm-auth__row{ display:flex; justify-content:flex-end; margin-top:calc(var(--ds-space-2) * -1); margin-bottom:var(--ds-space-4); } .pm-auth__row a{ font-size:var(--ds-text-sm); } .pm-auth__check{ display:flex; align-items:flex-start; gap:var(--ds-space-3); margin-bottom:var(--ds-space-5); font-size:var(--ds-text-sm); color:var(--ds-dark-ink-2); } .pm-auth__check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--ds-brand-500); flex:0 0 18px; } .pm-auth__trust{ display:flex; justify-content:center; gap:var(--ds-space-5); margin-top:var(--ds-space-8); color:var(--ds-dark-ink-3); font-size:var(--ds-text-xs); } .pm-auth__trust span{ display:inline-flex; align-items:center; gap:6px; } .pm-auth .ds-alert{ margin-bottom:var(--ds-space-5); display:none; } .pm-auth .ds-alert.is-on{ display:flex; } /* Signup success modal (preserved ?snm welcome) */ .pm-modal{ position:fixed; inset:0; z-index:var(--ds-z-modal); background:rgba(10,7,16,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; padding:var(--ds-space-4); } .pm-modal__box{ max-width:420px; width:100%; text-align:center; padding:var(--ds-space-8); } .pm-modal__box img{ width:150px; margin:var(--ds-space-4) auto; } /* ---------- Reveal ---------- */ .pm-reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--ds-dur-slow) var(--ds-ease-out), transform var(--ds-dur-slow) var(--ds-ease-out); } .pm-reveal.is-in{ opacity:1; transform:none; } /* ============================ RESPONSIVE ============================ */ @media (max-width:1024px){ .pm-plans{ grid-template-columns:repeat(2,1fr); } .pm-team{ grid-template-columns:repeat(2,1fr); } .pm-features,.pm-steps{ grid-template-columns:1fr 1fr; } } @media (max-width:860px){ .pm-nav__links{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:rgba(10,7,16,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom:1px solid var(--ds-glass-line); padding:var(--ds-space-3); max-height:0; overflow:hidden; transition:max-height var(--ds-dur-slow) var(--ds-ease); } .pm-nav__links.is-open{ max-height:82vh; overflow-y:auto; padding:var(--ds-space-3); } .pm-nav__links .ds-navlink{ padding:14px var(--ds-space-3); border-radius:var(--ds-radius-sm); } .pm-nav__toggle{ display:flex; } .pm-hide-sm{ display:none; } .pm-show-sm{ display:block; } .pm-nav__brand img{ height:36px; } /* Login + language switcher live inside the hamburger menu on mobile */ .pm-nav__links .pm-lang--menu{ padding:6px var(--ds-space-3) 4px; } .pm-nav__links .pm-lang--menu select{ width:100%; } .pm-split,.pm-faq,.pm-contact{ grid-template-columns:1fr; gap:var(--ds-space-10); } .pm-split--rev .pm-split__media{ order:0; } /* Keep the faint backdrop subtle on mobile too */ .pm-hero::before{ opacity:.18; background-position:center 30%; } .pm-hero::after{ background: radial-gradient(140% 100% at 50% 40%, rgba(10,7,16,.5) 0%, rgba(10,7,16,.82) 100%), linear-gradient(0deg, var(--ds-dark-bg) 2%, rgba(10,7,16,0) 60%), radial-gradient(700px 380px at 50% 2%, rgba(252,1,80,.13), transparent 62%); } } @media (max-width:640px){ .pm-features,.pm-steps,.pm-plans,.pm-team,.pm-reviews,.pm-footer__grid{ grid-template-columns:1fr; } .pm-section{ padding:var(--ds-space-16) 0; } .pm-footer__bar{ justify-content:flex-start; } }