/* ============================================================================= Cohessra base.css: reset, type roles, bands, buttons, the floating header pill, the segmented pill, the announcement bar, the footer, forms, motion base. Every value reads a token from tokens.css. Section styles live in sec-*.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; font-weight: 500; line-height: 1.3; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; display: block; } a { color: var(--link); } p { margin: 0 0 16px; text-wrap: pretty; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: var(--r-sm); } .band--dark :focus-visible, .band--anchor :focus-visible, .banner :focus-visible { outline-color: var(--ground); } ::selection { background: var(--orange); color: var(--ink); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 12px; top: -60px; z-index: 1200; background: var(--ink); color: var(--ground); padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top .18s ease; } .skip:focus { top: 12px; } /* ---- type roles ---------------------------------------------------------- */ .d1, .d2, .d3, .d4, .d-close { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; } .d1 em, .d2 em, .d3 em, .d4 em, .d-close em { font-style: italic; } .d1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: -.03em; } .d2 { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.03em; } .d2--big { font-size: var(--fs-h2big); } .d3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -.03em; } .d4 { font-size: 32px; line-height: 1.05; letter-spacing: -.02em; } .d-close { font-size: var(--fs-close); line-height: var(--lh-close); letter-spacing: -.03em; } .eyebrow { font: 500 14px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-70); margin: 0 0 16px; } .lead { font: 500 20px/1.3 var(--body); color: var(--ink-70); max-width: 44rem; margin: 24px 0 0; } .band--dark .eyebrow, .band--anchor .eyebrow, .band--dark .lead, .band--anchor .lead { color: var(--ink-soft); } /* ---- frame --------------------------------------------------------------- */ .wrap { width: min(100% - 2 * var(--gutter-x), var(--content)); margin-inline: auto; } .band { position: relative; padding-block: var(--band-pad); } .band--dark { background: var(--band); color: var(--ground); border-radius: var(--r-section); } .band--anchor { background: var(--anchor); color: var(--ground); border-radius: var(--r-section); } .band--card { background: var(--card); border-radius: var(--r-section); } [data-corners] { border-radius: var(--r-section); } .center { text-align: center; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .page-head { padding: 196px 0 var(--gap-xxl); } .page-head--center { text-align: center; } .page-head--center .lead { margin-inline: auto; } .byline { margin: 24px 0 0; color: var(--ink-70); } .byline a { color: var(--link); } .crumbs { margin: 0 0 32px; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 600; } .crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-50); } .crumbs a { color: var(--ink-70); text-decoration: none; display: inline-block; min-height: 24px; line-height: 24px; background: linear-gradient(var(--link), var(--link)) 0 calc(100% - 3px) / 0 2px no-repeat; transition: color .3s, background-size var(--dur-draw) var(--ease-rise); } .crumbs a:hover { color: var(--ink); background-size: 100% 2px; } .crumbs [aria-current] { color: var(--ink); line-height: 24px; } .link-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; } .link-list a { color: var(--ink); text-underline-offset: 4px; display: inline-block; min-height: 24px; } .band--pending { padding-block: 0; } /* ---- buttons (DETAILS device 1: the primary button) ---------------------------------- */ .btn { position: relative; isolation: isolate; overflow: hidden; --sweep: var(--cta-deep); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font: 600 16px/1 var(--body); padding: 16px 24px; color: var(--cta-ink); background: var(--cta); border: 2px solid var(--ink); border-radius: var(--r-sm); text-decoration: none; cursor: pointer; transition: transform .2s, color .3s; } .btn:hover { transform: scale(.98); } .btn--ghost { background: transparent; --sweep: var(--cta); } .btn--text { background: transparent; border-color: transparent; padding-inline: 4px; text-decoration: underline; text-underline-offset: 4px; } .band--dark .btn--ghost, .band--anchor .btn--ghost { color: var(--ground); border-color: var(--ground); } .btn--cta-ink { background: var(--ink); color: var(--ground); } .btn--cta-ink, .btn--dark { --sweep: var(--anchor); } /* an ink button has no deeper tint: it sweeps to the brand cobalt, cream label 11:1 */ .band--dark .btn--ghost, .band--anchor .btn--ghost, .cv .btn--ghost, .cl .btn--ghost, .fnd .btn--ghost, .co-q .btn--ghost { --sweep: var(--ground-18); } /* cream label on a dark panel: a cream wash keeps it above 6:1 */ .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn[disabled]:hover { transform: none; } /* ---- Cohessra's own hover (10 Nov 2026; replaces the template's per-letter wave): the button's fill SWEEPS in from the left edge in a deeper tint of its own fill, 280 ms ease-out; the label never moves and sits above the sweep. On leaving, the sweep wipes out to the right. The press scale(.98) above is kept. Text links draw a cobalt underline left to right (240 ms) and the chevron nudges 3 px. Off under reduced motion. ---- */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sweep); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-sweep) var(--ease-rise); } .btn:hover::before { transform: scaleX(1); transform-origin: left center; } .btn[disabled]::before, .btn[disabled]:hover::before, .btn--text::before { content: none; } .tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font: 600 16px/20.8px var(--body); color: inherit; text-decoration: none; } .tlink__chev { width: 20px; height: 20px; flex: none; } /* one text-link system for every family on the site (.tlink here, .tl on Products and Pricing, .co-tlink on Company); the label is the first span */ a:is(.tlink, .tl, .co-tlink) > span:first-child { padding-bottom: 3px; margin-bottom: -3px; text-decoration: none; background: linear-gradient(var(--uline), var(--uline)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-draw) var(--ease-rise); } a:is(.tlink, .tl, .co-tlink):hover > span:first-child { text-decoration: none; background-size: 100% 2px; } a:is(.tlink, .tl, .co-tlink, .dm-tlink) > svg { transition: transform var(--dur-draw) var(--ease-rise); } a:is(.tlink, .tl, .co-tlink, .dm-tlink):hover > svg { transform: translateX(3px); } /* the demo page's compare link sits in a sentence, so its underline stays (WCAG 1.4.1); on hover it deepens to cobalt */ a.dm-tlink > span:first-child { transition: text-decoration-color var(--dur-draw); } a.dm-tlink:hover > span:first-child { text-decoration-color: var(--link); } .band--dark, .band--anchor, .cl, .fnd, .co-q, .ba__frame, .cband { --uline: var(--ground); } /* a cobalt line would vanish on cobalt: cream on the dark panels (the home .cv panel's one link sits on a cream card, so it keeps cobalt) */ /* ---- announcement bar (DETAILS device 2): scrolls away, not fixed ---------------------- */ .banner { position: relative; z-index: 998; display: flex; justify-content: center; align-items: center; gap: 24px; padding: 22px 20px; min-height: 64.8px; background: var(--anchor); color: var(--ground); } .banner__msg { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; text-wrap: balance; } .banner__link { display: inline-flex; align-items: center; gap: 4px; color: var(--ground); font-weight: 600; line-height: 1.3; text-decoration: none; min-height: 24px; transition: opacity .3s; } .banner__link:hover { opacity: .8; } .banner .arrow { width: 16px; height: 16px; } /* ---- header: the floating pill (DETAILS device 1) --------------------------------------- */ .head { position: fixed; top: 16px; left: 0; right: 0; z-index: 999; padding-inline: 20px; transform: translateY(var(--banner-offset, 72px)); translate: 0 var(--hide-y, 0px); transition: translate .5s var(--ease-hide); pointer-events: none; } .head__pill { pointer-events: auto; position: relative; max-width: 1240px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 8px 8px 20px; background: var(--ground); border: 2px solid var(--card); border-radius: var(--r-nav); } .head__left { display: flex; align-items: center; gap: 24px; min-width: 0; } .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-height: 36px; } .brand__mark { width: 36px; height: auto; color: var(--brand); flex: none; } .brand__word { font-family: var(--wordmark); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -.02em; } .seg { display: flex; padding: 2px; background: var(--card); border-radius: var(--r-pill); } .seg__tab { display: flex; align-items: center; min-height: 32px; padding: 8px 14px; border-radius: 100rem; font: 600 15px/1 var(--body); color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .3s; } .seg__tab[aria-current] { background: var(--nav-active); } .nav { display: flex; align-items: center; gap: 12px; } .nav a:not(.btn) { font: 600 16px/1 var(--body); color: var(--ink-70); text-decoration: none; padding: 4px 2px; min-height: 24px; display: inline-flex; align-items: center; white-space: nowrap; background: linear-gradient(var(--link), var(--link)) 0 100% / 0 2px no-repeat; transition: color .3s, background-size var(--dur-draw) var(--ease-rise); } .nav a:not(.btn):hover, .nav a[aria-current] { color: var(--ink); } .nav a:not(.btn):hover { background-size: 100% 2px; } .nav__cta, .head__mcta { padding: 14px; white-space: nowrap; } .head__mcta { display: none; } /* "Who it's for" (check round 4, audit 9): a button in the nav, styled like its links, that opens a small panel of links (the five audience pages and Chicago). Wide: the panel floats under the pill's own edge; in the phone menu it expands in place. Opened by click, Enter, Space or ArrowDown (sec-shared.js). */ .nav__dd { position: relative; display: flex; align-items: center; } .nav__ddb { font: 600 16px/1 var(--body); color: var(--ink-70); background: linear-gradient(var(--link), var(--link)) 0 100% / 0 2px no-repeat; border: 0; border-radius: 0; margin: 0; padding: 4px 2px; min-height: 24px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; transition: color .3s, background-size var(--dur-draw) var(--ease-rise); } .nav__ddb:hover, .nav__ddb[aria-expanded="true"], .nav__ddb.is-current { color: var(--ink); } .nav__ddb:hover { background-size: 100% 2px; } .nav__chev { width: 14px; height: 14px; flex: none; transition: transform var(--dur-draw) var(--ease-rise); } .nav__ddb[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } .nav__panel { position: absolute; top: calc(100% + 30px); left: -16px; z-index: 5; min-width: 250px; list-style: none; margin: 0; padding: 8px; background: var(--ground); border: 2px solid var(--card); border-radius: var(--r-nav); box-shadow: var(--shadow-chip); } .nav__panel[hidden] { display: none; } .nav .nav__panel a:not(.btn) { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--r-sm); font: 600 16px/1.2 var(--body); color: var(--ink); background: none; white-space: nowrap; transition: background-color .2s; } .nav .nav__panel a:not(.btn):hover, .nav .nav__panel a:not(.btn):focus-visible { background: var(--card); } .nav__loc { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--card); } .burger { display: none; width: 44px; height: 44px; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink); cursor: pointer; place-items: center; } .burger__lines { position: relative; display: block; width: 22px; height: 14px; } .burger__lines span { position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .burger__lines span:nth-child(1) { top: 0; } .burger__lines span:nth-child(2) { top: 6px; } .burger__lines span:nth-child(3) { top: 12px; } .burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav__demo { display: none; } /* ---- forms (no backend, ever; form spec F1 to F5) ------------------------------------------ */ .contact-form { max-width: 560px; display: flex; flex-direction: column; gap: var(--gap); } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 15px; font-weight: 600; } .field input, .field textarea, .field select { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: var(--r-sm); border: 2px solid var(--ink-50); background: var(--ground); color: var(--ink); } .field textarea { resize: vertical; min-height: 120px; } .contact-form .btn { align-self: flex-start; } .form-note, .form-noscript { font-size: 15px; color: var(--ink-70); margin: 0; } .field__err { font-size: 15px; font-weight: 600; color: var(--err); margin: 0; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); } /* ---- FAQ list (phase 2 re-skins it into the two-panel device) ------------------------------- */ .faq__list { margin-top: 48px; display: grid; gap: 0; max-width: 56rem; } .faq__item { padding: 24px 0; border-top: 2px solid var(--card); } .faq__q { font-size: 28px; line-height: 1.1; margin: 0 0 12px; } .faq__a { margin: 0; color: var(--ink-70); } /* ---- footer ------------------------------------------------------------------------------------ */ /* the CREAM footer, dna/DETAILS-part-C.md device 17: olive product cards (612 x 170, r12, a 2px border that turns ink on hover), four link columns (298 each, gap 16), the logo row (bars cell + wordmark cell, gap 140), the bottom row. Heading, link and muted text sit at ink 70 where the template uses 50 / 60 (contrast, DEVIATIONS.json). */ .site-foot { background: transparent; color: var(--ink); padding-bottom: 50px; } .site-foot__inner { padding: 0; } .foot-top { padding-top: 80px; margin-bottom: 64px; } .foot-eyebrow { font: 500 14px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-70); margin: 0 0 16px; } .foot-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; } .foot-card { position: relative; display: flex; align-items: center; gap: 32px; padding: 8px 32px 8px 8px; background: var(--card); border: 2px solid transparent; border-radius: var(--r-12); transition: border-color .25s; } .foot-card:hover, .foot-card:focus-within { border-color: var(--ink); } .foot-card__tile { flex: none; display: grid; place-items: center; width: 150px; height: 150px; border-radius: var(--r-6); overflow: hidden; } .foot-card__tile--0 { background: var(--lilac); } .foot-card__tile--1 { background: var(--anchor); align-items: end; } .foot-tile__mark { width: 97px; height: auto; color: var(--ink); } .foot-tile__sheet { display: flex; flex-direction: column; gap: 8px; width: 108px; height: 119px; padding: 14px 12px; background: var(--ground); border-radius: var(--r-xs) var(--r-xs) 0 0; } .foot-tile__bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--card); } .foot-tile__bar--t { width: 46%; background: var(--ink-30); } .foot-tile__bar--s { width: 72%; } .foot-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .foot-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .foot-card__t { margin: 0; font: 600 16px/20.8px var(--body); } .foot-card__tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--ground); border-radius: var(--r-pill); background: var(--orange); color: var(--ink); font: 700 14px/1 var(--body); box-shadow: var(--shadow-chip); transform: rotate(-4deg); } .foot-card__d { margin: 0; font: 500 16px/20.8px var(--body); color: var(--ink-70); } .foot-card__l { align-self: flex-start; margin-top: 4px; color: var(--ink); } .foot-card__l::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-12); } /* the whole card is the link target, no nested anchors */ .foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .foot-col__h { font: 500 14px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-70); margin: 0 0 16px; } .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .foot-link { display: flex; align-items: center; gap: 8px; min-height: 24px; width: fit-content; color: var(--ink); text-decoration: none; font: 500 14px/18.2px var(--body); transition: color var(--dur-hover); } .foot-link:hover { color: var(--anchor); } .foot-chev { flex: none; width: 16px; height: 16px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .3s; } .foot-link:hover .foot-chev, .foot-link:focus-visible .foot-chev { opacity: 1; transform: none; } /* the Cohessra lockup (replaces the template's giant edge-to-edge wordmark row): the mark and "Cohessra" in Inter 600 on the left, their own line in EB Garamond italic on the right, one hairline above. Sizes are tokens (--fs-lock-name 36 to 64, --fs-lock-tag 24 to 32); the mark is an img as tall as the name. */ .foot-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--gap-l) var(--gap-xxl); padding-top: var(--gap-xl); margin-bottom: 40px; border-top: 1px solid var(--ink-10); } .foot-lock__brand { display: flex; align-items: center; gap: .3em; min-width: 0; font-size: var(--fs-lock-name); } .foot-lock__mark { height: 1em; width: auto; flex: none; } .foot-lock__name { margin: 0; font: 600 1em/1 var(--wordmark); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; } .foot-lock__tag { margin: 0; justify-self: end; max-width: 22em; font: italic 400 var(--fs-lock-tag)/1.0625 var(--display); letter-spacing: -.01em; text-align: right; color: var(--ink); text-wrap: balance; } .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 48px; } .foot-base__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font: 500 14px/18.2px var(--body); } .foot-base__muted { margin: 16px 0 0; font: 400 13px/16.9px var(--body); color: var(--ink-70); } .foot-base__r { text-align: right; } .foot-base__r .foot-base__row { justify-content: flex-end; } .foot-base__social { margin-top: 8px; } .foot-base__r .foot-base__social .foot-link { margin-left: 0; min-width: 24px; justify-content: center; } /* "X" alone is 10 px wide: every target stays 24 x 24 or more */ .foot-base__r .foot-link { margin-left: auto; } /* ---- motion: [data-rise] fades and rises in on a vertical-band scan (assets/js/site.js) ---------------- */ [data-rise] { opacity: .001; transform: translateY(var(--rise, var(--rise-y))); transition: opacity var(--dur-rise) var(--ease-rise) var(--rise-delay, 0s), transform var(--dur-rise) var(--ease-rise) var(--rise-delay, 0s); will-change: opacity, transform; } [data-rise="large"] { --rise: 36px; } [data-rise].is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-rise] { opacity: 1 !important; transform: none !important; } .head { translate: none !important; } /* the hover is an instant state change, never an animation */ .btn::before, a:is(.tlink, .tl, .co-tlink) > span:first-child, a:is(.tlink, .tl, .co-tlink, .dm-tlink) > svg, a.dm-tlink > span:first-child, .nav a:not(.btn), .nav__ddb, .nav__chev, .crumbs a { transition: none !important; } } html[data-motion="reduced"] [data-rise] { opacity: 1; transform: none; } html[data-motion="reduced"] .btn::before, html[data-motion="reduced"] a:is(.tlink, .tl, .co-tlink) > span:first-child, html[data-motion="reduced"] a:is(.tlink, .tl, .co-tlink, .dm-tlink) > svg, html[data-motion="reduced"] a.dm-tlink > span:first-child, html[data-motion="reduced"] .nav a:not(.btn), html[data-motion="reduced"] .crumbs a { transition: none; } /* ---- responsive: ONE nav breakpoint, --bp-nav = 991px, read by this file and by site.js ----------------------- */ @media (min-width: 992px) and (max-width: 1279px) { /* 992 to 1279: the pill (viewport less 40, 1240 at most) cannot hold the wordmark, the LedgerCare | ClientConnect pill, eight nav items (Support and Log in are back, check round 5, audit 0) and the button (about 1200 px of content), so the segmented pill folds away as it does under 992; the two products stay one click away under Products */ .seg { display: none; } } @media (max-width: 991px) { .head { padding-inline: 40px; } .head__pill { padding: 0 8px 0 16px; gap: 12px; min-height: 54px; max-width: none; } .seg { display: none; } .head__mcta { display: inline-flex; margin-left: auto; padding: 9.6px 8px; min-height: 34px; border-width: 1px; border-radius: var(--r-sm); font-size: 13px; line-height: 1; } .nav__cta { display: none; } .burger { display: grid; } .head.is-open .head__pill { border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .nav { position: absolute; top: 100%; left: -2px; right: -2px; background: var(--ground); border: 2px solid var(--card); border-top: 0; border-radius: 0 0 var(--r-nav) var(--r-nav); flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px 8px; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .4s var(--ease-rise), opacity .2s ease, visibility 0s linear .4s; } .nav.is-open { max-height: 80vh; opacity: 1; visibility: visible; overflow: auto; transition-delay: 0s; } .nav a:not(.btn) { font-size: 20px; line-height: 1.3; color: var(--ink); padding: 12px 12px 12px 0; border-bottom: 2px solid var(--card); display: block; background-image: none; } .nav__dd { display: block; border-bottom: 2px solid var(--card); } .nav__ddb { width: 100%; justify-content: space-between; font-size: 20px; line-height: 1.3; color: var(--ink); padding: 12px 12px 12px 0; background-image: none; min-height: 48px; } .nav__chev { width: 18px; height: 18px; } .nav__panel { position: static; min-width: 0; padding: 0 0 8px 16px; border: 0; border-radius: 0; box-shadow: none; background: none; } .nav .nav__panel a:not(.btn) { font-size: 18px; min-height: 44px; padding: 10px 12px 10px 0; border-radius: 0; white-space: normal; } .nav .nav__panel a:not(.btn):hover, .nav .nav__panel a:not(.btn):focus-visible { background: none; color: var(--link); } .nav__loc { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--card); } /* check round 5, audit 3: the rule between the five audiences and Chicago stays in the phone menu */ .banner { padding: 10px 20px; min-height: 36.8px; gap: 8px; } .banner__msg, .banner__link { font-size: 12px; line-height: 1.3; } .page-head { padding-top: 150px; } .foot-cards { grid-template-columns: 1fr; } .foot-card { gap: 16px; } } @media (max-width: 767px) { .head { padding-inline: 20px; } .foot-top { padding-top: 64px; } .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .foot-lock { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } .foot-lock__tag { justify-self: start; text-align: left; max-width: 16em; } .foot-card { flex-direction: column; align-items: flex-start; padding: 16px; border-radius: var(--r-md); } .foot-card__tile { width: 86px; height: 86px; border-radius: var(--r-xs); } .foot-tile__mark { width: 62px; } .foot-tile__sheet { width: 62px; height: 68px; padding: 8px 7px; gap: 5px; } .foot-card__body { gap: 8px; } .foot-card__l { margin-top: 0; } .foot-base__r { text-align: left; } .foot-base__r .foot-base__row { justify-content: flex-start; } .foot-base__r .foot-link { margin-left: 0; } .d4 { font-size: 28px; } } @media (min-width: 768px) { [data-corners] { border-radius: var(--r-corner); } } @media (max-width: 479px) { .head__pill { padding-left: 12px; } .brand__word { font-size: 17px; } .banner { padding: 12px 20px; } .foot-card__d { font-size: 14px; line-height: 18.2px; } } .nav__demo { color: var(--ink); } .nav__demo:hover, .nav__demo[aria-expanded="true"] { background: var(--card); } /* ============================================================================= sample values and the Demo notes (V2.1, the honest-samples device). Nothing on a page says "Draft" or "Sample". A sample value (content.SC) carries a small asterisk (.smp), and ONE small button lists every sample value: a 44px disc fixed bottom-left (it unfolds to "Demo notes" on hover, focus or open), or, where the nav collapses, an info button inside the header chip. build.py renders both triggers hidden and site.js shows them, so without JavaScript there is no button that does nothing (a