/* ============================================================ EuropShip shared page styles Used by /guide/*, /fulfillment/* and /call-center. Same token set as guide/cod-europe.html, meetings.html and sourcingrequest.html. Keep tokens in sync if they change. ============================================================ */ :root{ --page:#030304; --panel:#0b0b0d; --panel-2:#111114; --panel-3:#17171b; --ink:#f2f2f0; --ink-2:#9d9ca4; --ink-3:#6a6972; --border:rgba(242,242,240,0.08); --border-2:rgba(242,242,240,0.16); --orange:#fe7222; --amber:#fe8b4a; --good:#34d399; --bad:#f87171; --blue:#818cf8; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:110px; } body{ background:var(--page); color:var(--ink); font-family:-apple-system,"SF Pro Display",system-ui,"Segoe UI",sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100vh; } a{ color:inherit; text-decoration:none; } ::selection{ background:rgba(254,114,34,.3); } button{ font-family:inherit; } /* ambient glow + grid */ .bg{ position:fixed; inset:0; z-index:0; pointer-events:none; } .bg::before{ content:""; position:absolute; top:-320px; left:50%; transform:translateX(-50%); width:1100px; height:700px; border-radius:50%; background:radial-gradient(closest-side, rgba(254,114,34,.16), transparent 70%); } .bg::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(242,242,240,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(242,242,240,.025) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 25%, transparent 75%); } /* reading progress */ .prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:120; background:linear-gradient(90deg,var(--orange),var(--amber)); transition:width .1s linear; } /* top nav (scoped: the TOC is also a