/* ============================================================ Motivation — Immersive Enquiry Configurator SHARED SKIN ("espresso cinematic") All selectors are prefixed .cfg so nothing leaks into the page. Fonts (Fraunces / Manrope) are inherited from the host page. ============================================================ */ /* The host page sets body{overflow-x:hidden}, which the browser computes to overflow-y:auto — making a scroll container that BREAKS position:sticky (used by the scroll model's brief panel). overflow-x:CLIP prevents horizontal scroll identically but is excepted from that rule, so sticky keeps working. Scoped to the 4 configurator pages only (this file isn't loaded by index.html). */ body{overflow-x:clip} /* the standalone page doesn't inherit the host site's global reset, so enforce border-box inside the configurator (otherwise width:100% inputs + padding overflow their grid cell and the two-column fields visually collide). */ .cfg, .cfg *, .cfg *::before, .cfg *::after{box-sizing:border-box} .cfg{ /* palette — dark espresso, warm ivory ink, lifted magenta on dark */ --bg:#141010; --bg-2:#1E1714; --bg-3:#271E19; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.075); --ink:#F4EDE3; --ink-2:#BCAFA0; --ink-3:#8B7F72; --line:rgba(244,237,227,.13); --line-2:rgba(244,237,227,.26); --mag:#E9679F; /* brand magenta lifted for dark ground */ --mag-hi:#F58BB8; --mag-deep:#C11976; --gold:#D9B98A; /* warm bronze secondary accent */ --ease:cubic-bezier(.22,1,.36,1); --serif:"Fraunces",Georgia,serif; --sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; position:relative; min-height:100vh; color:var(--ink); font-family:var(--sans); background: radial-gradient(120% 90% at 80% -10%, #2A201B 0%, rgba(42,32,27,0) 55%), radial-gradient(90% 80% at 0% 100%, #241A22 0%, rgba(36,26,34,0) 50%), linear-gradient(180deg,#171210 0%, #141010 40%, #120E0D 100%); /* NOTE: no overflow clipping here — it would break descendant position:sticky (Chrome breaks sticky under overflow:hidden AND overflow:clip). Grain/vignette are inset:0 absolutes so they don't overflow; per-model overflow is handled locally. */ isolation:isolate; } /* film grain + vignette */ .cfg::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } .cfg::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(130% 120% at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); } .cfg > *{position:relative;z-index:1} /* ---- shared layout helpers ---- */ .cfg-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px);width:100%} .cfg-center{min-height:100vh;display:flex;flex-direction:column;justify-content:center} .cfg-fade{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .cfg-fade.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.cfg-fade{opacity:1;transform:none;transition:none}} /* ---- typography atoms ---- */ .cfg-eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);font-weight:600;display:inline-flex;align-items:baseline;gap:.7em} .cfg-eyebrow .num{font-family:var(--serif);font-size:2.1em;font-weight:400;font-style:italic;color:var(--mag);line-height:1;transform:translateY(.14em)} .cfg-kicker{font-family:var(--sans);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600} .cfg-display{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.02;font-size:clamp(2.5rem,6.4vw,5.3rem);margin:.32em 0 0} .cfg-display em{font-style:italic;color:var(--mag)} .cfg-h2{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.06;font-size:clamp(1.9rem,3.6vw,3rem)} .cfg-lede{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.6;max-width:52ch;margin-top:1.1em} .cfg-hint{color:var(--ink-3);font-size:12.5px;letter-spacing:.02em;margin-top:.7em} /* ---- buttons ---- */ .cfg-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1;padding:16px 30px;cursor:pointer;border:1px solid transparent;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s;white-space:nowrap;letter-spacing:.01em;-webkit-tap-highlight-color:transparent} .cfg-btn svg{width:17px;height:17px;flex:none} .cfg-btn-primary{background:var(--ink);color:#1a1210} .cfg-btn-primary:hover{background:var(--mag);color:#fff;transform:translateY(-2px)} .cfg-btn-accent{background:var(--mag);color:#fff} .cfg-btn-accent:hover{background:var(--mag-hi);transform:translateY(-2px)} .cfg-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .cfg-btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .cfg-btn[disabled]{opacity:.4;pointer-events:none} .cfg-iconbtn{width:52px;height:52px;padding:0;border-radius:50%} /* ---- selectable chips ---- */ .cfg-chips{display:flex;flex-wrap:wrap;gap:11px} .cfg-chip{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);background:var(--panel);font-size:14.5px;font-weight:500;cursor:pointer;transition:all .3s var(--ease);user-select:none;-webkit-tap-highlight-color:transparent} .cfg-chip:hover{border-color:var(--ink-2);background:var(--panel-2);transform:translateY(-1px)} .cfg-chip .tick{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:all .3s var(--ease)} .cfg-chip .tick svg{width:9px;height:9px;opacity:0;transform:scale(.5);transition:all .3s var(--ease)} .cfg-chip.on{border-color:var(--mag);background:linear-gradient(180deg,rgba(233,103,159,.20),rgba(233,103,159,.09));color:#fff;box-shadow:0 8px 30px -14px rgba(233,103,159,.7)} .cfg-chip.on .tick{background:var(--mag);border-color:var(--mag)} .cfg-chip.on .tick svg{opacity:1;transform:none;color:#fff} /* ---- option cards (rich, image-backed) ---- */ .cfg-grid{display:grid;gap:16px} .cfg-grid.cols-2{grid-template-columns:repeat(2,1fr)} .cfg-grid.cols-3{grid-template-columns:repeat(3,1fr)} .cfg-grid.cols-4{grid-template-columns:repeat(4,1fr)} .cfg-card{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);cursor:pointer;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(150deg,var(--bg-3),var(--bg-2));transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);isolation:isolate;-webkit-tap-highlight-color:transparent} .cfg-card:hover{transform:translateY(-3px);border-color:var(--line-2)} .cfg-card .ph{position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,#3A2C24,#221A16)} .cfg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.62;transition:opacity .5s var(--ease),transform .8s var(--ease)} .cfg-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,13,11,.15) 0%,rgba(18,13,11,.82) 100%)} .cfg-card:hover img{opacity:.8;transform:scale(1.05)} .cfg-card .ttl{font-family:var(--serif);font-size:1.4rem;font-weight:400;line-height:1.05;letter-spacing:-.01em} .cfg-card .sub{font-size:12px;color:var(--ink-2);margin-top:5px;letter-spacing:.01em;line-height:1.4} .cfg-card .mark{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:all .35s var(--ease);z-index:1} .cfg-card .mark svg{width:13px;height:13px;opacity:0;transform:scale(.4);transition:all .35s var(--ease);color:#fff} .cfg-card.on{border-color:var(--mag);box-shadow:0 16px 46px -22px rgba(233,103,159,.85),inset 0 0 0 1px var(--mag)} .cfg-card.on img{opacity:.85} .cfg-card.on .mark{background:var(--mag);border-color:var(--mag)} .cfg-card.on .mark svg{opacity:1;transform:none} /* "Somewhere else" card — dashed, hosts an inline free-text place */ .cfg-card-other{background:linear-gradient(150deg,#2A231E,#1A1613);border:1px dashed var(--line-2);cursor:text} .cfg-card-other::after{display:none} .cfg-card-other:hover{border-color:var(--ink-3);transform:translateY(-3px)} .cfg-card-other.on{border-style:solid;border-color:var(--mag);box-shadow:0 16px 46px -22px rgba(233,103,159,.85),inset 0 0 0 1px var(--mag)} .cfg-card-other .other-body{position:relative;z-index:1} .cfg-card-other .ttl{color:var(--ink)} .cfg-cardinput{margin-top:8px;width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);color:var(--ink);font-family:var(--sans);font-size:13.5px;padding:6px 0;transition:border-color .3s var(--ease)} .cfg-cardinput::placeholder{color:var(--ink-3)} .cfg-cardinput:focus{outline:none;border-color:var(--mag)} /* compact option (no image) — trip type / pace */ .cfg-opt{position:relative;border-radius:14px;border:1px solid var(--line-2);background:var(--panel);padding:20px 20px 18px;cursor:pointer;transition:all .35s var(--ease);-webkit-tap-highlight-color:transparent} .cfg-opt:hover{border-color:var(--ink-2);background:var(--panel-2);transform:translateY(-2px)} .cfg-opt .ic{line-height:0;margin-bottom:14px;display:block;color:var(--ink-2);transition:color .35s var(--ease)} .cfg-opt .ic svg{width:30px;height:30px;display:block} .cfg-opt.on .ic{color:var(--mag)} .cfg-opt .ttl{font-family:var(--serif);font-size:1.28rem;font-weight:400;letter-spacing:-.01em} .cfg-opt .sub{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.45} .cfg-opt.on{border-color:var(--mag);background:linear-gradient(180deg,rgba(233,103,159,.16),rgba(233,103,159,.05));box-shadow:0 14px 40px -20px rgba(233,103,159,.7)} .cfg-opt.on::after{content:"";position:absolute;top:16px;right:16px;width:9px;height:9px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 4px rgba(233,103,159,.22)} /* ---- text fields ---- */ .cfg-field{display:flex;flex-direction:column;gap:9px} .cfg-field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600} .cfg-field input,.cfg-field textarea{ width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:12px; color:var(--ink);font-family:var(--sans);font-size:16px;padding:15px 17px;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);resize:vertical} .cfg-field input::placeholder,.cfg-field textarea::placeholder{color:var(--ink-3)} .cfg-field input:focus,.cfg-field textarea:focus{outline:none;border-color:var(--mag);background:var(--panel-2);box-shadow:0 0 0 4px rgba(233,103,159,.12)} .cfg-field.err input,.cfg-field.err textarea{border-color:#E0648B;box-shadow:0 0 0 4px rgba(224,100,139,.14)} .cfg-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* free-text "Other" / additional-place inputs */ .cfg-otherinput{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);font-family:var(--sans);font-size:15px;padding:13px 16px;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)} .cfg-otherinput::placeholder{color:var(--ink-3)} .cfg-otherinput:focus{outline:none;border-color:var(--mag);background:var(--panel-2);box-shadow:0 0 0 4px rgba(233,103,159,.12)} /* ---- progress rail (wizard) ---- */ .cfg-rail{display:flex;align-items:center;gap:10px} .cfg-rail .seg{height:3px;flex:1;border-radius:2px;background:var(--line);overflow:hidden;position:relative} .cfg-rail .seg i{position:absolute;inset:0;background:linear-gradient(90deg,var(--mag),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} .cfg-rail .seg.done i{transform:scaleX(1)} .cfg-rail .seg.active i{transform:scaleX(.5)} /* ---- running brief / summary panel ---- */ .cfg-summary{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px 24px;backdrop-filter:blur(6px)} .cfg-summary h4{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px} .cfg-summary .row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px} .cfg-summary .row:first-of-type{border-top:none} .cfg-summary .row .k{color:var(--ink-3);flex:none} .cfg-summary .row .v{color:var(--ink);text-align:right;font-weight:500} .cfg-summary .row .v.empty{color:var(--ink-3);font-weight:400;font-style:italic} /* ---- success state ---- */ .cfg-success{text-align:center;max-width:640px;margin:0 auto} .cfg-success .seal{width:78px;height:78px;border-radius:50%;margin:0 auto 26px;display:grid;place-items:center;background:linear-gradient(160deg,var(--mag),var(--mag-deep));box-shadow:0 20px 60px -20px rgba(233,103,159,.8)} .cfg-success .seal svg{width:34px;height:34px;color:#fff} .cfg-success pre{text-align:left;white-space:pre-wrap;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--panel);border:1px dashed var(--line-2);border-radius:14px;padding:22px;margin:26px 0 0} /* ---- misc ---- */ .cfg-count{font-variant-numeric:tabular-nums} .cfg-navrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,5vh,52px)} .cfg-skip{background:none;border:none;color:var(--ink-3);font-family:var(--sans);font-size:13px;cursor:pointer;padding:8px;transition:color .3s} .cfg-skip:hover{color:var(--ink)} @media (max-width:760px){ .cfg-grid.cols-3,.cfg-grid.cols-4{grid-template-columns:repeat(2,1fr)} .cfg-row2{grid-template-columns:1fr} .cfg-display{font-size:clamp(2.1rem,9vw,3rem)} }