/** * TiyanHost — order form overrides. * * The order form's all.min.css loads AFTER the theme's theme.css, so * theme-level rules cannot win against it. common.tpl loads this file after * all.min.css, which makes it the right home for cart/store corrections. * * Design tokens come from templates/tiyanhost/css/tokens.css, which the * theme's already loads on every page - so var() works here. * * RULE: no literal colours. Every value is a token. */ /* Domain search hero — stock ships a gold gradient (#ffd960 -> #ffb201) that appears nowhere in the palette. Use the brand gradient. */ .domain-checker-container, #order-tiyanhost_cart .domain-checker-container { background-color: var(--gradient-stop-blue); background: var(--gradient-hero); } /* Cart items header. Stock is navy #058; the live cart uses a quiet header inside a white bordered panel rather than a solid colour band. */ #order-tiyanhost_cart .view-cart-items-header { background-color: transparent; border-bottom: var(--border-width-base) solid var(--border-color-base); color: var(--text-lighter-color); font-size: var(--font-size-sm); } #order-tiyanhost_cart .view-cart-items { border-bottom: var(--border-width-base) solid var(--border-color-base); } #order-tiyanhost_cart .view-cart-items .item-domain { color: var(--brand-secondary); } /* Order summary. Stock paints the header flat grey #666; an earlier pass here made it solid brand blue, but the live site renders it as a plain white card with a dark title - no coloured bar at all. */ #order-tiyanhost_cart .order-summary { background-color: var(--color-white); border: var(--border-width-base) solid var(--border-color-base); border-bottom: var(--border-width-base) solid var(--border-color-base); border-radius: var(--border-radius-base); padding: var(--spacing-4x); } #order-tiyanhost_cart .order-summary h2 { color: var(--text-heading-color); font-size: var(--font-size-h5); font-weight: var(--font-weight-normal); margin: 0 0 var(--spacing-3x); } /* Add-on strip — Bootstrap green */ #order-tiyanhost_cart .panel-addon .panel-add, #order-tiyanhost_cart .panel-addon-selected .panel-add { background-color: var(--brand-success); color: var(--color-white); } /* Domain availability states — Bootstrap green/red rather than brand */ .domain-checker-available, #order-tiyanhost_cart .domain-checker-available { color: var(--brand-success); } .domain-checker-unavailable, #order-tiyanhost_cart .domain-checker-unavailable { color: var(--brand-danger); } .domain-checker-invalid, #order-tiyanhost_cart .domain-checker-invalid { color: var(--brand-warning); } /* Spotlight / suggested-domain add buttons — stock dark grey #555 on #333 */ #order-tiyanhost_cart .spotlight-tld .btn:not(.domain-contact-support), #order-tiyanhost_cart .suggested-domains .btn:not(.domain-contact-support) { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--color-white); } #order-tiyanhost_cart .spotlight-tld .btn:not(.domain-contact-support):hover, #order-tiyanhost_cart .suggested-domains .btn:not(.domain-contact-support):hover { background-color: var(--brand-primary-darker); border-color: var(--brand-primary-darker); } /* TLD pricing header underlines — two off-palette blues (#97b5d2 / #336699) */ #order-tiyanhost_cart .domain-pricing .tld-pricing-header .col-sm-2, #order-tiyanhost_cart .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4 { background-color: var(--gray-faded); border-bottom: 6px solid var(--brand-primary-lighter-2); } #order-tiyanhost_cart .domain-pricing .tld-pricing-header div:nth-child(odd), .domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: var(--gray-lighter-4); border-color: var(--brand-primary); } /* Checkout is the primary conversion action, not a "success" state. */ #order-tiyanhost_cart .btn-checkout, #order-tiyanhost_cart .btn.btn-success.btn-checkout { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--color-white); } #order-tiyanhost_cart .btn-checkout:hover, #order-tiyanhost_cart .btn.btn-success.btn-checkout:hover { background-color: var(--brand-primary-darker); border-color: var(--brand-primary-darker); } /* Promo-code field icon. The order form sets top:0 with no left, so the icon landed in the top-left corner of the form group instead of inside the input. Anchor it to the field. */ #order-tiyanhost_cart .prepend-icon { position: relative; } #order-tiyanhost_cart .prepend-icon .field-icon { color: var(--gray-icons); height: auto; left: var(--spacing-2x); line-height: 1; top: 50%; transform: translateY(-50%); width: auto; } /* MarketConnect promo blocks — stock greys and orange */ #order-tiyanhost_cart .mc-promo.sitelockvpn .btn-add { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--color-white); } #order-tiyanhost_cart .mc-promo.sitelock .price { color: var(--brand-primary); } /* The stock globe artwork (img/globe.png) is cream, drawn to sit on the gold gradient it replaced. Render it as a faint white silhouette so it reads as texture on the brand gradient instead of clashing with it. It has to go on a pseudo-element: filter/opacity on the container itself also fade every child, which ghosted the search field and the captcha. This is decorative background art, not a logo. */ .domain-checker-bg, #order-tiyanhost_cart .domain-checker-bg { background-image: none; position: relative; } .domain-checker-bg::before, #order-tiyanhost_cart .domain-checker-bg::before { background-image: url('../img/globe.png'); background-position: 110% -5px; background-repeat: no-repeat; bottom: 0; content: ""; filter: brightness(0) invert(1); left: 0; opacity: .14; pointer-events: none; position: absolute; right: 0; top: 0; } /* Keep the form above the decorative layer. */ .domain-checker-bg > *, #order-tiyanhost_cart .domain-checker-bg > * { position: relative; z-index: 1; } /* =================================================================== Store listing — four-up plan cards, matching the live site =================================================================== */ /* The live store hides the category sidebar on desktop and runs the plans full width; it returns as the collapsed selector on smaller screens. */ @media (min-width: 992px) { #order-tiyanhost_cart .cart-sidebar { display: none; } #order-tiyanhost_cart .cart-body { float: none; width: 100%; } } .th-store-header { margin-bottom: var(--spacing-5x); } .th-store-title { color: var(--text-heading-color); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: 1.2; margin: 0; } .th-plan-row { display: flex; flex-wrap: wrap; } .th-plan-col { display: flex; margin-bottom: var(--spacing-4x); } .th-plan { background-color: var(--color-white); border: var(--border-width-base) solid var(--border-color-base); border-radius: var(--border-radius-base); box-shadow: var(--box-shadow-base); display: flex; flex-direction: column; padding: var(--spacing-4x) var(--spacing-3x); text-align: center; transition: box-shadow var(--transition-base), transform var(--transition-base); width: 100%; } .th-plan:hover { box-shadow: var(--box-shadow-lg); transform: translateY(-2px); } .th-plan-name { color: var(--text-heading-color); font-size: var(--font-size-h5); font-weight: var(--font-weight-normal); margin: 0 0 var(--spacing-2x); } .th-plan-price { margin-bottom: var(--spacing-2x); } .th-plan-from { color: var(--text-lighter-color); display: block; font-size: var(--font-size-sm); } .th-plan-amount { color: var(--text-heading-color); display: block; font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-h3); } .th-plan-cycle, .th-plan-setup { color: var(--text-lighter-color); display: block; font-size: var(--font-size-sm); } /* Short accent rule under the price, as on the live cards */ .th-plan-rule { background-color: var(--brand-primary); display: block; height: 3px; margin: var(--spacing-3x) auto; width: 40px; } .th-plan-features { color: var(--text-lighter-color); list-style: none; margin: 0 0 var(--spacing-3x); padding: 0; } .th-plan-features > li { font-size: var(--font-size-base); line-height: var(--line-height-lg); } .th-plan-desc { margin-bottom: var(--spacing-3x); } /* The per-plan note ships inside the product description as .plan-note */ .th-plan-desc .plan-note, .th-plan .plan-note { color: var(--brand-plan-note); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .th-plan-stock { color: var(--text-faded-color); font-size: var(--font-size-sm); } /* Push the action to the bottom so cards in a row line up */ .th-plan-order { margin-top: auto; padding: var(--spacing-2x) var(--spacing-4x); width: 100%; } /* --- Included with every plan --- */ .th-store-included { margin-top: var(--spacing-5x); } .th-store-included-title { color: var(--text-heading-color); font-size: var(--font-size-h4); font-weight: var(--font-weight-normal); margin-bottom: var(--spacing-3x); } .th-store-included-panel .panel-body { padding: var(--spacing-4x); } .th-store-included-panel ul { list-style: none; margin: 0; padding: 0; } .th-store-included-panel li { color: var(--text-heading-color); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-2x); padding-left: var(--spacing-4x); position: relative; } .th-store-included-panel li:before { color: var(--brand-primary); content: "\f00c"; /* Font Awesome check */ font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; position: absolute; } @media (max-width: 767px) { .th-store-title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); } } /* Products with configurable options add a "Starting from" line, which pushed that card's price, rule and features out of line with its neighbours. Reserve the space on every card so a row stays aligned. */ .th-plan-price { min-height: 96px; } /* WHMCS splits a product description differently per group: Web Hosting's specs arrive as parsed `features`, VPS/Dedicated's arrive as the free-text `featuresdesc`. So one of the two blocks is often empty - collapse it, and style the description like the feature list so both groups read the same. */ .th-plan-features:empty { display: none; margin: 0; } .th-plan-desc { color: var(--text-lighter-color); font-size: var(--font-size-base); line-height: var(--line-height-lg); } .th-plan-desc p { margin-bottom: 0; } /* =================================================================== Choose a Domain — white options panel with a gradient search band, matching the live reference =================================================================== */ #order-tiyanhost_cart .domain-selection-options { background-color: var(--color-white); border: var(--border-width-base) solid var(--border-color-base); border-radius: var(--border-radius-base); overflow: hidden; padding: 0; } #order-tiyanhost_cart .domain-selection-options .option { background: none; border: 0; margin: 0; padding: var(--spacing-2x) var(--spacing-4x); } #order-tiyanhost_cart .domain-selection-options .option:first-child { padding-top: var(--spacing-4x); } #order-tiyanhost_cart .domain-selection-options .option > label { color: var(--text-heading-color); font-size: var(--font-size-md); font-weight: var(--font-weight-normal); margin: 0; } /* The search row sits in a full-bleed gradient band at the foot of the panel. Negative margins pull it back out of the option's padding. */ #order-tiyanhost_cart .domain-input-group { /* Was the blue-to-cyan primary gradient. That is the stock direction the brand deliberately does not use - the signature band runs blue to purple. See 02-DESIGN-SYSTEM.md. */ background: var(--gradient-hero); margin: var(--spacing-2x) calc(-1 * var(--spacing-4x)) calc(-1 * var(--spacing-2x)); padding: var(--spacing-4x); } #order-tiyanhost_cart .domain-input-group .form-control { border: 0; border-radius: var(--border-radius-sm); box-shadow: none; height: auto; padding: var(--spacing-2x) var(--spacing-3x); } /* six prefixes the field with a "www." addon; the live site does not. */ #order-tiyanhost_cart .domain-input-group .input-group-addon, #order-tiyanhost_cart .domain-input-group .input-group-prepend { display: none; } #order-tiyanhost_cart .domain-input-group .input-group .form-control { border-bottom-left-radius: var(--border-radius-sm); border-top-left-radius: var(--border-radius-sm); } /* Check reads as a light action on the gradient */ #order-tiyanhost_cart .domain-input-group .btn, #order-tiyanhost_cart .domain-input-group .btn-primary { background-color: var(--color-white); border-color: var(--color-white); color: var(--brand-primary); font-weight: var(--font-weight-medium); padding: var(--spacing-2x) var(--spacing-4x); } #order-tiyanhost_cart .domain-input-group .btn:hover { background-color: var(--brand-primary-lighter-4); border-color: var(--brand-primary-lighter-4); color: var(--brand-primary-darker); } /* Let the search field span the band, as on the live page. six wraps it in an offset grid that leaves it about a third of the width, and puts the Check button in a sibling column - so the outer row has to flex too, or the button drops onto its own full-width line. */ @media (min-width: 768px) { #order-tiyanhost_cart .domain-input-group > .row { align-items: center; display: flex; gap: var(--spacing-2x); margin-left: 0; margin-right: 0; } #order-tiyanhost_cart .domain-input-group > .row > [class*="col-"] { float: none; margin-left: 0; padding: 0; width: auto; } #order-tiyanhost_cart .domain-input-group > .row > [class*="col-"]:first-child { flex: 1 1 auto; } #order-tiyanhost_cart .domain-input-group .domains-row { align-items: center; display: flex; gap: var(--spacing-2x); margin: 0; } #order-tiyanhost_cart .domain-input-group .domains-row > [class*="col-"] { float: none; padding: 0; width: auto; } #order-tiyanhost_cart .domain-input-group .domains-row > [class*="col-"]:first-child { flex: 1 1 auto; } #order-tiyanhost_cart .domain-input-group .domains-row .input-group { width: 100%; } #order-tiyanhost_cart .domain-input-group #registertld, #order-tiyanhost_cart .domain-input-group #transfertld { min-width: 120px; } #order-tiyanhost_cart .domain-input-group .btn { white-space: nowrap; } } /* The cart body reads as a white bordered panel, like the live page. */ #order-tiyanhost_cart .view-cart-items-container, #order-tiyanhost_cart .cart-body > .row > .col-md-8 > .panel, #order-tiyanhost_cart .empty-cart { background-color: var(--color-white); border: var(--border-width-base) solid var(--border-color-base); border-radius: var(--border-radius-base); } #order-tiyanhost_cart .empty-cart, #order-tiyanhost_cart .cart-empty { padding: var(--spacing-8x) var(--spacing-4x); text-align: center; } /* Summary rows */ #order-tiyanhost_cart .order-summary .subtotal, #order-tiyanhost_cart .order-summary .recurring-totals { border-bottom: var(--border-width-base) solid var(--border-color-base); color: var(--text-lighter-color); padding: var(--spacing-2x) 0; } /* Total due today. The markup is amount then the label; the live site shows the label first, so the block is reversed rather than reordering the markup. Sizing goes on the amount only - sizing the container blew both spans up and overlapped them. */ #order-tiyanhost_cart .order-summary .total-due-today { align-items: flex-start; display: flex; flex-direction: column-reverse; padding: var(--spacing-3x) 0; } #order-tiyanhost_cart .order-summary .total-due-today > span { color: var(--text-heading-color); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); } #order-tiyanhost_cart .order-summary .total-due-today .amt { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-h3); } /* A disabled checkout reads as unavailable, as on the live empty cart. */ #order-tiyanhost_cart .btn-checkout.disabled, #order-tiyanhost_cart .btn.btn-success.btn-checkout.disabled { background-color: var(--gray-lighter-4); border-color: var(--gray-lighter-4); color: var(--text-faded-color); } #order-tiyanhost_cart .order-summary .text-right { text-align: left; } #order-tiyanhost_cart .btn-checkout { width: 100%; } /* Section captions on the configure/checkout steps. Stock scopes them under #order-tiyanhost_cart and paints six's #058 teal, which is in no token; a class-level rule cannot outrank that. Match the treatment the rest of the theme uses - a left-aligned heading over a rule, not a centred caption floating on a border. Measured on the VPS configure step. */ #order-tiyanhost_cart .sub-heading, #order-tiyanhost_cart .sub-heading-borderless { border-top: 0; border-bottom: var(--border-width-base) solid var(--border-color-base); height: auto; margin: var(--spacing-4x) 0 var(--spacing-3x); padding-bottom: var(--spacing-1x); text-align: left; } #order-tiyanhost_cart .sub-heading-borderless { border-bottom: 0; } #order-tiyanhost_cart .sub-heading span, #order-tiyanhost_cart .sub-heading-borderless span { color: var(--text-heading-color); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); padding: 0; top: 0; }