.qr-landing-shell { max-width: 1120px; } .qr-landing-skip { position: fixed; top: -100px; left: 12px; z-index: 10; padding: 12px; border: 2px solid var(--navy); background: var(--white); } .qr-landing-skip:focus { top: 12px; } .qr-landing-header { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; padding: 20px 32px; text-align: left; } .qr-landing-header .logo-tile { grid-row: 1 / 3; width: 64px; height: 64px; margin: 0; } .qr-landing-header .brand-wordmark { align-self: end; margin: 0; padding: 4px 8px; font-size: 30px; } .qr-landing-header .tag { margin: 0; align-self: start; padding: 4px 8px; font-size: 9px; letter-spacing: 1px; color: var(--cream); } .qr-breadcrumbs { padding: 16px 32px; border-bottom: 2px solid var(--cream); background: var(--white); } .qr-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; font: 15px/1.5 var(--font-code); } .qr-breadcrumbs li + li::before { content: '/'; margin-right: 8px; } .qr-hero { padding: 20px 32px 24px; border-bottom: 3px solid var(--navy); } .qr-hero > *, .qr-task-options, .qr-workflow li { min-width: 0; } .qr-eyebrow { margin-bottom: 12px; font: 10px/1.7 var(--font-display); text-transform: uppercase; letter-spacing: 1px; } .qr-hero h1 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.35; letter-spacing: 0; text-transform: none; } .qr-hero-copy { margin-bottom: 20px; font-size: 24px; line-height: 1.3; } .qr-generator { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; padding: 24px; border: 2px solid var(--navy); background: var(--white); box-shadow: 4px 4px 0 var(--blue); } .qr-generator form, .qr-quick-output { min-width: 0; } .qr-generator [hidden] { display: none !important; } .qr-landing [hidden] { display: none !important; } .qr-tool-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .qr-tab { position: relative; min-height: 44px; padding: 12px 24px; border: 2px solid var(--cream); color: var(--navy); background: var(--white); font: 11px/1.5 var(--font-display); cursor: pointer; } .qr-tab[aria-selected="true"] { border-color: var(--navy); color: var(--white); background: var(--navy); text-decoration: underline; text-underline-offset: 4px; } .qr-tab:hover { border-color: var(--blue); } .qr-key { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 4px; border: 2px solid var(--blue); color: var(--navy); background: var(--white); font: 11px/1.3 var(--font-code); } .qr-landing-button { position: relative; } body[data-shortcuts="primary"] [data-primary] > .qr-key, body[data-shortcuts="alt"] [data-alt] > .qr-key { display: flex; } .qr-options, .qr-payload { margin-top: 16px; border-top: 1px solid var(--cream); } .qr-options summary, .qr-payload summary { min-height: 48px; padding-block: 12px; font: 11px/1.6 var(--font-display); cursor: pointer; } .qr-option-body { padding-top: 8px; } .qr-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; } .qr-technical { font: 12px/1.5 var(--font-code); overflow-wrap: anywhere; } .qr-payload pre, .qr-reader pre { max-height: 280px; overflow: auto; padding: 12px; margin-block: 12px; border: 1px solid var(--cream); background: var(--sand); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 var(--font-code); } .qr-reader { padding: 24px; border: 2px solid var(--navy); background: var(--white); box-shadow: 4px 4px 0 var(--blue); } .qr-reader .qr-section-heading { margin-bottom: 24px; } .qr-reader h2 { margin-bottom: 12px; font: 16px/1.5 var(--font-display); text-transform: none; letter-spacing: 0; } .qr-reader .qr-section-heading p { font: 23px/1.3 var(--font-body); } .qr-inspect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; } .qr-inspect-card { min-width: 0; padding: 20px; border: 2px solid var(--cream); } .qr-inspect-card h3 { margin-bottom: 16px; font: 11px/1.5 var(--font-display); text-transform: none; } .qr-inspect-card .qr-note { margin-block: 12px; } .qr-inspect-card[data-drag="true"] { outline: 3px solid var(--blue); outline-offset: -3px; background: var(--sand); } .qr-hero .qr-step-heading { margin: 0 0 12px; font-size: 10px; line-height: 1.6; } .qr-quick-output { display: flex; align-items: stretch; flex-direction: column; } .qr-quick-preview { display: grid; place-items: center; width: 200px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 12px; border: 2px solid var(--cream); background: var(--white); } .qr-quick-preview:empty::before { content: 'QR preview'; font: 11px/1.6 var(--font-display); } .qr-quick-preview svg { display: block; width: 100%; height: auto; } .qr-quick-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; } .qr-quick-actions button { min-height: 48px; padding: 12px; cursor: pointer; } .qr-quick-actions button:disabled { opacity: .5; cursor: not-allowed; } .qr-quick-actions button:disabled:hover { color: var(--navy); background: var(--white); } .qr-quick-actions .qr-landing-primary:disabled:hover { color: var(--white); background: var(--navy); } #quick-status { margin-top: 12px; } #quick-status:empty { display: none; } .qr-more-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cream); } .qr-more-tools a { display: inline-flex; align-items: center; min-height: 44px; font: 20px/1.3 var(--font-body); } .qr-tools-note { margin-top: 4px; font: 18px/1.3 var(--font-body); } .qr-landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 12px 20px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font: 11px/1.5 var(--font-display); text-decoration: none; } .qr-landing-primary { color: var(--white); background: var(--navy); box-shadow: 4px 4px 0 var(--blue); } .qr-landing-button:hover { background: var(--blue); color: var(--white); } .qr-next-step { margin-top: 12px; font-size: 21px; line-height: 1.3; } .qr-entry-note { margin-top: 12px; font-size: 20px; line-height: 1.3; } .qr-task-options h2 { display: block; margin: 0 0 12px; font: 11px/1.7 var(--font-display); letter-spacing: 0; text-transform: none; } .qr-task-link { color: var(--navy); } .qr-task-link:hover { border-color: var(--navy); color: var(--navy); background: var(--sand); } .qr-task-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; font: 12px/1.6 var(--font-display); } .qr-task-copy { display: block; margin-top: 8px; font-size: 23px; line-height: 1.3; } .qr-workflow { padding: 28px 32px; border-bottom: 2px solid var(--cream); background: var(--white); } .qr-workflow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .qr-workflow li { padding-top: 16px; border-top: 2px solid var(--cream); } .qr-workflow b { display: block; margin-bottom: 8px; font: 10px/1.5 var(--font-display); } .qr-workflow li p { font-size: 23px; line-height: 1.3; } .qr-feature-section, .qr-faq, .qr-file-section, .qr-details-section { padding: 28px 32px; border-bottom: 2px solid var(--cream); } .qr-section-heading h2, .qr-file-section h2, .qr-faq > h2, .qr-bottom-cta h2, .qr-workflow h2, .qr-details-section h2 { display: block; margin: 0 0 20px; font-size: 21px; line-height: 1.5; letter-spacing: 0; text-transform: none; } .qr-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .qr-feature { min-width: 0; padding: 20px; border: 2px solid var(--navy); background: var(--white); } .qr-feature h3 { margin-bottom: 12px; font-size: 12px; line-height: 1.6; text-transform: none; } .qr-feature p { font-size: 23px; line-height: 1.3; } .qr-file-section { background: var(--white); } .qr-type-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; margin: 0; padding: 0; list-style: none; } .qr-type-list li { min-width: 0; padding-top: 12px; border-top: 2px solid var(--cream); } .qr-type-list strong { display: block; margin-bottom: 8px; font: 11px/1.6 var(--font-display); } .qr-type-list span { font-size: 23px; line-height: 1.3; } .qr-details-intro { margin-bottom: 20px; font-size: 25px; line-height: 1.3; } .qr-details-section details { border-top: 1px solid var(--cream); } .qr-details-section summary { min-height: 48px; padding: 16px 24px 16px 0; font-size: 24px; line-height: 1.3; cursor: pointer; } .qr-details-section details > div { padding-bottom: 20px; } .qr-details-section details p { font-size: 23px; line-height: 1.4; } .qr-details-section details p + p { margin-top: 12px; } .qr-faq > h2 { margin-bottom: 24px; } .qr-faq details { border-top: 1px solid var(--cream); } .qr-faq summary { min-height: 48px; padding: 16px 24px 16px 0; font-size: 24px; line-height: 1.3; cursor: pointer; } .qr-faq details p { padding: 0 0 20px; font-size: 23px; line-height: 1.4; } .qr-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; } .qr-bottom-cta p { font-size: 24px; line-height: 1.3; } .qr-notices { padding: 0 32px 24px; font: 13px/1.6 var(--font-code); } @media (max-width: 700px) { .qr-landing .page { padding: 12px 8px 32px; } .qr-landing .nav-strip { padding: 4px 12px; } .qr-landing .qr-breadcrumbs { padding: 16px; } .qr-landing-header { padding: 8px 16px; gap: 0 12px; } .qr-landing-header .logo-tile { width: 32px; height: 32px; align-self: center; } .qr-landing-header .brand-wordmark { font-size: clamp(18px, 4vw, 24px); letter-spacing: 1px; } .qr-landing-header .tag { display: none; } .qr-landing-header .logo-tile { grid-row: auto; } .qr-landing-header .brand-wordmark { align-self: center; } .qr-breadcrumbs { padding: 16px 20px; } .qr-hero { padding: 12px; } .qr-hero h1 { font-size: 20px; } .qr-hero-copy { margin-bottom: 16px; font-size: 22px; } .qr-generator { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; } .qr-generator .qr-type-picker { margin-bottom: 16px; } .qr-generator legend, .qr-hero .qr-step-heading { margin-bottom: 8px; } .qr-generator .qr-field { margin-bottom: 8px; } .qr-generator .qr-note { font-size: 19px; line-height: 1.25; } .qr-quick-preview { width: 112px; } .qr-quick-actions { margin-top: 8px; } .qr-tab { flex: 1; padding-inline: 12px; } .qr-inspect-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .qr-reader, .qr-inspect-card { padding: 16px; } .qr-task-link { padding: 0; } .qr-workflow, .qr-feature-section, .qr-faq, .qr-file-section, .qr-details-section, .qr-bottom-cta { padding: 24px 20px; } .qr-feature-grid, .qr-workflow ol { grid-template-columns: minmax(0, 1fr); gap: 16px; } .qr-type-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .qr-bottom-cta { align-items: flex-start; flex-direction: column; } .qr-notices { padding-inline: 20px; } } @media (max-width: 360px) { .qr-landing-header .brand-wordmark { font-size: 16px; } .qr-hero h1 { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { html:has(.qr-landing) { scroll-behavior: auto; } } @media print { @page { margin: 15mm; } body[data-print-code] { color: var(--navy); background: var(--white); } body[data-print-code] > :not(#print-sheet) { display: none !important; } body[data-print-code] #print-sheet:not([hidden]) { display: block !important; } #print-sheet > article { break-inside: avoid; } #print-sheet svg { display: block; max-width: 100%; margin-bottom: 8mm; } #print-sheet h2 { margin-bottom: 4mm; font: 14pt/1.4 var(--font-body); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; } #print-sheet pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 9pt/1.6 var(--font-code); } }