/* PCTS reference pages One stylesheet for all guide pages. If you'd rather use your existing site CSS, delete this file and swap the in each page's . Class names are prefixed .ref- so they won't collide with your app CSS. */ :root { --ink: #16202a; --ink-soft: #4a5a68; --paper: #ffffff; --panel: #f3f6f8; --rule: #d3dbe2; --accent: #0f4c81; --accent-d: #0a3559; --flag: #e8b10a; --flag-bg: #fdf6e0; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } body.ref { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.62; color: var(--ink); background: var(--paper); -webkit-text-size-adjust: 100%; } .ref-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; } /* Header */ .ref-top { border-bottom: 1px solid var(--rule); background: var(--paper); } .ref-top .ref-wrap { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; } .ref-top img { height: 30px; width: auto; } .ref-top a { color: var(--ink); text-decoration: none; font-weight: 600; } .ref-top nav { margin-left: auto; font-size: 15px; } .ref-top nav a { color: var(--accent); font-weight: 500; margin-left: 18px; } .ref-top nav a:hover { text-decoration: underline; } /* Breadcrumb */ .ref-crumb { font-size: 14px; color: var(--ink-soft); padding-top: 18px; } .ref-crumb a { color: var(--ink-soft); } /* Type */ .ref h1 { font-size: 2.15rem; line-height: 1.18; letter-spacing: -0.02em; margin: 14px 0 10px; font-weight: 700; } .ref h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.4em 0 0.6em; padding-top: 0.7em; border-top: 1px solid var(--rule); font-weight: 700; } .ref h3 { font-size: 1.08rem; margin: 1.8em 0 0.4em; font-weight: 700; } .ref p { margin: 0 0 1.05em; } .ref a { color: var(--accent); } .ref-lede { font-size: 1.14rem; color: var(--ink-soft); margin-bottom: 1.6em; } .ref-updated { font-size: 13px; color: var(--ink-soft); font-family: var(--mono); } /* Tables: the spec sheet is the point of these pages */ .ref-scroll { overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; } .ref table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; font-variant-numeric: tabular-nums; } .ref th, .ref td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; } .ref thead th { background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; border-bottom: none; position: sticky; top: 0; } .ref tbody tr:nth-child(even) { background: var(--panel); } .ref td.num, .ref th.num { font-family: var(--mono); font-size: 14px; white-space: nowrap; } .ref caption { caption-side: bottom; text-align: left; font-size: 13.5px; color: var(--ink-soft); padding-top: 10px; } /* Callout, used where a spec will bite you if you ignore it */ .ref-flag { border-left: 4px solid var(--flag); background: var(--flag-bg); padding: 14px 18px; margin: 1.6em 0; font-size: 15.5px; } .ref-flag strong { display: block; margin-bottom: 3px; } /* CTA into the calculator */ .ref-cta { border: 1px solid var(--rule); background: var(--panel); padding: 22px 24px; margin: 2.4em 0; border-radius: 4px; } .ref-cta h2 { border: none; padding: 0; margin: 0 0 8px; font-size: 1.2rem; } .ref-cta p { margin-bottom: 14px; } .ref-btn { display: inline-block; background: var(--accent); color: #fff !important; text-decoration: none; font-weight: 600; padding: 11px 22px; border-radius: 3px; } .ref-btn:hover { background: var(--accent-d); } /* FAQ */ .ref-faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; } .ref-faq summary { font-weight: 600; cursor: pointer; list-style: none; } .ref-faq summary::-webkit-details-marker { display: none; } .ref-faq summary::after { content: " +"; color: var(--accent); font-family: var(--mono); } .ref-faq details[open] summary::after { content: " \2212"; } .ref-faq details p { margin: 10px 0 0; } /* Related links */ .ref-related ul { list-style: none; padding: 0; margin: 0; } .ref-related li { border-bottom: 1px solid var(--rule); padding: 11px 0; } .ref-related a { font-weight: 600; text-decoration: none; } .ref-related a:hover { text-decoration: underline; } .ref-related span { display: block; font-size: 14.5px; color: var(--ink-soft); } /* Footer */ .ref-foot { border-top: 1px solid var(--rule); margin-top: 3.5em; padding: 22px 0 40px; font-size: 14.5px; color: var(--ink-soft); } .ref-foot a { color: var(--ink-soft); } /* Accessibility + responsive floor */ .ref a:focus-visible, .ref-faq summary:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; } @media (max-width: 620px) { body.ref { font-size: 16px; } .ref h1 { font-size: 1.65rem; } .ref-top nav a { margin-left: 12px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media print { .ref-top nav, .ref-cta { display: none; } .ref thead th { background: #fff; color: #000; border-bottom: 2px solid #000; } }