/** * Food Waste Calculator - Public Styles * * Complete redesign using brand design tokens. * BEM naming: .wc-fwc-{block}__{element}--{modifier} * * @package Waste_Calculator */ /* ========================================================================== 1. Custom properties (design tokens) ========================================================================== */ .wc-fwc-wrap { --wc-brand: #ED1F8F; --wc-brand-light: #FADADD; --wc-brand-bg: #FFD0EA; --wc-green: #4FFFAF; --wc-green-light: #E0FFF0; --wc-slate: #262D32; --wc-light: #F0F5F9; --wc-white: #FFFFFF; --wc-error: #dc3545; --wc-heading-font: "proxima-nova-extra-condensed", Impact, "Arial Narrow", sans-serif; --wc-body-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fluid type scale — matches theme (proxima-nova-extra-condensed / proxima-nova) */ --wc-text-base: clamp(15px, calc(0.875rem + ((1vw - 3.2px) * 0.5)), 18px); --wc-text-lg: clamp(18px, calc(1.5rem + ((1vw - 3.2px) * 0.5)), 26px); --wc-radius: 10px; --wc-transition: 200ms ease; /* Starburst clip-path (16-point star) */ --wc-starburst: polygon( 50% 0%, 61% 11%, 75% 3%, 73% 19%, 88% 19%, 81% 33%, 97% 40%, 86% 50%, 97% 60%, 81% 67%, 88% 81%, 73% 81%, 75% 97%, 61% 89%, 50% 100%, 39% 89%, 25% 97%, 27% 81%, 12% 81%, 19% 67%, 3% 60%, 14% 50%, 3% 40%, 19% 33%, 12% 19%, 27% 19%, 25% 3%, 39% 11% ); } /* ========================================================================== 2. Base / box-sizing reset ========================================================================== */ .wc-fwc-wrap, .wc-fwc-wrap *, .wc-fwc-wrap *::before, .wc-fwc-wrap *::after { box-sizing: border-box; } /* ========================================================================== 3. Outer wrapper ========================================================================== */ /* * Force the theme's content wrappers to full width when the calculator is * present. The plugin adds .has-wc-fwc to via body_class filter. * Themes commonly constrain content with max-width and width rules * (e.g. section.centered { max-width: 1220px }, .content-wrap { width: 66% }). * Without these overrides the calculator cannot fill the viewport. */ .has-wc-fwc #main-content > section { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; align-self: stretch !important; width: 100% !important; } .has-wc-fwc .content-wrap { width: 100% !important; max-width: none !important; } /* * Break out of any theme content column so the calculator is full-viewport * width. The 100vw + negative margin trick works when the parent container * is centred (guaranteed by the :has() rules above). */ .wc-fwc-wrap { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); font-family: var(--wc-body-font); font-size: var(--wc-text-base); line-height: 1.4; color: var(--wc-slate); background: var(--wc-light); position: relative; overflow: hidden; } /* Keep step content centred and readable within the full-width canvas. * Acts as a raised white card above the decorative layer. */ .wc-fwc-step__content { max-width: 1080px; margin-left: auto; margin-right: auto; padding: 2.5rem 3.5rem; background: var(--wc-brand-bg); border-radius: var(--wc-radius); position: relative; z-index: 1; } /* ========================================================================== 4. Typography ========================================================================== */ .wc-fwc-wrap h1, .wc-fwc-wrap h2, .wc-fwc-wrap h3, .wc-fwc-wrap h4 { font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; margin-top: 0; margin-bottom: 0.75rem; color: var(--wc-slate); } /* ========================================================================== 5. Progress stepper (.wc-fwc-stepper) ========================================================================== */ .wc-fwc-stepper-wrap { background: var(--wc-light); width: 100%; } .wc-fwc-stepper { display: flex; justify-content: center; align-items: flex-start; gap: 0; width: 100%; max-width: 960px; margin-left: auto !important; margin-right: auto !important; padding: 2rem 1rem 1.5rem; background: var(--wc-light); list-style: none !important; } .wc-fwc-stepper__item { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; flex: 1; } /* Connecting line after each circle (except last) */ .wc-fwc-stepper__item::after { content: ''; position: absolute; top: 25px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: #c8cfd4; } .wc-fwc-stepper__item:last-child::after { display: none; } /* Circle (starburst shape) */ .wc-fwc-stepper__circle { width: 50px; height: 50px; clip-path: var(--wc-starburst); background: var(--wc-slate); color: var(--wc-white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wc-heading-font); font-weight: 900; font-size: 1.25rem; position: relative; flex-shrink: 0; } /* Active step: magenta starburst */ .wc-fwc-stepper__item--active .wc-fwc-stepper__circle { background: var(--wc-brand); color: var(--wc-white); } /* Done step: green starburst with dark text */ .wc-fwc-stepper__item--done .wc-fwc-stepper__circle { background: var(--wc-green); color: var(--wc-slate); } /* Show/hide number vs check */ .wc-fwc-stepper__check { display: none; } .wc-fwc-stepper__item--done .wc-fwc-stepper__number { display: none; } .wc-fwc-stepper__item--done .wc-fwc-stepper__check { display: inline; } /* Label below circle */ .wc-fwc-stepper__label { display: block; font-family: var(--wc-heading-font); font-weight: 900; font-size: var(--wc-text-base); text-transform: uppercase; letter-spacing: 0.05em; color: var(--wc-slate); margin-top: 0.5rem; max-width: 90px; line-height: 1.2; } /* ========================================================================== 6. Step panels (.wc-fwc-step) ========================================================================== */ .wc-fwc-step { display: block; padding: 2.5rem 0; position: relative; background: var(--wc-light); } .wc-fwc-step--hidden { display: none; } /* Step title with inline starburst number badge */ .wc-fwc-step__title { display: flex; align-items: center; gap: 0.75rem; font-family: var(--wc-heading-font); font-weight: 900; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wc-slate); margin-top: 0; margin-bottom: 1.25rem; outline: none; } .wc-fwc-step__title:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-radius: 2px; } /* Starburst number badge beside step title */ .wc-fwc-step__number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; clip-path: var(--wc-starburst); background: var(--wc-brand); color: var(--wc-white); font-family: var(--wc-heading-font); font-weight: 900; font-size: 1.25rem; flex-shrink: 0; } /* ========================================================================== 7. Step 1 - Introduction (pink background) ========================================================================== */ .wc-fwc-step[data-fwc-step="1"] .wc-fwc-step__content { background: var(--wc-brand-bg); } /* Step 1 question labels (numbered headings like "1. How many...") */ .wc-fwc-field__label, .wc-fwc-step[data-fwc-step="1"] .wc-fwc-field > label, .wc-fwc-step[data-fwc-step="1"] .wc-fwc-field > legend { font-weight: 700; font-size: 1.25rem; color: var(--wc-slate); margin-bottom: 0.75rem; } /* Step 1 field spacing — matches prototype space-y-12 (3rem) */ .wc-fwc-step[data-fwc-step="1"] .wc-fwc-field, .wc-fwc-step[data-fwc-step="1"] fieldset.wc-fwc-field, .wc-fwc-step[data-fwc-step="1"] .wc-fwc-banner { margin-bottom: 3rem; } /* Age table — white card container (bg-white/40 from prototype) */ .wc-fwc-field--age-card { background: #fff6; border-radius: 1rem; padding: 1rem 1.5rem 0.5rem; margin-top: 0.5rem; } /* Age table */ .wc-fwc-age-table { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; } .wc-fwc-age-table th, .wc-fwc-age-table td { padding: 0.75rem 0; text-align: left; border: none; } .wc-fwc-age-table thead th { font-family: var(--wc-body-font); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #374151; padding-bottom: 0.5rem; } .wc-fwc-age-table thead th:last-child { text-align: right; } .wc-fwc-age-table td:first-child { font-weight: 600; font-size: 1rem; color: var(--wc-slate); } .wc-fwc-age-table td:last-child { text-align: right; } .wc-fwc-age-table tbody tr + tr td { border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Quantity stepper control — matches Magic Patterns prototype: w-32, bg-white, border border-gray-200, rounded-lg, shadow-sm */ .wc-fwc-qty { display: inline-flex; align-items: center; justify-content: space-between; width: 8rem; background: var(--wc-white); border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); overflow: hidden; } /* Buttons: p-3 from prototype = 0.75rem padding */ .wc-fwc-qty__btn { display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: none; background: transparent; font-size: 1rem; font-weight: 400; color: #4b5563; cursor: pointer; transition: background var(--wc-transition); line-height: 1; -webkit-user-select: none; user-select: none; } .wc-fwc-qty__btn:hover { background: #f9fafb; } .wc-fwc-qty__btn:disabled { opacity: 0.5; cursor: not-allowed; } .wc-fwc-qty__btn:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: -2px; } /* Number display: font-semibold text-lg w-8 text-center */ .wc-fwc-qty__input { width: 2rem; padding: 0; border: none; background: transparent; font-family: var(--wc-body-font); font-size: 1.125rem; font-weight: 600; text-align: center; color: var(--wc-slate); -moz-appearance: textfield; appearance: textfield; } .wc-fwc-qty__input::-webkit-outer-spin-button, .wc-fwc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Motivational banner — matches prototype: rounded-xl, p-5, shadow-md */ .wc-fwc-banner--motivational { background: var(--wc-brand); color: var(--wc-white); border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 2rem 0; text-align: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .wc-fwc-banner--motivational p { margin: 0; font-weight: 700; font-style: italic; font-size: var(--wc-text-lg); line-height: 1.4; } /* ========================================================================== 8. Step 2 - Category grid (white/light background) ========================================================================== */ .wc-fwc-step[data-fwc-step="2"] .wc-fwc-step__content { background: var(--wc-brand-bg); } /* Entry mode toggle */ .wc-fwc-entry-mode { display: inline-flex; border: 2px solid var(--wc-slate); border-radius: 30px; overflow: hidden; margin-bottom: 1.5rem; } .wc-fwc-entry-mode__btn { padding: 0.5rem 1.5rem; background: transparent; border: none; font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; font-size: var(--wc-text-base); letter-spacing: 0.03em; cursor: pointer; transition: background var(--wc-transition), color var(--wc-transition); color: var(--wc-slate); line-height: 1.4; } .wc-fwc-entry-mode__btn--active { background: var(--wc-slate); color: var(--wc-white); border-radius: 30px; } .wc-fwc-entry-mode__btn--active::after { content: ' \2713'; } /* Category grid */ .wc-fwc-categories { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; list-style: none; padding: 0; margin-top: 0; } /* Category card — horizontal layout: image left, content right */ .wc-fwc-category { display: flex; flex-direction: column; border-radius: var(--wc-radius); overflow: hidden; } .wc-fwc-category__check { display: grid; grid-template-columns: clamp(100px, 25%, 160px) 1fr; align-items: stretch; text-align: left; cursor: pointer; gap: 0; padding: 0; background: var(--wc-green-light); position: relative; transition: background var(--wc-transition); min-height: 120px; } .wc-fwc-category__check:hover { background: #c8ffe8; } /* Category image — centred in left column, green background behind */ .wc-fwc-category__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; margin: 0; flex-shrink: 0; padding: 0.5rem; } /* When no image, the text takes the full width */ .wc-fwc-category__check:not(.wc-fwc-category__check--has-image) { grid-template-columns: 1fr; } .wc-fwc-category__text { display: flex; flex-direction: column; justify-content: center; padding: 1.25rem 1.5rem; } .wc-fwc-category__label { font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: 0.03em; color: var(--wc-slate); line-height: 1.2; } .wc-fwc-category__example { display: block; font-size: var(--wc-text-base); color: #555; margin-top: 0.25rem; line-height: 1.4; } /* Checkbox visually hidden but still functional for JS toggling */ .wc-fwc-category__check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } /* Category detail sub-form — continuous green background */ .wc-fwc-category__detail { background: var(--wc-green-light); border-radius: 0 0 var(--wc-radius) var(--wc-radius); padding: 1.25rem 1.5rem 1.5rem; margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); max-height: 600px; overflow: hidden; opacity: 1; visibility: visible; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s; } .wc-fwc-category__detail--hidden { max-height: 0; padding-top: 0; padding-bottom: 0; border-top: 0; opacity: 0; visibility: hidden; } /* --- Detail sub-form inputs: match Step 1 field sizing --- */ .wc-fwc-category__detail > .wc-fwc-category__amount label, .wc-fwc-category__detail > .wc-fwc-category__disposal label { display: block; font-weight: 700; font-family: var(--wc-body-font); font-size: var(--wc-text-base); color: var(--wc-slate); margin-bottom: 0.3rem; } .wc-fwc-category__detail select { display: block; width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background-color: var(--wc-white); color: var(--wc-slate); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23262D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; cursor: pointer; transition: border-color var(--wc-transition); } .wc-fwc-category__detail select:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } .wc-fwc-category__detail input[type="number"] { display: block; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); transition: border-color var(--wc-transition); } .wc-fwc-category__detail input[type="number"]:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } /* Spacing between amount and disposal sections */ .wc-fwc-category__amount { margin-bottom: 1rem; } .wc-fwc-category__disposal { margin-bottom: 0; } /* Input-type toggle (By amount / By % of total) */ .wc-fwc-input-type-toggle { display: flex; gap: 0; margin-bottom: 1rem; border-radius: var(--wc-radius); overflow: hidden; background: var(--wc-white); } .wc-fwc-input-type-toggle__option { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; font-family: var(--wc-body-font); font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; background: transparent; color: var(--wc-brand); transition: background var(--wc-transition), color var(--wc-transition); user-select: none; min-height: 48px; border: none; } .wc-fwc-input-type-toggle__option input { position: absolute; opacity: 0; width: 0; height: 0; } .wc-fwc-input-type-toggle__option--active { background: var(--wc-brand); color: var(--wc-white); } /* Portion / percentage sub-form visibility — animated */ .wc-fwc-category__portion-input, .wc-fwc-category__pct-input { max-height: 200px; overflow: hidden; opacity: 1; transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease; } .wc-fwc-category__portion-input--hidden, .wc-fwc-category__pct-input--hidden { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; } /* Percentage input wrapper */ .wc-fwc-pct-input-wrap { display: flex; align-items: center; gap: 0.5rem; } .wc-fwc-pct-input-wrap input { width: 100px; } .wc-fwc-pct-symbol { font-weight: 700; font-size: 1.125rem; color: var(--wc-slate); } /* Total-amount field (conditional, above categories) */ .wc-fwc-total-amount { background: var(--wc-light); border-radius: var(--wc-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; max-height: 300px; opacity: 1; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease; } .wc-fwc-total-amount h4 { font-family: var(--wc-body-font); font-weight: 700; font-size: var(--wc-text-base); text-transform: none; letter-spacing: 0; color: var(--wc-slate); line-height: 1.5; margin: 0 0 0.75rem; padding: 0; } .wc-fwc-total-amount input[type="number"] { padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); width: 120px; transition: border-color var(--wc-transition); } .wc-fwc-total-amount input[type="number"]:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } .wc-fwc-total-amount label { font-weight: 600; font-family: var(--wc-body-font); color: var(--wc-slate); } .wc-fwc-total-amount--hidden { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; pointer-events: none; } /* Percentage allocation summary */ .wc-fwc-pct-summary { background: var(--wc-light); border-radius: var(--wc-radius); padding: 0.75rem 1.25rem; margin-bottom: 1rem; font-family: var(--wc-body-font); font-size: var(--wc-text-base); color: var(--wc-slate); max-height: 100px; opacity: 1; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease; } .wc-fwc-pct-summary--hidden { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; pointer-events: none; } .wc-fwc-pct-summary--error { border: 2px solid var(--wc-error); color: var(--wc-error); } /* Combined amount row (grams or cups) */ .wc-fwc-combined-amount { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: nowrap; letter-spacing: 0; } .wc-fwc-combined-amount > span { padding-bottom: 0.85rem; } /* Global input-mode toggle (By amount / By percentage of total) */ .wc-fwc-global-toggle { display: flex; gap: 0; margin-bottom: 1.25rem; border-radius: var(--wc-radius); overflow: hidden; background: var(--wc-light); border: 2px solid var(--wc-brand); } .wc-fwc-global-toggle__option { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; font-family: var(--wc-body-font); font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; background: transparent; color: var(--wc-brand); transition: background var(--wc-transition), color var(--wc-transition); user-select: none; min-height: 48px; } .wc-fwc-global-toggle__option input { position: absolute; opacity: 0; width: 0; height: 0; } .wc-fwc-global-toggle__option--active { background: var(--wc-brand); color: var(--wc-white); } .wc-fwc-global-toggle__option:focus-within { outline: 2px solid var(--wc-brand); outline-offset: -2px; } /* Modal: total household waste */ .wc-fwc-modal { border: none; border-radius: var(--wc-radius); padding: 0; max-width: min(540px, 92vw); width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24); background: var(--wc-white); } .wc-fwc-modal::backdrop { background: rgba(38, 45, 50, 0.6); backdrop-filter: blur(2px); } .wc-fwc-modal__content { padding: 2rem; } .wc-fwc-modal__content h3 { font-family: var(--wc-heading-font); font-size: var(--wc-text-lg); color: var(--wc-slate); margin-top: 0; margin-bottom: 0.75rem; } .wc-fwc-modal__description { font-family: var(--wc-body-font); font-size: var(--wc-text-base); color: var(--wc-slate); margin-bottom: 1.25rem; line-height: 1.55; } .wc-fwc-modal .wc-fwc-combined-amount { margin-bottom: 0.75rem; } .wc-fwc-modal .wc-fwc-combined-amount input[type="number"] { padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); transition: border-color var(--wc-transition); min-width: 100%; } .wc-fwc-modal .wc-fwc-combined-amount input[type="number"]:focus-visible { border-color: var(--wc-brand); outline: none; box-shadow: 0 0 0 2px rgba(237, 31, 143, 0.15); } .wc-fwc-modal__error { display: block; min-height: 1.25em; margin-bottom: 1rem; } .wc-fwc-modal__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; } .wc-fwc-btn--modal-cancel { background: transparent; color: var(--wc-slate); box-shadow: none; border: 2px solid var(--wc-slate); } .wc-fwc-btn--modal-cancel:hover { background: var(--wc-light); box-shadow: none; } /* ========================================================================== 9. Step 3 - Likert scale (pink background) ========================================================================== */ .wc-fwc-step[data-fwc-step="3"] .wc-fwc-step__content { background: var(--wc-brand-bg); } .wc-fwc-likert { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .wc-fwc-likert:last-of-type { border-bottom: none; margin-bottom: 1.25rem; } .wc-fwc-likert legend { font-family: var(--wc-heading-font); font-weight: 900; margin-bottom: 0.75rem; font-size: 1.75rem; color: var(--wc-slate); line-height: 1.3; padding: 0; width: 100%; } /* Scale row — accessible pill-style radio group */ .wc-fwc-scale { display: flex; gap: 0.5rem; padding: 0; margin: 0.5rem 0 0; border: 0; min-width: 0; list-style: none; flex-wrap: wrap; } .wc-fwc-scale__option { flex: 1; min-width: 0; } /* Hide the native radio — the label span becomes the visual target */ .wc-fwc-scale__option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } /* Label pill: meets 44px min touch target (WCAG 2.5.5) */ .wc-fwc-scale__option span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.5rem 0.25rem; border: 2px solid #ddd; border-radius: var(--wc-radius); background: var(--wc-white); font-family: var(--wc-body-font); font-size: var(--wc-text-base); font-weight: 600; color: var(--wc-slate); text-align: center; cursor: pointer; transition: background var(--wc-transition), border-color var(--wc-transition), color var(--wc-transition); line-height: 1.3; } .wc-fwc-scale__option span:hover { border-color: var(--wc-brand); } /* Checked state */ .wc-fwc-scale__option input[type="radio"]:checked + span { background: var(--wc-brand); border-color: var(--wc-brand); color: var(--wc-white); } /* Focus-visible ring on the pill */ .wc-fwc-scale__option input[type="radio"]:focus-visible + span { outline: 2px solid var(--wc-brand); outline-offset: 2px; } /* ========================================================================== 10. Step 4 - Privacy (pink background) ========================================================================== */ .wc-fwc-step[data-fwc-step="4"] .wc-fwc-step__content { background: var(--wc-brand-bg); } .wc-fwc-privacy { font-size: var(--wc-text-base); line-height: 1.4; max-width: 700px; color: var(--wc-slate); } /* ========================================================================== 11. Results step ========================================================================== */ .wc-fwc-step[data-fwc-step="results"] { background: var(--wc-light); padding: 2rem 0; } .wc-fwc-step[data-fwc-step="results"] .wc-fwc-step__title { justify-content: center; font-size: 3.5rem; margin-bottom: 0.25rem; } .wc-fwc-results--hidden { display: none; } .wc-fwc-results__subtitle { text-align: center; font-size: var(--wc-text-base); color: #666; margin: 0 0 2rem; font-weight: 400; } .wc-fwc-results-card__unit { font-family: var(--wc-heading-font); font-size: var(--wc-text-base); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wc-slate); line-height: 1.3; margin-top: 0.25rem; } /* Results summary cards (4 in a row) */ .wc-fwc-results-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; } .wc-fwc-results-cards--full { grid-template-columns: 1fr; margin-bottom: 2rem; } .wc-fwc-results-card { text-align: center; padding: 1.5rem 1rem; background: var(--wc-white); border-radius: var(--wc-radius); } .wc-fwc-results-card__heading { font-family: var(--wc-heading-font); text-transform: uppercase; font-size: var(--wc-text-base); letter-spacing: 0.03em; color: var(--wc-slate); font-weight: 900; margin-bottom: 0.75rem; } .wc-fwc-results-card__value { display: flex; flex-direction: column; align-items: center; font-family: var(--wc-heading-font); font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; } /* Branded statement number */ .wc-fwc-results-card__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 0.6rem 1.5rem; border-radius: 0; background: var(--wc-brand); color: var(--wc-white); font-family: var(--wc-heading-font); font-weight: 900; font-size: 1.75rem; text-align: center; line-height: 1.1; margin-bottom: 1rem; box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.18), 1px 2px 3px rgba(0, 0, 0, 0.1); } .wc-fwc-results-card__description { font-family: var(--wc-body-font); font-size: var(--wc-text-base); font-style: italic; color: #555; line-height: 1.4; margin: 0.5rem 0 0; } /* References / footnotes */ .wc-fwc-references { margin: 2rem 0; font-family: var(--wc-body-font); font-size: var(--wc-text-sm, 0.875rem); color: #555; } .wc-fwc-references__toggle { cursor: pointer; font-weight: 700; color: var(--wc-slate); } .wc-fwc-references__body { margin-top: 0.75rem; line-height: 1.6; } /* Share on results */ .wc-fwc-results-share { text-align: center; margin-bottom: 2rem; } /* --- Results summary cards (old class names for JS compatibility) --------- */ .wc-fwc-results__summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; } .wc-fwc-results__card { text-align: center; padding: 1.5rem 1rem; background: var(--wc-white); border-radius: var(--wc-radius); } .wc-fwc-results__card-value { display: block; font-family: var(--wc-heading-font); font-size: 1.75rem; font-weight: 900; color: var(--wc-brand); margin-bottom: 0.25rem; } .wc-fwc-results__card-label { display: block; font-family: var(--wc-heading-font); font-size: var(--wc-text-base); font-weight: 900; text-transform: uppercase; color: var(--wc-slate); } /* Breakdown table */ .wc-fwc-results__breakdown { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: var(--wc-text-base); } .wc-fwc-results__breakdown th, .wc-fwc-results__breakdown td { padding: 0.5rem 0.625rem; text-align: left; border-bottom: 1px solid #ddd; } .wc-fwc-results__breakdown th { font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; font-size: var(--wc-text-base); color: var(--wc-slate); background: var(--wc-light); } .wc-fwc-results__breakdown td:nth-child(n+2), .wc-fwc-results__breakdown th:nth-child(n+2) { text-align: right; } /* Vehicle km equivalence callout */ .wc-fwc-results__vehicle { padding: 0.875rem 1.5rem; background: var(--wc-white); border-left: 4px solid var(--wc-green); border-radius: var(--wc-radius); margin-bottom: 1.5rem; font-size: var(--wc-text-base); line-height: 1.4; } /* ========================================================================== 12. Affirmation section - "You're already making a difference" ========================================================================== */ .wc-fwc-results-section { margin-top: 2rem; } .wc-fwc-results-section__heading { font-family: var(--wc-heading-font); font-size: 3rem; font-weight: 900; text-transform: uppercase; text-align: center; font-style: italic; letter-spacing: 0.02em; color: var(--wc-slate); margin-bottom: 1.5rem; margin-top: 2.5rem; } /* Affirmation cards - left border with gradient green → pink */ .wc-fwc-behaviour-tips { display: flex; flex-direction: column; gap: 0; margin-bottom: 2rem; } .wc-fwc-affirmation-card { padding: 1.25rem 1.5rem; border-radius: 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .wc-fwc-affirmation-card:first-child { border-radius: var(--wc-radius) var(--wc-radius) 0 0; } .wc-fwc-affirmation-card:last-child { border-radius: 0 0 var(--wc-radius) var(--wc-radius); border-bottom: none; } .wc-fwc-affirmation-card:nth-child(1) { background: #4FFFAF; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(2) { background: #95FFCF; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(3) { background: #DCFFEF; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(4) { background: #FBD2E9; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(5) { background: #F8A5D2; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(6) { background: #F479BC; color: var(--wc-slate); } .wc-fwc-affirmation-card:nth-child(7) { background: #ED1F8F; color: var(--wc-white); } .wc-fwc-affirmation-card:nth-child(7) .wc-fwc-affirmation-card__title, .wc-fwc-affirmation-card:nth-child(7) .wc-fwc-affirmation-card__description { color: var(--wc-white); } .wc-fwc-affirmation-card:nth-child(n+8) { background: #ED1F8F; color: var(--wc-white); } .wc-fwc-affirmation-card__title { font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; font-size: var(--wc-text-lg); letter-spacing: 0.03em; margin-bottom: 0.25rem; color: inherit; } .wc-fwc-affirmation-card__description { font-size: var(--wc-text-base); color: inherit; opacity: 0.85; line-height: 1.4; margin: 0; } /* ========================================================================== 13. Tips section - "Easy ways to waste less" ========================================================================== */ .wc-fwc-tips-results { display: flex; flex-direction: column; gap: 0; margin-bottom: 2rem; } .wc-fwc-tips__results { margin-top: 2rem; } .wc-fwc-tips__results--hidden { display: none; } .wc-fwc-tips__heading { font-family: var(--wc-heading-font); font-weight: 900; font-size: 2.5rem; text-transform: uppercase; text-align: center; letter-spacing: 0.02em; color: var(--wc-slate); margin-bottom: 1.25rem; } /* Tip cards - gradient rows green to magenta */ .wc-fwc-tip-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-radius: 0; text-decoration: none; } .wc-fwc-tip-card:first-child { border-radius: var(--wc-radius) var(--wc-radius) 0 0; } .wc-fwc-tip-card:last-child { border-radius: 0 0 var(--wc-radius) var(--wc-radius); } .wc-fwc-tip-card:nth-child(1) { background: #4FFFAF; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(2) { background: #95FFCF; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(3) { background: #DCFFEF; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(4) { background: #FBD2E9; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(5) { background: #F8A5D2; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(6) { background: #F479BC; color: var(--wc-slate); } .wc-fwc-tip-card:nth-child(7) { background: #ED1F8F; color: var(--wc-white); } .wc-fwc-tip-card:nth-child(n+8) { background: #ED1F8F; color: var(--wc-white); } .wc-fwc-tip-card__body { flex: 1; } .wc-fwc-tip-card__title { font-family: var(--wc-heading-font); font-weight: 900; text-transform: uppercase; font-size: var(--wc-text-base); letter-spacing: 0.03em; margin: 0; line-height: 1.3; } .wc-fwc-tip-card__subtitle { font-size: var(--wc-text-base); display: none; margin: 0; } .wc-fwc-tip-card__arrow { font-size: 1.25rem; margin-left: 1rem; flex-shrink: 0; } /* Old class names for backward compatibility */ .wc-fwc-tip-card__icon { flex-shrink: 0; width: 2rem; height: 2rem; font-size: 1.5rem; line-height: 2rem; text-align: center; } .wc-fwc-tip-card__content { flex: 1; min-width: 0; } .wc-fwc-tip-card__desc { margin: 0; font-size: var(--wc-text-base); display: none; } /* ========================================================================== 14. Navigation buttons (.wc-fwc-nav) ========================================================================== */ .wc-fwc-nav { display: flex; justify-content: flex-start; gap: 1rem; max-width: 960px; margin-left: auto; margin-right: auto; padding: 2rem 1rem 2.5rem; flex-wrap: wrap; } /* When both prev and next exist, spread them apart */ .wc-fwc-nav:has(.wc-fwc-btn--prev) { justify-content: center; } .wc-fwc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2.5rem; font-family: var(--wc-heading-font); font-weight: 900; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; border-radius: 0.75rem; border: none; cursor: pointer; text-decoration: none; background: var(--wc-brand); color: var(--wc-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: background var(--wc-transition), transform var(--wc-transition), box-shadow var(--wc-transition); white-space: normal; text-align: center; } .wc-fwc-btn:hover { background: #D01A80; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .wc-fwc-btn:active { transform: scale(0.95); } .wc-fwc-btn:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; } .wc-fwc-btn:disabled, .wc-fwc-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* All button variants are magenta per the design */ .wc-fwc-btn--secondary { background: var(--wc-brand); color: var(--wc-white); } .wc-fwc-btn--secondary:hover { background: #D01A80; } .wc-fwc-btn--prev { background: var(--wc-brand); color: var(--wc-white); } .wc-fwc-btn--prev:hover { background: #D01A80; } .wc-fwc-btn--prev--hidden { visibility: hidden; pointer-events: none; } .wc-fwc-btn--share { background: var(--wc-slate); color: var(--wc-white); font-size: var(--wc-text-base); padding: 0.6rem 2rem; } .wc-fwc-btn--share:hover { background: #3a4248; } .wc-fwc-nav--share { justify-content: center; margin-bottom: 2.5rem; } .wc-fwc-btn--calculate { background: var(--wc-brand); } /* ========================================================================== 15. Form fields (.wc-fwc-field) ========================================================================== */ .wc-fwc-field { margin-bottom: 1rem; } .wc-fwc-field label, .wc-fwc-field legend { display: block; font-weight: 700; margin-bottom: 0.3rem; padding: 0; color: var(--wc-slate); } .wc-fwc-field legend { width: 100%; } /* Text / number / email / tel inputs */ .wc-fwc-field input[type="text"], .wc-fwc-field input[type="email"], .wc-fwc-field input[type="tel"] { display: block; width: 100%; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); transition: border-color var(--wc-transition); } .wc-fwc-field input[type="number"] { display: block; width: 100%; padding: 0.75rem 1rem; border: none; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); } .wc-fwc-field input[type="text"]:focus-visible, .wc-fwc-field input[type="number"]:focus-visible, .wc-fwc-field input[type="email"]:focus-visible, .wc-fwc-field input[type="tel"]:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } /* Selects */ .wc-fwc-field select { display: block; width: 100%; padding: 0.5rem 2rem 0.5rem 0.625rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background-color: var(--wc-white); color: var(--wc-slate); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23262D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; cursor: pointer; transition: border-color var(--wc-transition); } .wc-fwc-field select:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } /* Textareas */ .wc-fwc-field textarea { display: block; width: 100%; min-height: 100px; padding: 0.5rem 0.625rem; border: 1px solid #ddd; border-radius: var(--wc-radius); font-family: var(--wc-body-font); font-size: 1rem; line-height: 1.6; background: var(--wc-white); color: var(--wc-slate); resize: vertical; transition: border-color var(--wc-transition); } .wc-fwc-field textarea:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-color: var(--wc-brand); } /* Radio chip buttons — matches Magic Patterns prototype: px-5 py-3 rounded-full border-2 border-transparent bg-white shadow-sm */ .wc-fwc-radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem; border: 0; margin: 0; padding: 0; min-width: 0; } .wc-fwc-radio-group label { display: inline-flex; align-items: center; padding: 0.75rem 1.25rem; border: 2px solid transparent; border-radius: 999px; background: var(--wc-white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-family: var(--wc-body-font); font-weight: 600; font-size: 0.875rem; color: #374151; cursor: pointer; transition: all 200ms ease; white-space: nowrap; gap: 0; margin: 0; } .wc-fwc-radio-group label:hover { border-color: #d1d5db; background: #f9fafb; } /* Visually hide the native radio input */ .wc-fwc-radio-group input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Selected pill state */ .wc-fwc-radio-group label:has(input[type="radio"]:checked) { background: var(--wc-brand); border-color: var(--wc-brand); color: var(--wc-white); } /* JS fallback class for browsers without :has() */ .wc-fwc-radio-group label.wc-fwc-radio--checked { background: var(--wc-brand); border-color: var(--wc-brand); color: var(--wc-white); } /* Focus ring on the pill when radio is focused */ .wc-fwc-radio-group label:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--wc-brand); outline-offset: 2px; } .wc-fwc-radio-group input[type="radio"]:focus-visible + span { outline: 2px solid var(--wc-brand); outline-offset: 2px; border-radius: 999px; } /* Segmented toggle (Weight/Portions) */ .wc-fwc-toggle { display: inline-flex; border: 2px solid var(--wc-slate); border-radius: var(--wc-radius); overflow: hidden; margin-bottom: 1rem; } .wc-fwc-toggle__option input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .wc-fwc-toggle__option span { display: inline-flex; align-items: center; justify-content: center; padding: 0.4375rem 1rem; font-family: var(--wc-heading-font); font-size: var(--wc-text-base); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; background: var(--wc-white); color: var(--wc-slate); cursor: pointer; transition: background var(--wc-transition), color var(--wc-transition); } .wc-fwc-toggle__option + .wc-fwc-toggle__option span { border-left: 2px solid var(--wc-slate); } .wc-fwc-toggle__option span:hover { background: var(--wc-light); } .wc-fwc-toggle__option input[type="radio"]:checked + span { background: var(--wc-slate); color: var(--wc-white); } .wc-fwc-toggle__option input[type="radio"]:focus-visible + span { outline: 2px solid var(--wc-brand); outline-offset: -2px; z-index: 1; } /* ========================================================================== 16. Validation and error states ========================================================================== */ .wc-fwc-field--error input[type="text"], .wc-fwc-field--error input[type="number"], .wc-fwc-field--error input[type="email"], .wc-fwc-field--error input[type="tel"], .wc-fwc-field--error select, .wc-fwc-field--error textarea { border-color: var(--wc-error); border-width: 2px; } .wc-fwc-error { display: block; color: var(--wc-error); font-size: var(--wc-text-base); margin-top: 0.3rem; min-height: 0; } .wc-fwc-error:not(:empty)::before { content: none; } .wc-fwc-error:empty { display: none; } .wc-fwc-error--pct-total { display: block; color: var(--wc-slate); font-weight: 700; margin-top: 0.5rem; } .wc-fwc-validation-banner { padding: 0.75rem 1.5rem; background: #fff5f5; border: 1px solid var(--wc-error); border-radius: var(--wc-radius); margin-top: 1rem; color: var(--wc-error); font-size: var(--wc-text-base); font-weight: 600; } .wc-fwc-validation-banner--hidden { display: none; } .wc-fwc-submission-error { padding: 0.75rem 1.5rem; background: #fff5f5; border: 1px solid var(--wc-error); border-radius: var(--wc-radius); margin-top: 1rem; } .wc-fwc-submission-error--hidden { display: none; } .wc-fwc-submission-error__message { margin: 0; color: var(--wc-error); font-size: var(--wc-text-base); font-weight: 600; } .wc-fwc-submission-error__message::before { content: "\26A0\FE0F "; } /* ========================================================================== 17. Help / note / instruction text ========================================================================== */ .wc-fwc-help { display: block; color: #374151; font-size: var(--wc-text-base); margin-top: 0.3rem; } /* Postcode field: narrow, no visible border, shadow instead */ #wc-fwc-postcode { max-width: 240px; border: 2px solid transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 1.125rem; } #wc-fwc-postcode:focus-visible { border-color: var(--wc-brand); box-shadow: none; } .wc-fwc-note { display: block; color: #555; font-size: var(--wc-text-base); margin-top: 0.5rem; font-style: italic; } .wc-fwc-instruction { margin-top: 0; margin-bottom: 1rem; color: #555; font-size: var(--wc-text-base); line-height: 1.4; } /* Email field — smooth reveal when opt-in is checked */ .wc-fwc-field--email { max-height: 200px; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease; opacity: 1; margin-top: 1rem; } .wc-fwc-field--email-hidden { max-height: 0; opacity: 0; margin-top: 0; } /* ========================================================================== 18. Progress bar (legacy / fallback) ========================================================================== */ .wc-fwc-progress { background: var(--wc-light); border-radius: var(--wc-radius); padding: 0.5rem 1.5rem; margin-bottom: 1rem; text-align: center; } .wc-fwc-progress__label { font-family: var(--wc-heading-font); font-size: var(--wc-text-base); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wc-slate); } /* ========================================================================== 19. Decorative images (.wc-fwc-decor) ========================================================================== */ /* * Decorative vegetables sit behind the content card (z-index: 0) * while the card is z-index: 1. This creates the layered effect * from the Figma mockups where vegetables peek out from behind. */ .wc-fwc-decor { position: absolute; pointer-events: none; z-index: 0; user-select: none; } .wc-fwc-decor img { width: 100%; height: auto; display: block; } /* Step 1 decoratives */ .wc-fwc-decor--step1-broccoli { top: 20px; left: 0; width: 450px; transform: rotate(-10deg); } .wc-fwc-decor--step1-capsicum { bottom: 40px; right: 30px; width: 350px; transform: rotate(10deg); } /* Step 2 decoratives — fixed pixel positions so they don't shift when cards expand */ .wc-fwc-decor--step2-peas { top: -30px; left: -20px; width: 380px; transform: rotate(-10deg); } .wc-fwc-decor--step2-avocado { bottom: -20px; left: -10px; width: 340px; transform: rotate(5deg); } .wc-fwc-decor--step2-apple { top: -40px; right: -20px; width: 400px; transform: rotate(8deg); } /* Step 3 decoratives */ .wc-fwc-decor--step3-corn { bottom: 0; left: 1%; width: 220px; transform: rotate(-10deg); } .wc-fwc-decor--step3-watermelon { top: 0; right: -322px; width: 941px; transform: rotate(8deg); } /* Step 4 decoratives */ .wc-fwc-decor--step4-leaf { top: 20px; left: -90px; width: 610px; transform: rotate(-12deg); } .wc-fwc-decor--step4-tomato { bottom: 10px; right: 15px; width: 320px; transform: rotate(10deg); } /* Results decoratives */ .wc-fwc-decor--results-cherry { top: 5%; right: -118px; width: 610px; transform: rotate(-5deg); } .wc-fwc-decor--results-leaf { top: 25%; left: -60px; width: 610px; transform: rotate(8deg); } .wc-fwc-decor--results-food { bottom: 5%; left: -100px; width: 570px; transform: rotate(-5deg); } .wc-fwc-decor--results-broccoli { bottom: 2%; left: 1%; width: 240px; transform: rotate(-8deg); } /* Hide decoratives when viewport too narrow for gutters */ @media screen and (max-width: 1100px) { .wc-fwc-decor { display: none; } } /* ========================================================================== 20. Responsive - tablet (max-width: 768px) ========================================================================== */ @media screen and (max-width: 768px) { .wc-fwc-step { padding: 1.5rem 0; } .wc-fwc-step__content { padding-left: 1.25rem; padding-right: 1.25rem; } .wc-fwc-step__title { font-size: 1.6rem; } .wc-fwc-results-cards, .wc-fwc-results__summary { grid-template-columns: repeat(2, 1fr); } /* Category cards: tighter on tablet */ .wc-fwc-categories { gap: 0.75rem; } .wc-fwc-category__check { grid-template-columns: 100px 1fr; } .wc-fwc-stepper__label { display: none; } .wc-fwc-results-section__heading, .wc-fwc-tips__heading { font-size: 1.75rem; } .wc-fwc-step[data-fwc-step="results"] .wc-fwc-step__title { font-size: 2.5rem; } } /* ========================================================================== 21. Responsive - mobile (max-width: 480px) ========================================================================== */ @media screen and (max-width: 480px) { .wc-fwc-stepper { padding: 1rem 0.5rem; } .wc-fwc-stepper__circle { width: 40px; height: 40px; font-size: 1rem; } .wc-fwc-step { padding: 1.25rem 0; } .wc-fwc-step__content { padding-left: 1rem; padding-right: 1rem; } .wc-fwc-step__title { font-size: 1.4rem; } .wc-fwc-step__number { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; } .wc-fwc-results-cards, .wc-fwc-results__summary { grid-template-columns: 1fr; } .wc-fwc-nav { flex-direction: column; align-items: center; } .wc-fwc-btn { width: 100%; } .wc-fwc-btn--prev--hidden { display: none; } .wc-fwc-results-section__heading, .wc-fwc-tips__heading { font-size: 1.5rem; } .wc-fwc-step[data-fwc-step="results"] .wc-fwc-step__title { font-size: 2rem; } /* Category cards: compact on mobile */ .wc-fwc-categories { gap: 0.5rem; } .wc-fwc-category__check { min-height: 64px; border-radius: 0 0 var(--wc-radius) var(--wc-radius); } .wc-fwc-category:has(input:checked) .wc-fwc-category__check { border-radius: 0; } .wc-fwc-category__image { padding: 0.25rem; } .wc-fwc-category__text { padding: 0.5rem 0.75rem; } .wc-fwc-category__label { font-size: 1.125rem; } .wc-fwc-toggle { flex-direction: column; width: 100%; } .wc-fwc-toggle__option span { width: 100%; } .wc-fwc-toggle__option + .wc-fwc-toggle__option span { border-left: none; border-top: 2px solid var(--wc-slate); } .wc-fwc-qty { width: 7rem; } .wc-fwc-qty__btn { padding: 0.5rem; } .wc-fwc-radio-group label { padding: 0.5rem 1rem; font-size: 0.8125rem; } }