/* ============================================================ SPARK JOBS - "Deal Me In" shared tactile skin Load on any page + add class="deal" to to apply. ============================================================ */ .deal{ --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --bg:var(--cream-page); background:var(--cream-page);color:var(--navy); } .deal main{background:var(--cream-page)} .deal p{color:#46515f} .deal .lead{color:#46515f} .deal ::selection{background:var(--spark);color:#fff} .deal h1,.deal h2,.deal h3,.deal h4{color:var(--navy);letter-spacing:-.02em;-webkit-font-smoothing:antialiased} .deal strong{color:var(--navy)} /* Section backgrounds on cream */ .deal .section--paper{background:var(--cream-page)} .deal .section--white{background:var(--cream-page)} .deal .section--cream{background:linear-gradient(180deg,var(--cream-page),#f1ede1)} .deal .section--dark{background:var(--night)} .deal .section--dark h1,.deal .section--dark h2,.deal .section--dark h3{color:#fff} .deal .section--dark p{color:rgba(223,238,228,.74)} /* Eyebrow -> mono + spark tick */ .deal .eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--forest);font-weight:700;font-size:.74rem} .deal .eyebrow::before{width:8px;height:2px;width:8px;height:8px;background:var(--spark);border-radius:2px;transform:rotate(45deg)} .deal .eyebrow--center::before{display:inline-block} .deal .section--dark .eyebrow{color:var(--amber)} /* Tactile cards: hard offset navy shadow, 2.5px outline */ .deal .card,.deal .feature-card,.deal .step,.deal .plan,.deal .cta{ border:2.5px solid var(--navy);box-shadow:var(--shadow-hard);border-radius:22px} /* white bg on everything EXCEPT plans that carry their own colored background (featured/lifetime) */ .deal .card,.deal .feature-card,.deal .step,.deal .cta, .deal .plan:not(.plan--featured):not(.plan--lifetime){background:#fff} .deal .feature-card::after{display:none} .deal .feature-card:hover,.deal .step:hover{transform:translateY(-4px);box-shadow:10px 10px 0 var(--navy)} .deal .feature-card__icon{border:2.5px solid var(--navy);background:var(--cream);color:var(--forest);border-radius:14px} .deal .step__n{color:var(--spark);font-family:var(--font-mono)} .deal .step__bar{background:linear-gradient(90deg,var(--forest),var(--spark))} /* Buttons -> tactile */ .deal .btn{border:2.5px solid var(--navy)} .deal .btn--primary{background:var(--forest);color:#fff;box-shadow:var(--shadow-hard-sm)} .deal .btn--primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy)} .deal .btn--primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)} .deal .btn--spark{background:var(--spark);color:#fff;box-shadow:var(--shadow-hard-sm)} .deal .btn--ghost{background:#fff;color:var(--navy);border-color:var(--navy)} .deal .btn--ghost:hover{background:var(--cream);color:var(--navy)} .deal .btn--light,.deal .btn--outline-light{border-color:var(--navy)} .deal .btn--primary::before{content:"✦";position:absolute;top:-9px;right:-7px;font-size:.9rem;color:var(--spark);opacity:0;transform:scale(.4) rotate(-20deg);transition:.35s var(--ease-spring);z-index:2} .deal .btn--primary:hover::before{opacity:1;transform:scale(1) rotate(12deg)} /* Tags / chips */ .deal .tag{border:2px solid var(--navy);font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.7rem} .deal .tag--green{background:rgba(40,169,79,.14);color:var(--forest)} .deal .tag--spark{background:rgba(245,166,35,.18);color:var(--spark-700)} .deal .tag--blue{background:var(--blue-bg);color:var(--blue)} .deal .chip-lg{border:2px solid var(--navy);box-shadow:var(--shadow-hard-sm)} .deal .pill{border:2px solid var(--navy);background:#fff} /* Ticks */ .deal .ticks li::before{border:2px solid var(--navy)} /* Forms tactile */ .deal .input{border:2.5px solid var(--navy);border-radius:14px;background:#fff} .deal .input:focus{box-shadow:4px 4px 0 var(--forest);border-color:var(--navy)} .deal .form__status.is-ok{color:var(--forest)} /* Stats: solid forest, mono */ .deal .stat__num{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important; color:var(--forest)!important;font-family:var(--font-display)} .deal .section--dark .stat__num{color:var(--amber)!important} .deal .stat__label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem} /* Nav / footer solid (no glass) */ .deal .nav.is-scrolled{background:rgba(251,249,243,.96);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 2.5px 0 var(--navy)} .deal .nav__menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream-page)} .deal .nav__link{color:#46515f} .deal .nav__link:hover{color:var(--navy);background:rgba(30,42,56,.06)} .deal .nav__link.is-active{color:var(--forest)} .deal .footer{background:var(--navy)} /* keep footer text light on the dark footer (was clobbered by the global heading/paragraph overrides) */ .deal .footer h4{color:#fff} .deal .footer p{color:rgba(233,243,233,.66)} .deal .footer .backtotop{color:rgba(233,243,233,.7)} .deal .section--dark h4{color:#fff} .deal .footer__social a:hover{background:var(--spark);color:#3a2400} .deal .founder-link{color:var(--spark-400);font-weight:700;text-decoration:underline;text-underline-offset:2px} .deal .founder-link:hover{color:#fff} /* Section head spark accent line */ .deal .section-head .h2::after,.deal .section-head .h1::after{content:"";display:block;width:54px;height:4px;border-radius:3px; background:linear-gradient(90deg,var(--forest),var(--spark));margin-top:16px} .deal .section-head--center .h2::after,.deal .section-head--center .h1::after{margin-inline:auto} /* Marquee dots -> spark diamonds */ .deal .chip-lg .dot{border-radius:2px;transform:rotate(45deg)} /* ============================================================ Reusable Deal components (for subpages, kept simple & robust) ============================================================ */ .deal .mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-variant-numeric:tabular-nums} .deal .tag-mono{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--forest);font-weight:700} .deal .tag-mono::before{content:"";width:7px;height:7px;background:var(--spark);border-radius:2px;transform:rotate(45deg);flex:none} .deal .section--dark .tag-mono{color:var(--amber)} .deal .hardcard{background:#fff;border:2.5px solid var(--navy);border-radius:22px;box-shadow:var(--shadow-hard)} /* Split: media + copy */ .deal .dsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .deal .dsplit--rev .dsplit__media{order:2} @media(max-width:820px){.deal .dsplit{grid-template-columns:1fr;gap:34px}.deal .dsplit--rev .dsplit__media{order:0}} /* Real-people photo frame */ .deal .photo-frame{position:relative;border:2.5px solid var(--navy);border-radius:24px;box-shadow:var(--shadow-hard);overflow:hidden;background:var(--cream)} .deal .photo-frame img{display:block;width:100%;height:100%;object-fit:cover} .deal .photo-frame--tall{aspect-ratio:4/5} .deal .photo-frame--wide{aspect-ratio:3/2} .deal .photo-frame--sq{aspect-ratio:1/1} .deal .photo-badge{position:absolute;left:14px;bottom:14px;z-index:2;background:#fff;border:2px solid var(--navy);border-radius:12px; padding:7px 13px;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--navy);box-shadow:var(--shadow-hard-sm);display:inline-flex;align-items:center;gap:6px} .deal .photo-badge .d{width:8px;height:8px;border-radius:50%;background:var(--app-green)} .deal .photo-tilt{transform:rotate(-1.6deg)} .deal .photo-tilt2{transform:rotate(1.4deg)} /* Feature grid + cards */ .deal .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)} .deal .dgrid--2{grid-template-columns:repeat(2,1fr)} .deal .dgrid--4{grid-template-columns:repeat(4,1fr)} @media(max-width:920px){.deal .dgrid--4{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.deal .dgrid,.deal .dgrid--2,.deal .dgrid--4{grid-template-columns:1fr}} .deal .dcard{background:#fff;border:2.5px solid var(--navy);border-radius:20px;padding:26px 24px;box-shadow:var(--shadow-hard);transition:transform .3s var(--ease-spring),box-shadow .3s} .deal .dcard:hover{transform:translateY(-4px);box-shadow:10px 10px 0 var(--navy)} .deal .dcard__ic{width:52px;height:52px;border-radius:14px;border:2.5px solid var(--navy);display:grid;place-items:center;background:var(--cream);color:var(--forest);margin-bottom:15px} .deal .dcard__ic svg{width:26px;height:26px} .deal .dcard h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--navy);margin-bottom:7px;letter-spacing:-.01em} .deal .dcard p{font-family:var(--font-body);font-size:.95rem;color:#46515f;line-height:1.5} .deal .dcard__badge{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:5px 10px;border-radius:8px;border:2px solid var(--navy);background:var(--cream);color:var(--navy)} /* Overlapping avatar row (real people) */ .deal .people-row{display:flex;align-items:center} .deal .people-row img{width:46px;height:46px;border-radius:50%;border:3px solid var(--cream-page);object-fit:cover;margin-left:-14px;box-shadow:0 2px 8px rgba(15,45,28,.2)} .deal .people-row img:first-child{margin-left:0} .deal .people-row .more{width:46px;height:46px;border-radius:50%;border:3px solid var(--cream-page);margin-left:-14px;background:var(--forest);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.72rem} /* Testimonial / quote card */ .deal .quote-card{background:#fff;border:2.5px solid var(--navy);border-radius:22px;box-shadow:var(--shadow-hard);padding:28px 26px} .deal .quote-card .q{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--navy);line-height:1.35;letter-spacing:-.01em} .deal .quote-card .by{display:flex;align-items:center;gap:12px;margin-top:20px} .deal .quote-card .by img{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--navy);object-fit:cover} .deal .quote-card .by b{display:block;font-family:var(--font-body);font-weight:700;color:var(--navy);font-size:.95rem} .deal .quote-card .by span{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500)} /* Logo lockups (use the mark more) */ .deal .logo-strip{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-500);font-weight:700} .deal .logo-strip img{height:22px} .deal .logo-watermark{position:absolute;right:4%;bottom:6%;height:clamp(60px,9vw,110px);opacity:.06;z-index:0;pointer-events:none;mix-blend-mode:luminosity} .deal .section-head .h2::after,.deal .section-head--center .h2::after{content:none}