/* ========================================================================== Tablo Quiz Builder — Front-end Styles ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties (defaults — overridden by PHP via :root in ) -------------------------------------------------------------------------- */ :root { --tablo-primary: #359c7d; --tablo-primary-light: #7fc9b3; --tablo-button-bg: #045DB1; --tablo-button-hover: #005684; --tablo-black: #000000; --tablo-white: #ffffff; --tablo-light-gray: #f9f9f9; --tablo-medium-gray: #e7e7e7; --tablo-dark-gray: #b9b9b9; --tablo-text-muted: #8b8b8b; --tablo-radius-large: 20px; --tablo-radius-pill: 100px; --tablo-font: 'Source Sans 3', 'Source Sans Pro', sans-serif; --tablo-transition: 0.2s ease; --tablo-max-quiz-width: 1170px; } /* -------------------------------------------------------------------------- Intro — heading + subheading above the quiz card (per-step, updated by JS) -------------------------------------------------------------------------- */ .tablo-quiz__intro { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; max-width: var(--tablo-max-quiz-width); margin: 0 auto 32px; color: var(--tablo-black); } .tablo-quiz__intro[hidden] { display: none; } .tablo-quiz__intro-heading { font-family: var(--tablo-font); font-weight: 700; font-size: 52px !important; line-height: 1.1; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } .tablo-quiz__intro-subheading { font-family: var(--tablo-font); font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } .tablo-quiz__intro-bfy { display: flex; align-items: center; gap: 8px; border-radius: 100px; border: 1px solid #FAEBDD; background: #FAEBDD; padding: 4px 12px; } .tablo-quiz__intro-bfy[hidden] { display: none; } .tablo-quiz__intro-bfy__text { font-family: var(--tablo-font); font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: -0.48px; margin: 0; color: var(--tablo-black); } /* -------------------------------------------------------------------------- Quiz Card -------------------------------------------------------------------------- */ .tablo-quiz { font-family: var(--tablo-font); color: var(--tablo-black); box-sizing: border-box; } .tablo-quiz *, .tablo-quiz *::before, .tablo-quiz *::after { box-sizing: inherit; } .tablo-quiz__card { background: var(--tablo-white); border-radius: var(--tablo-radius-large); box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); padding: 56px 60px; display: flex; flex-direction: column; gap: 36px; max-width: var(--tablo-max-quiz-width); margin: 0 auto; } .tablo-quiz__card p { margin: 0 !important; } /* -------------------------------------------------------------------------- Header — Step Label + Progress Bar -------------------------------------------------------------------------- */ .tablo-quiz__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--tablo-medium-gray); } .tablo-quiz__header[hidden] { display: none; } .tablo-quiz__step-label { font-weight: 700; font-size: 20px; color: var(--tablo-primary); letter-spacing: -0.03em; line-height: 1.5; white-space: nowrap; } /* Progress dots + connector lines */ .tablo-quiz__progress { display: flex; align-items: center; gap: 0; } .tablo-progress__dot { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tablo-primary-light); background: var(--tablo-white); flex-shrink: 0; position: relative; z-index: 1; transition: background var(--tablo-transition), border-color var(--tablo-transition); color: var(--tablo-white); } .tablo-progress__dot.is-complete { background: var(--tablo-primary); border-color: var(--tablo-primary); } .tablo-progress__dot.is-active { background: var(--tablo-primary); border-color: var(--tablo-primary); box-shadow: 0 0 0 3px rgba(53, 156, 125, 0.2); } .tablo-progress__line { width: 38px; height: 2px; background: var(--tablo-primary-light); flex-shrink: 0; margin: 0 -1px; } /* Recommendation badge (last item in progress bar) */ .tablo-progress__badge { display: flex; align-items: center; gap: 8px; border: 2.5px solid var(--tablo-primary-light); border-radius: var(--tablo-radius-pill); padding: 5px 16px; color: var(--tablo-primary); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; white-space: nowrap; transition: border-color var(--tablo-transition), background var(--tablo-transition), color var(--tablo-transition); } .tablo-progress__badge.is-active { border-color: var(--tablo-primary); background: rgba(53, 156, 125, 0.08); } .tablo-progress__badge-icon { width: 16px; height: 15px; flex-shrink: 0; } /* -------------------------------------------------------------------------- Step content transitions -------------------------------------------------------------------------- */ .tablo-quiz__step { display: none; animation: tabloFadeIn 0.25s ease forwards; } .tablo-quiz__step.is-active { display: block; } @keyframes tabloFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- Step Inner Layout -------------------------------------------------------------------------- */ .tablo-step-inner { display: flex; flex-direction: column; gap: 20px; } /* -------------------------------------------------------------------------- Heading + Description -------------------------------------------------------------------------- */ .tablo-step__heading { font-weight: 700; font-size: 48px !important; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 0; color: var(--tablo-black); } .tablo-step__description { font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } /* -------------------------------------------------------------------------- Option Cards (answer choices) -------------------------------------------------------------------------- */ .tablo-step__options { display: flex; flex-direction: column; gap: 16px; } .tablo-option-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px; background: var(--tablo-white); border: 1px solid var(--tablo-dark-gray); border-radius: var(--tablo-radius-large); cursor: pointer; text-align: left; text-decoration: none; color: var(--tablo-black); transition: border-color var(--tablo-transition), box-shadow var(--tablo-transition), background var(--tablo-transition); font-family: var(--tablo-font); } .tablo-option-card:hover { border-color: var(--tablo-primary-light); box-shadow: 0 0 0 3px rgba(53, 156, 125, 0.12); } .tablo-option-card:focus-visible { outline: 2px solid var(--tablo-primary); outline-offset: 3px; } .tablo-option-card.is-selected { border-color: var(--tablo-primary); box-shadow: 0 0 0 3px rgba(53, 156, 125, 0.15); background: rgba(53, 156, 125, 0.04); } .tablo-option-card__content { display: flex; flex-direction: column; gap: 11px; flex: 1 0 0; min-width: 0; } .tablo-option-card__title { font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } .tablo-option-card__desc { font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } /* Checkmark icon — hidden until selected */ .tablo-option-card__check { display: flex; align-items: center; color: var(--tablo-primary); opacity: 0; flex-shrink: 0; transition: opacity var(--tablo-transition); } .tablo-option-card.is-selected .tablo-option-card__check { opacity: 1; } /* -------------------------------------------------------------------------- Checklist block -------------------------------------------------------------------------- */ .tablo-checklist { background: var(--tablo-light-gray); border-radius: var(--tablo-radius-large); padding: 20px; } .tablo-checklist__heading { font-weight: 700; font-size: 20px; line-height: 2.6; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } .tablo-checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .tablo-checklist__item { display: flex; align-items: center; gap: 16px; padding: 12px 0; font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -0.03em; color: var(--tablo-black); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .tablo-checklist__item:last-child { border-bottom: none; } .tablo-checklist__icon { flex-shrink: 0; display: flex; align-items: center; width: 17px; } /* -------------------------------------------------------------------------- Step 2 location form -------------------------------------------------------------------------- */ .tablo-step-inner--location { gap: 36px; } .tablo-step-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border: 1px solid var(--tablo-button-bg); border-radius: 300px; color: var(--tablo-button-bg); font-family: var(--tablo-font); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.03em; text-decoration: none; transition: background var(--tablo-transition), color var(--tablo-transition); } .tablo-step-back:hover { background: rgba(4, 93, 177, 0.06); color: var(--tablo-button-bg); } .tablo-step-back:focus-visible { outline: 2px solid var(--tablo-button-bg); outline-offset: 3px; } .tablo-step-callout { display: flex; align-items: flex-start; gap: 20px; padding: 20px; background: #d8f0ea; border-radius: var(--tablo-radius-large); } .tablo-step-callout__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--tablo-primary); color: var(--tablo-white); } .tablo-step-callout__text { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.03em; color: var(--tablo-black); } .tablo-step-callout__text strong { font-weight: 700; } .tablo-step-form { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; } input[type="text"].tablo-step-form__input { width: 100%; padding: 24px 30px; border: 1px solid #dddddd; border-radius: var(--tablo-radius-pill); background: var(--tablo-white); color: var(--tablo-black); font-family: var(--tablo-font); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.03em; transition: border-color var(--tablo-transition), box-shadow var(--tablo-transition); } .tablo-step-form__input::placeholder { color: var(--tablo-text-muted); opacity: 1; } .tablo-step-form__input:focus-visible { outline: 2px solid var(--tablo-button-bg); outline-offset: 3px; } .tablo-step-form__input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); } .tablo-step-form__error { align-self: flex-start; margin: -4px 0 0; color: #b42318; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; } .tablo-step-form__error.is-hidden { display: none; } .tablo-step-form__error--lookup { margin-top: 0; } .tablo-step-form__submit { min-width: 173px; padding: 20px 32px; } .tablo-step-form__submit.is-disabled { pointer-events: none; } .tablo-step-form__submit.is-loading { cursor: wait; } .tablo-step-form__test-tools { width: 100%; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .tablo-step-form__test-label { margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--tablo-text-muted); text-transform: uppercase; } .tablo-step-form__test-grid { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 10px; } .tablo-step-form__test-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--tablo-dark-gray); border-radius: 999px; background: var(--tablo-white); color: var(--tablo-black); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-decoration: none; transition: border-color var(--tablo-transition), background var(--tablo-transition), color var(--tablo-transition); } .tablo-step-form__test-button:hover { border-color: var(--tablo-primary); background: rgba(53, 156, 125, 0.06); color: var(--tablo-black); } .tablo-step-form__test-button:focus-visible { outline: 2px solid var(--tablo-primary); outline-offset: 3px; } /* -------------------------------------------------------------------------- Step 2A placement / direction -------------------------------------------------------------------------- */ .tablo-step-inner--placement { gap: 36px; } .tablo-step-direction-layout { display: flex; gap: 36px; align-items: stretch; width: 100%; } .tablo-step-direction-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 20px; border-radius: var(--tablo-radius-large); background: linear-gradient(345deg, #D8F0EA 2.87%, #FFF 167.22%); } .tablo-step-direction-pill { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 12px 20px; border-radius: 8px; background: var(--tablo-white); text-align: center; } .tablo-step-direction-pill__label, .tablo-step-direction-pill__value { font-size: 20px; line-height: 1.5; letter-spacing: -0.03em; } .tablo-step-direction-pill__label { font-weight: 400; color: var(--tablo-black); } .tablo-step-direction-pill__value { display: inline-flex; align-items: center; justify-content: center; padding: 0px 8px; border-radius: 4px; background: #ff7276; color: var(--tablo-white); font-weight: 900; } .tablo-step-direction-visual { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 320px; } .tablo-step-direction-visual__image { display: block; max-width: 100%; width: auto; height: auto; max-height: 320px; } .tablo-step-direction-caption { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.03em; text-align: center; color: var(--tablo-black); } .tablo-step__options--placement { flex: 1 1 0; min-width: 0; gap: 16px; } .tablo-step__options--placement .tablo-option-card { padding: 20px; } /* -------------------------------------------------------------------------- Navigation Buttons -------------------------------------------------------------------------- */ .tablo-quiz__footer { display: flex; align-items: center; justify-content: center; gap: 16px; } .tablo-quiz__footer[hidden] { display: none; } .tablo-quiz__btn--back[hidden] { display: none; } .tablo-quiz__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tablo-font); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; line-height: 1.2; border: none; cursor: pointer; transition: background var(--tablo-transition), color var(--tablo-transition), opacity var(--tablo-transition); text-decoration: none; } .tablo-quiz__btn:focus-visible { outline: 2px solid var(--tablo-primary); outline-offset: 3px; } /* Next / primary button */ .tablo-quiz__btn--next { background: var(--tablo-medium-gray) !important; color: var(--tablo-text-muted) !important; border-radius: var(--tablo-radius-pill); padding: 14px 32px; min-width: 180px; justify-content: center; transition: background var(--tablo-transition), color var(--tablo-transition); } .tablo-quiz__btn--next[aria-disabled="true"] { background: var(--tablo-medium-gray) !important; color: var(--tablo-text-muted) !important; cursor: not-allowed; } .tablo-quiz__btn--next:not([aria-disabled="true"]) { background: var(--tablo-button-bg) !important; color: var(--tablo-white) !important; } .tablo-quiz__btn--next:not([aria-disabled="true"]):hover { background: var(--tablo-button-hover) !important; color: var(--tablo-white) !important; } /* Back button */ .tablo-quiz__btn--back { background: transparent !important; color: var(--tablo-text-muted) !important; border-radius: var(--tablo-radius-pill); padding: 14px 20px; font-weight: 600; } .tablo-quiz__btn--back:hover { color: var(--tablo-black) !important; } /* -------------------------------------------------------------------------- Result Step -------------------------------------------------------------------------- */ /* Card wrapper — positions the "Our Recommendation" badge over the card border */ .tablo-result__card-wrapper { position: relative; padding-top: 20px; /* space for the overlapping badge */ width: 100%; } /* "Our Recommendation" badge pill — overlaps the top-left of the product card */ .tablo-result__rec-badge { position: absolute; top: 0; left: 40px; display: inline-flex; align-items: center; gap: 8px; background: var(--tablo-primary); border: 1px solid #faebdd; border-radius: var(--tablo-radius-pill); padding: 8px 16px; color: var(--tablo-white); font-family: var(--tablo-font); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; white-space: nowrap; z-index: 2; } /* Product card — teal border, two-column layout */ .tablo-result__product-card { display: flex; gap: 32px; align-items: stretch; background: var(--tablo-white); border: 2px solid var(--tablo-primary); border-radius: var(--tablo-radius-large); padding: 40px; width: 100%; } /* Left column: image */ .tablo-result__image-col { position: relative; flex-shrink: 0; width: 320px; min-height: 200px; background: #dadad8; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tablo-result__product-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } /* Type badge on the image (e.g. "2-Tuner") */ .tablo-result__image-badge { position: absolute; top: 60px; right: 0; background: #1a1a2e; color: var(--tablo-white); font-family: var(--tablo-font); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; border-radius: 20px 0px 0px 20px; padding: 4px 10px; } /* Right column: product info */ .tablo-result__info-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; } /* Product name */ #tablo-result-product { font-family: var(--tablo-font); font-weight: 700; font-size: 48px; line-height: 1.1; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } /* Description */ .tablo-result__product-desc { font-family: var(--tablo-font); font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; margin: 0; color: var(--tablo-black); } /* Feature checklist */ .tablo-result__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .tablo-result__feature-item { display: flex; align-items: center; gap: 16px; padding: 12px 0; font-family: var(--tablo-font); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -0.03em; color: var(--tablo-black); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .tablo-result__feature-item:last-child { border-bottom: none; } .tablo-result__feature-icon { flex-shrink: 0; display: flex; align-items: center; width: 17px; } /* Price + primary CTA row */ .tablo-result__purchase-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tablo-result__price { font-family: var(--tablo-font); font-weight: 700; font-size: 36px; line-height: 1.4; letter-spacing: -0.03em; color: var(--tablo-black); white-space: nowrap; } .tablo-result__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--tablo-button-bg) !important; color: var(--tablo-white) !important; font-family: var(--tablo-font); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; text-decoration: none; border-radius: var(--tablo-radius-pill); padding: 15px 20px; white-space: nowrap; transition: background var(--tablo-transition), box-shadow var(--tablo-transition); } .tablo-result__cta:hover { background: var(--tablo-button-hover) !important; color: var(--tablo-white) !important; } /* Secondary text links */ .tablo-result__secondary-links { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; } .tablo-result__text-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tablo-font); font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -0.03em; color: var(--tablo-button-bg) !important; text-decoration: none; white-space: nowrap; transition: opacity var(--tablo-transition); } .tablo-result__text-link:hover { opacity: 0.75; } /* ── Trust Badges ─────────────────────────────────────────────────────── */ .tablo-result__trust { display: flex; gap: 10px; align-items: flex-start; justify-content: center; padding: 12px; width: 100%; margin-bottom: 20px; } .tablo-result__trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 200px; text-align: center; } .tablo-result__trust-icon { display: flex; align-items: center; justify-content: center; color: var(--tablo-black); } .tablo-result__trust-item p { font-family: var(--tablo-font); font-weight: 400; font-size: 16px; line-height: 1.3; letter-spacing: -0.03em; color: var(--tablo-black); margin: 0; } /* ── Step accordion sections ─────────────────────────────────────────── */ .tablo-step__accordions, .tablo-result__resources { display: flex; flex-direction: column; gap: 20px; width: 100%; } /* Individual accordion item */ .tablo-accordion { border: 1px solid #009bdc; border-radius: var(--tablo-radius-large); overflow: hidden; transition: box-shadow var(--tablo-transition); } .tablo-accordion:focus-within { box-shadow: 0 0 0 3px rgba(0, 155, 220, 0.15); } /* Trigger / header link-button */ .tablo-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px; background: transparent; border: none; cursor: pointer; font-family: var(--tablo-font); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; color: var(--tablo-black) !important; text-align: left; text-decoration: none; transition: background var(--tablo-transition); } .tablo-accordion__trigger:hover { background: rgba(0, 155, 220, 0.04); } .tablo-accordion__trigger:focus-visible { outline: 2px solid #009bdc; outline-offset: -2px; } .tablo-accordion__trigger span { color: var(--tablo-black); } /* Chevron icon — rotates when open */ .tablo-accordion__chevron { flex-shrink: 0; opacity: 0.5; transition: transform var(--tablo-transition); } .tablo-accordion__trigger[aria-expanded="true"] .tablo-accordion__chevron { transform: rotate(180deg); opacity: 0.8; } /* Panel — hidden/visible via the [hidden] attribute toggled by JS */ .tablo-accordion__panel { border-top: 1px solid rgba(0, 155, 220, 0.3); } .tablo-accordion__panel[hidden] { display: none; } /* Content inside the panel */ .tablo-accordion__content { padding: 20px; font-family: var(--tablo-font); font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: var(--tablo-black); } .tablo-accordion__content > *:first-child { margin-top: 0; } .tablo-accordion__content > *:last-child { margin-bottom: 0; } .tablo-accordion__content a { color: var(--tablo-button-bg); text-decoration: underline; } .tablo-accordion__content a:hover { opacity: 0.8; } /* ── Start Over link-button (result step only) ────────────────────────── */ .tablo-result__restart { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--tablo-button-bg); border-radius: 300px; padding: 6px 12px; background: transparent; color: var(--tablo-button-bg) !important; font-family: var(--tablo-font); font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -0.03em; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--tablo-transition), color var(--tablo-transition); align-self: flex-start; margin-top: 20px; } .tablo-result__restart:hover { background: var(--tablo-button-bg) !important; color: var(--tablo-white) !important; } .tablo-result__restart:focus-visible { outline: 2px solid var(--tablo-button-bg) !important; outline-offset: 3px; } .tablo-result__restart:hover path { fill: var(--tablo-white) !important; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 768px) { .tablo-quiz__card { padding: 32px 24px; gap: 24px; } .tablo-quiz__intro-heading { font-size: 36px !important; } .tablo-quiz__intro-subheading { font-size: 17px; } .tablo-quiz__intro { margin-bottom: 24px; } .tablo-quiz__header { flex-direction: column; align-items: center; gap: 12px; } .tablo-quiz__progress { scale: 0.7; } .tablo-quiz__footer { flex-direction: column-reverse; } .tablo-step__heading { font-size: 32px !important; } .tablo-step__description, .tablo-option-card__title, .tablo-checklist__item { font-size: 17px; } .tablo-step-inner--location { gap: 24px; } .tablo-step-back { font-size: 16px; } .tablo-step-callout { gap: 16px; } .tablo-step-callout__text { font-size: 17px; } .tablo-step-form__input { padding: 20px 24px; font-size: 18px; } .tablo-step-form__test-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .tablo-step-direction-layout { flex-direction: column; gap: 24px; } .tablo-step-direction-card, .tablo-step__options--placement { width: 100%; } .tablo-step-direction-pill__label, .tablo-step-direction-pill__value, .tablo-step-direction-caption { font-size: 17px; } /* Result — stack image above content on tablet */ .tablo-result__product-card { flex-direction: column; } .tablo-result__image-col { width: 100%; min-height: 220px; } .tablo-result__product-name { font-size: 32px; } .tablo-result__price { font-size: 28px; } .tablo-result__purchase-row { flex-direction: column; align-items: flex-start; gap: 12px; } .tablo-result__trust { flex-wrap: wrap; } .tablo-result__trust-item { width: calc(33% - 8px); } .tablo-result__rec-badge { left: 20px; } } @media (max-width: 480px) { .tablo-quiz__intro-heading { font-size: 28px !important; } .tablo-quiz__intro-subheading { font-size: 16px; } .tablo-quiz__intro { margin-bottom: 20px; } .tablo-quiz__card { padding: 24px 16px; border-radius: 12px; } #tablo-result-product { font-size: 36px !important; } .tablo-step__heading { font-size: 26px !important; } .tablo-step-callout { flex-direction: column; } .tablo-step-form__submit { width: 100%; justify-content: center; } .tablo-step-form__test-grid { grid-template-columns: 1fr; } .tablo-progress__badge-text { display: none; } .tablo-step-direction-visual { min-height: 220px; } .tablo-step-direction-visual__image { max-height: 220px; } /* Result — tighter on mobile */ .tablo-result__product-card { padding: 20px 16px; gap: 20px; } .tablo-result__product-name { font-size: 26px; } .tablo-result__product-desc, .tablo-result__feature-item { font-size: 16px; } .tablo-result__trust { flex-direction: column; align-items: center; } .tablo-result__trust-item { width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; } .tablo-result__secondary-links { flex-direction: column; gap: 12px; } .tablo-result__cta { width: 100%; justify-content: center; } .tablo-result__rec-badge { font-size: 14px; left: 16px; padding: 6px 12px; } }