/* EF-3 quiz styles (.efa-*) — verbatim isolated copy of css/ef3-alt.css for INTRO-1 (index.html) ONLY. The portfolio loads css/ef3-alt.css directly; INTRO-1's EF port omitted it, so card 3's .efa-card had no fixed 438 box and its content stacked to ~7139px (clipped). Loading this restores the portfolio-identical quiz layout. Keep in sync manually if the portfolio EF-3 styles change. Portfolio/INTRO-3 unaffected. */ /* EF-3 "How it works" — promoted from the ef-alt experiment (was ef-alt/index.html, build T27). Component styles only; gated to .ef-stack[data-state="s2"]. ?v=290 on promotion. */ /* =========================================================================== EF "Travel-based learning / How it works" — ALTERNATE approach (v2) Standalone. Faithful to Figma nodes (file LrUdy5WZmi3n2gkRz9SEC2): Q1 OBJECTIVES default 872:904 / selected 988:584 Q2 ACTIVITIES default 1158:11562 / selected 1159:13824 Q3 TIMING default 1158:11204 / selected 1159:14152 Q4 EXPERIENCE default 1158:12541 / selected 1159:14643 Differences vs the existing build (which stays untouched): • Q.1–Q.4 stepper moved to the TOP of the card (was bottom) • Q2/Q3/Q4 become pill chips with circular icon badges (was big cards) • Selection model: Q1 = dark tag fill; Q2–Q4 = icon badge fills #191919 • Top-right arrow-dots glyph + pink up-caret on the open card ========================================================================= */ :root{ --ink:#191919; --pink:#da2381; --paper:#f7f7f7; --divider:rgba(25,25,25,0.3); --nav-bg:rgba(148,148,148,0.05); --blue:#006AE6; --step-dim:rgba(25,25,25,0.5); } .efa-card,.efa-card *{box-sizing:border-box;} /* ---- the EF-3 card ------------------------------------------------------- */ /* In-stack EF-3 card — mirrors .ef3-card box model (763×438, slot left-pad 84.25px, clipped by .ef-screen--3 overflow:hidden). Hidden until the stack is in s2. */ .efa-card{ /* 763 -> 799 (2026-07-28): fills the now-799 .ef-screen--3 instead of leaving 36px of bare --paper at the right. The body below is a flex row, so the extra width lands in the right column rather than re-flowing anything. 799 -> 762 (2026-07-29, dual offset): .ef-screen--3 is 762 in every state now — EF-3's own right-ladder edge (799 - 1x37), held whenever it is unpeeled — so 799 would be clipped 37px on the right. This takes the width back out of the same right column the 2026-07-28 bump put it into, and lands within 1px of this card's original authored 763. The 84.25px left pad still clears the 37px of left peeks stacked over it at s2. */ width:var(--ef-w3);height:438px;background:var(--paper); padding:44.762px 55.953px 44.762px 84.25px; display:flex;flex-direction:column;gap:15px; color:var(--ink); opacity:0; } .ef-stack[data-state="s2"] .efa-card{opacity:1;} .efa-header{display:flex;flex-direction:column;width:604px;} .efa-eyebrow{margin:0;font-size:8px;font-weight:700;letter-spacing:.48px;line-height:7.46px;text-transform:uppercase;} .efa-title-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;} .efa-title{margin:0;font-size:20px;font-weight:700;line-height:37.302px;white-space:nowrap;} .efa-tabs{display:inline-flex;gap:3.73px;align-items:center;} .efa-tab{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;border-radius:14.921px;font-size:8px;font-weight:500;line-height:11.191px;background:#fff;color:var(--ink);border:.466px solid var(--ink);white-space:nowrap;} .efa-tab--active{background:var(--pink);color:#fff;border-color:transparent;} .efa-rule{width:100%;height:0;border-top:.466px solid var(--divider);margin-top:4px;} /* top-align so IMG-EF-3 pins to the sub-nav row and never re-centers as panels swap height (was align-items:center → photo shifted every question). */ .efa-body{display:flex;gap:33.572px;align-items:flex-start;width:604px;} .efa-photo{width:199.329px;height:244.793px;border-radius:8px;overflow:hidden;flex-shrink:0;} .efa-photo img{width:100%;height:100%;object-fit:cover;display:block;} .efa-right{display:flex;flex-direction:column;gap:8px;width:371px;min-height:247px;} /* ---- open question card (nav + body) ------------------------------------ */ .efa-open{display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;} /* top stepper */ .efa-nav{background:var(--nav-bg);height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-radius:8px 8px 0 0;} .efa-steps{display:flex;align-items:center;gap:16px;} .efa-step{display:inline-flex;align-items:center;gap:4px;font-size:6px;font-weight:500;line-height:1;color:var(--step-dim);background:none;border:0;padding:0;cursor:pointer;letter-spacing:.1px;white-space:nowrap;font-family:inherit;} .efa-step--active{color:var(--ink);} .efa-step .efa-step-num{font-weight:500;} .efa-dots{width:24px;height:24px;display:flex;align-items:center;justify-content:center;} .efa-dots svg{width:11.5px;height:15.5px;display:block;} /* next-arrow: same chevron, now a clickable control (advances one question) */ .efa-next{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;transition:opacity .15s ease,transform .15s ease;} .efa-next:hover{opacity:.65;} .efa-next:active{transform:scale(.92);} /* question body */ .efa-qbody{background:#fff;padding:8px;} .efa-panel{display:none;flex-direction:column;gap:8px;} .efa-panel.is-active{display:flex;} .efa-qhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;} .efa-qtext{margin:0;font-size:8px;font-weight:500;line-height:13.056px;color:var(--ink);} .efa-qhead-tools{display:flex;align-items:center;gap:4px;flex-shrink:0;} .efa-caret{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .efa-caret svg{width:9px;height:5px;display:block;} .efa-mini{width:14px;height:14px;display:flex;align-items:center;justify-content:center;} .efa-mini svg{width:100%;height:100%;display:block;} /* Q3/Q4: question text + filter/calendar/edit tools sit together as a left cluster (Figma 1166:5368) */ .efa-qhead-left{display:flex;align-items:center;gap:4px;min-width:0;} /* circular badge behind the calendar (Q3) and edit (Q4) icons — Figma 1166:5381: 20px #f8f8f8 circle */ .efa-mini--circle{width:20px;height:20px;border-radius:50%;background:#f8f8f8;flex-shrink:0;} .efa-mini--circle svg{width:11px;height:11px;} /* Q1 objectives lead text */ .efa-lead{display:flex;flex-direction:column;gap:1px;} .efa-lead-title{margin:0;font-size:8px;font-weight:600;line-height:13.056px;color:var(--ink);} .efa-lead-sub{margin:0;font-size:8px;font-weight:300;line-height:13.056px;color:rgba(25,25,25,.55);} /* tag chips (Q1) */ .efa-tags{display:flex;flex-wrap:wrap;gap:8px;} /* label weight by state — default/unselected = light (300), selected = medium (500) */ .efa-tag{font-size:8px;font-weight:300;line-height:1;color:var(--ink);background:var(--paper);border:0;border-radius:128px;padding:0 9px;height:21px;display:inline-flex;align-items:center;cursor:pointer;font-family:inherit;transition:background .14s,color .14s;} .efa-tag.is-selected{background:var(--ink);color:#fff;font-weight:500;} .efa-tag-add{width:21px;height:21px;border-radius:128px;background:var(--paper);border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);} .efa-tag-add svg{width:8px;height:8px;} /* icon chips (Q2/Q3/Q4) */ .efa-chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;} .efa-chip{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border:0;border-radius:128px;height:24px;padding:2px 6px 2px 2px;cursor:pointer;font-family:inherit;} .efa-chip-ic{width:20px;height:20px;border-radius:64px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .14s;} .efa-chip-ic svg{width:12px;height:12px;display:block;color:var(--blue);} .efa-chip-lbl{font-size:8px;font-weight:300;line-height:1;color:var(--ink);white-space:nowrap;} .efa-chip.is-selected .efa-chip-ic{background:var(--ink);} .efa-chip.is-selected .efa-chip-ic svg{color:#fff;} .efa-chip.is-selected .efa-chip-lbl{font-weight:500;} /* seasonal (Q3) icons keep their own colors when not selected */ .efa-chip--season .efa-chip-ic svg{color:initial;} /* Q3 dropdown + calendar */ .efa-q3tools{display:inline-flex;align-items:center;gap:6px;} /* "Longer trips" filter pill — Figma 1197:992 (node 1159:14152): TRANSPARENT pill, h20, pr4 only (label flush-left), r16, EF-Circular Light 8px; filter glyph rides in a 20px #f8f8f8 circle badge (reuses .efa-mini--circle, like the calendar/edit badges). */ .efa-dropdown{display:inline-flex;align-items:center;gap:3px;border-radius:16px;height:20px;padding:0 4px 0 0;font-size:8px;font-weight:300;color:var(--ink);white-space:nowrap;flex-shrink:0;} /* collapsed accordions + cta */ .efa-acc{display:flex;align-items:center;justify-content:space-between;gap:14.921px;padding:7.46px 8px;border-bottom:.466px solid var(--divider);} .efa-acc-lbl{font-size:8px;font-weight:500;line-height:13.056px;color:var(--ink);} .efa-acc-caret{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .efa-acc-caret svg{width:9px;height:5px;} .efa-cta{display:flex;align-items:center;gap:3.73px;height:46px;padding-left:8px;} .efa-cta-lbl{font-size:8px;font-weight:700;line-height:11.191px;white-space:nowrap;} .efa-cta-btn{width:13.056px;height:13.056px;border-radius:6.528px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .efa-cta-btn svg{width:5.6px;height:5.6px;color:#fff;} /* ---- auto-animation layers (standalone — NOT the locked EF timeline) ----- */ /* fill overlay: a dark wash clipped L→R then retracted R→L. Carries a white clone of the chip/tag content so text reads white under the wash, exactly like the existing EF tag fill (clip-path inset). */ .efa-tag,.efa-chip{position:relative;} .efa-chip-ic{position:relative;z-index:2;} .efa-chip-lbl{position:relative;z-index:0;} .efa-fill{ position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--ink);color:#fff;border-radius:inherit; display:flex;align-items:center; clip-path:inset(0 100% 0 0 round 128px); will-change:clip-path; } .efa-chip .efa-fill{gap:4px;padding:2px 6px 2px 2px;justify-content:flex-start;} .efa-tag .efa-fill{padding:0 9px;justify-content:center;font-weight:500;white-space:nowrap;} .efa-fill .efa-chip-ic{visibility:hidden;background:transparent;} .efa-fill .efa-chip-lbl{color:#fff;font-weight:500;} /* white vector overlay inside the icon badge — revealed R→L in sync */ .efa-ic-white{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; pointer-events:none;clip-path:inset(0 0 0 100%);will-change:clip-path; } .efa-ic-white svg{width:12px;height:12px;color:#F7F7F7;display:block;} /* ---- SCOPED mechanism test: Q2 "Historical" only ------------------------ GPU-composited fill — a solid bar revealed with transform: scaleX (no per-frame paint, unlike the clip-path method the other buttons still use), with a feathered gradient front for a soft "liquid" edge. Label inverts via mix-blend-mode (no stretched text clone). Everything else stays on clip-path. */ .efa-chip--liquid{overflow:hidden;isolation:isolate;} .efa-liquid{ position:absolute;inset:0;z-index:1;pointer-events:none; transform-origin:left center;transform:scaleX(0); background:#191919; /* clean hard edge (no feather/glow) — smoothness lives in the scaleX tween */ will-change:transform; } .efa-chip--liquid .efa-chip-lbl{position:relative;z-index:2;color:#fff;mix-blend-mode:difference;} /* auto-inverts over the dark front */ .efa-chip--liquid .efa-chip-ic{z-index:3;} /* "Mix of both" gets a wider rounded-rectangle (pill) badge per Figma node 1166:5921 (32x20), so the two cases can read at single-case size. Only this chip's badge changes; the single-case badges (Mostly first-time / More experienced) stay 20px circles. The twin glyph uses a wider 30x18 viewBox; size the base icon AND its white-inversion clone together so it still inverts. */ .efa-chip--mix .efa-chip-ic{width:32px;} /* height 20px + border-radius:64px (base) => stadium/pill */ .efa-chip--mix .efa-chip-ic svg, .efa-chip--mix .efa-ic-white svg{width:25px;height:15px;}/* 30:18 aspect, no distortion */