/* ============================================================================ PARTNER PAGES — the one template for every "Become a Sarisarian" page (Chiran, 26 Oct 2026) Taken from the approved Partner Pages design (claude.ai artifact N25vbecaKuzjwhqDWgVy8M). Everything is scoped to .ssp so the Traveler theme's gold buttons and heading sizes never leak in. ============================================================================ */ .ssp{--v:#7700FF;--vt:#F3ECFF;--navy:#090920;--ink2:#4A4A5E;--mut:#6B6B7B;--line:#E6E4EE;--bg:#FAFAFA;--green:#237F00;--green-b:#30B300; background:var(--bg);color:var(--navy);font-family:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5} .ssp *,.ssp *::before,.ssp *::after{box-sizing:border-box} .ssp h1,.ssp h2,.ssp h3,.ssp p,.ssp ul,.ssp ol,.ssp figure{margin:0;padding:0;font-family:inherit} .ssp ul,.ssp ol{list-style:none} .ssp a{text-decoration:none} .ssp p,.ssp li,.ssp h1,.ssp h2,.ssp h3{text-wrap:pretty} .ssp b{font-weight:700} .ssp-ic{display:inline-flex;flex:none;line-height:0} .ssp-ic svg{width:var(--s);height:var(--s);display:block} /* hero */ .ssp-hero{background:linear-gradient(110deg,#16062E 0%,#3C0B72 42%,#7700FF 78%,#A44BFF 100%);color:#fff;padding:56px 24px 64px} .ssp-hero__in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px} .ssp .ssp-hero__crumb{font-size:14px;color:#E9DBFF} .ssp .ssp-hero__badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:600;color:#fff} .ssp .ssp-hero__h1{font-size:clamp(34px,4.4vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:700;color:#fff;text-wrap:balance;max-width:900px} .ssp .ssp-hero__sub{font-size:18px;line-height:1.65;color:#EFE6FF;max-width:640px} .ssp-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} .ssp .ssp-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:13px 24px;font-size:16px;font-weight:700;min-height:48px;display:inline-flex;align-items:center;gap:10px;background:transparent} .ssp .ssp-ghost:hover{color:#fff;background:rgba(255,255,255,.08)} /* THE MENU OVER THE BANNER (Chiran, 26 Oct 2026): "the main navigation always transparent, with a very small dark gradient, exactly like the homepage". The header (110px) sits over the top of the purple banner; the banner grows by that much so its words keep their place, and a soft shade sits behind the menu only. */ .ssp{--ss-hdr:110px} .ssp-hero{position:relative;padding-top:calc(var(--ss-hdr) + 56px)} .ssp-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--ss-hdr) * 1.6);pointer-events:none; background:linear-gradient(180deg,rgba(9,9,32,.62) 0%,rgba(9,9,32,.3) 45%,rgba(9,9,32,0) 100%)} .ssp-hero__in{position:relative;z-index:1} .admin-bar .ssp{--ss-hdr:142px} /* page column */ .ssp-main{max-width:1180px;margin:0 auto;padding:40px 24px 72px;display:flex;flex-direction:column;gap:28px} /* the section card: violet bar, uppercase title, muted line, separator */ .ssp-section{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 32px 32px 36px;display:flex;flex-direction:column;gap:20px;overflow:hidden} .ssp-section__bar{position:absolute;left:0;top:24px;width:4px;height:44px;border-radius:0 4px 4px 0;background:var(--v)} .ssp-section__head{display:flex;flex-direction:column;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--line)} .ssp .ssp-section__title{font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);line-height:1.3} .ssp .ssp-section__desc{font-size:15px;color:var(--mut)} .ssp-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start} .ssp-prose{display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.7;color:var(--navy)} .ssp .ssp-lead{font-size:22px;font-weight:700;line-height:1.35} .ssp .ssp-lead2{font-size:20px;font-weight:600;line-height:1.5} /* items and groups */ .ssp-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px} .ssp-group{display:flex;flex-direction:column;gap:4px;min-width:0} .ssp .ssp-group__title{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} .ssp-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid #F0EEF5} .ssp-item__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--vt);color:var(--v);flex:none} .ssp-item__txt{font-size:15px;line-height:1.5;color:var(--navy)} .ssp-item__name{font-weight:600} .ssp-item__note{display:block;font-size:13.5px;color:var(--mut);margin-top:2px} .ssp-opt{margin-left:8px;padding:2px 8px;border-radius:999px;background:#F2F2F5;color:var(--mut);font-size:12px;font-weight:600} .ssp-list2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px} .ssp-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start} .ssp-kind{border-radius:16px;border:1px solid var(--line);background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:4px} .ssp .ssp-kind__h{margin:0 0 6px;display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--navy)} .ssp-kind__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--vt);color:var(--v)} .ssp .ssp-kind__note{margin:0 0 4px;font-size:14px;line-height:1.55;color:var(--green);font-weight:600} .ssp-panel{padding:4px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line)} /* facts */ .ssp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} .ssp-fact{padding:20px 22px;border-radius:14px;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px} .ssp .ssp-fact__big{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.2} .ssp .ssp-fact__small{font-size:14px;line-height:1.5;color:var(--ink2)} /* questions: the itinerary page's plus / minus box */ .ssp-qa{border-top:1px solid var(--line);padding:14px 0} .ssp-qa:first-of-type{border-top:0;padding-top:4px} .ssp-qa summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;font-weight:600;color:var(--navy)} .ssp-qa summary::-webkit-details-marker{display:none} .ssp-qa summary::marker{content:''} .ssp-qa__box{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid #DCDCD9;background:#fff;color:var(--mut);transition:color .15s,border-color .15s,background .15s} .ssp-qa summary:hover .ssp-qa__box{color:var(--navy);border-color:#C9C9C4;background:var(--bg)} .ssp-qa summary:focus-visible{outline:2px solid var(--v);outline-offset:3px;border-radius:6px} .ssp-qa__minus{display:none} .ssp-qa[open] .ssp-qa__plus{display:none} .ssp-qa[open] .ssp-qa__minus{display:inline-flex} .ssp .ssp-qa__a{margin:10px 0 0 40px;font-size:15px;line-height:1.6;color:var(--ink2)} .ssp .ssp-checklist{list-style:decimal;margin:12px 0 0 40px;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.55;color:var(--ink2)} /* the worries, one card at a time */ .ssp-rotw{display:flex;flex-direction:column;gap:14px} .ssp-rot{position:relative;overflow:hidden;border-radius:16px;background:var(--bg);border:1px solid var(--line)} .ssp-rot,.ssp-rot__card{height:330px} .ssp-rot__card{padding:28px 30px;display:flex;flex-direction:column;justify-content:center} .ssp .ssp-rot__lbl{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .ssp .ssp-rot__q{font-size:19px;line-height:1.45;font-weight:700;color:var(--navy)} .ssp-rot__sep{display:block;width:40px;height:2px;border-radius:2px;background:#D9C4FF;margin:20px 0} .ssp .ssp-rot__a{font-size:17px;line-height:1.55;font-weight:600;color:var(--v)} .ssp-rot__track{animation:sspRot4 18s cubic-bezier(.65,0,.35,1) infinite} @keyframes sspRot4{0%,21%{transform:translateY(0)}25%,46%{transform:translateY(-20%)}50%,71%{transform:translateY(-40%)}75%,96%{transform:translateY(-60%)}100%{transform:translateY(-80%)}} .ssp-rot__dots{display:flex;gap:8px;justify-content:center} .ssp-rot__dots i{display:block;height:8px;width:8px;border-radius:999px;background:#D9C4FF;animation:sspRotDot 18s cubic-bezier(.65,0,.35,1) infinite} @keyframes sspRotDot{0%,22%{width:26px;background:#7700FF}25%,97%{width:8px;background:#D9C4FF}100%{width:26px;background:#7700FF}} .ssp-rotw:hover .ssp-rot__track,.ssp-rotw:hover .ssp-rot__dots i{animation-play-state:paused} .ssp-ticks{display:flex;flex-direction:column;gap:10px} .ssp-ticks li{display:flex;gap:10px;align-items:flex-start} .ssp-ticks__ic{color:var(--v);display:flex;margin-top:3px} /* the green promise: "Free to join. Free to list." as wide as the box */ .ssp-free{border-radius:24px;background:#fff;border:2px solid var(--green-b);padding:40px 36px;display:flex;flex-direction:column;gap:26px} .ssp-free__top{display:flex;flex-direction:column;gap:14px} .ssp .ssp-free__label{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .ssp-free__fit{container-type:inline-size} .ssp .ssp-free__fit h2{font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--navy);white-space:nowrap} .ssp-free__fit--3 h2{font-size:calc(100cqi / 16.75)} .ssp-free__fit--2 h2{font-size:calc(100cqi / 10.75)} .ssp .ssp-free__fit b{color:var(--green-b)} .ssp .ssp-free__p{font-size:18px;line-height:1.65;color:var(--ink2);max-width:820px} .ssp-free__notes{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--navy)} .ssp-free__note{display:inline-flex;gap:8px;align-items:center} .ssp-free__nic{color:var(--green);display:flex} /* who this is for */ .ssp-forwho{border-radius:20px;background:#F3FBEF;border:1px solid #CFEFC2;padding:32px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start} .ssp-forwho__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--green-b);color:#fff} .ssp-forwho__txt{display:flex;flex-direction:column;gap:10px} .ssp .ssp-forwho__txt h2{font-size:26px;font-weight:700;color:var(--navy);line-height:1.25} .ssp .ssp-forwho__txt p{font-size:17px;line-height:1.7;color:var(--navy);max-width:760px} .ssp .ssp-forwho__txt p.ssp-small{font-size:15px;color:var(--ink2)} .ssp .ssp-forwho__txt p.ssp-green{font-size:15px;color:var(--green)} /* would you like to become a Sarisarian? */ .ssp-sari{border-radius:24px;background:linear-gradient(135deg,#F6F0FF 0%,#FFFFFF 60%,#F3ECFF 100%);border:1px solid #E4D6FF;padding:48px 40px} .ssp-sari__in{display:flex;flex-direction:column;gap:16px;max-width:760px} .ssp .ssp-sari__h{font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em;font-weight:700;color:var(--navy);text-wrap:balance} .ssp-sari__box{padding:18px 20px;border-radius:16px;background:#fff;border:1px solid #E4D6FF} .ssp .ssp-sari__lbl{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v)} .ssp .ssp-sari__lead{font-size:20px;line-height:1.5;font-weight:600;color:var(--navy)} .ssp .ssp-sari__p{font-size:17px;line-height:1.7;color:var(--ink2)} .ssp-sari__list{display:flex;flex-direction:column;gap:10px;font-size:16px} .ssp-sari__list li{display:flex;gap:10px;align-items:center} .ssp-sari__list .ssp-ic{color:var(--v)} /* steps */ .ssp-steps{display:flex;flex-direction:column;gap:18px;max-width:760px} .ssp-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start} .ssp-step__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--vt);color:var(--v)} .ssp-step--last .ssp-step__ic{background:#EAF8E3;color:var(--green)} .ssp .ssp-step__n{margin:0 0 2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v)} .ssp .ssp-step--last .ssp-step__n{color:var(--green)} .ssp .ssp-step__t{margin:0 0 4px;font-size:19px;font-weight:700;color:var(--navy);line-height:1.3} .ssp .ssp-step__x{font-size:16px;line-height:1.6;color:var(--ink2);max-width:560px} .ssp-step .ssp-face{--s:48px} /* boxes, small cards */ .ssp-box{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--vt);border:1px solid #DCC8FF} .ssp-box__ic{color:var(--v);display:flex;margin-top:2px} .ssp .ssp-box__t{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--navy)} .ssp .ssp-box__x{font-size:15px;line-height:1.6;color:var(--ink2)} .ssp-box--gold{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:20px 22px;border-radius:16px;background:#FFF8E6;border-color:#FFE3A3} .ssp-box--gold .ssp-box__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#FFB700;color:var(--navy);margin:0} .ssp .ssp-box--gold .ssp-box__t{font-size:17px;margin-bottom:6px} .ssp .ssp-box--gold .ssp-box__x{line-height:1.65} .ssp-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .ssp-cards3 li{display:flex;gap:12px;padding:16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--navy)} .ssp-tone-v{color:var(--v);display:flex}.ssp-tone-amber{color:#B45309;display:flex}.ssp-tone-green{color:var(--green);display:flex} .ssp-yesno{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .ssp-yesno div{padding:18px 20px;border-radius:14px} .ssp-yes{background:#F3FBEF;border:1px solid #CFEFC2}.ssp-no{background:#FFF1F2;border:1px solid #FECDD3} .ssp .ssp-yesno .ssp-yn__t{margin:0 0 6px;font-size:15px;font-weight:700} .ssp .ssp-yes .ssp-yn__t{color:var(--green)}.ssp .ssp-no .ssp-yn__t{color:#B42318} .ssp .ssp-yesno .ssp-yn__x{font-size:15px;line-height:1.6;color:var(--navy)} .ssp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .ssp-chips li{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--navy)} .ssp-chips .ssp-ic{color:var(--v)} /* hub cards */ .ssp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .ssp .ssp-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--navy);transition:border-color .15s,box-shadow .15s} .ssp .ssp-card:hover{border-color:#C9AEF7;box-shadow:0 8px 24px -14px rgba(119,0,255,.45);color:var(--navy)} .ssp-card__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--vt);color:var(--v)} .ssp-card__t{font-size:19px;font-weight:700} .ssp-card__x{font-size:15px;line-height:1.55;color:var(--ink2)} .ssp-card__f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)} .ssp-card__f b{font-size:15px;color:var(--green)} .ssp-card__f span{font-size:14px;font-weight:700;color:var(--v);white-space:nowrap} /* money rows */ .ssp-rows{max-width:720px} .ssp .ssp-rows .ssp-group__title{margin-bottom:6px} .ssp-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)} .ssp-row__l{font-size:16px;color:var(--navy)} .ssp-row__n{display:block;font-size:13.5px;color:var(--mut);margin-top:2px} .ssp-row__a{font-size:17px;font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums} .ssp-row--strong .ssp-row__l{font-weight:700} .ssp-row--strong .ssp-row__a{font-size:20px;color:var(--v)} /* closing band */ .ssp-cta{border-radius:20px;background:var(--navy);color:#fff;padding:36px 32px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .ssp-cta>div:first-child{display:flex;flex-direction:column;gap:6px;max-width:620px} .ssp .ssp-cta h2{font-size:28px;font-weight:700;letter-spacing:-.01em;color:#fff} .ssp .ssp-cta p{font-size:16px;color:#CFCFE0} .ssp-cta__btns{display:flex;flex-wrap:wrap;gap:12px} .ssp .ssp-cta .ssp-ghost{border-color:rgba(255,255,255,.6)} /* phone and tablet */ @media (max-width:860px){ .ssp-2col,.ssp-groups,.ssp-list2,.ssp-split,.ssp-cards3,.ssp-yesno,.ssp-chips{grid-template-columns:minmax(0,1fr)} .ssp-section{padding:24px 20px 24px 24px} .ssp-free{padding:32px 22px} .ssp-sari{padding:36px 22px} .ssp-forwho{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ .ssp-rot,.ssp-rot__card{height:440px} .ssp-rot__card{padding:20px} .ssp .ssp-rot__q{font-size:18px} .ssp-free__fit--3 h2{font-size:calc(100cqi / 5.85)} .ssp-free__fit--2 h2{font-size:calc(100cqi / 5.5)} .ssp-free__fit h2>span{display:block} .ssp-hero{padding:calc(var(--ss-hdr) + 40px) 16px 48px} .ssp-main{padding:28px 16px 56px} } @media (prefers-reduced-motion: reduce){.ssp-rot,.ssp-rot__card{height:auto !important}.ssp-rot__track{animation:none}.ssp-rot__card:last-child{display:none}.ssp-rot__dots{display:none}} /* the approved animations: Become a Sarisarian button, the glowing word, the AI assistant's face */ /* "Become a Sarisarian" buttons (Chiran, 25 Oct 2026): the BUTTON is animated, not the word — the trip page's Apply button exactly: a light running round the pill's edge (2.6 s), a soft band of light sweeping across inside, a violet glow; faster on hover. */ @property --ss-apply-a{syntax:'';inherits:false;initial-value:0deg} .ssp .ss-apply{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:13px 28px;border-radius:999px;font-size:16px;font-weight:700;color:#fff !important;text-decoration:none;border:2px solid transparent;background:linear-gradient(135deg,#7700FF,#6A00E6) padding-box,conic-gradient(from var(--ss-apply-a),#7700FF 0deg,#B57BFF 40deg,#FFFFFF 90deg,#B57BFF 140deg,#7700FF 190deg,#7700FF 360deg) border-box;box-shadow:0 6px 20px -6px rgba(119,0,255,.65),0 0 0 4px rgba(119,0,255,.10);animation:ss-apply-edge 2.6s linear infinite;transition:transform .2s ease,box-shadow .2s ease} .ssp .ss-apply::before{content:"";position:absolute;z-index:-1;top:-20%;left:0;width:60%;height:140%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-18deg);animation:ss-apply-wave 2.6s ease-in-out infinite;pointer-events:none} .ssp .ss-apply:hover,.ssp .ss-apply:focus-visible{background:linear-gradient(135deg,#6600DB,#5A00C2) padding-box,conic-gradient(from var(--ss-apply-a),#6600DB 0deg,#B57BFF 40deg,#FFFFFF 90deg,#B57BFF 140deg,#6600DB 190deg,#6600DB 360deg) border-box;transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(119,0,255,.75),0 0 0 5px rgba(119,0,255,.14);animation-duration:1.4s;color:#fff} @keyframes ss-apply-edge{to{--ss-apply-a:360deg}} @keyframes ss-apply-wave{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(220%) skewX(-18deg)}} @media (prefers-reduced-motion: reduce){.ssp .ss-apply,.ssp .ss-apply::before{animation:none}} /* "Sarisarian" (Chiran, 25 Oct 2026): ONE calm animation for the whole word — a single band of light crosses it at 45°, bottom-left to top-right, a new pass every 4 s: about 3 s crossing the word at the slow speed, then a 1 s rest (Chiran 25 Oct) (the Apply button's wave), lighting the letters' outlines and their inside together, as one. Each letter keeps a thin outline in the same purple; a plain purple pill line sits under the word, not animated. SVG so the light can follow the letter shapes. */ .ssp .ss-word{display:inline-block;height:1em;width:4.8em;vertical-align:-.08em;overflow:visible;flex:none} .ssp .ss-word--line{height:1.12em;vertical-align:-.2em} .ssp .ss-word--u{width:6.56em} .ssp .ss-word text{font-family:inherit;font-weight:700;font-size:100px} .ssp .ss-word__fill{fill:#7700FF;filter:drop-shadow(0 5px 12px rgba(119,0,255,.30))} .ssp .ss-word__line{fill:none;stroke:#7700FF;stroke-width:1.6;stroke-linejoin:round} .ssp .ss-word--white .ssp .ss-word__fill{fill:#FFFFFF;filter:drop-shadow(0 4px 10px rgba(181,123,255,.45))} .ssp .ss-word--white .ssp .ss-word__line{stroke:#FFFFFF} .ssp .ss-word__band--l{animation:ssWordBand 4s ease-in-out infinite} .ssp .ss-word__band--u{animation:ssWordBandU 4s ease-in-out infinite} @keyframes ssWordBand{0%{transform:translateX(0)}74%,100%{transform:translateX(700px)}} @keyframes ssWordBandU{0%{transform:translateX(0)}74%,100%{transform:translateX(830px)}} @media (prefers-reduced-motion: reduce){.ssp .ss-word__band--l,.ssp .ss-word__band--u{animation:none;display:none}} .ssp-face{flex:0 0 var(--s);width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 15%,#9b45ff 0%,#7700FF 42%,#3a0a8c 78%,#090920 100%);animation:sspHalo 3.6s ease-in-out infinite} .ssp-face svg{width:80%;height:80%;overflow:visible} @keyframes sspHalo{0%,100%{box-shadow:0 0 0 0 rgba(155,69,255,.28),0 8px 22px -10px rgba(9,9,32,.55)}50%{box-shadow:0 0 0 calc(var(--s)*.09) rgba(155,69,255,0),0 0 calc(var(--s)*.35) rgba(155,69,255,.45)}} .ssp-face .spc-eye,.ssp-face .spc-look{transform-box:fill-box;transform-origin:center} .ssp-face .spc-eye__w{stroke:rgba(196,170,255,.9);stroke-width:5;stroke-linejoin:round;filter:drop-shadow(0 7px 6px rgba(20,0,60,.55)) drop-shadow(0 0 5px rgba(255,255,255,.25));animation:sspGlow 3s ease-out infinite} .ssp-face .spc-spread{transform-box:view-box;transform-origin:0 0;transform:scale(.1);opacity:0;animation:sspSpread 3s ease-out infinite} .ssp-face .spc-eye{animation:sspBlink 6s ease-in-out infinite} .ssp-face .spc-look{animation:sspNod 4s ease-in-out infinite} @keyframes sspNod{0%,100%{transform:translateY(0)}22%{transform:translateY(20px)}44%{transform:translateY(0)}62%{transform:translateY(-14px)}80%{transform:translateY(0)}} @keyframes sspBlink{0%,16.67%,20%,50%,53.33%,83.33%,86.67%,100%{transform:scaleY(1)}18.33%,51.67%,85%{transform:scaleY(.06)}} @keyframes sspSpread{0%,8%{transform:scale(.1);opacity:0}10%{opacity:1}27%{transform:scale(1.15);opacity:.9}32%,100%{transform:scale(1.25);opacity:0}} @keyframes sspGlow{0%,8%,34%,100%{filter:drop-shadow(0 7px 6px rgba(20,0,60,.55)) drop-shadow(0 0 5px rgba(255,255,255,.25)) brightness(1)}20%{filter:drop-shadow(0 7px 6px rgba(20,0,60,.55)) drop-shadow(0 0 16px rgba(255,255,255,.95)) brightness(1.12)}} @media (prefers-reduced-motion: reduce){.ssp-face,.ssp-face .spc-eye,.ssp-face .spc-eye__w,.ssp-face .spc-spread,.ssp-face .spc-look{animation:none}} /* ============================================================================ ABOUT US (approved by Chiran, 26 Oct 2026 — design board "10. About us"). Same template, its own pieces. ============================================================================ */ /* banner: 394px, the same height as Fees, Trip and Places; the butterfly faded on the right (a photo comes later) */ .ssp-ab-hero{position:relative;overflow:hidden;height:calc(394px + var(--ss-hdr));padding:var(--ss-hdr) 24px 0;display:flex;align-items:center} .ssp-ab-hero .ssp-hero__in{position:relative;width:100%;gap:14px} .ssp .ssp-ab-hero__h1{font-size:clamp(44px,5.5vw,72px);line-height:1.05} .ssp .ssp-ab-hero .ssp-hero__sub{font-size:20px;line-height:1.5} .ssp-ab-fly{position:absolute;right:max(24px,calc(50% - 560px));top:50%;transform:translateY(-50%);width:260px;max-width:40%;opacity:.16} /* the promise: the line at 64px, one phrase per line; smaller only when the box is too narrow */ .ssp-ab-big{border-radius:24px;background:#fff;border:2px solid var(--v);padding:40px 36px;display:flex;flex-direction:column;gap:26px} .ssp .ssp-ab-big__lbl{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .ssp-ab-line{container-type:inline-size} .ssp .ssp-ab-line h2{font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--navy);white-space:nowrap;font-size:min(64px,calc(100cqi / 9.6))} .ssp-ab-line h2>span{display:block} .ssp .ssp-ab-line b{color:var(--v)} .ssp .ssp-ab-big__p{font-size:19px;line-height:1.65;color:var(--ink2);max-width:760px} /* one colour stripe (Chiran's own colours) filling the bottom of the box; it covers the box's border, so the outer edge takes the stripe's colour wherever it touches it */ .ssp-ab-stripe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -38px -42px;border-radius:0 0 24px 24px;overflow:hidden; background:linear-gradient(0deg,rgba(9,9,32,.22),rgba(9,9,32,0) 70%),linear-gradient(90deg,#5A00C8 0%,#7700FF 12.5%,#882ca0 37.5%,#D99A00 62.5%,#E86400 87.5%,#C85300 100%)} .ssp-ab-pt{height:180px;padding:28px 26px 24px;display:flex;flex-direction:column;gap:8px;color:#fff} .ssp-ab-pt__ic{display:block;height:34px;margin-bottom:10px;opacity:.6;color:#fff} .ssp-ab-pt__ic img{width:40px;height:34px;object-fit:contain;display:block} .ssp-ab-pt__ic svg{stroke-width:1.5} .ssp .ssp-ab-pt__t{font-size:21px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap} .ssp-ab-pt__x{font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);max-width:230px} /* who we are, why */ .ssp-ab-who{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center} .ssp .ssp-ab-lead{font-size:clamp(24px,2.6vw,30px);font-weight:700;line-height:1.3;letter-spacing:-.01em} .ssp .ssp-ab-lead--v{color:var(--v)} .ssp-ab-logo{display:grid;place-items:center;border-radius:20px;background:var(--v);aspect-ratio:4/3;max-width:100%} .ssp-ab-logo img{width:52%;height:auto;display:block} /* the 6 values */ .ssp-ab-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .ssp-ab-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:16px;background:var(--bg);border:1px solid var(--line)} .ssp-ab-card__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--vt);color:var(--v)} .ssp-ab-card>b{font-size:18px;color:var(--navy)} .ssp-ab-card>span:last-child{font-size:15px;line-height:1.6;color:var(--ink2)} /* how a trip works: one road, 4 stops (gold, violet, green, navy) */ .ssp-ab-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} .ssp-ab-road{position:absolute;left:32px;right:calc((100% - 84px) / 4 - 32px);top:30px;height:4px;border-radius:4px;background:linear-gradient(90deg,#FFB700,#7700FF 38%,#30B300 70%,#090920)} .ssp-ab-stop{--c:#7700FF;--f:#fff;position:relative;display:flex;flex-direction:column;gap:12px;min-width:0} .ssp-ab-stop--gold{--c:#FFB700;--f:#090920}.ssp-ab-stop--green{--c:#30B300}.ssp-ab-stop--navy{--c:#090920;--f:#FFB700} .ssp-ab-stop__node{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c);color:var(--f)} .ssp-ab-stop__txt{display:flex;flex-direction:column;gap:6px} .ssp-ab-stop__n{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--c)} .ssp-ab-stop__txt>b{font-size:20px;line-height:1.25;color:var(--navy)} .ssp-ab-stop__txt>span:last-child{font-size:15px;line-height:1.6;color:var(--ink2)} /* the people: colour tiles */ .ssp-ab-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .ssp-ab-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:24px;border-radius:20px;min-height:190px; --bgc:#FFF6DC;--fg:var(--navy);--sub:var(--ink2);--ibg:#FFB700;--ifg:var(--navy);background:var(--bgc);color:var(--fg)} .ssp-ab-tile--guide{grid-column:span 2;grid-row:span 2;--bgc:linear-gradient(150deg,#3C0B72 0%,#7700FF 70%,#A44BFF 100%);--fg:#fff;--sub:#EFE6FF;--ibg:rgba(255,255,255,.16);--ifg:#fff} .ssp-ab-tile--green{--bgc:#EDF9E6;--ibg:#30B300;--ifg:#fff} .ssp-ab-tile--navy{--bgc:#090920;--fg:#fff;--sub:#CFCFE0;--ibg:rgba(255,183,0,.16);--ifg:#FFB700} .ssp-ab-tile--sun{--bgc:#FFB700;--sub:#3A2A00;--ibg:rgba(9,9,32,.1)} .ssp-ab-tile__art{position:absolute;right:-20px;top:-10px;opacity:.14;color:#fff} .ssp-ab-tile__ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ibg);color:var(--ifg)} .ssp-ab-tile__txt{position:relative;display:flex;flex-direction:column;gap:6px} .ssp-ab-tile__txt>b{font-size:21px;line-height:1.2} .ssp-ab-tile__txt>span{font-size:15px;line-height:1.55;color:var(--sub)} .ssp-ab-chips{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:12px} .ssp-ab-chips span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:600;color:#fff} .ssp .ssp-ab-more a{color:var(--v);font-weight:700;font-size:15px} /* the festivals: 4 at a time, moving one place every 4 seconds (the timing is added by the page: one step per festival) */ .ssp-ab-rot{container-type:inline-size;overflow:hidden} .ssp-ab-track{--cw:calc((100cqi - 48px) / 4);display:flex;gap:16px} .ssp-ab-rot:hover .ssp-ab-track{animation-play-state:paused} .ssp-ab-fest{position:relative;flex:none;width:var(--cw);aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--navy)} .ssp-ab-fest>a,.ssp-ab-fest>a:hover{display:block;position:absolute;inset:0;color:#fff} .ssp-ab-fest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ssp-ab-fest__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,32,0) 35%,rgba(9,9,32,.88) 100%)} .ssp-ab-fest__when{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--v);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .ssp-ab-fest__txt{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:6px;color:#fff} .ssp-ab-fest__txt>b{font-size:20px;line-height:1.2} .ssp-ab-fest__txt>span{font-size:14px;line-height:1.5;color:#E6E6F0} /* closing band: "Find your trip" is a white pill (not the theme's gold button) */ .ssp .ssp-ab-btn{display:inline-flex;align-items:center;min-height:48px;padding:13px 26px;border-radius:999px;background:#fff;color:var(--v);font-size:16px;font-weight:700} .ssp .ssp-ab-btn:hover{color:var(--v);background:#F3ECFF} @media (min-width:861px) and (max-width:1100px){.ssp-ab-stripe{grid-template-columns:repeat(2,minmax(0,1fr))}.ssp-ab-track{--cw:calc((100cqi - 32px) / 3)}} @media (max-width:860px){ .ssp-ab-hero{padding:var(--ss-hdr) 20px 0} .ssp-ab-big{padding:28px 20px} .ssp-ab-stripe{grid-template-columns:minmax(0,1fr);margin:0 -22px -30px; background:linear-gradient(90deg,rgba(9,9,32,.18),rgba(9,9,32,0) 70%),linear-gradient(180deg,#5A00C8 0%,#7700FF 12.5%,#882ca0 37.5%,#D99A00 62.5%,#E86400 87.5%,#C85300 100%)} .ssp-ab-pt{height:auto;min-height:150px} .ssp-ab-who,.ssp-ab-cards,.ssp-ab-flow{grid-template-columns:minmax(0,1fr)} .ssp-ab-flow{gap:26px} .ssp-ab-road{display:none} .ssp-ab-stop{flex-direction:row;gap:18px;align-items:flex-start} .ssp-ab-stop__node{flex:none} .ssp-ab-stop:not(:last-child)::before{content:'';position:absolute;left:30px;top:32px;bottom:-58px;width:4px;border-radius:4px;background:var(--c)} .ssp-ab-people{grid-template-columns:repeat(2,minmax(0,1fr))} .ssp-ab-tile{min-height:0;padding:18px} .ssp-ab-tile--guide{grid-row:auto} .ssp-ab-track{--cw:calc((100cqi - 16px) / 2)} } @media (max-width:520px){.ssp-ab-track{--cw:78cqi}.ssp-ab-people{grid-template-columns:minmax(0,1fr)}.ssp-ab-tile--guide{grid-column:auto}} @media (prefers-reduced-motion: reduce){.ssp-ab-track{animation:none!important}.ssp-ab-rot{overflow-x:auto}.ssp-ab-fest[aria-hidden]{display:none}} /* ══ CONTENT PAGES (Chiran, 4 Nov 2026): the partner pages under Become a Sarisarian keep their purple top and their own height, gain his filled butterfly pattern (.ss-pat, shared in sarisara-chrome.css) and line the words up with the logo, not with the page's content column. */ .ssp-hero--pattern{overflow:hidden;padding-left:max(64px,calc(50% - 656px));padding-right:max(64px,calc(50% - 656px))} .ssp-hero--pattern .ssp-hero__in{max-width:none;margin:0} @media (max-width:900px){.ssp-hero--pattern{padding-left:16px;padding-right:16px}} /* ══ Discoverer interest form (6 Nov 2026) ══ — typed text 400 / 15px, Sarisara dropdown, violet focus, small pill. */ .ssp .ssdi { max-width: 860px; } .ssp .ssdi__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ssp .ssdi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; } .ssp .ssdi__f { margin: 0; display: flex; flex-direction: column; gap: 6px; } .ssp .ssdi__f--wide { grid-column: 1 / -1; } .ssp .ssdi__f label, .ssp .ssdi__l { font-size: 14px; font-weight: 600; color: var(--navy, #090920); } .ssp .ssdi__opt { font-weight: 400; color: #6b6b80; } .ssp .ssdi__f input[type="text"], .ssp .ssdi__f input[type="email"], .ssp .ssdi__f input[type="url"], .ssp .ssdi__f textarea { width: 100%; box-sizing: border-box; font: 400 15px/1.45 inherit; font-family: inherit; color: #090920; background: #fff; border: 1px solid #E4E1EE; border-radius: 12px; padding: 11px 14px; min-height: 46px; box-shadow: none; } .ssp .ssdi__f textarea { resize: vertical; } .ssp .ssdi__f input:focus, .ssp .ssdi__f textarea:focus { outline: none; border-color: #7700FF; box-shadow: 0 0 0 3px rgba(119,0,255,.14); } .ssp .ssdi__h { font-size: 13px; color: #6b6b80; line-height: 1.45; } .ssp .ssdi__f.is-bad input, .ssp .ssdi__f.is-bad textarea, .ssp .ssdi__f.is-bad .ssdi-dd__b, .ssp .ssdi__f.is-bad .ssdi__map { border-color: #FF0A1F; } .ssp .ssdi-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .ssp .ssdi-dd { position: relative; } .ssp .ssdi-dd__b { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 15px/1.45 inherit; font-family: inherit; color: #090920; background: #fff; border: 1px solid #E4E1EE; border-radius: 12px; padding: 11px 14px; min-height: 46px; cursor: pointer; } .ssp .ssdi-dd__b:focus-visible, .ssp .ssdi-dd__b[aria-expanded="true"] { border-color: #7700FF; box-shadow: 0 0 0 3px rgba(119,0,255,.14); } .ssp .ssdi-dd__ph { color: #8a8aa0; } .ssp .ssdi-dd__m { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; overflow: auto; background: #fff; border: 1px solid #E4E1EE; border-radius: 14px; box-shadow: 0 16px 40px rgba(9,9,32,.12); padding: 6px; } .ssp .ssdi-dd__m a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 15px; color: #090920; text-decoration: none; } .ssp .ssdi-dd__m a:hover { background: #F8F4FF; } .ssp .ssdi-dd__m a.is-on { background: #F0E5FF; color: #5C00CC; font-weight: 600; } .ssp .ssdi__map { height: 320px; border-radius: 14px; border: 1px solid #E4E1EE; overflow: hidden; background: #F3F1E7; } .ssp .ssdi__check { margin: 20px 0 0; font-size: 14px; color: #3a3a4d; } .ssp .ssdi__check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .ssp .ssdi__check input { accent-color: #7700FF; width: 18px; height: 18px; margin-top: 1px; flex: none; } .ssp .ssdi__check.is-bad { color: #FF0A1F; } .ssp .ssdi__msg { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; } .ssp .ssdi__msg--good { background: #F8F4FF; color: #090920; border-left: 4px solid #30B300; } .ssp .ssdi__msg--bad { background: #fff; color: #090920; border: 1px solid #FFD0D5; border-left: 4px solid #FF0A1F; } .ssp .ssdi__btn { margin-top: 18px; } .ssp .ssdi__btn:disabled { opacity: .7; cursor: wait; } .ssp .ssdi-soon { padding-top: 0; padding-bottom: 0; } @media (max-width: 720px) { .ssp .ssdi__grid { grid-template-columns: 1fr; } .ssp .ssdi__map { height: 260px; } } /* "Join the Discoverer list" is a PLAIN small pill (Chiran, 6 Nov 2026: no Become a Sarisarian moving light here; that effect belongs to the Become a Sarisarian buttons only). The small pill (Change many days size): 38px, 0 16px, 13.5px, 500, solid violet, white words. Pinned, because the parent theme puts every