/* ============================================================ ServeX — serve-common.css Loaded by header_global.tpl ONLY on serve pages, AFTER the global/uni stylesheets, so it wins the cascade. Everything is scoped under body.sx-theme: it overrides uni_*.css on serve pages and cannot leak onto any other pod page. Palette logic (deliberately the daylight sibling of Metta's dusk): TEAL = the house. Primary actions, structure, trust. CLAY = the hand. Warmth, invitation, the human offer. Ground is warm paper, not white -- a catalog you read at length. Fonts (Cormorant Garamond + DM Sans) are already loaded in the global , so this file loads none. NOTE: header_global.tpl does NOT load Bootstrap. Nothing in the serve templates may rely on Bootstrap classes; everything a serve page needs is defined here. ============================================================ */ body.sx-theme{ /* ground */ --paper:#fbf8f3; --paper-2:#ffffff; --paper-3:#f4efe6; /* ink */ --ink:#24211d; --ink-dim:#57514a; --muted:#8b8177; /* the house */ --teal:#09757a; --teal-deep:#065558; --teal-soft:#e6f1f0; /* the hand */ --clay:#c06a45; --clay-deep:#a2542f; --clay-soft:#f7e8df; /* structure */ --line:rgba(36,33,29,.11); --line-2:rgba(36,33,29,.06); --ok:#2f7d4f; --ok-soft:#e7f3ec; --warn:#b3261e; --warn-soft:#fbe9e7; /* type */ --serif:"Cormorant Garamond", Georgia, serif; --sans:"DM Sans", system-ui, -apple-system, sans-serif; /* metrics */ --maxw:1120px; --nav-h:66px; --r:16px; --r-sm:10px; --shadow-sm:0 1px 2px rgba(36,33,29,.05); --shadow:0 1px 2px rgba(36,33,29,.04), 0 10px 30px -20px rgba(36,33,29,.45); --shadow-lg:0 2px 4px rgba(36,33,29,.05), 0 24px 54px -26px rgba(36,33,29,.45); background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* neutralise any inherited
framing from uni_base on serve pages */ body.sx-theme main{max-width:none;width:auto;margin:0;padding:0;background:var(--paper);display:block} /* in-page anchors (#why, #how, #roles, #serve-*) must clear the sticky nav */ body.sx-theme{scroll-behavior:smooth} .sx-theme section[id],.sx-theme header[id],.sx-theme div[id^="serve-"]{scroll-margin-top:calc(var(--nav-h) + 18px)} @media(prefers-reduced-motion:reduce){body.sx-theme{scroll-behavior:auto}} .sx-theme *{box-sizing:border-box} .sx-theme img{max-width:100%;display:block} .sx-theme a{color:var(--teal);text-decoration:none;transition:color .2s} .sx-theme a:hover{color:var(--teal-deep)} .sx-theme h1,.sx-theme h2,.sx-theme h3,.sx-theme h4{ font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:0;color:var(--ink);margin:0; } .sx-theme p{margin:0 0 1.1rem} .sx-theme p:last-child{margin-bottom:0} .sx-theme em{font-style:italic} .sx-theme strong{font-weight:600} .sx-theme hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0} /* ---------- layout helpers ---------- */ .sx-theme .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .sx-theme .narrow{max-width:760px;margin-left:auto;margin-right:auto} .sx-theme .tight{max-width:620px;margin-left:auto;margin-right:auto} .sx-theme .center{text-align:center} @media(max-width:640px){.sx-theme .wrap{padding:0 20px}} .sx-theme .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)} .sx-theme .eyebrow.teal{color:var(--teal)} .sx-theme .label{display:block;margin-bottom:1rem} /* ---------- section bands ---------- */ .sx-theme section.band{padding:92px 0;position:relative} .sx-theme section.band.snug{padding:64px 0} .sx-theme .band.raised{background:var(--paper-3);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .sx-theme h1{font-size:clamp(2.6rem,6vw,4.2rem)} .sx-theme h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:1rem} .sx-theme h3{font-size:1.5rem;margin-bottom:.5rem} .sx-theme h4{font-size:1.2rem;margin-bottom:.4rem} .sx-theme .lead{font-size:1.15rem;color:var(--ink-dim);line-height:1.75} .sx-theme .lead.big{font-size:1.3rem;color:var(--ink)} .sx-theme .micro{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem} @media(max-width:640px){.sx-theme section.band{padding:64px 0}} /* ---------- buttons ---------- */ .sx-theme .btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:1rem;padding:.85rem 2rem;border-radius:44px;transition:.24s;cursor:pointer;border:1px solid transparent;text-align:center} .sx-theme .btn-lg{padding:1rem 2.4rem;font-size:1.05rem} .sx-theme .btn-teal{background:var(--teal);color:#fff;box-shadow:0 10px 26px -14px rgba(9,117,122,.75)} .sx-theme .btn-teal:hover{background:var(--teal-deep);color:#fff;transform:translateY(-2px)} .sx-theme .btn-clay{background:var(--clay);color:#fff;box-shadow:0 10px 26px -14px rgba(192,106,69,.75)} .sx-theme .btn-clay:hover{background:var(--clay-deep);color:#fff;transform:translateY(-2px)} .sx-theme .btn-ghost{border-color:var(--line);color:var(--ink-dim);background:var(--paper-2)} .sx-theme .btn-ghost:hover{border-color:var(--teal);color:var(--teal)} .sx-theme .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} /* ---------- cards ---------- */ .sx-theme .sx-card{background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 34px} .sx-theme .sx-card.flush{padding:0;overflow:hidden} .sx-theme .sx-card.lg{box-shadow:var(--shadow-lg)} @media(max-width:640px){.sx-theme .sx-card{padding:26px 22px}} /* small uppercase card label -- the volprof-style icon heading */ .sx-theme .sx-label{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:1.1rem} .sx-theme .sx-label i{font-size:.95rem} .sx-theme .sx-label.clay{color:var(--clay)} /* ---------- badges ---------- */ /* base carries a neutral look so an unmapped remote/status value still renders as a badge rather than bare text */ .sx-theme .sx-badge{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:.28rem .72rem;border-radius:30px;line-height:1.5; color:var(--ink-dim);background:var(--paper-3);border:1px solid var(--line)} .sx-theme .sx-badge-role{color:var(--clay);background:var(--clay-soft);border-color:rgba(192,106,69,.22)} .sx-theme .sx-badge-remote{color:var(--teal);background:var(--teal-soft);border-color:rgba(9,117,122,.2)} .sx-theme .sx-badge-local, .sx-theme .sx-badge-hybrid{color:#7a5b12;background:#f7efd9;border-color:rgba(160,120,20,.2)} /* ---------- notes / alerts ---------- */ .sx-theme .sx-note{border-radius:var(--r-sm);padding:.95rem 1.15rem;font-size:.95rem;border:1px solid transparent;margin-bottom:1.6rem} .sx-theme .sx-note-err{background:var(--warn-soft);border-color:rgba(179,38,30,.2);color:#7f1d18} .sx-theme .sx-note-err a{color:#7f1d18;text-decoration:underline} .sx-theme .sx-note-ok{background:var(--ok-soft);border-color:rgba(47,125,79,.2);color:#1f5735} /* ---------- form controls ---------- */ .sx-theme .sx-field{margin-bottom:1.35rem} .sx-theme .sx-field label,.sx-theme .sx-label-form{display:block;font-size:.92rem;font-weight:500;color:var(--ink-dim);margin-bottom:.45rem} .sx-theme .sx-field label .opt{color:var(--muted);font-weight:400} .sx-theme .sx-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} @media(max-width:600px){.sx-theme .sx-row{grid-template-columns:1fr}} .sx-theme input[type=text],.sx-theme input[type=email],.sx-theme input[type=url], .sx-theme textarea,.sx-theme select{ width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:.75rem .9rem;color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5;transition:.18s} .sx-theme textarea{min-height:110px;resize:vertical;line-height:1.7} .sx-theme select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2357514a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat;background-position:right .85rem center;background-size:15px 11px;padding-right:2.4rem} .sx-theme input:hover,.sx-theme textarea:hover,.sx-theme select:hover{border-color:#b9ada0} .sx-theme input:focus,.sx-theme textarea:focus,.sx-theme select:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(9,117,122,.12)} .sx-theme ::placeholder{color:#b6ada2;opacity:1} .sx-theme select option[value=""]{color:#b6ada2} /* signed-in identity chip on the sign-up form */ .sx-theme .sx-whoami{display:flex;align-items:center;gap:11px;margin-bottom:1.5rem} .sx-theme .sx-whoami .av{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.88rem;flex-shrink:0} .sx-theme .sx-whoami .nm{font-weight:600;color:var(--ink)} .sx-theme .sx-whoami .em{color:var(--muted);font-size:.9rem} .sx-theme .sx-fineprint{font-size:.78rem;color:var(--muted);line-height:1.6;text-align:center;margin-top:1rem} /* ---------- reveal on scroll ---------- */ .sx-theme .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease} .sx-theme .reveal.in{opacity:1;transform:none} .sx-theme .d1{transition-delay:.07s}.sx-theme .d2{transition-delay:.15s} .sx-theme .d3{transition-delay:.23s}.sx-theme .d4{transition-delay:.31s} @media(prefers-reduced-motion:reduce){.sx-theme .reveal{opacity:1;transform:none;transition:none}} /* ============================================================ HEADER (rendered by header_global.tpl, serve branch) Sticky rather than fixed: serve pages are long scrolling catalogs, and sticky avoids the first-child padding hack. ============================================================ */ .sx-theme .sx-nav{position:sticky;top:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center; justify-content:space-between;padding:0 32px;background:rgba(251,248,243,.92);backdrop-filter:blur(8px); border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} .sx-theme .sx-nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 22px -18px rgba(36,33,29,.6)} @media(max-width:640px){.sx-theme .sx-nav{padding:0 20px}} .sx-theme .sx-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)} .sx-theme .sx-brand:hover{color:var(--ink)} .sx-theme .sx-brand img{height:30px;width:30px;border-radius:50%;background:var(--paper-2);padding:2px;border:1px solid var(--line-2)} .sx-theme .sx-links{display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:400} .sx-theme .sx-links a{color:var(--ink-dim)} .sx-theme .sx-links a:hover{color:var(--ink)} .sx-theme .sx-cta{border:1px solid var(--teal);color:var(--teal)!important;padding:.45rem 1.1rem;border-radius:40px;font-weight:500;font-size:.86rem} .sx-theme .sx-cta:hover{background:var(--teal);color:#fff!important} .sx-theme .sx-account{position:relative;display:flex;align-items:center;gap:6px} .sx-theme .sx-avatar-btn{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:5px} .sx-theme .sx-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--paper-3)} .sx-theme .sx-avatar--initials{display:flex;align-items:center;justify-content:center;color:var(--teal);font-family:var(--sans);font-size:.82rem;font-weight:600} .sx-theme .sx-caret{color:var(--muted);font-size:.7rem;transition:transform .2s,color .2s} .sx-theme .sx-account.open .sx-caret{transform:rotate(180deg);color:var(--ink-dim)} .sx-theme .sx-signin{color:var(--ink-dim);font-size:.9rem} .sx-theme .sx-signin:hover{color:var(--ink)} .sx-theme .sx-menu{position:absolute;top:46px;right:0;min-width:190px;background:var(--paper-2);border:1px solid var(--line); border-radius:12px;padding:8px;display:none;box-shadow:0 18px 44px -18px rgba(36,33,29,.45)} .sx-theme .sx-account.open .sx-menu{display:block} .sx-theme .sx-menu a{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--ink-dim);font-size:.9rem} .sx-theme .sx-menu a:hover{background:var(--paper-3);color:var(--ink)} .sx-theme .sx-menu .sx-name{padding:.4rem .7rem;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2);margin-bottom:4px;font-family:var(--sans)} .sx-theme .sx-burger{display:none;background:none;border:0;color:var(--ink);font-size:1.45rem;cursor:pointer;line-height:1} @media(max-width:820px){ .sx-theme .sx-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:flex-start;gap:0; background:rgba(251,248,243,.99);border-bottom:1px solid var(--line);padding:8px 24px 18px;display:none;z-index:1000} .sx-theme .sx-links.open{display:flex} .sx-theme .sx-links a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line-2)} .sx-theme .sx-cta{margin-top:.6rem;border-bottom:1px solid var(--teal)!important} .sx-theme .sx-burger{display:block} } /* ============================================================ FOOTER (rendered by footer_global.tpl, serve branch) ============================================================ */ .sx-theme .sx-foot{border-top:1px solid var(--line);padding:34px 0 28px;background:var(--paper-3);margin-top:0} .sx-theme .sx-foot-grid{display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;align-items:center} .sx-theme .sx-foot .sx-brand{font-size:1.2rem;margin-bottom:0} .sx-theme .sx-foot-links{display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem} .sx-theme .sx-foot-links a{color:var(--ink-dim)} .sx-theme .sx-foot-links a:hover{color:var(--ink)} .sx-theme .sx-foot-base{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);color:var(--muted); font-size:.82rem;display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap} .sx-theme .sx-foot-base em{font-family:var(--serif);font-style:italic}