/* ========================================================================== Trade pages: /boucherie/ /superette/ /commerce/ /telephonie/ and their /en/ and /ar/ versions. Loaded after site.css. Each page sets its own tint through --sky-top / --sky-bot on , and its world colours through the w-butcher / w-grocery / w-general / w-phone classes from site.css. ========================================================================== */ .tp-body .nav-end{margin-inline-start:auto} .tp{color:var(--ink)} .tp h2{font-size:clamp(30px,3.6vw,50px);line-height:1.04} .tp .head{display:grid;gap:14px;max-width:760px} /* ---------- hero ---------- */ .tp-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 26px + env(safe-area-inset-top,0px)) var(--gutter) 60px} .tp-hero-grid{max-width:calc(1180px - 2 * var(--gutter));margin:0 auto;min-height:min(80svh,740px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center} .tp-hero .copy{display:grid;gap:18px;align-content:center} .tp-hero h1{font-size:clamp(40px,5.1vw,76px);line-height:.98;letter-spacing:-.02em} .tp-hero h1 em{font-style:normal;color:var(--tp-accent)} .tp-art{height:min(64svh,580px);min-height:320px} .tp-switch{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px} .tp-switch a{text-decoration:none;font:500 13px/1 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);opacity:.72;transition:opacity .2s,background .2s} .tp-switch a:hover{opacity:1} .tp-switch a[aria-current]{opacity:1;font-weight:600;background:color-mix(in srgb,currentColor 14%,transparent)} .tp-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .tp-points li{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:500;background:color-mix(in srgb,currentColor 9%,transparent);border:1px solid color-mix(in srgb,currentColor 20%,transparent)} .tp-chip{font:500 13px/1.4 var(--mono);opacity:.8} .tp-hero[data-dark-hero] .btn-ghost{background:rgba(255,255,255,.1);color:inherit;border-color:rgba(255,255,255,.3)} @media (max-width:900px){ .tp-hero{padding-bottom:36px} .tp-hero-grid{grid-template-columns:1fr;min-height:0;gap:18px} .tp-art{height:340px;min-height:0} .tp-hero h1{font-size:clamp(36px,10vw,54px)} .tp-hero .lede{font-size:15px} } /* ---------- the signature demo ---------- */ .tp-demo{padding-block:clamp(72px,10vh,120px)} .tp-demo-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center} .tp-demo .copy{display:grid;gap:16px} .demo{position:relative} .demo > div{background:#fffdf9;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(18px,2.4vw,28px)} .demo-phone > .pd{background:none;border:0;box-shadow:none;padding:0} @media (max-width:900px){.tp-demo-grid{grid-template-columns:1fr}} /* butcher: recipe card, like the app's FAB document. Each demo plays when it scrolls into view (js/main.js adds .play). */ .doc{font-family:var(--sans)} .doc-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;padding-bottom:14px;border-bottom:2px solid var(--ink)} .doc-no{font:600 12px/1 var(--mono);color:var(--accent-ink);background:var(--accent-tint);padding:5px 7px;border-radius:5px} .doc-head b{font:700 23px/1.1 var(--display)} .doc-v{margin-inline-start:auto;font:500 12px/1 var(--mono);color:var(--ink-3)} .doc-rows{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:14.5px} .doc-rows th{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:start;padding:10px 0 8px} .doc-rows th:not(:first-child),.doc-rows td:not(:first-child){text-align:end;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} .doc-rows td{padding:9px 0;border-bottom:1px dashed var(--rule)} .doc-rows td:first-child{padding-inline-end:10px} .doc-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px;border-bottom:1px dotted var(--rule)} .doc-line b{font:600 14.5px/1.2 var(--mono);white-space:nowrap} .doc-big{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:16px 0 12px} .doc-big > span{font-weight:600} .doc-big b{font:700 clamp(26px,3vw,34px)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap} .doc-margin{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:12px 14px;border-radius:10px;background:#e3f4ea;color:#157a3a;font-weight:600;font-size:14px} .doc-margin em{font-style:normal} .doc-stock{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .doc-stock span{font-size:13px;padding:6px 11px;border-radius:999px} .doc-stock b{font-family:var(--mono)} .doc-stock .minus{background:#fdecea;color:#a4260e} .doc-stock .plus{background:#e3f4ea;color:#157a3a} .motion .demo-recipe:not(.play) .doc-rows tbody tr, .motion .demo-recipe:not(.play) :is(.doc-line,.doc-big,.doc-margin,.doc-stock){opacity:0;transform:translateY(8px)} .demo-recipe .doc-rows tbody tr{transition:opacity .45s calc(.2s + var(--i) * .22s),transform .45s calc(.2s + var(--i) * .22s)} .demo-recipe :is(.doc-line,.doc-big,.doc-margin,.doc-stock){transition:opacity .5s 1.2s,transform .5s 1.2s} .demo-recipe .doc-big{transition-delay:1.5s} .demo-recipe .doc-margin{transition-delay:1.9s} .demo-recipe .doc-stock{transition-delay:2.3s} /* grocery: one bottle, three ways to sell it */ .sd-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 14px} .sd-head > b{font:700 23px/1.1 var(--display)} .sd-stock{font:500 13px/1 var(--mono);color:var(--ink-2)} .sd-stock b{font:700 24px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums} .sd-meter{height:8px;border-radius:4px;background:var(--line);margin:14px 0 18px;overflow:hidden} .sd-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#16a34a,#7cc98f);transform-origin:0 50%;transform:scaleX(var(--to))} [dir="rtl"] .sd-meter i{transform-origin:100% 50%} .motion .demo-carton:not(.play) .sd-meter i{transform:scaleX(var(--from))} .demo-carton .sd-meter i{transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .6s} .sd-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px} .sd-rows li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:var(--cream);border:1px solid var(--line)} .sd-rows b{display:block;font-weight:600;font-size:15px} .sd-rows small{font:400 12.5px/1.4 var(--mono);color:var(--ink-2)} .sd-rows em{font:600 15px/1 var(--mono);font-style:normal;white-space:nowrap} .sd-delta{font:700 13.5px/1 var(--mono);color:#a4260e;background:#fdecea;padding:6px 8px;border-radius:6px} .sd-ico{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--rule);font:700 14px/1 var(--mono);background:#fff} .sd-unit{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,#fff 2px 4px,var(--ink) 4px 5px,#fff 5px 8px) center/58% 46% no-repeat,#fff} .sd-carton{background:linear-gradient(180deg,transparent 42%,rgba(255,255,255,.55) 42% 52%,transparent 52%),#c99a66;color:#3b2410;border-color:#b3844f} .sd-person{background:radial-gradient(circle at 50% 36%,var(--teal) 0 7px,transparent 7.5px),radial-gradient(ellipse at 50% 88%,var(--teal) 0 13px,transparent 13.5px),var(--teal-tint);border-color:#b9ddd8} .motion .demo-carton:not(.play) .sd-rows li{opacity:0;transform:translateX(-14px)} .motion .demo-carton:not(.play) [dir="rtl"] .sd-rows li{transform:translateX(14px)} .demo-carton .sd-rows li{transition:opacity .45s calc(.5s + var(--i) * .65s),transform .45s calc(.5s + var(--i) * .65s)} @media (max-width:560px){ .sd-rows li{grid-template-columns:40px minmax(0,1fr) auto;gap:10px} .sd-ico{width:40px;height:40px} .sd-delta{grid-column:2;justify-self:start} } /* general store: the variant grid */ .vm-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px} .vm-head b{font:700 23px/1.1 var(--display)} .vm-head span{font:500 12.5px/1 var(--mono);color:var(--ink-2)} .vm-scroll{overflow-x:auto} .vm-grid{width:100%;border-collapse:separate;border-spacing:6px} .vm-grid thead th{font:600 13px/1 var(--mono);color:var(--ink-2);padding:4px 0} .vm-grid tbody th{text-align:start;font-weight:600;font-size:14px;white-space:nowrap;padding-inline-end:4px} .vm-grid tbody th i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-inline-end:8px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .vm-grid td{min-width:40px;text-align:center;font:600 16px/1 var(--mono);padding:14px 0;border-radius:9px;background:var(--teal-tint);color:var(--teal)} .vm-grid td.out{background:var(--warn-tint);color:#8f5b04;box-shadow:inset 0 0 0 1.5px #e8c77a} .motion .demo-variants:not(.play) .vm-grid td{opacity:0;transform:scale(.6)} .demo-variants .vm-grid td{transition:opacity .35s calc(var(--i) * 45ms),transform .35s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 45ms)} .vm-legend{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--mono);color:#8f5b04;margin-top:10px} .vm-legend i{width:12px;height:12px;border-radius:3px;background:var(--warn-tint);box-shadow:inset 0 0 0 1.5px #e8c77a} /* phone shop: variants today, a repair ticket soon */ .pd{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .pd-card{position:relative;display:grid;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px} .pd-tag{justify-self:start;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:5px;background:var(--teal-tint);color:var(--teal)} .pd-title{font:700 20px/1.15 var(--display)} .pd-rows{width:100%;border-collapse:collapse;font-size:13.5px} .pd-rows th{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:start;padding:6px 0} .pd-rows td{padding:9px 0;border-top:1px solid var(--line)} .pd-rows :is(td,th):nth-child(2){font-family:var(--mono);white-space:nowrap;text-align:end;padding-inline:8px} .pd-rows :is(td,th):last-child{text-align:end} .pd-rows td.out{color:#8f5b04;font-weight:600;font-size:12px} .pd-soon{border:1.5px dashed #9fb3e6;background:linear-gradient(180deg,#f6f8ff,#fff);margin-top:28px} .pd-soon .badge-soon{position:absolute;top:-11px;inset-inline-end:16px} .pd-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;padding:6px 0;border-bottom:1px dotted var(--rule)} .pd-line em{font:500 12.5px/1.4 var(--mono);font-style:normal} .pd-steps{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:12px;font-weight:600;text-align:center} .pd-steps li{padding:8px 4px;border-radius:8px;background:var(--line);color:var(--ink-3)} .pd-steps li.done{background:#dfe8ff;color:#2d5da8} .pd-steps li.now{background:#1c9d55;color:#fff} .pd-wa{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#157a3a;font-weight:600} .pd-wa::before{content:"";width:8px;height:8px;border-radius:50%;background:#1c9d55;box-shadow:0 0 0 3px #d4f1df} .motion .demo-phone:not(.play) .pd-rows tbody tr{opacity:0} .demo-phone .pd-rows tbody tr{transition:opacity .4s calc(.2s + var(--i) * .15s)} .motion .demo-phone:not(.play) .pd-soon{opacity:0;transform:translateY(24px) rotate(1deg)} .demo-phone .pd-soon{transition:opacity .6s .9s,transform .6s cubic-bezier(.2,.7,.2,1) .9s} @media (max-width:640px){.pd{grid-template-columns:1fr}.pd-soon{margin-top:12px}} /* ---------- the day, hour by hour ---------- */ .tp-day{padding-block:clamp(72px,10vh,120px);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--panel) 60%,transparent))} .tp-day .head{margin-bottom:40px} .day-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} @media (max-width:760px){.day-line{grid-template-columns:1fr}} .day-g{display:grid;gap:12px;align-content:start;padding:22px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 0 rgba(21,24,44,.04)} .day-time{justify-self:start;font:600 13px/1 var(--mono);padding:6px 9px;border-radius:7px;background:var(--ink);color:var(--cream)} .day-g-soon{background:linear-gradient(180deg,#fffaf0,var(--panel));border:1.5px dashed #e8c77a} .day-g-soon .day-time{background:#fdf1d9;color:#8f5b04} .day-g h3{font-size:22px} .feat{list-style:none;margin:0;padding:0;display:grid;gap:12px} .feat li{display:grid;gap:3px;padding-top:12px;border-top:1px solid var(--line)} .feat li:first-child{border-top:0;padding-top:0} .feat b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-weight:600;font-size:15px} .feat p{font-size:14px;color:var(--ink-2)} .feat li.is-soon b{color:var(--ink-2)} .badge-soon{display:inline-flex;align-items:center;font:600 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#fdf1d9;color:#8f5b04;border:1px solid #f0d9a6;white-space:nowrap} html[lang="ar"] .badge-soon{font:600 12px/1 var(--sans);text-transform:none} .soon-note{margin-top:26px;font-size:14.5px;color:var(--ink-2);max-width:80ch} .soon-cta{font-weight:600;color:var(--accent-ink);text-underline-offset:3px} /* ---------- questions ---------- */ .tp-faq{padding-block:clamp(64px,9vh,110px)} .tp .faq .head{align-content:start} .tp .qa details{border-color:var(--rule)} .tp .qa summary{color:var(--ink)} .tp .qa summary::after{color:var(--accent)} .tp .qa details p{color:var(--ink-2)} /* ---------- price ---------- */ .tp-price{padding-block:12px clamp(64px,9vh,110px)} .price-band{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:28px 40px;align-items:center;padding:clamp(28px,4vw,52px);border-radius:24px;background:var(--ink);color:var(--cream);box-shadow:var(--shadow)} .price-band h2{color:#fff;font-size:clamp(34px,4.4vw,62px);margin-top:12px} .price-band .eyebrow{color:#ffb77d} .price-band .lede{color:#cfd2e3;margin-top:12px} .tp-install{font:500 13px/1.5 var(--mono);color:#aab0cf;margin-top:14px} .cta-col{display:grid;gap:14px;justify-items:start} @media (max-width:820px){.price-band{grid-template-columns:1fr}} /* ---------- the other editions ---------- */ .tp-more{padding-block:0 clamp(64px,9vh,100px)} .tp-more h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:18px} .tp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .tp-card{display:grid;align-content:space-between;gap:14px;min-height:180px;padding:24px;border-radius:18px;text-decoration:none;transition:transform .2s,box-shadow .2s} .tp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .tp-card b{font:700 clamp(22px,2vw,26px)/1.1 var(--display)} .tp-card b em{font-style:normal;color:var(--tp-accent)} .tp-home{display:inline-block;margin-top:24px;font-weight:600;color:var(--accent-ink);text-underline-offset:3px} @media (max-width:820px){.tp-cards{grid-template-columns:1fr}.tp-card{min-height:0}} /* ---------- footer ---------- */ footer.tp-foot{color:var(--ink-2)} footer.tp-foot .wrap{border-top-color:var(--rule)} /* The phone page's headline is long, and its demo has two cards side by side: give both more room. */ .tp-telephonie .tp-hero h1{font-size:clamp(36px,4.2vw,62px)} .tp-telephonie .tp-demo-grid{grid-template-columns:1fr} .tp-telephonie .tp-demo .copy{max-width:720px}