/* ========================================================================== Enter — retail operations guide (brand stylesheet) Single runtime stylesheet for the article document and the two support pages. Loaded from as a plain link, so styling never depends on the JavaScript bundle. Design tokens below are the source of truth for this static document and are mirrored into src/index.css + tailwind.config.ts for the Tailwind layer. Values are taken from Enter's own reference pages (white surfaces, charcoal ink, hairline borders, black pill controls, warm gradient brand mark). Every rule is scoped under body.article / body.support because Tailwind's preflight is injected after this file and resets heading sizes, link colour and list markers. Scoping wins on specificity regardless of load order. ========================================================================== */ :root { --background: 0 0% 100%; --foreground: 0 0% 10%; --primary: 0 0% 9%; --primary-foreground: 0 0% 100%; --muted: 30 14% 96%; --muted-foreground: 0 0% 42%; --border: 30 8% 88%; --input: 30 6% 78%; --ring: 18 87% 42%; --brand-orange: 28 100% 57%; --brand-pink: 318 90% 77%; --brand-yellow: 44 100% 75%; --gradient-brand: linear-gradient(145deg, hsl(var(--brand-pink)) 5%, hsl(var(--brand-orange)) 55%, hsl(var(--brand-yellow)) 100%); --radius: 0.625rem; --radius-media: 14px; --radius-panel: 12px; --radius-control: 9999px; --font-display: Manrope, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --shadow-soft: 0 16px 50px hsl(var(--foreground) / 0.07); --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); --header-h: 64px; /* measured sticky header height */ } /* ---------------------------------------------------------------- base --- */ html { scroll-behavior: auto; } body.article, body.support { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; } body.article h1, body.article h2, body.article h3, body.article h4, body.support h1, body.support h2, body.support h3, body.support h4 { font-family: var(--font-display); line-height: 1.18; letter-spacing: -0.03em; font-weight: 620; color: hsl(var(--foreground)); } body.article p, body.support p { margin: 18px 0; } body.article ol, body.article ul, body.support ol, body.support ul { margin: 18px 0; padding-left: 1.35em; } body.article ol, body.support ol { list-style: decimal; } body.article ul, body.support ul { list-style: disc; } body.article li, body.support li { margin: 8px 0; } body.article strong, body.support strong { font-weight: 600; } body.article a, body.support a { color: hsl(var(--foreground)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: hsl(var(--muted-foreground) / 0.45); transition: color var(--transition), text-decoration-color var(--transition); } body.article a:hover, body.support a:hover { color: hsl(var(--muted-foreground)); text-decoration-color: currentColor; } body.article a:focus-visible, body.support a:focus-visible, body.article summary:focus-visible, body.support summary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 4px; } body.article blockquote, body.support blockquote { margin: 24px 0; border-left: 2px solid hsl(var(--border)); padding-left: 20px; color: hsl(var(--muted-foreground)); } /* Anchor targets clear the sticky header (single offset: scroll-margin-top). */ body.article h2[id], body.article h3[id], body.article h4[id], body.article figure[id], body.article a[id], body.support h2[id], body.support h3[id] { scroll-margin-top: calc(var(--header-h) + 14px); } /* -------------------------------------------------------------- header --- */ body.article header, body.support header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 4vw; background: hsl(var(--background) / 0.92); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid hsl(var(--border)); } body.article .brand, body.support .brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.035em; text-transform: lowercase; color: hsl(var(--foreground)); text-decoration: none; } body.article .brand-mark, body.support .brand-mark { width: 22px; height: 28px; flex-shrink: 0; background: url("/brand/enter-mark.webp") center / contain no-repeat; } body.article .brand span:not(.brand-mark), body.support .brand span:not(.brand-mark) { margin-left: 9px; font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); } body.article header nav, body.support header nav { display: flex; gap: 22px; font-size: 13px; } body.article header nav a, body.support header nav a { color: hsl(var(--muted-foreground)); text-decoration: none; } body.article header nav a:hover, body.support header nav a:hover { color: hsl(var(--foreground)); } /* -------------------------------------------------------------- layout --- */ body.article .layout { display: grid; grid-template-columns: 190px minmax(0, 870px); gap: 70px; max-width: 1260px; margin: 0 auto; padding: 64px 35px 100px; } body.article aside { position: sticky; top: calc(var(--header-h) + 26px); align-self: start; font-size: 13px; line-height: 1.6; } body.article aside strong { display: block; margin-bottom: 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } body.article aside a { display: block; padding: 10px 0; color: hsl(var(--muted-foreground)); text-decoration: none; border-bottom: 1px solid hsl(var(--border)); } body.article aside a:hover { color: hsl(var(--foreground)); } body.article aside .meta { margin: 24px 0 16px; font-size: 11px; line-height: 1.7; color: hsl(var(--muted-foreground)); } body.article aside a[download] { display: inline-flex; align-items: center; padding: 8px 14px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-control); color: hsl(var(--foreground)); font-size: 12px; font-weight: 500; text-decoration: none; } body.article aside a[download]:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } body.article main { min-width: 0; } /* ---------------------------------------------------------------- type --- */ body.article .eyebrow { margin: 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } body.article h1 { max-width: 850px; margin: 0 0 24px; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; font-weight: 620; } body.article h1 + p { margin-bottom: 32px; font-size: 21px; line-height: 1.55; color: hsl(var(--muted-foreground)); } body.article h2 { margin: 72px 0 22px; padding-top: 26px; border-top: 1px solid hsl(var(--border)); font-size: 33px; } body.article h3 { margin: 44px 0 18px; font-size: 25px; } body.article h4 { margin: 34px 0 16px; font-size: 20px; } /* ------------------------------------------------------------ controls --- */ body.article .demo-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-control); color: hsl(var(--foreground)); font-size: 14px; font-weight: 500; text-decoration: none; } body.article .demo-link:hover { background: hsl(var(--muted)); border-color: hsl(var(--input)); color: hsl(var(--foreground)); text-decoration: none; } body.article .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 13px 22px; background: hsl(var(--primary)); border: 1px solid hsl(var(--primary)); border-radius: var(--radius-control); color: hsl(var(--primary-foreground)); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; } body.article .cta:hover { background: hsl(0 0% 20%); border-color: hsl(0 0% 20%); color: hsl(var(--primary-foreground)); text-decoration: none; } body.article .toplink { position: fixed; right: 20px; bottom: 18px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; background: hsl(var(--background) / 0.92); backdrop-filter: blur(10px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-control); color: hsl(var(--foreground)); font-size: 12px; font-weight: 500; text-decoration: none; } body.article .toplink:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); text-decoration: none; } /* ------------------------------------------------------------- figures --- */ body.article figure { margin: 28px 0 36px; } body.article figure a { display: block; overflow: hidden; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-media); } body.article figure img { display: block; width: 100%; max-width: 100%; height: auto; } body.article figcaption { padding: 11px 2px 0; font-size: 12px; line-height: 1.65; color: hsl(var(--muted-foreground)); } body.article figcaption span { font-weight: 600; color: hsl(var(--foreground)); } /* --------------------------------------------------------------- table --- */ body.article table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: 14px; line-height: 1.65; } body.article th { text-align: left; background: hsl(var(--muted)); font-weight: 600; } body.article td, body.article th { padding: 15px 16px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } /* ------------------------------------------------------- prompt panels --- */ body.article pre { position: relative; max-width: 100%; margin: 24px 0; padding: 52px 20px 20px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-panel); font-family: var(--font-mono); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; } body.article code, body.support code { font-family: var(--font-mono); } body.article p code, body.article li code, body.article td code, body.support p code, body.support li code { padding: 2px 5px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 0.85em; overflow-wrap: anywhere; } body.article .copy { position: absolute; top: 12px; right: 12px; padding: 6px 14px; background: hsl(var(--primary)); border: 1px solid hsl(var(--primary)); border-radius: var(--radius-control); color: hsl(var(--primary-foreground)); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background var(--transition), border-color var(--transition); } body.article .copy:hover { background: hsl(0 0% 20%); border-color: hsl(0 0% 20%); } body.article .copy:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* ------------------------------------------------------------
--- */ body.article details, body.support details { margin: 28px 0 44px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-panel); overflow: hidden; } body.article summary, body.support summary { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); cursor: pointer; list-style: none; transition: background var(--transition); } body.article summary::-webkit-details-marker, body.support summary::-webkit-details-marker { display: none; } body.article summary::after, body.support summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform var(--transition); } body.article details[open] summary::after, body.support details[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); } body.article summary:hover, body.support summary:hover { background: hsl(var(--muted)); } body.article details pre { margin: 0; border: 0; border-top: 1px solid hsl(var(--border)); border-radius: 0; } /* ------------------------------------------------------- footer / pages --- */ body.article footer, body.support footer { padding: 30px 4vw; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 12px; } body.support main { max-width: 950px; margin: 55px auto; padding: 0 30px 70px; } body.support h1 { font-size: 40px; margin: 0 0 18px; } body.support h1 + p { font-size: 17px; color: hsl(var(--muted-foreground)); } body.support h2 { margin: 52px 0 18px; padding-top: 24px; border-top: 1px solid hsl(var(--border)); font-size: 27px; } body.support table { display: block; max-width: 100%; overflow-x: auto; } /* ---------------------------------------------------------- responsive --- */ @media (max-width: 1000px) { body.article .layout { grid-template-columns: 1fr; max-width: 900px; gap: 26px; padding: 42px 25px 80px; } body.article aside { position: static; display: flex; flex-wrap: wrap; gap: 4px 15px; padding-bottom: 4px; } body.article aside strong { width: 100%; margin-bottom: 2px; } body.article aside a { border-bottom: 0; padding: 4px 0; } body.article aside .meta { width: 100%; margin: 14px 0 0; } body.article h2 { font-size: 30px; } } @media (max-width: 600px) { body.article, body.support { font-size: 16px; line-height: 1.7; } body.article header, body.support header { flex-wrap: wrap; row-gap: 6px; padding: 12px 18px; } body.article .brand, body.support .brand { font-size: 17px; gap: 8px; } body.article .brand-mark, body.support .brand-mark { width: 20px; height: 25px; } body.article .brand span:not(.brand-mark), body.support .brand span:not(.brand-mark) { display: none; } body.article header nav, body.support header nav { gap: 12px; font-size: 11px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } body.article .layout { padding: 30px 20px 70px; } body.article h1 { font-size: 36px; } body.article h1 + p { font-size: 18px; } body.article h2 { margin-top: 50px; font-size: 27px; } body.article h3 { font-size: 22px; } body.article h4 { font-size: 19px; } body.article td, body.article th { padding: 10px; font-size: 12px; } body.article pre { padding: 46px 14px 14px; border-radius: 10px; font-size: 12px; } body.article .copy { top: 10px; right: 10px; padding: 5px 11px; } body.article summary, body.support summary { padding: 14px 16px; font-size: 14px; } body.article figcaption { font-size: 11px; } body.article .demo-link, body.article .cta { padding: 10px 16px; font-size: 13px; } body.article .toplink { right: 12px; bottom: 12px; padding: 8px 12px; font-size: 11px; } body.support main { margin: 36px auto; padding: 0 20px 60px; } body.support h1 { font-size: 30px; } body.support h2 { font-size: 22px; } } @media print { body.article header, body.article aside, body.article .toplink, body.article .copy { display: none; } body.article .layout { display: block; padding: 0; } body.article, body.support { background: hsl(var(--background)); } body.article figure { break-inside: avoid; } body.article details { display: block; } }