/* ============================================================ TRIPSORB — shared branded page styling Gradient background + glassmorphism cards, reused across content pages (about, contact, help) and as a soft backdrop on listing/detail/guide pages. Add `pagebg` to . ============================================================ */ body.pagebg, body.site{ background: radial-gradient(900px 520px at 10% -8%, rgba(255,91,65,.16), transparent 60%), radial-gradient(820px 600px at 102% 6%, rgba(20,33,61,.13), transparent 55%), radial-gradient(720px 700px at 50% 118%, rgba(45,156,142,.12), transparent 60%), linear-gradient(165deg,#fbf7f0 0%,#f4ede2 45%,#eef3f3 100%) !important; } /* Root is the footer navy, so any overscroll below the page reads as an extension of the footer rather than a blank strip. */ html{background:var(--ts-ink,#14213D)} /* min-height keeps very short pages full-height on tall screens; flow-root contains child margins so none can escape below the footer. (The real footer gap was the currency dropdown panel — fixed in ui-widgets.css.) */ body.site{min-height:100vh;display:flow-root} .glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border:1px solid rgba(255,255,255,.65); box-shadow:0 20px 55px -30px rgba(20,33,61,.5); border-radius:20px; } /* hero */ .pg-hero{padding:58px 0 22px;text-align:center} .pg-hero .badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,91,65,.12);color:var(--ts-coral);font-weight:800;font-size:12.5px;padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em} .pg-hero h1{font-family:var(--font-disp);font-weight:500;font-size:clamp(32px,5vw,46px);color:var(--ts-ink);margin:16px 0 10px;line-height:1.08} .pg-hero p{max-width:600px;margin:0 auto;color:var(--ts-slate);font-size:17px;line-height:1.6} /* layout */ .pg-wrap{max-width:900px;margin:0 auto;padding:14px 22px 84px} .pg-card{padding:30px 32px;margin-bottom:18px} .pg-card h2{font-family:var(--font-disp);font-weight:500;font-size:25px;color:var(--ts-ink);margin:0 0 14px} .pg-card p{color:var(--ts-ink);line-height:1.75;margin:0 0 13px;font-size:15.5px} .pg-card p:last-child{margin-bottom:0} .pg-lead{font-size:17px;color:var(--ts-slate)} /* feature grid */ .pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px} .pg-feat{padding:26px 24px} .pg-feat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,91,65,.16),rgba(255,91,65,.05));color:var(--ts-coral);font-size:23px;margin-bottom:14px} .pg-feat h3{font-size:17px;color:var(--ts-ink);margin:0 0 6px} .pg-feat p{font-size:14px;color:var(--ts-slate);margin:0;line-height:1.6} /* forms */ .pg-field{margin-bottom:15px} .pg-label{display:block;font-weight:700;font-size:13.5px;color:var(--ts-ink);margin:0 0 6px} .pg-input{width:100%;border:1px solid var(--ts-line);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;background:rgba(255,255,255,.85);box-sizing:border-box;color:var(--ts-ink)} .pg-input:focus{outline:none;border-color:var(--ts-coral);box-shadow:0 0 0 3px rgba(255,91,65,.12)} textarea.pg-input{resize:vertical;min-height:130px} /* faq */ .faq{padding:8px 32px} .faq details{border-bottom:1px solid var(--ts-line)} .faq details:last-child{border-bottom:none} .faq summary{cursor:pointer;list-style:none;padding:18px 2px;font-weight:700;font-size:16px;color:var(--ts-ink);display:flex;justify-content:space-between;align-items:center;gap:12px} .faq summary::-webkit-details-marker{display:none} .faq summary .chev{flex:none;color:var(--ts-coral);transition:transform .2s;font-size:20px} .faq details[open] summary .chev{transform:rotate(180deg)} .faq .ans{padding:0 2px 20px;color:var(--ts-slate);line-height:1.75;font-size:15px} /* small helpers */ .pg-note{text-align:center;color:var(--ts-slate);font-size:14px;margin-top:22px} .pg-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px} .pg-ok{background:#e8f7f0;border:1px solid #b6e6d2;color:#0a7d62;border-radius:14px;padding:14px 18px;font-size:15px;margin-bottom:18px;display:flex;align-items:center;gap:10px} .pg-err{background:#fdeeec;border:1px solid #f1c3bc;color:#b5302f;border-radius:14px;padding:14px 18px;font-size:15px;margin-bottom:18px} @media(max-width:760px){ .pg-grid{grid-template-columns:1fr} .pg-card{padding:24px 22px} .faq{padding:6px 22px} } /* ============================================================ Tactile depth: specialty chips + home careers band (v0.152.0) ============================================================ */ .pd-chip{box-shadow:var(--tac-up-sm,0 4px 11px -6px rgba(20,33,61,.26));transition:transform .14s ease,box-shadow .18s ease} .pd-chip:hover{transform:translateY(-1px);box-shadow:var(--tac-up,0 9px 20px -9px rgba(20,33,61,.32))} .pd-chip.on{box-shadow:var(--tac-gloss,inset 0 1px 0 rgba(255,255,255,.4)),0 8px 18px -8px rgba(255,91,65,.55)} .careers-home .ch-chips a, .careers-home .ch-job, .careers-home .ch-field{ box-shadow:var(--tacd-up,0 10px 24px -12px rgba(0,0,0,.55)),inset 0 1px 0 rgba(255,255,255,.07)!important; transition:transform .16s ease,box-shadow .2s ease,background .2s ease; } .careers-home .ch-chips a:hover, .careers-home .ch-job:hover, .careers-home .ch-field:hover{transform:translateY(-2px)} .careers-home .ch-btn.primary{box-shadow:var(--tac-gloss,inset 0 1px 0 rgba(255,255,255,.4)),0 12px 26px -10px rgba(255,91,65,.6)!important} .careers-home .ch-search{box-shadow:var(--tacd-in,inset 0 2px 8px rgba(0,0,0,.32))!important}