/*
Theme Name: Happn AI
Theme URI: https://happn-meet.com/
Author: Happn AI
Description: Editorial dark theme for the Happn AI companion chat brand.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: happnai
*/
:root{--hx-bg:#0f0f12;--hx-bg-2:#16161a;--hx-bg-3:#1c1c21;--hx-ink:#f4f1ee;--hx-mute:#a5a1ac;--hx-pink:#ec2b83;--hx-pink-dark:#c41a68;--hx-line:rgba(255,255,255,.09);--hx-serif:"Cormorant Garamond",Georgia,serif;--hx-sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;--hx-wrap:1180px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hx-bg);color:var(--hx-ink);font-family:var(--hx-sans);font-size:16px;line-height:1.75;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:var(--hx-pink);text-decoration:none}
a:hover{color:#ff5aa3}
h1,h2,h3,h4{font-family:var(--hx-serif);font-weight:300;line-height:1.12;letter-spacing:.02em;margin:0 0 .6em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.8rem,4vw,2.9rem)}
h3{font-size:1.45rem}
p{margin:0 0 1.15em}
.hx-wrap{width:100%;max-width:var(--hx-wrap);margin:0 auto;padding:0 22px}
.hx-eyebrow{font-family:var(--hx-sans);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--hx-pink);margin:0 0 14px}
.hx-lede{font-size:1.1rem;color:var(--hx-mute);max-width:64ch}
.hx-mute{color:var(--hx-mute)}
.hx-btn{display:inline-block;border:0;cursor:pointer;background:var(--hx-pink);color:#fff;font-family:var(--hx-sans);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:16px 34px;transition:background .25s ease,transform .25s ease}
.hx-btn:hover{background:var(--hx-pink-dark);color:#fff;transform:translateY(-2px)}
.hx-btn-ghost{background:transparent;border:1px solid var(--hx-line);color:var(--hx-ink)}
.hx-btn-ghost:hover{background:rgba(236,43,131,.14);border-color:var(--hx-pink);color:#fff}
.hx-head{position:sticky;top:0;z-index:60;background:rgba(15,15,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hx-line)}
.hx-head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.hx-logo{display:flex;align-items:center;gap:10px;color:var(--hx-ink);font-family:var(--hx-serif);font-size:1.5rem;letter-spacing:.08em}
.hx-logo svg{width:26px;height:26px;flex:0 0 26px}
.hx-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.hx-nav a{color:var(--hx-mute);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hx-nav a:hover,.hx-nav .current-menu-item>a{color:var(--hx-ink)}
.hx-burger{display:none;background:none;border:1px solid var(--hx-line);color:var(--hx-ink);padding:10px 12px;cursor:pointer;letter-spacing:.16em;font-size:.66rem;text-transform:uppercase}
.hx-hero{position:relative;padding:86px 0 70px;background:radial-gradient(120% 90% at 12% 0,#221a22 0,var(--hx-bg) 62%)}
.hx-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hx-hero h1{margin-bottom:20px}
.hx-hero h1 em{font-style:normal;color:var(--hx-pink)}
.hx-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hx-age{margin-top:26px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-mute)}
.hx-slider{position:relative;overflow:hidden;border:1px solid var(--hx-line);background:var(--hx-bg-2)}
.hx-slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hx-slide{flex:0 0 100%;position:relative}
.hx-slide img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hx-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;background:linear-gradient(to top,rgba(10,10,12,.94),rgba(10,10,12,0))}
.hx-slide-cap strong{display:block;font-family:var(--hx-serif);font-size:1.7rem;font-weight:400;letter-spacing:.04em}
.hx-slide-cap span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-mute)}
.hx-slider-nav{position:absolute;right:18px;top:18px;display:flex;gap:8px}
.hx-slider-nav button{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);background:rgba(15,15,18,.6);color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.hx-slider-nav button:hover{background:var(--hx-pink);border-color:var(--hx-pink)}
.hx-dots{position:absolute;left:24px;bottom:16px;display:flex;gap:7px}
.hx-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}
.hx-dots button[aria-current="true"]{background:var(--hx-pink);width:22px;border-radius:4px}
.hx-strip{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--hx-line);border-bottom:1px solid var(--hx-line)}
.hx-strip a{position:relative;display:block;overflow:hidden}
.hx-strip img{aspect-ratio:3/4;object-fit:cover;filter:grayscale(.35);transition:transform .5s ease,filter .5s ease}
.hx-strip a:hover img{transform:scale(1.06);filter:grayscale(0)}
.hx-strip span{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(to top,rgba(10,10,12,.9),transparent);color:#fff}
.hx-section{padding:78px 0}
.hx-section-alt{background:var(--hx-bg-2)}
.hx-section-head{max-width:70ch;margin:0 auto 46px;text-align:center}
.hx-two{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hx-card{background:var(--hx-bg-3);border:1px solid var(--hx-line);padding:32px 28px}
.hx-card h3{margin-bottom:.4em}
.hx-card p{margin:0;color:var(--hx-mute);font-size:.95rem}
.hx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hx-tile{position:relative;overflow:hidden;background:var(--hx-bg-3);border:1px solid var(--hx-line)}
.hx-tile img{aspect-ratio:3/4;object-fit:cover;transition:transform .6s ease}
.hx-tile:hover img{transform:scale(1.05)}
.hx-tile-body{padding:22px 24px 26px}
.hx-tile-body h3{margin:0 0 6px;font-size:1.5rem}
.hx-tile-body p{margin:0 0 16px;color:var(--hx-mute);font-size:.92rem}
.hx-tile-link{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.hx-faq{max-width:900px;margin:0 auto}
.hx-faq-item{border-bottom:1px solid var(--hx-line)}
.hx-faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;text-align:left;background:none;border:0;color:var(--hx-ink);font-family:var(--hx-serif);font-size:1.25rem;padding:22px 0;cursor:pointer}
.hx-faq-q span{color:var(--hx-pink);font-family:var(--hx-sans);font-size:1.4rem;line-height:1}
.hx-faq-a{display:none;padding:0 0 24px;color:var(--hx-mute);max-width:76ch}
.hx-faq-item.is-open .hx-faq-a{display:block}
.hx-crumbs{padding:26px 0 0;font-size:.74rem;letter-spacing:.1em;color:var(--hx-mute)}
.hx-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.hx-crumbs li:not(:last-child):after{content:"/";margin-left:10px;color:rgba(255,255,255,.25)}
.hx-crumbs a{color:var(--hx-mute)}
.hx-crumbs a:hover{color:var(--hx-pink)}
.hx-page{padding:34px 0 84px}
.hx-page-head{max-width:74ch;margin:0 0 44px}
.hx-prose{max-width:76ch;font-size:1.02rem}
.hx-prose h2{margin-top:2em}
.hx-prose h3{margin-top:1.6em}
.hx-prose ol,.hx-prose ul{color:var(--hx-mute);padding-left:22px}
.hx-prose li{margin-bottom:.7em}
.hx-profile{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.hx-profile-media{border:1px solid var(--hx-line);position:sticky;top:104px}
.hx-meta{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.hx-meta li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hx-line);padding-bottom:9px;font-size:.85rem;color:var(--hx-mute)}
.hx-meta strong{color:var(--hx-ink);font-weight:600}
.hx-form{background:var(--hx-bg-2);border:1px solid var(--hx-line);padding:32px 30px;margin-top:38px}
.hx-form h3{margin-bottom:.5em}
.hx-field{display:grid;gap:8px;margin-bottom:18px}
.hx-field label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hx-mute)}
.hx-field input,.hx-field textarea,.hx-field select{background:var(--hx-bg);border:1px solid var(--hx-line);color:var(--hx-ink);font-family:var(--hx-sans);font-size:.95rem;padding:13px 15px}
.hx-field input:focus,.hx-field textarea:focus{outline:0;border-color:var(--hx-pink)}
.hx-note{font-size:.78rem;color:var(--hx-mute);margin:14px 0 0}
.hx-cta{background:linear-gradient(135deg,#2a1522,#131316);border-top:1px solid var(--hx-line);border-bottom:1px solid var(--hx-line);padding:74px 0;text-align:center}
.hx-foot{background:#0b0b0e;border-top:1px solid var(--hx-line);padding:58px 0 34px}
.hx-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.hx-foot h4{font-family:var(--hx-sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--hx-mute);margin:0 0 16px}
.hx-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hx-foot a{color:var(--hx-mute);font-size:.92rem}
.hx-foot a:hover{color:var(--hx-ink)}
.hx-foot-base{margin-top:42px;padding-top:22px;border-top:1px solid var(--hx-line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.78rem;color:var(--hx-mute)}
.hx-skip{position:absolute;left:-9999px}
.hx-alert{background:rgba(236,43,131,.12);border:1px solid var(--hx-pink);padding:14px 18px;margin-bottom:22px;font-size:.9rem}
@media(max-width:1024px){.hx-hero-grid,.hx-two,.hx-profile{grid-template-columns:1fr}.hx-profile-media{position:static;max-width:460px}.hx-cards,.hx-grid{grid-template-columns:repeat(2,1fr)}.hx-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.hx-burger{display:block}.hx-nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--hx-bg-2);border-bottom:1px solid var(--hx-line);padding:18px 22px}.hx-nav.is-open{display:block}.hx-nav ul{flex-direction:column;gap:16px}.hx-cards,.hx-grid{grid-template-columns:1fr}.hx-section{padding:56px 0}.hx-hero{padding:54px 0 44px}.hx-foot-grid{grid-template-columns:1fr}}