/* Theme Name: SUPERVARG Demo Template: supervarg Description: Public demo layer for SUPERVARG: demo checkout styling, order tracking and demo notices. Child of the audited SUPERVARG Foundation theme. Version: 0.1.0 Text Domain: supervarg-demo Requires at least: 7.1 Requires PHP: 8.4 */ /* ---------- header cart + strip ---------- */ a.cart { display: block; color: var(--text); } a.cart:hover { color: var(--accent); } a.cart > span { color: var(--accent); margin-left: 6px; font-weight: 750; } nav a[href*="sparra-order"] { color: var(--text); } /* ---------- shared form + button language ---------- */ .commerce-main label, .sv-track label { display: block; font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; } .commerce-main input[type="text"], .commerce-main input[type="email"], .commerce-main input[type="tel"], .commerce-main input[type="number"], .commerce-main select, .commerce-main textarea, .sv-track input[type="text"], .sv-track input[type="email"] { width: 100%; min-height: 48px; padding: 11px 14px; background: #0d0f10; border: 1px solid var(--line); color: var(--text); font: inherit; border-radius: 0; } .commerce-main input:focus, .commerce-main select:focus, .sv-track input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .commerce-main .button, .commerce-main button.button, .commerce-main input[type="submit"], .sv-track .button, .single_add_to_cart_button, #place_order, .woocommerce-message .button, .wc-proceed-to-checkout a.checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 24px; background: #160f09; border: 1px solid var(--accent); color: var(--text); font-size: 14px; font-weight: 750; letter-spacing: .02em; cursor: pointer; box-shadow: inset 0 0 16px #ff65000d; border-radius: 0; text-decoration: none; } .commerce-main .button:hover, .commerce-main button.button:hover, .single_add_to_cart_button:hover, #place_order:hover, .sv-track .button:hover, .wc-proceed-to-checkout a.checkout-button:hover { background: #2a1508; border-color: var(--accent-hot); box-shadow: 0 0 22px #ff650038, inset 0 0 20px #ff650018; color: var(--text); } #place_order, .single_add_to_cart_button, .wc-proceed-to-checkout a.checkout-button { background: var(--accent); color: #120900; border-color: var(--accent); box-shadow: 0 0 26px #ff650040; } #place_order:hover, .single_add_to_cart_button:hover, .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-hot); color: #120900; } .commerce-main .button:disabled, .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; } /* the primary actions are filled orange (specificity above the generic .button rule) */ .commerce-main button.single_add_to_cart_button, .commerce-main #place_order, .commerce-main .wc-proceed-to-checkout a.checkout-button { background: var(--accent); color: #120900; border-color: var(--accent); box-shadow: 0 0 26px #ff650040; } .commerce-main button.single_add_to_cart_button:hover, .commerce-main #place_order:hover, .commerce-main .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-hot); color: #120900; } .form-row { margin: 0 0 18px; } .required { color: var(--accent); border: 0; text-decoration: none; } abbr[title] { text-decoration: none; } /* ---------- product page purchase block ---------- */ .sv-buy { margin: 22px 0 10px; } .sv-buy form.cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; } .sv-buy .quantity { display: block; } .sv-buy .quantity input { width: 88px; text-align: center; min-height: 50px; } .sv-buy .single_add_to_cart_button { flex: 1 1 220px; } /* ---------- notices ---------- */ .woocommerce-notices-wrapper { margin-bottom: 22px; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .sv-demo-notice, .sv-label-original-notice, .sv-track-error { list-style: none; margin: 0 0 20px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); color: var(--text); font-size: 14px; } .woocommerce-error { border-left-color: var(--red); } .woocommerce-message { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .sv-demo-notice strong, .sv-label-original-notice strong { color: var(--accent); letter-spacing: .1em; margin-right: 8px; } .sv-demo-notice code, .sv-track code { background: #0d0f10; border: 1px solid var(--line); padding: 2px 8px; color: var(--accent-hot); font-size: 14px; } .sv-track-error { border-left-color: var(--red); color: var(--red); } .sv-demo-notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } /* ---------- cart ---------- */ table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: var(--panel); margin: 0 0 28px; } table.shop_table th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 700; } table.shop_table td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.shop_table tr:last-child td { border-bottom: 0; } table.shop_table th, table.shop_table td { text-align: left; } table.shop_table .product-price, table.shop_table .product-subtotal, table.shop_table .product-total, table.shop_table th.product-price, table.shop_table th.product-subtotal, table.shop_table th.product-total, table.shop_table td.product-total { text-align: right; } table.shop_table .product-remove { width: 56px; } table.shop_table .product-quantity { width: 140px; } table.shop_table .quantity input { width: 88px; text-align: center; } table.shop_table .product-name a { font-weight: 750; } table.shop_table .product-name a:hover { color: var(--accent); } table.shop_table .product-thumbnail { display: none; } table.shop_table .product-remove a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); color: var(--muted); font-size: 20px; line-height: 1; } table.shop_table .product-remove a:hover { border-color: var(--red); color: var(--red); } table.shop_table .amount { font-weight: 750; } .cart-collaterals { display: flex; justify-content: flex-end; } .cart_totals { width: min(460px, 100%); } .cart_totals h2 { font-size: 22px; margin-bottom: 14px; } .cart_totals table.shop_table { margin-bottom: 16px; } .wc-proceed-to-checkout a.checkout-button { width: 100%; } .cart-empty { font-size: 20px; } .return-to-shop { margin-top: 18px; } td.actions { text-align: right; } /* ---------- checkout ---------- */ form.checkout .col2-set, form.checkout #customer_details { width: 100%; max-width: 640px; } form.checkout h3, #order_review_heading { font-size: 22px; letter-spacing: -.03em; margin: 0 0 16px; } #order_review_heading { margin-top: 32px; } form.checkout { display: block; } @media (min-width: 981px) { form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; } form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; max-width: none; } form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; } form.checkout #order_review { grid-column: 2; grid-row: 2; max-width: none; } } .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-billing-fields__field-wrapper #billing_email_field { grid-column: 1 / -1; } #order_review { max-width: 640px; } #payment { background: var(--panel); border: 1px solid var(--line); padding: 20px; margin-top: 8px; } #payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0; } #payment ul.payment_methods li { padding: 12px 0; } #payment ul.payment_methods label { display: inline; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text); font-weight: 700; margin-left: 8px; } #payment .payment_box { margin: 10px 0 0 26px; color: var(--muted); font-size: 14px; } #payment input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: middle; } .woocommerce-privacy-policy-text { display: none; } #place_order { width: 100%; } .woocommerce-checkout-review-order-table .cart_item .product-name { font-weight: 650; } /* ---------- D-004: delivery-method cards (replaces the plain radio list) ---------- */ .sv-ship-fields { margin: 0 0 22px; } .sv-ship-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 14px; } .sv-ship-card { position: relative; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px 16px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .sv-ship-card input[type="radio"] { position: absolute; top: 14px; right: 14px; accent-color: var(--accent); width: 18px; height: 18px; } .sv-ship-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px #ff650026; } .sv-ship-card-head { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text); margin: 0 26px 6px 0; } .sv-ship-card-sub { display: block; color: var(--muted); font-size: 12px; margin: 0 0 8px; } .sv-ship-card-status { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .sv-ship-card.is-available .sv-ship-card-status { color: #34d17a; } .sv-ship-card.is-unavailable { cursor: not-allowed; opacity: .62; } .sv-ship-card.is-unavailable .sv-ship-card-status { color: #ff5a5a; } .sv-ship-card.is-unavailable:hover { border-color: var(--line); box-shadow: none; } .sv-samfrakt-toggle { margin: 4px 0 10px; color: var(--text); font-size: 14px; } .sv-ship-hint { color: var(--muted); font-size: 12px; margin: 0 0 4px; } @media (max-width: 520px) { .sv-ship-cards { grid-template-columns: 1fr; } } /* ---------- thank-you ---------- */ .woocommerce-order { max-width: 760px; } .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 750; margin-bottom: 20px; } ul.woocommerce-order-overview { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } ul.woocommerce-order-overview li { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text); } .woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 22px; margin: 26px 0 14px; } .woocommerce-customer-details { display: none; } /* the demo never echoes customer details back */ /* ---------- order tracking ---------- */ .sv-track { max-width: 760px; } .sv-track-form { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 24px; margin: 0 0 28px; display: grid; gap: 4px; } .sv-track-form .button { justify-self: start; margin-top: 6px; } .sv-track-hint { margin-bottom: 22px; } .sv-track-result { background: var(--panel); border: 1px solid var(--line); padding: 26px; } .sv-track-result h2 { margin: 0 0 12px; } .sv-track-status { color: var(--muted); margin: 0 0 24px; } .sv-pill { display: inline-block; padding: 4px 12px; margin-right: 8px; background: var(--accent); color: #120900; font-weight: 800; font-size: 13px; letter-spacing: .04em; } .sv-timeline { list-style: none; margin: 0 0 26px; padding: 0; position: relative; } .sv-timeline li { position: relative; display: flex; gap: 16px; padding: 0 0 22px 0; } .sv-timeline li:last-child { padding-bottom: 0; } .sv-timeline li:not(:last-child):before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--line); } .sv-timeline .is-done:not(:last-child):before { background: var(--accent); } .sv-dot { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); margin-top: 2px; z-index: 1; } .sv-timeline .is-done .sv-dot { background: var(--accent); border-color: var(--accent); } .sv-timeline .is-current .sv-dot { background: var(--bg); border-color: var(--accent-hot); box-shadow: 0 0 0 4px #ff650033, 0 0 18px #ff650080; } .sv-step { display: flex; flex-direction: column; } .sv-step strong { font-size: 16px; } .sv-step time { font-size: 12px; color: var(--muted); } .sv-timeline .is-todo { opacity: .5; } .sv-timeline .is-current strong { color: var(--accent-hot); } .sv-track-items { list-style: none; margin: 0 0 12px; padding: 16px 0 0; border-top: 1px solid var(--line); } .sv-track-items li { display: flex; justify-content: space-between; padding: 6px 0; } .sv-track-total { margin: 0 0 12px; } /* ---------- product page description spacing ---------- */ .detail-body .muted { margin-top: 10px; } /* ---------- mobile ---------- */ @media (max-width: 720px) { .wrap { width: calc(100% - 32px); } .site-header { flex-wrap: wrap; gap: 8px 16px; min-height: 0; padding-block: 14px; } .site-header nav { order: 3; width: 100%; gap: 18px; flex-wrap: wrap; } .site-header nav a { font-size: 11px; } a.cart { margin-left: auto; } .detail-layout { grid-template-columns: 1fr; } .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } table.shop_table thead { display: none; } table.shop_table tr.cart_item { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); } table.shop_table tr.cart_item td { border: 0; padding: 2px 0; } table.shop_table tr.cart_item td[data-title]:before { content: attr(data-title) ": "; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } table.shop_table tr.cart_item td.product-remove { grid-column: 2; grid-row: 1; text-align: right; } table.shop_table tr.cart_item td.product-remove:before { content: none; } table.shop_table tr.cart_item td.product-name { grid-column: 1; } .cart-collaterals { display: block; } td.actions { text-align: left; } td.actions .button { width: 100%; margin-top: 8px; } .sv-buy .single_add_to_cart_button { flex-basis: 100%; } .sv-track-form, .sv-track-result { padding: 18px; } } /* ===================================================================================================== SUPERVARG design v2: near-black / graphite / bright orange. One orange family (#ff6500) everywhere. ===================================================================================================== */ :root { --shelf: #0a0b0d; --card: #181a1d; --edge: #2b2e33; --orange-rgb: 255, 101, 0; } body { background: radial-gradient(ellipse 60% 42% at 90% -4%, rgba(var(--orange-rgb), .13), transparent 62%), radial-gradient(ellipse 45% 35% at 0% 24%, rgba(var(--orange-rgb), .05), transparent 62%), #060708; } .demo-strip { background: #0a0b0c; border-bottom: 1px solid rgba(var(--orange-rgb), .22); } /* ---------- header: logo + wordmark, nav, search, cart ---------- */ .sv-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 20px 32px; min-height: 112px; border-bottom: 1px solid rgba(var(--orange-rgb), .38); box-shadow: 0 14px 30px -20px rgba(var(--orange-rgb), .35); } .sv-header .brand { display: flex; align-items: center; gap: 16px; min-width: 0; } .brand-logo { display: block; height: 72px; width: auto; max-width: 110px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(var(--orange-rgb), .38)); } .sv-header .brand-mark { width: 54px; height: 54px; flex: 0 0 54px; } .sv-header .brand-mark span { font-size: 22px; } .sv-header .wordmark { font-size: clamp(26px, 2.2vw, 36px); } .sv-header nav { justify-content: center; gap: clamp(18px, 3vw, 46px); } .sv-header nav a { font-size: 13px; letter-spacing: .18em; } .sv-header nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 18px rgba(var(--orange-rgb), .5); } .sv-search { position: relative; width: clamp(190px, 17vw, 300px); } .sv-search input[type="search"] { width: 100%; min-height: 46px; padding: 10px 46px 10px 16px; background: #0d0f11; border: 1px solid var(--edge); color: var(--text); border-radius: 2px; font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; } .sv-search input[type="search"]::placeholder { color: #7c8189; } .sv-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--orange-rgb), .18); } .sv-search button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; display: grid; place-items: center; background: transparent; border: 0; color: var(--accent); cursor: pointer; } .sv-search button:hover { color: var(--accent-hot); } .sv-header a.cart { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 46px; border: 1px solid var(--edge); background: #0d0f11; border-radius: 2px; color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-align: left; } .sv-header a.cart:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(var(--orange-rgb), .25); color: var(--text); } .sv-header a.cart > span { margin: 0; color: inherit; font-weight: inherit; } .sv-header a.cart .sv-icon { color: var(--accent); } .sv-header a.cart > .cart-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--accent); color: #120900; font-weight: 850; font-size: 12px; letter-spacing: 0; } /* ---------- hero ---------- */ .sv-hero { padding-block: clamp(36px, 5vw, 84px) clamp(28px, 3vw, 52px); gap: clamp(20px, 3vw, 56px); } .sv-hero h1 { font-size: clamp(54px, 6.4vw, 128px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .ghost-link { display: inline-flex; align-items: center; min-height: 50px; padding: 13px 22px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .02); color: var(--text); font-size: 14px; font-weight: 750; } .ghost-link:hover { border-color: var(--accent); color: var(--accent); } .hero-logo { position: relative; z-index: 1; width: min(62%, 420px); height: auto; filter: drop-shadow(0 0 40px rgba(var(--orange-rgb), .45)); } /* ---------- product area: darker graphite shelf, thin orange border with a controlled neon glow ---------- */ .sv-shelf-wrap { margin-block: 8px clamp(28px, 4vw, 60px); } .sv-shelf { background: linear-gradient(180deg, #0a0b0d 0%, #0d0e11 100%); border: 1px solid var(--accent); border-radius: 4px; padding: clamp(20px, 2.6vw, 44px); box-shadow: 0 0 0 1px rgba(var(--orange-rgb), .16), 0 0 18px rgba(var(--orange-rgb), .42), 0 0 64px rgba(var(--orange-rgb), .16), inset 0 0 48px rgba(var(--orange-rgb), .045); } .commerce-main .sv-shelf { margin-top: 6px; } .sv-shelf .section-heading { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--edge); } .sv-shelf .product-grid { gap: clamp(16px, 2vw, 28px); } .sv-shelf .product-card { background: linear-gradient(165deg, #222529 0%, var(--card) 62%); border: 1px solid #2f3237; border-top-color: rgba(var(--orange-rgb), .5); border-radius: 3px; box-shadow: 0 12px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .sv-shelf .product-card:hover { transform: translateY(-3px); border-color: rgba(var(--orange-rgb), .7); box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 26px rgba(var(--orange-rgb), .2); } .sv-shelf .product-media { background: radial-gradient(ellipse at 72% 50%, rgba(var(--orange-rgb), .16), transparent 60%), radial-gradient(ellipse at 22% 12%, #3a3e44, transparent 62%), #14161a; } .sv-shelf .catalogue-more { margin: 26px 0 0; } /* ---------- benefit strip + footer ---------- */ .sv-benefits { margin-top: clamp(28px, 4vw, 56px); } .sv-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--edge); background: linear-gradient(180deg, #111316, #0b0c0e); } .sv-benefits li { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-right: 1px solid var(--edge); } .sv-benefits li:last-child { border-right: 0; } .sv-benefits .sv-icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(var(--orange-rgb), .5)); } .sv-benefits strong { display: block; font-size: 14px; } .sv-benefits span { display: block; color: var(--muted); font-size: 12px; } .sv-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px 40px; padding-block: 32px; margin-top: 8px; border-top: 1px solid rgba(var(--orange-rgb), .3); } .sv-footer .footer-links { justify-content: center; } .sv-footer .footer-note { text-align: right; } /* ---------- generic content pages (Om oss) ---------- */ .commerce-main article > p, .commerce-main article > ul, .commerce-main article > h2 { max-width: 70ch; } .commerce-main article > p { color: #cfd2d6; font-size: 17px; line-height: 1.7; } .commerce-main article > h2 { margin: 34px 0 10px; font-size: 26px; } .commerce-main article a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } /* ---------- tablet / mobile ---------- */ @media (max-width: 1080px) { .sv-header { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 0; padding-block: 16px; } .sv-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 26px; overflow-x: auto; padding-bottom: 2px; } .sv-search { grid-column: 1 / -1; grid-row: 3; width: 100%; } .sv-header a.cart { grid-column: 3; grid-row: 1; } .sv-benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-benefits li:nth-child(2) { border-right: 0; } .sv-benefits li:nth-child(-n+2) { border-bottom: 1px solid var(--edge); } .sv-footer { grid-template-columns: 1fr; text-align: left; } .sv-footer .footer-links { justify-content: flex-start; } .sv-footer .footer-note { text-align: left; } } @media (max-width: 720px) { .sv-header { grid-template-columns: minmax(0, 1fr) auto; } .sv-header a.cart { grid-column: 2; } .brand-logo { height: 56px; } .sv-header .wordmark { font-size: 24px; } .sv-header a.cart .cart-label { display: none; } .sv-hero h1 { font-size: clamp(44px, 13vw, 64px); } .sv-shelf { padding: 16px; } .sv-shelf .product-grid { grid-template-columns: 1fr; } .sv-benefits ul { grid-template-columns: 1fr; } .sv-benefits li { border-right: 0; border-bottom: 1px solid var(--edge); } .sv-benefits li:last-child { border-bottom: 0; } } @media (max-width: 720px) { .sv-header nav { flex-wrap: nowrap; gap: 16px; } .sv-header nav a { white-space: nowrap; padding-inline: 2px; font-size: 11px; letter-spacing: .12em; } } /* ===================================================================================================== SUPERVARG design v3: matches the approved mockup (dark shelf, orange border + glow, real product cards) ===================================================================================================== */ /* ---------- top strip ---------- */ .demo-strip { padding-block: 8px; } .demo-strip .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .strip-note { color: var(--muted); font-size: 11px; } .strip-center { color: #e3e5e8; font-size: 11px; letter-spacing: .34em; text-align: center; } .strip-demo { color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-align: right; } /* ---------- header ---------- */ .sv-header { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 118px; background: linear-gradient(180deg, #050506, #08090a); } .brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sv-header .wordmark { font-size: clamp(30px, 3vw, 46px); letter-spacing: .07em; line-height: 1; } .brand-tag { font-size: 11px; letter-spacing: .34em; color: #d7dade; } .sv-header nav { gap: clamp(22px, 3.4vw, 54px); } .sv-header nav a { font-size: 15px; letter-spacing: .12em; font-weight: 600; } .sv-tools { position: relative; display: flex; align-items: center; gap: 22px; } .sv-search-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .sv-search-icon { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--text); } .sv-search-icon .sv-icon { width: 26px; height: 26px; } .sv-search-icon:hover, .sv-search-toggle:focus-visible + .sv-search-icon { color: var(--accent); } .sv-header .sv-search { position: absolute; right: 0; top: calc(100% + 14px); width: min(340px, 86vw); display: none; z-index: 20; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(var(--orange-rgb), .25); } .sv-search-toggle:checked ~ .sv-search { display: block; } .sv-header a.cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; } .sv-header a.cart:hover { box-shadow: none; color: var(--accent); } .sv-header a.cart .sv-icon { width: 28px; height: 28px; color: var(--text); } .sv-header a.cart:hover .sv-icon { color: var(--accent); } .sv-header a.cart > .cart-badge { position: absolute; top: -4px; right: -8px; min-width: 22px; height: 22px; font-size: 12px; } /* ---------- hero band: gradient sunset + ridgelines (no third-party imagery), emblem slot on the right ---------- */ .sv-hero-band { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid rgba(var(--orange-rgb), .35); background: linear-gradient(180deg, #050506 0%, #0a0a0c 46%, #150d08 100%); } .sv-hero-band:before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse 62% 60% at 58% 86%, rgba(var(--orange-rgb), .5), rgba(var(--orange-rgb), .14) 46%, transparent 72%), radial-gradient(ellipse 40% 34% at 22% 96%, rgba(255, 150, 0, .2), transparent 70%); } .sv-hero-band .ridge { position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; } .ridge-back { height: 62%; background: linear-gradient(180deg, #17181b, #0b0c0e); clip-path: polygon(0 100%, 0 64%, 8% 50%, 16% 62%, 27% 34%, 37% 60%, 47% 42%, 57% 66%, 68% 28%, 78% 58%, 89% 40%, 100% 60%, 100% 100%); } .ridge-front { height: 40%; z-index: -1 !important; background: #060607; clip-path: polygon(0 100%, 0 72%, 11% 54%, 23% 70%, 35% 48%, 47% 72%, 60% 52%, 73% 74%, 86% 50%, 100% 68%, 100% 100%); } .sv-hero { padding-block: clamp(40px, 5vw, 96px) clamp(48px, 6vw, 120px); align-items: center; } .sv-hero h1 { font-size: clamp(38px, 4.6vw, 92px); line-height: 1.05; letter-spacing: -.02em; font-weight: 850; margin: 0 0 22px; } .sv-hero h1 span { color: var(--accent); text-shadow: 0 0 40px rgba(var(--orange-rgb), .28); } .sv-hero .hero-copy > p { color: #d3d6da; font-size: clamp(17px, 1.3vw, 24px); line-height: 1.5; margin: 0 0 30px; } .sv-hero .hero-art { background: none; min-height: clamp(260px, 26vw, 520px); } .sv-hero .hero-art:before, .sv-hero .hero-art:after { opacity: .5; } .sv-hero .hero-caption { right: 4px; bottom: 0; text-align: right; font-size: 11px; letter-spacing: .34em; line-height: 2; color: #d2d5d9; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--orange-rgb), .55); } .hero-actions .sv-btn-fill { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: #120900; border-color: var(--accent); font-weight: 850; letter-spacing: .08em; box-shadow: 0 0 28px rgba(var(--orange-rgb), .4); min-height: 56px; padding-inline: 30px; } .hero-actions .sv-btn-fill:hover { background: var(--accent-hot); color: #120900; } .hero-actions .sv-btn-fill .sv-icon { width: 18px; height: 18px; } .ghost-link { min-height: 56px; padding-inline: 30px; letter-spacing: .08em; border-color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .35); } /* ---------- product area: dark graphite shelf, real product cards ---------- */ .sv-shelf-wrap { margin-top: clamp(-40px, -3vw, -24px); position: relative; z-index: 2; } .sv-shelf { background: #1a1c1f; border-color: var(--accent); } .sv-shelf .section-heading { align-items: center; margin-bottom: 22px; padding-bottom: 0; border-bottom: 0; } .sv-shelf .section-heading h2 { font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .04em; font-weight: 800; } .sv-see-all { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; } .sv-see-all:hover { color: var(--accent-hot); } .sv-see-all .sv-icon { width: 16px; height: 16px; } .sv-product-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .sv-shelf .sv-card { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); background: linear-gradient(160deg, #2a2d32 0%, #202327 100%); border: 1px solid #3a3d43; border-radius: 3px; overflow: hidden; } .sv-shelf .sv-card:hover { border-color: rgba(var(--orange-rgb), .75); } .sv-card .sv-card-media { display: block; min-width: 0; } .sv-card .product-media { aspect-ratio: auto; height: 100%; min-height: 200px; } .sv-card .studio-object { font-size: clamp(56px, 6vw, 96px); } .sv-card .media-signature { display: none; } .sv-card .product-body { padding: 18px 20px; justify-content: center; gap: 2px; min-width: 0; } .sv-card h3 { font-size: clamp(17px, 1.4vw, 21px); margin: 0; letter-spacing: -.01em; } .sv-card h3 a:hover { color: var(--accent); } .sv-card .product-meta { margin: 0 0 6px; } .sv-card .price { font-size: 22px; color: var(--accent); margin: 0 0 4px; } .sv-card .availability { border-top: 0; padding-top: 0; margin: 0 0 12px; font-size: 13px; } .sv-add { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; padding: 10px 20px; background: var(--accent); color: #120900; border: 1px solid var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; text-align: center; box-shadow: 0 0 18px rgba(var(--orange-rgb), .3); } .sv-add:hover { background: var(--accent-hot); color: #120900; } .sv-add.is-disabled { background: #3b3e44; color: #9fa4ab; border-color: #3b3e44; box-shadow: none; cursor: not-allowed; } /* ---------- benefit strip + footer ---------- */ .sv-benefits { margin-top: clamp(24px, 3vw, 48px); } .sv-benefits ul { background: #08090a; border-color: rgba(var(--orange-rgb), .28); } .sv-benefits strong { font-size: 13px; letter-spacing: .08em; } .sv-footer { grid-template-columns: 1fr auto 1fr; border-top: 1px solid rgba(var(--orange-rgb), .35); } .footer-copy { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; } .sv-footer .footer-note { color: var(--muted); font-size: 12px; letter-spacing: .06em; } /* ---------- logo asset (supplied file): its black background must vanish on the dark page; never altered ---------- */ .brand-logo, .hero-logo { mix-blend-mode: screen; } .hero-logo { width: min(78%, 520px); } /* ---------- tablet / mobile ---------- */ @media (max-width: 1080px) { .sv-header { grid-template-columns: minmax(0, 1fr) auto; } .sv-tools { grid-column: 2; grid-row: 1; } .sv-header nav { grid-column: 1 / -1; grid-row: 2; } .sv-header .sv-search { top: calc(100% + 8px); } .sv-hero { padding-bottom: 72px; } .sv-shelf-wrap { margin-top: -20px; } } @media (max-width: 720px) { .demo-strip .wrap { grid-template-columns: 1fr auto; } .strip-center { display: none; } .brand-tag { display: none; } .sv-header .wordmark { font-size: 26px; } .sv-tools { gap: 6px; } .sv-hero h1 { font-size: clamp(30px, 9vw, 44px); } .sv-hero .hero-art { min-height: 200px; } .sv-product-grid { grid-template-columns: 1fr; } .sv-shelf .sv-card { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } .sv-card .product-media { min-height: 150px; } .sv-card .studio-object { font-size: 48px; } .sv-footer { grid-template-columns: 1fr; } } /* v3 refinements */ .demo-strip .strip-note { color: var(--muted); font-weight: 400; letter-spacing: 0; margin: 0; } .demo-strip .strip-center { color: #e3e5e8; margin: 0; font-weight: 400; } .demo-strip .strip-demo { color: var(--accent); margin: 0; } .sv-shelf .sv-card { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } .sv-add { white-space: nowrap; font-size: 11px; letter-spacing: .05em; padding: 10px 14px; } @media (max-width: 720px) { .sv-add { font-size: 11px; padding-inline: 12px; } } /* product cards inside content articles keep their own link colours */ .commerce-main .sv-card a { color: inherit; text-decoration: none; } .commerce-main .sv-card h3 a:hover { color: var(--accent); } .commerce-main .sv-card a.sv-add { color: #120900; } .commerce-main .sv-card a.sv-add:hover { color: #120900; } @media (max-width: 720px) { .sv-header nav { gap: 14px; overflow: visible; } .sv-header nav a { font-size: 11px; letter-spacing: .08em; padding-inline: 1px; } } /* ---------- official logo (web copy: background corrected to true black, blended so it merges with the dark page) ---------- */ .sv-header .brand-logo { height: 92px; width: auto; max-width: none; } .sv-hero .hero-logo { height: clamp(250px, 31vw, 480px); width: auto; max-width: 100%; } @media (max-width: 720px) { .sv-header .brand-logo { height: 64px; } .sv-hero .hero-logo { height: clamp(200px, 60vw, 300px); } } /* the web logo has a true alpha channel (black converted to transparency), so no blend mode is needed */ .brand-logo, .hero-logo { mix-blend-mode: normal; } .sv-header .brand-logo { filter: drop-shadow(0 0 14px rgba(var(--orange-rgb), .3)); } .sv-hero .hero-logo { filter: drop-shadow(0 0 34px rgba(var(--orange-rgb), .35)); } /* ===================================================================================================== SUPERVARG storefront (v4): catalogue, product page, cart, checkout, confirmation, tracking, footer. Builds on the approved v3 visual language (graphite panels, orange accent, thin orange shelf border). ===================================================================================================== */ .sv-kicker { margin: 0 0 16px; font-size: 13px; letter-spacing: .16em; font-weight: 800; color: var(--accent); text-transform: uppercase; } .eyebrow { text-transform: uppercase; } .sv-btn-fill, .sv-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 26px; font-size: 13px; font-weight: 850; letter-spacing: .08em; border: 1px solid var(--accent); cursor: pointer; text-decoration: none; } .sv-btn-fill { background: var(--accent); color: #120900; box-shadow: 0 0 24px rgba(var(--orange-rgb), .35); } .sv-btn-fill:hover { background: var(--accent-hot); color: #120900; } .sv-btn-fill .sv-icon { width: 18px; height: 18px; } .sv-btn-line { background: rgba(0, 0, 0, .35); color: var(--text); } .sv-btn-line:hover { color: var(--accent); box-shadow: 0 0 20px rgba(var(--orange-rgb), .25); } .commerce-main a.sv-btn-fill, .sv-page a.sv-btn-fill { color: #120900; text-decoration: none; } .commerce-main a.sv-btn-line, .sv-page a.sv-btn-line { color: var(--text); text-decoration: none; } .commerce-main a.sv-btn-line:hover, .sv-page a.sv-btn-line:hover { color: var(--accent); } .sv-chip { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 10px; font-size: 11px; letter-spacing: .12em; font-weight: 800; border: 1px solid var(--accent); color: var(--accent); } /* ---------- page heads, breadcrumbs ---------- */ .sv-page-head { margin: 0 0 26px; } .sv-page-head h1 { margin: 0; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.02em; line-height: 1.08; } .sv-page-lead { color: #cfd2d6; max-width: 70ch; margin-top: 10px; } .sv-crumbs { margin: 0 0 20px; } .sv-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sv-crumbs li + li:before { content: "/"; margin-right: 6px; color: #5a5f66; } .sv-crumbs a { text-decoration: none; } .sv-crumbs [aria-current] { color: var(--text); } .commerce-main .sv-crumbs a { color: var(--muted); text-decoration: none; } .commerce-main .sv-crumbs a:hover { color: var(--accent); } .sv-page-main { padding-block: 32px 72px; } .sv-page { max-width: 1000px; } .sv-page > p, .sv-page > ul, .sv-page > h2, .sv-page > h3 { max-width: 72ch; } .sv-page > p, .sv-page > ul { color: #cfd2d6; font-size: 17px; line-height: 1.7; } .sv-page > h2 { margin: 36px 0 10px; font-size: 26px; } .sv-page > p a, .sv-page > ul a, .sv-page .sv-demo-notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .sv-page a.sv-btn-fill, .sv-page a.sv-btn-line { text-decoration: none; } .sv-page .sv-actions a { color: inherit; } .sv-page .sv-actions a.sv-btn-fill { color: #120900; } .sv-page .sv-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; max-width: none; } body.woocommerce-cart .sv-page, body.woocommerce-checkout .sv-page, .sv-page:has(.sv-track) { max-width: none; } .sv-page .sv-demo-notice { max-width: 72ch; } /* ---------- about page building blocks ---------- */ .sv-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 30px 0; max-width: none; } .sv-about-card { padding: 22px; background: linear-gradient(160deg, #1d2024, #121417); border: 1px solid var(--edge); border-top: 2px solid var(--accent); border-radius: 3px; } .sv-about-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); } .sv-about-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; } .sv-about-lead { font-size: clamp(19px, 2vw, 26px) !important; line-height: 1.5 !important; color: var(--text) !important; max-width: 60ch !important; } /* ---------- catalogue (shop, category, search) ---------- */ .sv-shop-shelf { padding: clamp(18px, 2.2vw, 36px); } .sv-cat-chips ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; } .sv-cat-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 18px; border: 1px solid var(--edge); background: #0d0f11; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); } .sv-cat-chips a span { color: var(--muted); font-weight: 600; } .sv-cat-chips a:hover { border-color: var(--accent); color: var(--accent); } .sv-cat-chips a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #120900; box-shadow: 0 0 18px rgba(var(--orange-rgb), .35); } .sv-cat-chips a[aria-current="page"] span { color: #3b1a00; } .sv-toolbar { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(170px, 1fr) minmax(190px, 1fr) auto auto; gap: 14px 18px; align-items: end; padding: 18px; margin-bottom: 18px; background: #101214; border: 1px solid var(--edge); } .sv-toolbar p { margin: 0; min-width: 0; } .sv-toolbar label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sv-toolbar input[type="search"], .sv-toolbar input[type="number"], .sv-toolbar select { width: 100%; min-height: 46px; padding: 9px 12px; background: #0a0b0d; border: 1px solid var(--edge); color: var(--text); font: inherit; font-size: 14px; border-radius: 0; } .sv-toolbar input:focus, .sv-toolbar select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .sv-tb-price span { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sv-check { display: flex !important; align-items: center; gap: 10px; min-height: 46px; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--text) !important; cursor: pointer; } .sv-check input { width: 20px; height: 20px; accent-color: var(--accent); } .sv-tb-go .sv-btn-line { min-height: 46px; padding-inline: 20px; } .sv-result-count { margin: 0 0 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sv-shop-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(16px, 2vw, 28px); } .sv-shelf .sv-card.sv-card-v { display: flex; flex-direction: column; grid-template-columns: none; } .sv-card-v .sv-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #14161a; } .sv-card-v .sv-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sv-card-v .sv-card-media .product-media { aspect-ratio: auto; height: 100%; min-height: 0; border: 0; } .sv-card-v .product-body { padding: 18px 20px 20px; justify-content: flex-start; flex: 1; } .sv-card-v .sv-add { align-self: stretch; margin-top: auto; } .sv-card-v .availability { margin-bottom: 14px; } .sv-card-cat { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 750; } .sv-empty { padding: 34px 10px; text-align: center; } .sv-pagination ul { display: flex; gap: 10px; justify-content: center; list-style: none; padding: 26px 0 0; margin: 0; } .sv-pagination a, .sv-pagination .current { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--edge); } .sv-pagination .current, .sv-pagination a:hover { border-color: var(--accent); color: var(--accent); } .sv-cats-home { margin-top: clamp(24px, 3vw, 44px); } .sv-cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .sv-cat-tiles a { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px 22px; background: linear-gradient(160deg, #1d2024, #121417); border: 1px solid var(--edge); border-radius: 3px; } .sv-cat-tiles a:hover { border-color: var(--accent); box-shadow: 0 0 26px rgba(var(--orange-rgb), .22); } .sv-cat-tiles .sv-icon:first-child { grid-row: 1 / span 2; width: 34px; height: 34px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(var(--orange-rgb), .5)); } .sv-cat-name { font-size: 18px; font-weight: 800; letter-spacing: .02em; } .sv-cat-count { grid-column: 2; font-size: 12px; color: var(--muted); } .sv-cat-go { grid-column: 3; grid-row: 1 / span 2; color: var(--accent); display: grid; } .sv-cat-go .sv-icon { width: 20px; height: 20px; } /* ---------- product page ---------- */ .sv-single { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; } .sv-gallery-main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--edge); border-top-color: rgba(var(--orange-rgb), .6); background: #101214; box-shadow: 0 0 40px rgba(var(--orange-rgb), .1); } .sv-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .sv-gallery-main .product-media { width: 100%; height: 100%; aspect-ratio: auto; } .sv-gallery-main .studio-object { font-size: clamp(120px, 22vw, 300px); } .sv-thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; } .sv-thumb { width: 78px; height: 78px; padding: 0; overflow: hidden; background: #101214; border: 1px solid var(--edge); } .sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sv-thumb:hover, .sv-thumb.is-active { border-color: var(--accent); } .sv-single-info h1 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 46px); letter-spacing: -.02em; line-height: 1.1; } .sv-single-info .price { font-size: 34px; color: var(--accent); margin: 0 0 6px; } .sv-sku { margin: 0 0 18px; color: var(--muted); font-size: 13px; letter-spacing: .06em; } .sv-sku strong { color: var(--text); } .sv-avail-panel { padding: 16px 18px; margin: 0 0 20px; background: #101214; border: 1px solid var(--edge); border-left: 4px solid var(--muted); } .sv-avail-panel.is-available { border-left-color: var(--green); } .sv-avail-panel.is-unavailable { border-left-color: var(--red); } .sv-avail-panel .availability { border: 0; padding: 0; margin: 0 0 4px; font-size: 15px; } .sv-avail-panel > p:last-child { margin: 0; font-size: 13px; color: var(--muted); } .sv-short { color: #cfd2d6; margin-bottom: 8px; } .sv-add.sv-add-lg { min-height: 54px; padding-inline: 28px; font-size: 13px; } .sv-demo-line { margin: 4px 0 0; font-size: 13px; } .commerce-main .sv-demo-line a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .sv-info-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(32px, 4vw, 60px); } .sv-info-panel { padding: clamp(20px, 2.4vw, 32px); background: #101214; border: 1px solid var(--edge); border-radius: 3px; } .sv-prose p { color: #cfd2d6; line-height: 1.75; margin: 0 0 12px; } .sv-spec { margin: 0; } .sv-spec div { display: grid; grid-template-columns: minmax(120px, .8fr) 1.2fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--edge); } .sv-spec div:last-child { border-bottom: 0; } .sv-spec dt { color: var(--muted); font-size: 13px; letter-spacing: .04em; } .sv-spec dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; } .sv-related { margin-top: clamp(36px, 5vw, 72px); } .sv-related .sv-card.sv-card-v { background: linear-gradient(160deg, #2a2d32, #202327); border: 1px solid #3a3d43; border-radius: 3px; overflow: hidden; } /* ---------- checkout progress ---------- */ .sv-checkout-steps { display: flex; gap: 0; list-style: none; margin: 0 0 30px; padding: 0; max-width: 640px; } .sv-checkout-steps li { flex: 1; display: flex; align-items: center; gap: 10px; position: relative; font-size: 12px; letter-spacing: .12em; font-weight: 800; color: var(--muted); } .sv-checkout-steps li:last-child { flex: 0 0 auto; } .sv-checkout-steps li:not(:last-child):after { content: ""; flex: 1; height: 2px; margin-inline: 12px; background: var(--edge); } .sv-checkout-steps li.is-done:not(:last-child):after { background: var(--accent); } .sv-cs-dot { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; border: 2px solid var(--edge); background: #0d0f11; font-size: 13px; } .sv-cs-dot .sv-icon { width: 16px; height: 16px; } .sv-checkout-steps .is-done .sv-cs-dot { background: var(--accent); border-color: var(--accent); color: #120900; } .sv-checkout-steps .is-current { color: var(--text); } .sv-checkout-steps .is-current .sv-cs-dot { border-color: var(--accent-hot); color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--orange-rgb), .2), 0 0 18px rgba(var(--orange-rgb), .5); } /* ---------- cart ---------- */ body.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 0 32px; align-items: start; } body.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } body.sv-cart-empty .woocommerce { display: block; } .woocommerce-cart-form { min-width: 0; } table.shop_table .product-thumbnail { display: table-cell; width: 96px; } table.shop_table .product-thumbnail a { display: block; width: 76px; height: 76px; overflow: hidden; border: 1px solid var(--edge); background: #101214; } table.shop_table .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } table.shop_table .product-thumbnail .product-media { width: 100%; height: 100%; aspect-ratio: auto; border: 0; } table.shop_table .product-thumbnail .studio-object { font-size: 34px; } table.shop_table .product-thumbnail .media-signature { display: none; } .sv-item-sku { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .1em; color: var(--muted); font-weight: 400; } table.shop_table .product-name a { font-size: 17px; } td.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } td.actions .sv-continue { color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } td.actions .sv-continue:hover { color: var(--accent); } .cart-collaterals { display: block; position: sticky; top: 16px; } .cart_totals { width: 100%; padding: 22px; background: #101214; border: 1px solid var(--edge); border-top: 3px solid var(--accent); } .cart_totals h2 { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .cart_totals table.shop_table { border: 0; background: transparent; margin-bottom: 18px; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 12px 0; } .cart_totals .order-total td, .cart_totals .order-total th { font-size: 20px; color: var(--text); } .cart_totals .order-total .amount { color: var(--accent); } .cart_totals tr.shipping, .cart_totals tr.woocommerce-shipping-totals { display: none; } body.sv-cart-empty .cart-empty { padding: 44px 28px 10px; margin: 0; text-align: center; background: #101214; border: 1px solid var(--edge); border-bottom: 0; font-size: 22px; font-weight: 750; } body.sv-cart-empty .return-to-shop { padding: 12px 28px 44px; margin: 0; text-align: center; background: #101214; border: 1px solid var(--edge); border-top: 0; } /* ---------- checkout ---------- */ .sv-demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 26px; padding: 16px 20px; background: repeating-linear-gradient(-45deg, #1a0f06, #1a0f06 14px, #21130a 14px, #21130a 28px); border: 1px solid var(--accent); box-shadow: 0 0 22px rgba(var(--orange-rgb), .25); } .sv-demo-banner strong { padding: 4px 12px; background: var(--accent); color: #120900; letter-spacing: .14em; font-size: 13px; } .sv-demo-banner span { font-weight: 650; } form.checkout #customer_details { padding: 24px; background: #101214; border: 1px solid var(--edge); border-radius: 3px; } form.checkout #order_review { padding: 24px; background: #101214; border: 1px solid var(--edge); border-top: 3px solid var(--accent); border-radius: 3px; max-width: none; } form.checkout h3 { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } form.checkout #order_review_heading { margin-top: 0; } #order_review table.shop_table { border: 0; background: transparent; } #order_review table.shop_table th, #order_review table.shop_table td { padding: 12px 0; } #order_review .order-total th, #order_review .order-total td { font-size: 20px; } #order_review .order-total .amount { color: var(--accent); } #payment { background: #0b0c0e; } /* ---------- order confirmation ---------- */ .sv-confirm { max-width: 900px; } .sv-confirm-card { padding: clamp(20px, 3vw, 40px); background: #101214; border: 1px solid var(--edge); border-top: 3px solid var(--accent); box-shadow: 0 0 40px rgba(var(--orange-rgb), .12); } .sv-confirm-head { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; } .sv-confirm-head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 34px); } .sv-confirm-check { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--accent); color: #120900; box-shadow: 0 0 26px rgba(var(--orange-rgb), .5); } .sv-confirm-check .sv-icon { width: 28px; height: 28px; stroke-width: 2.4; } .sv-confirm-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 30px; } .sv-confirm-meta div { padding: 14px 16px; background: #0b0c0e; border: 1px solid var(--edge); } .sv-confirm-meta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sv-confirm-meta dd { margin: 6px 0 0; font-size: 18px; font-weight: 750; } .sv-confirm-meta .sv-confirm-number { color: var(--accent); font-size: 26px; letter-spacing: .04em; } .sv-confirm-items { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--edge); } .sv-confirm-items li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--edge); } .sv-confirm-items li:last-child { border-bottom: 0; } .sv-confirm-items em { color: var(--muted); font-style: normal; } .sv-confirm-total { background: #0b0c0e; font-size: 18px; } .sv-confirm-total strong { color: var(--accent); } .sv-confirm-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 12px; } .sv-confirm .sv-steps { margin-bottom: 30px; } .sv-confirm .sv-step-label time { display: none; } /* ---------- order status stepper (confirmation + tracking) ---------- */ .sv-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 8px 0 30px; padding: 0; } .sv-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 4px; } .sv-steps li:not(:last-child):after { content: ""; position: absolute; top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 3px; background: var(--edge); } .sv-steps li.is-done:not(:last-child):after { background: var(--accent); } .sv-step-dot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--edge); background: #0d0f11; color: #6b7078; position: relative; z-index: 1; } .sv-step-dot .sv-icon { width: 24px; height: 24px; } .sv-steps .is-done .sv-step-dot { background: var(--accent); border-color: var(--accent); color: #120900; } .sv-steps .is-current .sv-step-dot { background: #1b0f06; border-color: var(--accent-hot); color: var(--accent-hot); box-shadow: 0 0 0 5px rgba(var(--orange-rgb), .22), 0 0 28px rgba(var(--orange-rgb), .7); } .sv-step-label { display: flex; flex-direction: column; gap: 3px; } .sv-step-label strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .sv-step-label time { font-size: 12px; color: var(--muted); } .sv-steps .is-todo { opacity: .55; } .sv-steps .is-current .sv-step-label strong { color: var(--accent-hot); } /* ---------- Spåra order ---------- */ .sv-track { max-width: 960px; } .sv-track-form { display: block; padding: clamp(22px, 3vw, 36px); margin: 0 0 30px; background: linear-gradient(165deg, #1a1c1f, #101214); border: 1px solid var(--accent); border-radius: 3px; box-shadow: 0 0 30px rgba(var(--orange-rgb), .22); } .sv-track-title { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 32px); } .sv-track-intro { margin: 0 0 20px; color: var(--muted); } .sv-track-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .sv-track-form .button { min-height: 54px; padding-inline: 34px; background: var(--accent) !important; color: #120900 !important; border-color: var(--accent) !important; letter-spacing: .1em; box-shadow: 0 0 24px rgba(var(--orange-rgb), .4) !important; } .sv-track-form .button:hover { background: var(--accent-hot) !important; } .sv-track-result { padding: clamp(20px, 3vw, 36px); background: #101214; border: 1px solid var(--edge); border-top: 3px solid var(--accent); } .sv-track-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .sv-track-head h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); } .sv-track-head .eyebrow { margin-bottom: 4px; } .sv-track-status { margin: 0; } .sv-track-text { color: #cfd2d6; margin: 12px 0 28px; } .sv-pill { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } /* ---------- footer ---------- */ .sv-footer { display: block; padding-block: 0 18px; } .sv-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 40px; padding-block: 36px 28px; } .sv-footer-col { min-width: 0; } .sv-footer-title { margin: 0 0 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 800; } .sv-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sv-footer-list a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: #d3d6da; } .sv-footer-list a:hover { color: var(--accent); } .sv-footer-wordmark { margin: 0 0 8px; font-size: 26px; font-weight: 900; letter-spacing: .07em; } .sv-footer-wordmark span { color: var(--accent); } .sv-footer-brand p { color: var(--muted); font-size: 14px; margin: 0 0 8px; } .sv-footer-brand p.sv-footer-wordmark { color: var(--text); font-size: 26px; } .sv-footer-brand .sv-footer-demo { color: var(--accent); font-size: 12px; letter-spacing: .06em; font-weight: 700; } .sv-footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; border-top: 1px solid var(--edge); } .sv-footer-bar p { margin: 0; } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .sv-toolbar { grid-template-columns: 1fr 1fr; } .sv-tb-search { grid-column: 1 / -1; } .sv-footer-cols { grid-template-columns: 1fr 1fr; } body.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 980px) { .sv-single, .sv-info-grid { grid-template-columns: 1fr; } body.woocommerce-cart .woocommerce { display: block; } .cart-collaterals { position: static; } } @media (max-width: 720px) { .sv-toolbar { grid-template-columns: 1fr; padding: 14px; } .sv-shop-grid { grid-template-columns: 1fr; } .sv-cat-chips ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .sv-cat-chips a { white-space: nowrap; } .sv-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } .sv-footer-brand { grid-column: 1 / -1; } .sv-spec div { grid-template-columns: 1fr; gap: 2px; } .sv-checkout-steps li { font-size: 10px; letter-spacing: .06em; gap: 6px; } .sv-checkout-steps li:not(:last-child):after { margin-inline: 6px; } .sv-track-fields { grid-template-columns: 1fr; } .sv-track-form .button { width: 100%; } /* cart rows: thumbnail | product | remove, then price, quantity and subtotal */ .woocommerce-cart-form table.shop_table tr.cart_item { grid-template-columns: 76px 1fr auto; gap: 6px 14px; } .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; width: auto; padding: 0; } .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail:before { content: none; } .woocommerce-cart-form table.shop_table tr.cart_item td.product-name { grid-column: 2; grid-row: 1; } .woocommerce-cart-form table.shop_table tr.cart_item td.product-remove { grid-column: 3; grid-row: 1; } .woocommerce-cart-form table.shop_table tr.cart_item td.product-price, .woocommerce-cart-form table.shop_table tr.cart_item td.product-quantity, .woocommerce-cart-form table.shop_table tr.cart_item td.product-subtotal { grid-column: 2 / -1; text-align: left; width: auto; } td.actions { display: grid; } /* vertical status stepper */ .sv-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 22px; } .sv-steps li { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 0 0 22px; } .sv-steps li:last-child { padding-bottom: 0; } .sv-steps li:not(:last-child):after { top: 54px; bottom: 0; left: 26px; right: auto; width: 3px; height: auto; } .sv-step-label { align-items: flex-start; } } /* v4 fixes: the parent theme styles every