/* ========================================================================== iCore Digital — qr-code-generator.css Page stylesheet for /qr-code-generator.html Load order in (this file goes LAST, after your global CSS): mymain.css → header.css → footer.css → lead-form.css → qr-code-generator.css The tool's own styles are scoped under .qr-tool, so nothing here can leak into other pages. To change the tool's look, edit the colour variables in the block below. ========================================================================== */ /* ===================== COLOUR + FONT VARIABLES ===================== */ .qr-page { --ground: #ffffff; --paper: #f5f5f5; /* panels; same grey as the homepage About band */ --field: #ffffff; --ink: #0b1a30; /* iCore navy */ --ink-soft: #475569; --line: #cbd5e1; --signal: #e50914; /* iCore red (primary button) */ --signal-hover: #b91c1c; --signal-ink: #ffffff; --focus: #0b57d0; --danger: #a32b1e; --font: "Poppins", "Segoe UI", sans-serif; font-family: var(--font); color: var(--ink); background: var(--ground); } .qr-container { width: 90%; max-width: 992px; margin: 0 auto; } /* ===================== PAGE HEADER BAND ===================== */ .qr-hero { background: var(--paper); border-bottom: 1px solid #e2e8f0; padding: 32px 0 44px; } .qr-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85rem; color: #64748b; } .qr-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: #94a3b8; } .qr-breadcrumb a { color: #64748b; text-decoration: none; } .qr-breadcrumb a:hover, .qr-breadcrumb a:focus-visible { color: #b91c1c; text-decoration: underline; } .qr-hero h1 { margin: 24px 0 14px; max-width: 17em; font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.2; font-weight: 800; color: var(--ink); } .qr-lede { max-width: 36rem; font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); } /* ===================== TOOL ===================== */ .qr-tool { padding: 44px 0 56px; font-size: 1rem; line-height: 1.6; } .qr-tool *, .qr-tool *::before, .qr-tool *::after { box-sizing: border-box; } .qr-tool .layout { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "entry" "preview" "options"; } @media (min-width: 52rem) { .qr-tool .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); grid-template-areas: "entry preview" "options preview"; align-items: start; } /* 6.5rem clears the sticky 80px site header */ .qr-tool .preview { position: sticky; top: 6.5rem; } } .qr-tool .entry { grid-area: entry; } .qr-tool .preview { grid-area: preview; } .qr-tool .options { grid-area: options; } /* Address field */ .qr-tool .entry label { display: block; margin-bottom: 0.45rem; font-weight: 600; } .qr-tool .entry input { width: 100%; padding: 0.9rem 1rem; border: 2px solid var(--ink); border-radius: 0.65rem; background: var(--field); color: var(--ink); font: inherit; font-size: 1.1rem; } .qr-tool .entry input::placeholder { color: var(--ink-soft); opacity: 0.75; } .qr-tool .status { min-height: 1.5rem; margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.95rem; } .qr-tool .status.error { color: var(--danger); font-weight: 500; } /* Options panel */ .qr-tool .options { padding: 1.25rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--paper); } .qr-tool .options h2 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ink); } .qr-tool .group { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; } .qr-tool .group:last-child { margin-bottom: 0; } .qr-tool .group > legend, .qr-tool .group > label.title { display: block; padding: 0; margin-bottom: 0.45rem; font-weight: 600; } .qr-tool .help { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.9rem; } .qr-tool .seg { display: flex; flex-wrap: wrap; gap: 0.5rem; } .qr-tool .seg label { position: relative; cursor: pointer; } .qr-tool .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .qr-tool .seg span { display: inline-block; padding: 0.5rem 0.9rem; border: 2px solid var(--ink); border-radius: 0.55rem; font-weight: 500; } .qr-tool .seg input:checked + span { background: var(--ink); color: var(--paper); } .qr-tool .seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .qr-tool select { width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--ink); border-radius: 0.55rem; background: var(--field); color: var(--ink); font: inherit; font-size: 0.95rem; } .qr-tool .colors { display: flex; flex-wrap: wrap; gap: 1.25rem; } .qr-tool .color { display: flex; align-items: center; gap: 0.6rem; } .qr-tool .color input[type="color"] { width: 3rem; height: 2.6rem; padding: 0.15rem; border: 2px solid var(--ink); border-radius: 0.55rem; background: var(--field); cursor: pointer; } .qr-tool .note { margin: 0.7rem 0 0; min-height: 1.4rem; font-size: 0.9rem; color: var(--ink-soft); } .qr-tool .note.warn { color: var(--danger); font-weight: 500; } /* Preview card */ .qr-tool .preview { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper); } .qr-tool .frame { position: relative; padding: 1.15rem; } .qr-tool .frame .c { position: absolute; width: 1.75rem; height: 1.75rem; border: 0 solid var(--ink); pointer-events: none; } .qr-tool .c.tl { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 0.6rem; } .qr-tool .c.tr { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 0.6rem; } .qr-tool .c.bl { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 0.6rem; } .qr-tool .c.br { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 0.6rem; } .qr-tool .stage { width: 100%; aspect-ratio: 1; display: grid; place-items: center; } .qr-tool .stage svg { display: block; width: 100%; height: 100%; } .qr-tool .stage.empty { border: 2px dashed var(--line); border-radius: 0.5rem; padding: 1.5rem; text-align: center; color: var(--ink-soft); } .qr-tool .stage.empty p { margin: 0; max-width: 14rem; font-size: 0.95rem; } .qr-tool .encodes { min-height: 1.5rem; margin: 1rem 0 0; overflow-wrap: anywhere; font-weight: 500; font-size: 0.95rem; } .qr-tool .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .qr-tool .btn { flex: 1 1 8rem; min-height: 2.9rem; padding: 0.6rem 0.75rem; white-space: nowrap; border: 2px solid var(--ink); border-radius: 0.65rem; background: transparent; color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; } .qr-tool .btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); } .qr-tool .btn.primary { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); } .qr-tool .btn.primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); color: var(--signal-ink); } .qr-tool .btn:disabled { opacity: 0.4; cursor: not-allowed; } .qr-tool .btn:focus-visible, .qr-tool .entry input:focus-visible, .qr-tool select:focus-visible, .qr-tool .color input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .qr-tool .meta { min-height: 1.4rem; margin: 0.8rem 0 0; color: var(--ink-soft); font-size: 0.9rem; } .qr-tool .meta.ok { color: var(--ink); font-weight: 500; } .qr-tool .tip { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.95rem; } .qr-tool .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================== LEAD FORM BAND ===================== */ .qr-leadband { padding: 52px 0 56px; background: var(--paper); border-top: 1px solid #e2e8f0; } .qr-leadband-intro { max-width: 640px; margin: 0 auto 24px; text-align: center; } .qr-leadband-intro h2 { margin: 0 0 10px; font-size: 1.6rem; line-height: 1.3; font-weight: 700; color: var(--ink); } .qr-leadband-intro p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); } /* ===================== MOBILE ===================== */ @media (max-width: 768px) { .qr-hero { padding: 24px 0 32px; } .qr-tool { padding: 32px 0 44px; } .qr-leadband { padding: 40px 0 44px; } }