on submit-samples.mustache.html only. NOTE ON CASCADE: sk-wizard.css is loaded by the sk-wizard-init partial at the END of , i.e. AFTER this sheet. All overrides of the framework stepper/buttons therefore carry the extra ".sr-v2" ancestor class to win on specificity, not on source order. Do not "simplify" those selectors. ========================================================================== */ .sr-v2 { /* Brand tokens (spec §2) */ --c-primary: #279338; --c-primary-dark: #1b6b28; --c-heading: #233b2d; --c-body: #3a4a40; --c-muted: #6b7a6f; --c-eyebrow: #7d8c81; --c-panel: #eef5ee; --c-panel-border: #cfe5d2; --c-hairline: #e3ebe3; --c-bg-alt: #f4f7f4; --c-danger: #b3261e; --font-head: "Poppins", "Segoe UI", system-ui, sans-serif; --font-body: "Segoe UI", system-ui, sans-serif; --radius: 8px; font-family: var(--font-body); color: var(--c-body); } .sr-v2 .sk-section-gray { background-color: var(--c-bg-alt); } .sr-v2 h2 { font-family: var(--font-head); font-weight: 600; color: var(--c-heading); margin-bottom: 1.25rem; } .sr-v2 a { color: var(--c-primary-dark); } .sr-eyebrow { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-eyebrow); margin: 0 0 0.35rem; } /* -------------------------------------------------------------------------- Main card -------------------------------------------------------------------------- */ .sr-v2 .sk-main-card { background: #fff; border: 1px solid var(--c-hairline); border-top: 6px solid var(--c-primary); border-radius: 12px; padding: clamp(1rem, 3vw, 2rem); box-shadow: 0 8px 24px rgba(35, 59, 45, 0.06); max-width: 900px; margin: 0 auto; } /* -------------------------------------------------------------------------- Stepper: numbered green pills (overrides sk-wizard.css dots) -------------------------------------------------------------------------- */ .sr-v2 .sk-wizard-progress-bar { margin-bottom: 1rem; padding: 0.25rem 0 0.35rem; } .sr-v2 .sk-wizard-progress-step { height: auto; padding: 2.35rem 0.25rem 0; align-items: flex-start; color: var(--c-muted); font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; --sk-wizard-gray: var(--c-hairline); } /* connector line */ .sr-v2 .sk-wizard-progress-step::before { height: 2px; width: 50vw; top: 0.95rem; left: 50%; transform: translate(-50%, -50%); background-color: var(--c-hairline); } .sr-v2 .sk-wizard-progress-step:last-child::before { /* DOM-last = visually first pill (row-reverse): no incoming line */ background-color: transparent !important; } /* numbered pill */ .sr-v2 .sk-wizard-progress-step::after { width: 1.9rem; height: 1.9rem; border-radius: 50%; top: 0.95rem; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 2px solid var(--c-panel-border); color: var(--c-muted); font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; line-height: calc(1.9rem - 4px); text-align: center; z-index: 1; } /* step numbers (steps are prepended → data index maps 1:1 to step order) */ .sr-v2 [data-sk-wizard-step-i="0"]::after { content: "1"; } .sr-v2 [data-sk-wizard-step-i="1"]::after { content: "2"; } .sr-v2 [data-sk-wizard-step-i="2"]::after { content: "3"; } .sr-v2 [data-sk-wizard-step-i="3"]::after { content: "4"; } .sr-v2 .sk-wizard-progress-step.sk-wizard-step-active::after { background-color: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 4px var(--c-panel); } .sr-v2 .sk-wizard-progress-step.sk-wizard-step-done::after { content: "\2713"; background-color: var(--c-primary); border-color: var(--c-primary); color: #fff; } .sr-v2 .sk-wizard-progress-step:is(.sk-wizard-step-active, .sk-wizard-step-done)::before { background-color: var(--c-primary); } .sr-v2 .sk-wizard-progress-step.sk-wizard-step-active { color: var(--c-heading); } .sr-v2 .sk-wizard-progress-step.sk-wizard-step-done { color: var(--c-body); } .sr-v2 .sk-wizard-progress-step:focus-visible { outline: 2px solid var(--c-primary-dark); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- Step navigation buttons -------------------------------------------------------------------------- */ .sr-v2 .sk-wizard-step-buttons { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--c-hairline); margin-top: 1.5rem; padding-top: 1.1rem; } .sr-v2 .sk-wizard-step-buttons button { float: none; margin: 0; padding: 0.6rem 1.5rem; border-radius: var(--radius); font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .sr-v2 .sk-wizard-step-buttons button:first-child { background-color: #fff; color: var(--c-primary-dark); border: 1px solid var(--c-panel-border); } .sr-v2 .sk-wizard-step-buttons button:first-child:hover { background-color: var(--c-panel); border-color: var(--c-primary); } .sr-v2 .sk-wizard-step-buttons button:last-child { background-color: var(--c-primary); color: #fff; border: none; margin-left: auto; } .sr-v2 .sk-wizard-step-buttons button:last-child:hover { background-color: var(--c-primary-dark); } .sr-v2 .sk-wizard-step-buttons button:focus-visible { outline: 2px solid var(--c-primary-dark); outline-offset: 2px; } /* -------------------------------------------------------------------------- Generic elements -------------------------------------------------------------------------- */ .sr-v2 input[type="checkbox"], .sr-v2 input[type="radio"] { accent-color: var(--c-primary); } .sr-lead { font-size: 1.05rem; color: var(--c-heading); margin: 0.25rem 0 1.25rem; } .sr-hint { font-size: 0.85rem; color: var(--c-muted); } .sr-fineprint { font-size: 0.8rem; color: var(--c-muted); margin: 0.75rem 0 0; } .sr-panel { background: var(--c-panel); border: 1px solid var(--c-panel-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 1rem 1.25rem; } /* -------------------------------------------------------------------------- Step 1: benefits -------------------------------------------------------------------------- */ .sr-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .sr-benefits li { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--c-panel); border: 1px solid var(--c-panel-border); border-radius: var(--radius); padding: 0.85rem 1rem; } .sr-benefits li > i { flex: 0 0 auto; font-size: 1.25rem; line-height: 1.3; color: var(--c-primary); } .sr-benefits b { color: var(--c-heading); } /* -------------------------------------------------------------------------- Step 2: anonymous toggle -------------------------------------------------------------------------- */ .sr-anon-panel { background: var(--c-panel); border: 1px solid var(--c-panel-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; transition: border-color 0.15s, box-shadow 0.15s; } .sr-anon-panel.sr-anon-active { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; } .sr-switch { position: relative; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; margin: 0; } .sr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .sr-switch-track { flex: 0 0 auto; width: 2.9rem; height: 1.6rem; border-radius: 999px; background: #c3cdc5; position: relative; transition: background-color 0.15s; } .sr-switch-track::after { content: ""; position: absolute; top: 0.175rem; left: 0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s; } .sr-switch input:checked ~ .sr-switch-track { background: var(--c-primary); } .sr-switch input:checked ~ .sr-switch-track::after { left: 1.45rem; } .sr-switch input:focus-visible ~ .sr-switch-track { outline: 2px solid var(--c-primary-dark); outline-offset: 2px; } .sr-switch input:disabled ~ .sr-switch-track, .sr-switch input:disabled ~ .sr-switch-label { opacity: 0.5; cursor: not-allowed; } .sr-switch-label { font-family: var(--font-head); font-weight: 600; color: var(--c-heading); } .sr-anon-explainer { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--c-body); } /* -------------------------------------------------------------------------- Step 3: analysis details + sample cards -------------------------------------------------------------------------- */ .sr-details { border: 1px solid var(--c-hairline); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; } .sr-details summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--c-primary-dark); } .sr-details[open] summary { margin-bottom: 0.5rem; } .sr-details ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } #sk-samples-cards { counter-reset: sample; display: flex; flex-direction: column; gap: 1rem; } .sk-sample-card { counter-increment: sample; border: 1px solid var(--c-panel-border); border-radius: 10px; background: #fff; padding: 1rem 1.15rem 1.15rem; box-shadow: 0 2px 8px rgba(35, 59, 45, 0.05); } .sr-card-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--c-hairline); padding-bottom: 0.6rem; margin-bottom: 0.85rem; } .sr-card-title { font-family: var(--font-head); font-weight: 600; color: var(--c-heading); } .sr-card-title::after { content: " " counter(sample); } .sr-v2 .sk-remove-sample { border: none; background: transparent; color: var(--c-muted); font-size: 1.05rem; line-height: 1; padding: 0.3rem 0.45rem; border-radius: 6px; cursor: pointer; transition: color 0.15s, background-color 0.15s; } .sr-v2 .sk-remove-sample:hover:not(:disabled) { color: var(--c-danger); background: #fbeaea; } .sr-v2 .sk-remove-sample:disabled { opacity: 0.35; cursor: default; } .sr-card-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; margin-bottom: 0.85rem; } .sr-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; } .sr-field > span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-muted); } .sr-field input, .sr-field select { border: 1px solid var(--c-hairline); border-radius: var(--radius); padding: 0.5rem 0.65rem; font: inherit; color: var(--c-body); background: #fff; width: 100%; } .sr-field input:focus, .sr-field select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-panel); } .sr-group { border: none; border-top: 1px solid var(--c-hairline); margin: 0; padding: 0.75rem 0 0; min-width: 0; } .sr-group + .sr-group { margin-top: 0.85rem; } .sr-group legend { float: left; width: 100%; font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; color: var(--c-heading); padding: 0; margin-bottom: 0.6rem; } .sr-group legend + * { clear: both; } .sr-minqty { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--c-muted); margin-left: 0.5rem; } .sr-syn-label { clear: both; font-size: 0.8rem; color: var(--c-muted); margin: 0.7rem 0 0.4rem; } /* ---- chips ---- */ .sr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; clear: both; } .sr-chip { position: relative; margin: 0; cursor: pointer; } .sr-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .sr-chip-body { display: inline-flex; flex-direction: column; gap: 1px; padding: 0.45rem 0.85rem; border: 1px solid var(--c-panel-border); border-radius: 10px; background: #fff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .sr-chip:hover .sr-chip-body { border-color: var(--c-primary); } .sr-chip-name { font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; color: var(--c-heading); white-space: nowrap; } .sr-chip-name::before { content: ""; display: inline-block; } .sr-chip-meta { font-size: 0.75rem; color: var(--c-muted); white-space: nowrap; } .sr-chip input:checked + .sr-chip-body { background: var(--c-panel); border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); } .sr-chip input:checked + .sr-chip-body .sr-chip-name { color: var(--c-primary-dark); } .sr-chip input:checked + .sr-chip-body .sr-chip-name::before { content: "\2713\00a0"; } .sr-chip input:focus-visible + .sr-chip-body { outline: 2px solid var(--c-primary-dark); outline-offset: 2px; } .sr-chip input:disabled + .sr-chip-body { opacity: 0.45; } .sr-chip:has(input:disabled) { cursor: not-allowed; } /* ---- add button ---- */ .sr-add-row { display: flex; align-items: center; gap: 0.85rem; margin-top: 1rem; flex-wrap: wrap; } .sr-add-btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px dashed var(--c-primary); border-radius: var(--radius); background: #fff; color: var(--c-primary-dark); font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1.1rem; cursor: pointer; transition: background-color 0.15s; } .sr-add-btn:hover:not(:disabled) { background: var(--c-panel); } .sr-add-btn:disabled { opacity: 0.45; cursor: not-allowed; } .sr-add-btn:focus-visible { outline: 2px solid var(--c-primary-dark); outline-offset: 2px; } /* -------------------------------------------------------------------------- Step 4: summary, consent, shipping -------------------------------------------------------------------------- */ .sr-summary { background: var(--c-panel); border: 1px solid var(--c-panel-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 1rem 1.25rem; } .sr-summary-empty { margin: 0; color: var(--c-muted); font-size: 0.9rem; } .sr-summary-sample { padding-bottom: 0.65rem; margin-bottom: 0.65rem; border-bottom: 1px solid var(--c-panel-border); } .sr-summary-head { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-head); font-weight: 600; color: var(--c-heading); margin-bottom: 0.25rem; } .sr-summary-sample ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; } .sr-summary-sample li { display: flex; justify-content: space-between; gap: 1rem; color: var(--c-body); padding: 0.1rem 0; } .sr-summary-totals { font-size: 0.95rem; } .sr-summary-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; } .sr-summary-totals .sr-summary-grand { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--c-primary-dark); border-top: 1px solid var(--c-panel-border); margin-top: 0.35rem; padding-top: 0.5rem; } .sr-v2 textarea.form-control { border: 1px solid var(--c-hairline); border-radius: var(--radius); margin: 1rem 0; } .sr-v2 textarea.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-panel); } .sr-dsgvo { margin: 0.75rem 0 1rem; } .sr-v2 .h-captcha { margin: 0.5rem 0 1.25rem; } .sr-address-panel p { margin: 0 0 0.35rem; } .sr-address { color: var(--c-heading); line-height: 1.5; } /* -------------------------------------------------------------------------- Prompts: progress, success, error -------------------------------------------------------------------------- */ .sr-v2 #sk-prompts { max-width: 900px; margin: 0 auto; } .sr-v2 #sk-in-progress { display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: #fff; border: 1px solid var(--c-hairline); border-radius: 12px; color: var(--c-body); } .sr-v2 #sk-in-progress.sk-hidden { display: none; } .sr-v2 #sk-success { background: #fff; border: 1px solid var(--c-panel-border); border-top: 6px solid var(--c-primary); border-radius: 12px; padding: clamp(1.25rem, 3vw, 2.25rem); text-align: center; color: var(--c-body); box-shadow: 0 8px 24px rgba(35, 59, 45, 0.06); } .sr-v2 #sk-success.sk-hidden { display: none; } .sr-success-icon { display: block; font-size: 2.5rem; color: var(--c-primary); margin-bottom: 0.5rem; } .sr-success-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--c-heading); margin-bottom: 0.75rem; } .sr-v2 #sk-success .sr-address-panel { text-align: left; max-width: 22rem; margin: 1rem auto; } .sr-v2 .sr-download-btn { display: inline-block; background-color: var(--c-primary); color: #fff; border: none; border-radius: var(--radius); font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 1.6rem; margin-top: 0.75rem; transition: background-color 0.15s; } .sr-v2 .sr-download-btn:hover { background-color: var(--c-primary-dark); color: #fff; } .sr-v2 #sk-error { border-radius: var(--radius); border-left: 4px solid var(--c-danger); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 720px) { .sr-card-fields { grid-template-columns: 1fr; } } @media (max-width: 520px) { .sr-v2 .sk-wizard-progress-step { font-size: 0.62rem; letter-spacing: 0.02em; } .sr-v2 .sk-wizard-step-buttons button { padding: 0.6rem 1rem; } .sr-chips { gap: 0.4rem; } .sr-chip-body { padding: 0.4rem 0.65rem; } }