/* ========================================================================= Shop — the basket on the marketing site. Built on the theme's own vocabulary rather than beside it: the same --primary / --semi-dark / --border tokens, the same 12px card radius the plan cards use, the same Dana webfont inherited from . Every surface has a .light-theme twin, because the visitor's choice is stored in localStorage and applied before this page paints. Everything is scoped under .shop so none of it can reach the ported header, footer or section markup, which share generic class names. ========================================================================= */ .shop { --shop-surface: var(--semi-dark); --shop-surface-2: rgba(255, 255, 255, 0.03); --shop-line: rgba(255, 255, 255, 0.08); --shop-heading: #ffffff; --shop-muted: var(--text-gray); --shop-radius: 14px; padding-top: 60px; padding-bottom: 90px; } .light-theme .shop { --shop-surface: #ffffff; --shop-surface-2: var(--light); --shop-line: var(--border); --shop-heading: var(--dark); } /* --- page head ---------------------------------------------------------- */ .shop-head { margin-bottom: 40px; } .shop-eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--primary); letter-spacing: 0.4px; margin-bottom: 10px; } .shop-title { font-size: 38px; font-weight: 700; color: var(--shop-heading); line-height: 1.25; margin: 0 0 12px; } .shop-lead { font-size: 15px; line-height: 2; color: var(--shop-muted); margin: 0; max-width: 620px; } /* --- the three steps ---------------------------------------------------- Buying starts here and finishes in the panel, so the journey is drawn out in full: a visitor should never wonder whether "continue" is the last step. */ .shop-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .shop-step { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background-color: var(--shop-surface-2); border: 1px solid var(--shop-line); font-size: 13px; font-weight: 600; color: var(--shop-muted); } .shop-step__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--shop-line); color: var(--shop-heading); font-size: 12px; line-height: 1; } .shop-step.is-active { background-color: rgba(218, 120, 0, 0.12); border-color: rgba(218, 120, 0, 0.45); color: var(--primary); } .shop-step.is-active .shop-step__num { background-color: var(--primary); color: #fff; } .shop-step__sep { flex: 0 0 24px; height: 1px; background-color: var(--shop-line); } @media only screen and (max-width: 575.98px) { .shop-step__sep { display: none; } } /* --- layout ------------------------------------------------------------- */ .shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; align-items: start; } @media only screen and (max-width: 1199.98px) { .shop-grid { grid-template-columns: minmax(0, 1fr) 330px; } } @media only screen and (max-width: 991.98px) { .shop-grid { grid-template-columns: minmax(0, 1fr); } } .shop-card { background-color: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); padding: 28px 30px; } @media only screen and (max-width: 575.98px) { .shop-card { padding: 22px 18px; } } .shop-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--shop-line); } .shop-card__title { font-size: 18px; font-weight: 700; color: var(--shop-heading); margin: 0; } .shop-card__count { font-size: 13px; color: var(--shop-muted); } /* --- one line of the basket --------------------------------------------- */ .shop-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--shop-line); } .shop-line:last-child { border-bottom: 0; padding-bottom: 4px; } .shop-line__media { width: 72px; height: 72px; border-radius: 12px; background-color: var(--shop-surface-2); border: 1px solid var(--shop-line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .shop-line__media img { width: 100%; height: 100%; object-fit: cover; } .shop-line__media svg { width: 26px; height: 26px; color: var(--shop-muted); opacity: 0.8; } .shop-line__name { display: block; font-size: 16px; font-weight: 600; color: var(--shop-heading); line-height: 1.6; margin-bottom: 6px; } .shop-line__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .shop-chip { display: inline-block; padding: 4px 10px; border-radius: 6px; background-color: var(--shop-surface-2); border: 1px solid var(--shop-line); font-size: 12px; color: var(--shop-muted); } /* The datacenter picker under a hosting line: a label and a select that saves itself on change (noscript users get a save button). */ .shop-option { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .shop-option__label { font-size: 13px; color: var(--shop-muted); margin: 0; } .shop-select { min-width: 200px; height: 38px; padding-block: 0; padding-inline: 12px 34px; border-radius: 8px; border: 1px solid var(--shop-line); background-color: var(--shop-surface-2); color: var(--shop-heading); font-family: inherit; font-size: 14px; cursor: pointer; transition: border-color 0.2s ease; } .shop-select:hover, .shop-select:focus { border-color: var(--primary); outline: none; } /* Native option lists do not inherit the page's dark surface. */ .shop-select option { color: #111; background-color: #fff; } .shop-option__save { height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--shop-line); background: transparent; color: var(--shop-heading); } .shop-line__unit { display: block; margin-top: 8px; font-size: 13px; color: var(--shop-muted); } .shop-line__side { display: flex; align-items: center; gap: 18px; } .shop-line__total { min-width: 120px; text-align: end; font-size: 17px; font-weight: 700; color: var(--shop-heading); white-space: nowrap; } @media only screen and (max-width: 767.98px) { .shop-line { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; } .shop-line__media { width: 56px; height: 56px; } .shop-line__side { grid-column: 1 / -1; justify-content: space-between; } .shop-line__total { min-width: 0; } } /* --- quantity stepper ---------------------------------------------------- */ .shop-qty { display: inline-flex; align-items: center; background-color: var(--shop-surface-2); border: 1px solid var(--shop-line); border-radius: 10px; overflow: hidden; } .shop-qty__btn { width: 38px; height: 40px; border: 0; background: transparent; color: var(--shop-muted); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .shop-qty__btn:hover { color: var(--primary); background-color: rgba(218, 120, 0, 0.1); } .shop-qty__input { width: 48px; height: 40px; border: 0; border-inline: 1px solid var(--shop-line); background: transparent; color: var(--shop-heading); text-align: center; font-size: 15px; font-weight: 600; font-family: inherit; -moz-appearance: textfield; } .shop-qty__input::-webkit-outer-spin-button, .shop-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .shop-qty__input:focus { outline: none; background-color: rgba(218, 120, 0, 0.08); } /* --- remove --------------------------------------------------------------*/ .shop-remove { width: 40px; height: 40px; border: 1px solid var(--shop-line); border-radius: 10px; background: transparent; color: var(--shop-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .shop-remove:hover { color: var(--red); border-color: rgba(236, 98, 95, 0.5); background-color: rgba(236, 98, 95, 0.08); } .shop-remove svg { width: 17px; height: 17px; } /* --- summary -------------------------------------------------------------*/ .shop-summary { position: sticky; top: 110px; } @media only screen and (max-width: 991.98px) { .shop-summary { position: static; } } .shop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; color: var(--shop-muted); } .shop-row strong { color: var(--shop-heading); font-weight: 600; } .shop-divider { height: 1px; background-color: var(--shop-line); margin: 8px 0; } .shop-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0 24px; } .shop-total__label { font-size: 16px; font-weight: 700; color: var(--shop-heading); } .shop-total__value { font-size: 26px; font-weight: 700; color: var(--primary); white-space: nowrap; } .shop-actions { display: grid; gap: 12px; } .shop-actions .btn { width: 100%; } .shop-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--shop-line); font-size: 12.5px; line-height: 1.9; color: var(--shop-muted); } .shop-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; color: var(--primary); } /* --- empty ---------------------------------------------------------------*/ .shop-empty { text-align: center; padding: 70px 20px; } .shop-empty__icon { width: 96px; height: 96px; margin: 0 auto 28px; border-radius: 50%; background-color: var(--shop-surface-2); border: 1px solid var(--shop-line); display: flex; align-items: center; justify-content: center; } .shop-empty__icon svg { width: 38px; height: 38px; color: var(--primary); } .shop-empty__title { font-size: 22px; font-weight: 700; color: var(--shop-heading); margin-bottom: 10px; } .shop-empty__text { font-size: 14px; line-height: 2; color: var(--shop-muted); max-width: 420px; margin: 0 auto 28px; } /* --- flash ---------------------------------------------------------------*/ .shop-flash { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; font-size: 14px; margin-bottom: 24px; border: 1px solid transparent; } .shop-flash svg { flex: 0 0 auto; width: 18px; height: 18px; } .shop-flash--ok { background-color: rgba(21, 205, 114, 0.1); border-color: rgba(21, 205, 114, 0.35); color: #15cd72; } .shop-flash--error { background-color: rgba(236, 98, 95, 0.1); border-color: rgba(236, 98, 95, 0.35); color: var(--red); } /* --- numbers ------------------------------------------------------------- Prices and quantities read left-to-right even on the Persian pages, the same rule the panel follows. */ .shop .ltr-nums { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .shop .shop-line__total, [dir="rtl"] .shop .shop-total__value { text-align: left; } /* --- discount code ------------------------------------------------------ The box at the top of the summary: a field with its button inside one outline, or — once a code is on the basket — the code as a chip with its own remove button. The reason a code stopped applying sits underneath. */ .shop-coupon { padding: 4px 0 22px; margin-bottom: 8px; border-bottom: 1px solid var(--shop-line); } .shop-summary .shop-card > .shop-coupon:only-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .shop-coupon__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--shop-heading); margin-bottom: 12px; } .shop-coupon__label svg { width: 16px; height: 16px; color: var(--primary); } .shop-coupon__form { display: flex; align-items: stretch; height: 46px; border: 1px solid var(--shop-line); border-radius: 10px; background-color: var(--shop-surface-2); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .shop-coupon__form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(218, 120, 0, 0.15); } .shop-coupon__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0 14px; color: var(--shop-heading); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; outline: none; } .shop-coupon__input::placeholder { color: var(--shop-muted); font-weight: 400; letter-spacing: 0; text-transform: none; } [dir="rtl"] .shop-coupon__input::placeholder { text-align: right; } .shop-coupon__btn { flex: 0 0 auto; margin: 5px; padding: 0 18px; border: 0; border-radius: 7px; background-color: var(--primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 0.2s ease; } .shop-coupon__btn:hover { filter: brightness(1.08); } .shop-coupon__applied { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 6px 6px 14px; border: 1px dashed rgba(21, 205, 114, 0.55); border-radius: 10px; background-color: rgba(21, 205, 114, 0.08); } [dir="rtl"] .shop-coupon__applied { padding: 6px 14px 6px 6px; } .shop-coupon__applied.is-invalid { border-color: rgba(236, 98, 95, 0.55); background-color: rgba(236, 98, 95, 0.08); } .shop-coupon__code { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #15cd72; } .shop-coupon__applied.is-invalid .shop-coupon__code { color: var(--red); text-decoration: line-through; } .shop-coupon__title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--shop-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-coupon__remove-form { margin-inline-start: auto; } .shop-coupon__remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--shop-muted); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .shop-coupon__remove:hover { background-color: rgba(236, 98, 95, 0.12); color: var(--red); } .shop-coupon__remove svg { width: 16px; height: 16px; } .shop-coupon__hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--shop-muted); } .shop-coupon__hint.is-error { color: var(--red); } .shop-coupon__help { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--shop-muted); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; } .shop-coupon__help:hover { color: var(--primary); } .shop-row--discount strong { color: #15cd72; } .shop-row--discount .shop-chip { margin-inline-start: 6px; padding: 2px 8px; font-weight: 600; letter-spacing: 0.04em; } /* --- how to use a discount code -----------------------------------------*/ .shop-guide { margin-top: 70px; scroll-margin-top: 110px; } .shop-coupon { scroll-margin-top: 130px; } .shop-guide__head { max-width: 640px; margin-bottom: 34px; } .shop-guide__title { font-size: 26px; font-weight: 700; color: var(--shop-heading); margin: 0 0 12px; } .shop-guide__lead { font-size: 15px; line-height: 1.9; color: var(--shop-muted); margin: 0; } .shop-guide__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; } @media only screen and (max-width: 991.98px) { .shop-guide__grid { grid-template-columns: minmax(0, 1fr); } } .shop-guide__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } @media only screen and (max-width: 767.98px) { .shop-guide__steps { grid-template-columns: minmax(0, 1fr); } } .shop-guide__step { display: flex; gap: 16px; padding: 24px; background-color: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); transition: border-color 0.25s ease, transform 0.25s ease; } .shop-guide__step:hover { border-color: rgba(218, 120, 0, 0.45); transform: translateY(-2px); } .shop-guide__num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffb830, var(--primary)); color: #fff; font-weight: 700; font-size: 15px; } .shop-guide__step-title { font-size: 16px; font-weight: 700; color: var(--shop-heading); margin: 6px 0 8px; } .shop-guide__step-text { font-size: 13.5px; line-height: 1.95; color: var(--shop-muted); margin: 0; } .shop-guide__rules { padding: 26px 26px 28px; border-radius: var(--shop-radius); border: 1px solid rgba(218, 120, 0, 0.35); background: radial-gradient(120% 90% at 100% 0%, rgba(218, 120, 0, 0.16), transparent 60%), var(--shop-surface); } .shop-guide__rules-title { font-size: 16px; font-weight: 700; color: var(--shop-heading); margin: 0 0 14px; } .shop-guide__rules ul { list-style: none; margin: 0 0 22px; padding: 0; } .shop-guide__rules li { position: relative; padding-inline-start: 22px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.9; color: var(--shop-muted); } .shop-guide__rules li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary); box-shadow: 0 0 0 4px rgba(218, 120, 0, 0.15); } .shop-guide__rules .btn { background: transparent; }