/* ============================================================================ Meridian Dispatch — App CTA component styles (pairs with app-cta.js) Link this in on any page that uses the App CTA section: It styles BOTH the static (no-JS / pre-enhancement) feature list and the interactive carousel that app-cta.js builds. Everything is scoped under .appstory so it can't collide with a host page's styles. Depends only on the site-wide Google Fonts (Archivo, Lora, Space Mono). ========================================================================== */ section.appstory{position:relative;z-index:5;background:#FAF9F6;color:#16150f;border-top:1px solid rgba(0,0,0,.05)} .appstory .as-body{max-width:1060px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(22px,6vw,40px) clamp(56px,8vw,96px)} .appstory .as-head{text-align:center;max-width:780px;margin:0 auto clamp(26px,3.6vw,42px)} .appstory .as-eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#9a7b2e;margin-bottom:clamp(18px,2.4vw,26px)} .appstory .as-title{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,4vw,46px);line-height:1.04;color:#15140f} .appstory .as-title em{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:500} .appstory .as-standfirst{font-family:'Lora',Georgia,serif;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:#403d34;text-align:center;letter-spacing:0;max-width:600px;margin:0 auto} .appstory .as-standfirst b{font-weight:500;color:#16150f} .appstory .as-dash{height:0;border-top:1px dashed #cdc7b8;max-width:120px;margin:clamp(38px,5vw,60px) auto} .appstory .as-kicker{display:flex;align-items:center;gap:14px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#2f8fc4;margin-bottom:18px} .appstory .as-kicker::before{content:"";width:26px;height:1px;background:#2f8fc4} /* static (pre-enhancement / no-JS) feature list — readable and crawlable */ .appstory .appcar{max-width:1000px;margin:clamp(8px,2vw,20px) auto 0;outline:none} .appstory .appcar-static{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,6vw,68px)} .appstory .appcar-static li{max-width:640px;margin:0 auto;text-align:center;display:grid;gap:14px} .appstory .appcar-static .as-kicker{justify-content:center;margin-bottom:0} .appstory .appcar-static h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(23px,2.9vw,34px);line-height:1.05;color:#15140f} .appstory .appcar-static p{font-family:'Lora',Georgia,serif;font-size:clamp(15px,1.5vw,17.5px);line-height:1.62;color:#3a372f} .appstory .appcar-static img{width:100%;max-width:280px;margin:8px auto 0;border-radius:20px;box-shadow:0 24px 48px -28px rgba(0,0,0,.5)} .appstory .static-cta{text-align:center;margin-top:clamp(38px,5vw,58px)} /* once JS upgrades the carousel, the static list + its CTA step aside */ .appstory .appcar.enhanced .appcar-static,.appstory .appcar.enhanced .static-cta{display:none} /* carousel (built by JS) */ .appstory .appcar-stage{position:relative;height:clamp(508px,64vh,580px);touch-action:pan-y;border-radius:18px;overflow:hidden;border:1px solid #e6e0d3;background:#f0ece2} .appstory .appcar-stage::before{content:"";position:absolute;inset:0 -55%;z-index:0;background:url('images/app/u-hero.jpg') center/cover no-repeat;filter:grayscale(1) contrast(.92) brightness(1.04);opacity:.16;transform:translateX(var(--bgx,0px));transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform} .appstory .appcar-stage.dragging::before{transition:none} .appstory .appcar-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%,rgba(247,246,242,.30),rgba(247,246,242,.62))} .appstory .appcar-phone{position:absolute;top:50%;left:0;z-index:3;cursor:pointer;width:clamp(156px,18vw,194px);aspect-ratio:349/760;border-radius:30px;padding:6px;background:#15171d;box-shadow:0 0 0 1px rgba(0,0,0,.16),0 34px 60px -28px rgba(0,0,0,.6);transition:transform .62s cubic-bezier(.5,0,.2,1);will-change:transform} .appstory .appcar-screen{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#0A1230} .appstory .appcar-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease} .appstory .appcar-screen img.on{opacity:1} .appstory .appcar-text{position:absolute;top:0;height:100%;z-index:2;padding:clamp(8px,2vw,24px) 0;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .appstory .appcar-text.side-right{transform:translateX(20px)} .appstory .appcar-text.side-left{transform:translateX(-20px)} .appstory .appcar-text.on{opacity:1;transform:none;pointer-events:auto} .appstory .appcar-text .as-kicker{margin-bottom:16px} .appstory .appcar-text h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(23px,2.9vw,36px);line-height:1.04;margin-bottom:15px;color:#15140f} .appstory .appcar-text p{font-family:'Lora',Georgia,serif;font-size:clamp(15px,1.45vw,17.5px);line-height:1.6;color:#3a372f} /* table-of-contents tab nav */ .appstory .appcar-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:clamp(16px,2.6vw,34px);margin-top:clamp(26px,3.4vw,40px)} .appstory .appcar-tab{position:relative;display:inline-flex;align-items:baseline;gap:9px;background:none;border:0;padding:8px 0;cursor:pointer;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#9c968a;transition:color .25s} .appstory .appcar-tab .n{font-size:10px;color:#b6bcc4;transition:color .25s} .appstory .appcar-tab:hover{color:#15140f} .appstory .appcar-tab.on{color:#15140f} .appstory .appcar-tab.on .n{color:#2f8fc4} .appstory .appcar-tab::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:#2f8fc4;transition:right .35s ease} .appstory .appcar-tab.on::after{right:0} /* swipe arrows */ .appstory .appcar-edge{position:absolute;top:50%;z-index:4;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:#fff;opacity:.6;transition:opacity .25s;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))} .appstory .appcar-edge:hover{opacity:1} .appstory .appcar-edge svg{width:26px;height:26px} .appstory .appcar-edge.prev{left:clamp(6px,1.4vw,16px);animation:mdctaEdgeL 2.6s ease-in-out infinite} .appstory .appcar-edge.next{right:clamp(6px,1.4vw,16px);animation:mdctaEdgeR 2.6s ease-in-out infinite} @keyframes mdctaEdgeL{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-3px)}} @keyframes mdctaEdgeR{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}} /* download button */ .appstory .btn{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid transparent;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease} .appstory .btn svg{width:16px;height:16px} .appstory .btn:hover{transform:translateY(-1px)} .appstory .appcar-text .as-getapp{margin-top:clamp(16px,2vw,22px)} .appstory .btn-black{background:#0E0E10;color:#fff;font-size:15px;padding:14px 24px} .appstory .btn-black:hover{box-shadow:0 16px 40px rgba(0,0,0,.28)} .appstory .btn-black.hop{animation:mdctaJump .62s ease} @keyframes mdctaJump{0%{transform:translateY(0)}32%{transform:translateY(-9px)}58%{transform:translateY(0)}78%{transform:translateY(-3px)}100%{transform:translateY(0)}} /* phones: stacked card, mountain frozen, no edge arrows */ @media (max-width:720px){ .appstory .appcar-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,5vw,30px);padding:clamp(30px,7vw,44px) clamp(20px,5vw,32px)} .appstory .appcar-phone{position:static;transform:none!important;width:clamp(176px,50vw,206px)} .appstory .appcar-text{position:static;width:100%;max-width:460px;height:auto;opacity:1;transform:none;text-align:center;display:none} .appstory .appcar-text.on{display:flex} .appstory .appcar-text .as-kicker{justify-content:center} .appstory .appcar-edge{display:none} .appstory .appcar-nav{gap:clamp(18px,6vw,30px);margin-top:clamp(22px,5vw,32px)} .appstory .appcar-tab{padding:10px 4px} .appstory .appcar-tab .l{display:none} .appstory .appcar-tab .n{font-size:13px;letter-spacing:.12em} } @media (prefers-reduced-motion:reduce){ .appstory .appcar-phone{transition:none} .appstory .btn-black{animation:none} }