/* ============================================================ WIREFRAME MODE Activated by adding `wireframe-mode` class to . Strips all brand styling: greyscale only, dashed borders, logo placeholder, hatched image areas, sketch-y feel. Goal: signal "we're discussing structure, not aesthetics" ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;500;600&display=swap'); html.wireframe-mode { --wf-bg: #fafafa; --wf-paper: #ffffff; --wf-ink: #2a2a2a; --wf-ink-soft: #555; --wf-ink-mute: #888; --wf-border: #999; --wf-border-soft:#cfcfcf; --wf-fill: #ececec; --wf-fill-soft: #f4f4f4; --wf-banner: #fff8d4; } /* Reset palette + typography globally on the .wireframe-mode subtree */ html.wireframe-mode body, html.wireframe-mode .header, html.wireframe-mode .card, html.wireframe-mode .step-aside, html.wireframe-mode main, html.wireframe-mode aside, html.wireframe-mode section, html.wireframe-mode .footer, html.wireframe-mode .step-form, html.wireframe-mode .decl-accordion, html.wireframe-mode .decl-header, html.wireframe-mode .review-section, html.wireframe-mode .review-header { background: var(--wf-paper) !important; color: var(--wf-ink) !important; border-color: var(--wf-border-soft) !important; box-shadow: none !important; } html.wireframe-mode body { background: var(--wf-bg) !important; font-family: 'Inter', system-ui, sans-serif !important; } html.wireframe-mode * { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; text-shadow: none !important; } html.wireframe-mode .card-title, html.wireframe-mode .header-title, html.wireframe-mode .header h1, html.wireframe-mode h1, html.wireframe-mode h2, html.wireframe-mode h3 { font-family: 'Architects Daughter', cursive !important; font-weight: 400 !important; color: var(--wf-ink) !important; } /* Banner: announces wireframe context at the top */ html.wireframe-mode body::before { content: '◆ WIREFRAME — DRAFT FOR REVIEW ◆ Structural mockup, not final design ◆'; display: block; background: var(--wf-banner); border-bottom: 1px dashed var(--wf-border); padding: 8px 16px; font-family: 'Architects Daughter', cursive !important; font-size: 13px; letter-spacing: 0.05em; color: var(--wf-ink); text-align: center; } /* ============== HEADER + LOGO PLACEHOLDER ============== */ html.wireframe-mode .header { border-bottom: 1px dashed var(--wf-border) !important; } html.wireframe-mode .header-logo { display: none !important; } html.wireframe-mode .header-brand { position: relative; gap: 12px !important; } html.wireframe-mode .header-brand::before { content: '[ LOGO ]'; display: grid; place-items: center; width: 180px; height: 56px; border: 2px dashed var(--wf-border); background: var(--wf-fill-soft); font-family: 'Architects Daughter', cursive !important; font-size: 16px; color: var(--wf-ink-soft); flex-shrink: 0; } html.wireframe-mode .header-divider { color: var(--wf-border) !important; } html.wireframe-mode .header-title { color: var(--wf-ink) !important; font-size: 1.1rem !important; } html.wireframe-mode .a11y-btn { background: var(--wf-paper) !important; border: 1px dashed var(--wf-border) !important; color: var(--wf-ink-soft) !important; } html.wireframe-mode .a11y-btn svg { stroke: var(--wf-ink-soft) !important; } /* ============== STEP INDICATOR ============== */ html.wireframe-mode .step-indicator li { color: var(--wf-ink-mute) !important; font-family: 'Inter', system-ui, sans-serif !important; } html.wireframe-mode .step-indicator li .num { background: var(--wf-paper) !important; border: 1.5px dashed var(--wf-border) !important; color: var(--wf-ink-mute) !important; } html.wireframe-mode .step-indicator li.active .num { background: var(--wf-ink) !important; border: 1.5px solid var(--wf-ink) !important; color: #fff !important; } html.wireframe-mode .step-indicator li.active { color: var(--wf-ink) !important; font-weight: 500 !important; } html.wireframe-mode .step-indicator li.completed .num { background: var(--wf-ink-soft) !important; border-color: var(--wf-ink-soft) !important; } html.wireframe-mode .step-indicator .line { background: var(--wf-border-soft) !important; } html.wireframe-mode .step-indicator li.completed + .line { background: var(--wf-ink-soft) !important; } /* ============== CARD ============== */ html.wireframe-mode .card { border: 1px dashed var(--wf-border) !important; border-radius: 4px !important; } html.wireframe-mode .card-title { font-size: 1.5rem !important; margin-bottom: 4px !important; } html.wireframe-mode .card-subtitle { color: var(--wf-ink-mute) !important; font-style: italic; } /* ============== FORM FIELDS ============== */ html.wireframe-mode .field-group label { color: var(--wf-ink-soft) !important; font-weight: 500 !important; } html.wireframe-mode .field-group label .req { color: var(--wf-ink) !important; } html.wireframe-mode input[type="text"], html.wireframe-mode input[type="email"], html.wireframe-mode input[type="tel"], html.wireframe-mode input[type="date"], html.wireframe-mode select, html.wireframe-mode textarea { background: var(--wf-fill-soft) !important; border: 1px dashed var(--wf-border) !important; border-radius: 2px !important; color: var(--wf-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; } html.wireframe-mode input:focus, html.wireframe-mode select:focus, html.wireframe-mode textarea:focus { border-color: var(--wf-ink) !important; border-style: solid !important; box-shadow: 0 0 0 2px var(--wf-fill) !important; } html.wireframe-mode .field-hint { color: var(--wf-ink-mute) !important; font-style: italic; } /* PESEL chips → grey wireframe pills */ html.wireframe-mode .pesel-badge { background: var(--wf-fill) !important; color: var(--wf-ink-soft) !important; border: 1px dashed var(--wf-border-soft) !important; } html.wireframe-mode .pesel-badge svg { stroke: var(--wf-ink-soft) !important; } /* ============== BUTTONS ============== */ html.wireframe-mode .btn, html.wireframe-mode button { font-family: 'Inter', system-ui, sans-serif !important; border-radius: 2px !important; font-weight: 500 !important; } html.wireframe-mode .btn-primary { background: var(--wf-ink) !important; color: var(--wf-paper) !important; border: 1px solid var(--wf-ink) !important; box-shadow: none !important; } html.wireframe-mode .btn-primary:hover { background: #000 !important; } html.wireframe-mode .btn-ghost { background: var(--wf-paper) !important; color: var(--wf-ink) !important; border: 1px dashed var(--wf-border) !important; } /* ============== ICONS — replace with [icon] tag ============== */ html.wireframe-mode i[data-lucide], html.wireframe-mode .lucide, html.wireframe-mode svg.lucide { visibility: hidden; position: relative; display: inline-block; width: 18px !important; height: 18px !important; vertical-align: middle; } html.wireframe-mode i[data-lucide]::after, html.wireframe-mode .lucide::after, html.wireframe-mode svg.lucide::after { content: '☐'; position: absolute; inset: 0; display: grid; place-items: center; visibility: visible; font-size: 14px; color: var(--wf-ink-soft); } /* Header brand divider — soften */ html.wireframe-mode .header-divider { color: var(--wf-border) !important; } /* ============== ACCORDION (Step 2) ============== */ html.wireframe-mode .decl-accordion { border: 1px dashed var(--wf-border) !important; border-radius: 4px !important; background: var(--wf-paper) !important; } html.wireframe-mode .decl-accordion.enabled { border-color: var(--wf-ink) !important; border-style: solid !important; } html.wireframe-mode .decl-header { background: var(--wf-fill-soft) !important; } html.wireframe-mode .decl-accordion.enabled .decl-header { background: var(--wf-fill) !important; } html.wireframe-mode .decl-header .decl-title h3 { color: var(--wf-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } html.wireframe-mode .decl-header .decl-title p { color: var(--wf-ink-mute) !important; } html.wireframe-mode .decl-header .icon { background: var(--wf-fill) !important; border: 1px dashed var(--wf-border-soft) !important; } /* ============== SIDEBAR ============== */ html.wireframe-mode .step-aside { background: var(--wf-fill-soft) !important; border: 1px dashed var(--wf-border) !important; border-radius: 4px !important; } html.wireframe-mode .step-aside h3 { color: var(--wf-ink) !important; font-family: 'Architects Daughter', cursive !important; font-size: 18px !important; } html.wireframe-mode .step-aside p, html.wireframe-mode .aside-steps li, html.wireframe-mode .aside-closing { color: var(--wf-ink-soft) !important; } html.wireframe-mode .aside-subhead { color: var(--wf-ink) !important; } html.wireframe-mode .aside-steps li::marker { color: var(--wf-ink-soft) !important; } /* Marketing photo → hatched placeholder */ html.wireframe-mode .aside-photo { visibility: hidden; position: relative; height: 180px !important; max-height: 180px !important; background: repeating-linear-gradient( 45deg, var(--wf-fill), var(--wf-fill) 8px, var(--wf-fill-soft) 8px, var(--wf-fill-soft) 16px ) !important; border: 1px dashed var(--wf-border) !important; } html.wireframe-mode .aside-photo::after { content: '◇ PHOTO PLACEHOLDER ◇'; position: absolute; inset: 0; display: grid; place-items: center; visibility: visible; font-family: 'Architects Daughter', cursive !important; color: var(--wf-ink-soft); font-size: 14px; letter-spacing: 0.06em; } /* ============== STEP 3 REVIEW (Podsumowanie) ============== */ html.wireframe-mode .review-section { border: 1px dashed var(--wf-border-soft) !important; } html.wireframe-mode .review-header { background: var(--wf-fill-soft) !important; color: var(--wf-ink) !important; } html.wireframe-mode .review-header h3 { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } html.wireframe-mode .review-header a { color: var(--wf-ink) !important; text-decoration: underline !important; } html.wireframe-mode .review-row { border-bottom: 1px dashed var(--wf-border-soft) !important; } html.wireframe-mode .review-label { color: var(--wf-ink-mute) !important; } html.wireframe-mode .review-value { color: var(--wf-ink) !important; } /* Download list (success state) → wireframe rows */ html.wireframe-mode .download-list li { background: var(--wf-fill-soft) !important; border: 1px dashed var(--wf-border) !important; } html.wireframe-mode .download-list li a { color: var(--wf-ink) !important; font-weight: 500 !important; } html.wireframe-mode .download-list li svg { stroke: var(--wf-ink-soft) !important; } /* Phone-contact callout (step 3) → grey */ html.wireframe-mode .contact-help, html.wireframe-mode .contact-phone, html.wireframe-mode .contact-phone:hover, html.wireframe-mode .contact-phone i { color: var(--wf-ink-soft) !important; } /* ============== STEP 4 UPLOAD ============== */ html.wireframe-mode .upload-slot, html.wireframe-mode .info-banner, html.wireframe-mode .email-sent-info, html.wireframe-mode .upload-info { background: var(--wf-fill-soft) !important; border: 1px dashed var(--wf-border) !important; color: var(--wf-ink) !important; } /* ============== FOOTER ============== */ html.wireframe-mode .footer { color: var(--wf-ink-mute) !important; border-top: 1px dashed var(--wf-border-soft) !important; } /* ============== STATUS BADGES (admin) ============== */ html.wireframe-mode .badge { background: var(--wf-fill) !important; color: var(--wf-ink-soft) !important; border: 1px dashed var(--wf-border-soft) !important; font-family: 'Inter', system-ui, sans-serif !important; } /* Conditional block (warnings) */ html.wireframe-mode .conditional-block { background: var(--wf-fill-soft) !important; border-left: 3px dashed var(--wf-border) !important; } /* Guardian block (collapsible) */ html.wireframe-mode .guardian-block { border-left: 2px dashed var(--wf-border) !important; } html.wireframe-mode .guardian-label { color: var(--wf-ink) !important; } html.wireframe-mode .collapsible-toggle { background: var(--wf-fill-soft) !important; color: var(--wf-ink) !important; border: 1px dashed var(--wf-border) !important; } /* Radio + checkbox accent → grey */ html.wireframe-mode input[type="radio"], html.wireframe-mode input[type="checkbox"] { accent-color: var(--wf-ink) !important; } /* Progress bar */ html.wireframe-mode .progress-bar { background: var(--wf-fill) !important; } html.wireframe-mode .progress-bar .fill { background: var(--wf-ink) !important; } /* Skip link (a11y) */ html.wireframe-mode .skip-link { background: var(--wf-ink) !important; color: var(--wf-paper) !important; } /* Force focus rings to match wireframe ink */ html.wireframe-mode :focus-visible { outline: 2px solid var(--wf-ink) !important; outline-offset: 2px; } /* Force-disable all transitions for crisp screenshots */ html.wireframe-mode *, html.wireframe-mode *::before, html.wireframe-mode *::after { transition: none !important; animation: none !important; }