/* ══════════════════════════════════════════════════════════════════════════ css/share-story.css — SHARE YOUR STORY (fw-shs) /share-story, built 9 Oct 2026 (Manage › Success Stories › Share Story). The invitation to write; the form itself is in the patient dashboard. Its idea is AN OPEN INVITATION, told plainly: §1 the opening beside a photograph with a real shared line PINNED to it, and three plain assurances under the button §2 why your story helps: a row of clay icons, fade rules between §3 stories already shared: each writer's own sentence, large, the name as they chose it, in an aligned grid (every row ends level) §4 WHAT WE WILL ASK as the numbered outline of the form, beside OUR PROMISES and "your name, your choice" (four ways a name appears) §5 what happens after Send: a timeline on one line, each step with WHEN above its title §6 the questions beside the closing invitation, one band, both columns ending level PALETTE: pink is this page's voice (words in --pk-dd / --pk-ink), purple the quiet second colour for marks and washes, gold only for "when". No boxes, no radius on photographs, no inline styles, no em dash. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-shs-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5.4vh, 60px); --gap:clamp(28px, 5vw, 80px); --glow:0 8px 20px -8px color-mix(in srgb, var(--pk-dd) 70%, transparent); --glow-lg:0 14px 28px -10px color-mix(in srgb, var(--pk-dd) 75%, transparent); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-shs{display:block;position:relative;background:var(--wh)} .fw-shs em{font-family:var(--ff);font-style:normal} .fw-shs .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-shs-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-shs-sec{position:relative;padding:var(--sec) 0} .fw-shs-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-shs-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-shs-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-shs-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;min-width:0} .fw-shs-head--row > .fw-shs-sub{flex:0 1 38%;min-width:280px;text-align:right} .fw-shs-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-dd)} .fw-shs-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-shs-sample{margin-left:4px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none} .fw-shs-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-shs-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-shs-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-shs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(150deg, var(--pk-d), var(--pk-dd));box-shadow:var(--glow);color:var(--wh);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-shs-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:var(--glow-lg)} .fw-shs-btn .fw-ico{width:18px;height:18px} .fw-shs-link{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;font-size:14.5px;font-weight:600;color:var(--pk-dd);transition:color .2s var(--ease)} .fw-shs-link .fw-ico{width:18px;height:18px} .fw-shs-link .bi-arrow-right{transition:transform .25s var(--ease)} .fw-shs-link:hover{color:var(--pk-ink)} .fw-shs-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-shs-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px} /* one round icon: a clay picture when the shared set has one, else the line icon */ .fw-shs-ico{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;color:var(--pk-ink);background:var(--pk-l)} .fw-shs-ico.is-clay{background:var(--wh);box-shadow:inset 0 0 0 2px var(--pu-l2), 0 16px 28px -18px color-mix(in srgb, var(--pu-d) 60%, transparent)} .fw-shs-ico img{display:block;width:74%;height:74%;object-fit:contain} .fw-shs-ico .fw-ico{width:28px;height:28px} .fw-shs-ico--sm{width:52px;height:52px} .fw-shs-ico--sm .fw-ico{width:22px;height:22px} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING — beside a photograph, a shared line pinned to it ══════════════════════════════════════════════════════════════ */ .fw-shs .fw-shs-mast{position:relative;padding-bottom:clamp(24px, 4vh, 44px)} .fw-shs-mast__grid{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);align-items:center;gap:clamp(30px, 6vw, 100px)} .fw-shs-mast__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-shs-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0} .fw-shs-mast__copy .fw-crumb{margin-bottom:4px} .fw-shs .fw-shs-h1{margin:0;font-size:clamp(36px, 6.2vh, 62px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-shs .fw-shs-mast .fw-shs-h1 span{display:block;-webkit-text-fill-color:transparent;background:linear-gradient(100deg, var(--pk-dd) 0%, var(--pk-ink) 45%, var(--pu-d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .fw-shs-lead{margin:0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-shs-assure{display:flex;flex-wrap:wrap;gap:8px 22px;margin:8px 0 0;padding:14px 0 0;list-style:none;position:relative} .fw-shs-assure::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-shs-assure li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--g7)} .fw-shs-assure .fw-ico{width:17px;height:17px;color:var(--pu-d)} .fw-shs-mast__pic{position:relative;margin:0;min-height:clamp(300px, 46vh, 470px);align-self:stretch} .fw-shs-mast__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%} /* the pinned line: a white note at the foot of the photograph, no box radius on the photo */ .fw-shs-pin{position:absolute;left:clamp(14px, 2vw, 26px);right:clamp(14px, 6vw, 90px);bottom:clamp(14px, 2.4vh, 26px);display:flex;flex-direction:column;gap:6px;padding:16px 20px 16px 22px;border-radius:14px;background:color-mix(in srgb, var(--wh) 94%, transparent);box-shadow:0 18px 40px -20px color-mix(in srgb, var(--dk) 45%, transparent);backdrop-filter:blur(6px)} .fw-shs-pin::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:999px;background:linear-gradient(180deg, var(--pk-d), var(--pu-d))} .fw-shs-pin__q{font-family:var(--ff);font-size:clamp(15px, 2vh, 17px);font-weight:500;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .fw-shs-pin__who{font-size:12.5px;font-weight:700;color:var(--pk-dd)} /* ══════════════════════════════════════════════════════════════ 02 · WHY YOUR STORY HELPS — a row of clay icons ══════════════════════════════════════════════════════════════ */ .fw-shs-why{background:linear-gradient(180deg, var(--pk-wash), var(--wh) 70%)} .fw-shs-why__list{display:grid;grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr));gap:0 clamp(22px, 3vw, 48px);margin:0;padding:0;list-style:none} .fw-shs-n1{--n:1}.fw-shs-n2{--n:2}.fw-shs-n3{--n:3}.fw-shs-n4{--n:4}.fw-shs-n5{--n:5} .fw-shs-why__list li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 0 6px} .fw-shs-why__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-shs-why__list p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · STORIES ALREADY SHARED — each writer's own sentence ══════════════════════════════════════════════════════════════ */ .fw-shs-voices__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:0 clamp(24px, 3vw, 48px);align-items:stretch;margin:0;padding:0;list-style:none} .fw-shs-voices__list li{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 0 24px;min-width:0} .fw-shs-voices__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-shs-voices__list li::after{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;border-radius:999px;background:linear-gradient(90deg, var(--pk-d), var(--pu-d))} .fw-shs-quote{margin:0;padding:0;border:0;font-family:var(--ff);font-size:clamp(17px, 2.2vh, 20px);font-weight:500;line-height:1.5;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty} /* the writer sits at the foot of every quote, so a row ends level */ .fw-shs-who{display:grid;grid-template-columns:44px minmax(0, 1fr);align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--g2)} .fw-shs-who__pic{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--g0)} .fw-shs-who__pic.is-initial{display:grid;place-items:center;background:linear-gradient(150deg, var(--pk-l), var(--pu-l));color:var(--pk-ink);font-size:16px;font-weight:700} .fw-shs-who__t{display:flex;flex-direction:column;gap:2px;min-width:0} .fw-shs-who__t b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14.5px;font-weight:700;color:var(--ink)} .fw-shs-who__t small{font-size:12.5px;line-height:1.45;color:var(--g6)} .fw-shs-ver{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 7px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:11.5px;font-weight:700} .fw-shs-ver .fw-ico{width:13px;height:13px} /* ══════════════════════════════════════════════════════════════ 04 · WHAT WE WILL ASK, beside OUR PROMISES and your name ══════════════════════════════════════════════════════════════ */ .fw-shs-pact{background:linear-gradient(180deg, var(--pu-wash), var(--wh) 75%)} .fw-shs-pact__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:stretch} .fw-shs-pact__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-shs-ask,.fw-shs-promise{display:flex;flex-direction:column;gap:10px;min-width:0} .fw-shs-promise{position:relative;padding-left:var(--gap)} .fw-shs-pact__grid:not(.is-one) .fw-shs-promise{margin-left:calc(var(--gap) * -1)} .fw-shs-pact__grid:not(.is-one) .fw-shs-promise::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-shs-pact__grid.is-one .fw-shs-promise{padding-left:0} /* the ask list reads like the outline of the form: numbered lines, one dashed rule each */ .fw-shs-ask__list{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none;counter-reset:none} .fw-shs-ask__list li{display:grid;grid-template-columns:52px minmax(0, 1fr);gap:16px;align-items:start;padding:16px 0;border-top:1px dashed var(--g2)} .fw-shs-ask__list li:last-child{border-bottom:1px dashed var(--g2)} .fw-shs-ask__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 2px var(--pk-l2);font-family:var(--ff);font-size:15px;font-weight:700;color:var(--pk-dd);font-variant-numeric:tabular-nums} .fw-shs-ask__list p,.fw-shs-promise__list p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--g6)} .fw-shs-promise__list{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none} .fw-shs-promise__list li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:16px;align-items:start;padding:14px 0} .fw-shs-promise__list li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} /* your name, your choice: four ways one example name can appear */ .fw-shs-names{margin-top:auto;padding-top:18px} .fw-shs-names__k{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--g6)} .fw-shs-names ul{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;margin:0;padding:0;list-style:none} .fw-shs-names li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--pu-l2)} .fw-shs-names li:nth-child(2){box-shadow:inset 0 0 0 2px var(--pk-d), 0 10px 22px -16px color-mix(in srgb, var(--pk-dd) 60%, transparent)} .fw-shs-names b{font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fw-shs-names small{font-size:11.5px;color:var(--g5)} /* ══════════════════════════════════════════════════════════════ 05 · WHAT HAPPENS NEXT — one line, each step with when ══════════════════════════════════════════════════════════════ */ .fw-shs-next .fw-shs-head--row{align-items:center} .fw-shs-tl{--dot:92px;--gapx:clamp(16px, 2.4vw, 40px);display:grid;grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr));column-gap:var(--gapx);margin:0;padding:0;list-style:none} .fw-shs-tl li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center} /* the dotted line through every icon: each step draws its piece across the gap */ .fw-shs-tl li::before{content:"";position:absolute;top:calc(var(--dot) / 2 - 2px);left:0;right:calc(var(--gapx) * -1);height:4px;border-radius:999px;background:repeating-linear-gradient(90deg, var(--pu-l2) 0 16px, transparent 16px 26px)} .fw-shs-tl li:first-child::before{left:50%} .fw-shs-tl li:last-child::before{right:50%} .fw-shs-tl li:only-child::before{display:none} .fw-shs-tl__dot{position:relative;z-index:1;display:grid;place-items:center;width:var(--dot);height:var(--dot);margin-bottom:6px;border-radius:50%;color:var(--pk-ink);background:var(--wh);box-shadow:inset 0 0 0 2px var(--pk-l2), 0 0 0 8px var(--wh), 0 18px 32px -18px color-mix(in srgb, var(--pk-dd) 55%, transparent);transition:transform .35s var(--ease-pop)} .fw-shs-tl li:hover .fw-shs-tl__dot{transform:scale(1.06)} .fw-shs-tl__dot img{display:block;width:70%;height:70%;object-fit:contain} .fw-shs-tl__dot .fw-ico{width:30px;height:30px} .fw-shs-tl__when{padding:3px 12px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em} .fw-shs-tl p{margin:0;padding:0 4px;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS AND THE INVITATION — one band ══════════════════════════════════════════════════════════════ */ .fw-shs-end{background:linear-gradient(180deg, var(--pk-wash), var(--wh) 70%)} .fw-shs-end__grid{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:var(--gap);align-items:stretch} .fw-shs-end__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-shs-end__qa{display:flex;flex-direction:column;gap:8px} .fw-shs-end__qa .fw-shs-h2{margin-bottom:10px} .fw-shs-end__story{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:100%} /* the photo grows with the questions beside it, so both columns end level */ .fw-shs-end__pic{position:relative;flex:1 1 auto;width:100%;min-height:clamp(240px, 32vh, 320px);margin:0 0 8px;overflow:hidden} .fw-shs-end__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%} .fw-shs-qa details{position:relative} .fw-shs-qa details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-shs-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-shs-qa summary::-webkit-details-marker{display:none} .fw-shs-qa summary:hover,.fw-shs-qa details[open] summary{color:var(--pk-dd)} .fw-shs-qa summary .bi{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pk-l);color:var(--pk-ink);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-shs-qa details[open] summary .bi{transform:rotate(45deg);background:var(--pk-dd);color:var(--wh)} .fw-shs-qa p{margin:0 46px 15px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · RESPONSIVE (the phone is designed as an app) ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-shs-voices__list{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-shs-why__list.fw-shs-n4{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-shs-names ul{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:1024px){ .fw-shs-mast__grid,.fw-shs-pact__grid,.fw-shs-end__grid{grid-template-columns:minmax(0, 1fr)} .fw-shs-mast__pic{min-height:0;aspect-ratio:4/3} .fw-shs-head--row{align-items:flex-start} .fw-shs-head--row > .fw-shs-sub{flex-basis:100%;text-align:left} .fw-shs-pact__grid:not(.is-one) .fw-shs-promise{margin-left:0;padding-left:0;padding-top:var(--sec)} .fw-shs-pact__grid:not(.is-one) .fw-shs-promise::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px;background:var(--fade)} .fw-shs-why__list,.fw-shs-why__list.fw-shs-n4{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-shs-tl,.fw-shs-tl.fw-shs-n3,.fw-shs-tl.fw-shs-n4,.fw-shs-tl.fw-shs-n5{--dot:72px;grid-template-columns:minmax(0, 1fr)} .fw-shs-tl li{display:grid;grid-template-columns:var(--dot) minmax(0, 1fr);grid-template-rows:auto auto auto;column-gap:18px;row-gap:4px;align-items:center;justify-items:start;padding:14px 0;text-align:left} .fw-shs-tl li::before{display:none} .fw-shs-tl li + li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-shs-tl__dot{grid-row:1 / 4;grid-column:1;margin:0} .fw-shs-tl__when,.fw-shs-tl .fw-shs-h3,.fw-shs-tl p{grid-column:2} .fw-shs-tl p{padding:0} .fw-shs-end__pic{flex:none;min-height:0;aspect-ratio:16/9} } @media (max-width:760px){ .fw-shs-voices__list,.fw-shs-why__list,.fw-shs-why__list.fw-shs-n4{grid-template-columns:minmax(0, 1fr)} } @media (max-width:640px){ .fw-shs-page{--pad:14px} .fw-shs .fw-shs-h1{font-size:clamp(32px, 9vw, 42px)} .fw-shs-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-shs-act .fw-shs-btn,.fw-shs-head--row .fw-shs-btn{width:100%} .fw-shs-assure{flex-direction:column;gap:8px} .fw-shs-pin{right:14px} .fw-shs-qa p{margin-right:0} .fw-shs-names ul{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)} }