/* ============================================================ gazduire-web.html only — linked after host.css from that page. Everything else on the page comes from style.css + host.css. 1. Plan cards: the order button goes to comanda.html (data-comanda; script.js §12 rewrites its perioada= — 3ani / 2ani / an / luna — when the period switch moves) and "sau pe WhatsApp" sits under it (data-wa; script.js adds the period to the message). The card's price (.pl-cost) and the switch are host.css 12g. Same rules as gazduire-cloud.css §1, without its .per-m / .per-y button pair, which script.js no longer needs. ============================================================ */ /* ---- 1. PLAN CARD ACTIONS ---- */ .pl-acts{margin-top:auto;display:grid;gap:10px} .pl-acts .pl-cta{margin-top:0} .pl-wa{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 6px; font-size:12.5px;line-height:1.3;color:var(--w56);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--w18);transition:color var(--t1) var(--e),text-decoration-color var(--t1) var(--e)} .pl-wa:hover,.pl-wa:focus-visible{color:var(--ink);text-decoration-color:currentColor} .pl-wa svg{flex:none} /* ============================================================ 2–7: design pass of 11.09.2026 (docs/design-review/gazduire-web.md). Every feature is said once on the page: the plan cards show only the four numbers that change (+ disk space to scale), the shared list lives in #functii, and how to order + the free-migration terms (#mutare) + the domain prices live in .gw-ord, which took the comparison table's place (#comparatie is the plans block now). ============================================================ */ /* ---- 2. PLAN HEAD: the period's deal is said once, under the switch. .pl-head, .pl-hint and the four-way switch moved to host.css 12g (11.09.2026): every page with 1 / 2 / 3 years uses them ---- */ #comparatie,#mutare,#garantie{scroll-margin-top:calc(var(--hd-h) + 40px)} /* the outlined half of a section title starts its own line, as on index.html (.prods .shead h2): "Diferă doar / mărimea." and "în fiecare / plan." left one word hanging at 1440 */ #planuri .shead h2 em.o,#functii .shead h2 em.o,#cum-comanzi .shead h2 em.o{display:block} /* ---- 3. PLAN CARDS: a spec sheet of what differs, set to compare across ---- */ .pl-spec{margin:-4px 0 30px} .pl-spec>div{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:14px 0;border-bottom:1px solid var(--w05)} .pl-spec dt{font-size:13.5px;line-height:1.4;color:var(--w56)} .pl-spec dd{font-family:var(--fd);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.2;letter-spacing:.02em; color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* disk space to scale — the hero meter's bars, one per card (the no-JS and reduced-motion rules for .pm-bar i in / host.css cover these too) */ .pl-spec .disk{padding-bottom:26px} .pl-spec .pm-bar{position:absolute;left:0;right:0;bottom:12px;height:3px;border-radius:3px;background:var(--w08);overflow:hidden} .pl-spec .pm-bar i{position:absolute;inset:0;display:block;height:auto;border-radius:inherit; background:linear-gradient(90deg,var(--w30),var(--ink));transform:scaleX(0);transform-origin:left; transition:transform 1.3s var(--e) calc(.5s + var(--i,0) * .14s)} .pl-grid.in .pl-spec .pm-bar i{transform:scaleX(var(--v,1))} /* the featured card's badge is taller than the other cards' label: one head height for all three, so the spec rows line up from card to card */ #planuri .pl-top{min-height:28px} @media (max-width:359px){#planuri .pl-badge{letter-spacing:.1em;padding-inline:10px}} /* ---- 4. THE SHARED BASE: a bracket joins the three cards and drops to one link, down to the list of what every plan has ---- */ .pl-base{--g:clamp(14px,1.6vw,22px);position:relative;display:flex;justify-content:center; margin-top:16px;padding-top:42px} .pl-base::before{content:"";position:absolute;top:-16px;height:34px; left:calc((100% - 2 * var(--g)) / 6);right:calc((100% - 2 * var(--g)) / 6); border:1px solid var(--w18);border-top:0;border-radius:0 0 18px 18px; clip-path:inset(0 50% 0 50%);transition:clip-path 1.1s var(--e) .35s} .pl-base::after{content:"";position:absolute;left:50%;top:-16px;width:1px;height:50px;background:var(--w18); transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e) .15s} .pl-base.in::before{clip-path:inset(0 -2px 0 -2px)} .pl-base.in::after{transform:none} .pl-base .tlink{color:var(--ink)} .pl-base .tlink:hover svg{transform:translateY(3px)} @media (max-width:980px){.pl-base::before{display:none}} /* ---- 5. INCLUDED (#functii): on a phone each card is a compact row ---- */ @media (max-width:560px){ #functii .fgrid{gap:10px} #functii .fcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start; padding:18px 18px 20px} #functii .fcard .prod-ic{grid-row:1 / span 2;width:40px;height:40px} #functii .fcard .prod-ic svg{width:19px;height:19px} #functii .fcard h3{margin:1px 0 6px} } /* ---- 6. ORDER (.gw-ord, white sheet): four steps on a line that fills itself, then the migration terms (#mutare) and the domain prices ---- */ .gw-ord{padding:var(--sec) var(--pad)} .gw-ord-in{max-width:var(--maxw);margin-inline:auto} .gw-steps{--gg:clamp(20px,2.6vw,40px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gg);max-width:1180px;margin:0 auto;padding-top:36px} /* the track runs dot to dot: from the first column's left edge to the fourth's */ .gw-steps::before,.gw-steps::after{content:"";position:absolute;top:4px;height:1px;left:4px; right:calc((100% - 3 * var(--gg)) / 4 - 5px);background:var(--w12)} .gw-steps::after{background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform 1.7s cubic-bezier(.45,0,.4,1) .25s} .gw-steps.in::after{transform:scaleX(1)} .gw-steps li{position:relative} .gw-steps li::before{content:"";position:absolute;left:0;top:-36px;width:9px;height:9px;border-radius:50%; background:var(--bg);border:1px solid var(--w30); transition:background .45s var(--e),border-color .45s var(--e),box-shadow .6s var(--e),transform .45s var(--e)} .gw-steps.in li::before{background:var(--ink);border-color:var(--ink);transform:scale(1.15)} .gw-steps.in li:nth-child(1)::before{transition-delay:.2s} .gw-steps.in li:nth-child(2)::before{transition-delay:.78s} .gw-steps.in li:nth-child(3)::before{transition-delay:1.3s} .gw-steps.in li:nth-child(4)::before{transition-delay:1.85s;box-shadow:0 0 0 6px var(--w05)} .gw-steps .n{display:block;font-family:var(--fd);font-size:clamp(2rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em; color:transparent;-webkit-text-stroke:1px var(--w30)} .gw-steps h3{font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:18px 0 8px} .gw-steps p{font-size:14.5px;line-height:1.6;color:var(--w56);max-width:30ch} .gw-steps p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .gw-more{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(14px,1.6vw,22px); max-width:1180px;margin:clamp(64px,8vw,112px) auto 0} .gw-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l); padding:clamp(24px,2.8vw,40px);overflow:hidden} .gw-card>*{position:relative;z-index:2} .gw-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px} .gw-card h3{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:400;letter-spacing:-.028em;line-height:1.15; margin:clamp(26px,3vw,40px) 0 14px;max-width:24ch} .gw-card p{font-size:14.5px;line-height:1.7;color:var(--w56);max-width:66ch} .gw-links{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:auto;padding-top:26px} .gw-links .tlink{color:var(--ink)} .gw-dom{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:6px} .gw-dom li{display:grid;gap:8px} .gw-dom b{font-family:var(--fd);font-size:clamp(2rem,3vw,2.6rem);font-weight:400;letter-spacing:.01em;line-height:1} .gw-dom span{font-size:13px;color:var(--w56)} @media (max-width:900px){.gw-more{grid-template-columns:1fr}} /* phone: the steps stand in a column; each one draws the segment down to the next dot, so the line starts and stops exactly on the dots */ @media (max-width:760px){ .gw-steps{grid-template-columns:1fr;gap:30px;padding:0 0 0 36px} .gw-steps::before,.gw-steps::after{display:none} .gw-steps li::before{left:-36px;top:8px} .gw-steps li:not(:last-child)::after{content:"";position:absolute;left:-32px;top:17px;bottom:-38px;width:1px; background:var(--w12) linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/1px 0%; transition:background-size .55s cubic-bezier(.45,0,.4,1)} .gw-steps.in li:not(:last-child)::after{background-size:1px 100%} .gw-steps.in li:nth-child(1)::after{transition-delay:.25s} .gw-steps.in li:nth-child(2)::after{transition-delay:.8s} .gw-steps.in li:nth-child(3)::after{transition-delay:1.35s} .gw-steps .n{font-size:1.8rem} .gw-steps h3{margin:10px 0 6px} .gw-steps p{max-width:none} } /* the standalone text links' tap target (>= 24px): host.css §14b, for every .tlink */ /* without JavaScript script.js never adds .in: the bracket and the step line are drawn anyway. (scripting:none) needs Safari 17+, Chrome 120+ or Firefox 113+; older browsers keep the text without the lines */ @media (scripting:none){ .pl-base::before{clip-path:none} .pl-base::after,.gw-steps::after{transform:none} .gw-steps li::before{background:var(--ink);border-color:var(--ink)} .gw-steps li:not(:last-child)::after{background-size:1px 100%} } /* ---- 7. REDUCED MOTION: everything drawn, nothing drawing ---- */ @media (prefers-reduced-motion:reduce){ .pl-base::before{clip-path:none;transition:none} .pl-base::after{transform:none;transition:none} .gw-steps::after{transform:none!important;transition:none} .gw-steps li::before,.gw-steps li::after{transition:none!important} } /* ---- 8. PAYMENT PROMISES (#garantie), under the steps: the 30-day money-back guarantee and the renewal at the same price, said in full once (docs/preturi-multi-an.md). The line under the plan switch points here; the FAQ answers the same two questions ---- */ .gw-sure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(22px,3.4vw,56px); max-width:1180px;margin:clamp(56px,7vw,96px) auto 0;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--w08)} .gw-sure>article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start} .gw-sure .prod-ic{width:46px;height:46px} .gw-sure h3{font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:4px 0 8px} .gw-sure p{font-size:14.5px;line-height:1.65;color:var(--w56);max-width:54ch} .gw-sure p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} @media (max-width:760px){ .gw-sure{grid-template-columns:minmax(0,1fr)} .gw-sure .prod-ic{width:40px;height:40px} .gw-sure .prod-ic svg{width:19px;height:19px} } /* ---- 9. FAQ: the four periods, plan by plan — the one place every total stands side by side ---- */ .fq-tw{overflow-x:auto;margin:14px 0 16px} .fq-t{border-collapse:collapse;font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums} .fq-t th,.fq-t td{padding:9px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--w08)} .fq-t th:first-child{padding-left:0;text-align:left} .fq-t thead th{font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--w56)} .fq-t tbody th{font-weight:500;color:var(--ink)} .fq-t td{color:var(--w72)} @media (max-width:440px){.fq-t th,.fq-t td{padding:8px 8px}.fq-t th:first-child{padding-left:0}}