/* ⚠ 280 - A VARIANT PAGE'S CHOICES IN THE OWNER'S ORDER AND SPACING (the owner, 2026-10-08, after seeing 278): name - G - short description - G/2 - „Värv: " - G/4 - the colour squares - G/2 - „Pikkus: " - G/4 - the length buttons - G/2 - the price block as it is - G/2 - „Kirjeldus". G is the gap the page draws between the name and the short description, measured on the served page: 52px = the title's margin-bottom:1em at 20px (`.route-product-product:not(.popup) .product-info .page-title`, Journal's settings style) + the section gap 32px (`--sections-gap: var(--j-gap-spacing---9)`, style.min.css `.product-details>div:not(.page-title):not(:last-child)`) under the empty vehicle-widget box. So G/2 = 26px, G/4 = 13px. Each label is a full-width line of its own; the squares and buttons are Journal's own option style (Journal -> Stiilid -> Toote valikud), so the card's own colour wears the chosen length button's mark (.push-option.push-option input:checked+.option-wrapper - the 2px border in the text colour). Markup: journal3/module/jmi_variant_choices.twig. This file loads before Journal's styles - hence !important. */ .product-info .product-details.jmi-variant-page > .blocks-top { margin-bottom: 26px !important; } .product-info .product-details.jmi-variant-page > .jmi-variant-options, .product-info .product-details.jmi-variant-page > .button-group-page { margin-bottom: 26px !important; } .product-info .product-details .jmi-variant-options .jmi-variant-line { display: block; width: 100%; margin: 0 0 13px !important; } .product-info .product-details .jmi-variant-options .jmi-variant-colours { margin: 0 0 26px !important; } .product-info .product-details .jmi-variant-options .jmi-variant-lengths { margin: 0 !important; } /* 286: a second choice under the lengths (ProBar Evo „Komplektis") - G/2 from the length buttons to its line */ .product-info .product-details .jmi-variant-options .jmi-variant-lengths:not(:last-child) { margin-bottom: 26px !important; } .product-info .product-details .jmi-variant-options .jmi-colour-link, .product-info .product-details .jmi-variant-options .jmi-family-link { /* 387 S1: a family's size button is a link, as the square */ display: flex; color: inherit; } /* the kit page (journal3/product_tabs.php kitColourSquares()): the squares in the kit-length block, under the short description - G/2 above (the blocks' own 16px row gap, --product-blocks-gap, made up to 26px), G/4 to the squares (the line above), G/2 below: to the kit's length block (the squares' own 26px), or - when the vehicle has one kit and no length block is drawn - to the price block, whose 32px section gap is cut back to 26px */ .product-info .product-details .jmi-variant-options.jmi-variant-kit { margin: calc(26px - var(--product-blocks-gap, 16px)) 0 0 !important; } .product-info .product-details .jmi-variant-options.jmi-variant-kit:last-child .jmi-variant-colours { margin-bottom: calc(26px - var(--sections-gap, 0px)) !important; } /* ⚠ 282 THE CHOSEN COLOUR CIRCLE WEARS THE CHOSEN LENGTH PILL'S WHOLE MARK - the owner, 2026-10-08, on 9234: „oma värvi ruut kannab sama märki kui valitud pikkuse nupp - ei kanna". The pill's mark is three rules of Journal's settings style (Journal -> Stiilid -> Toote valikud): the border colour `.push-option.push-option input:checked+.option-wrapper` (reaches the circle too), and the background and the shadow `…option-wrapper:not(.push-option-image)` and its :hover twin - which leave every image option out. The same declarations, copied value for value, for the colour circles only (the squares of jmi_variant_choices.twig); the image keeps its round shape, size and fill, an unchosen circle its light ring. If the option style is changed in the admin, change these with it. */ .push-option.push-option.jmi-variant-colours .option-wrapper.push-option-image { background-color:hsla(var(--j-color-scheme-background-primary-h),var(--j-color-scheme-background-primary-s),calc(var(--j-color-scheme-background-primary-l) - 0%),calc(var(--j-color-scheme-background-primary-a)*1)); --background-color:hsla(var(--j-color-scheme-background-primary-h),var(--j-color-scheme-background-primary-s),calc(var(--j-color-scheme-background-primary-l) - 0%),calc(var(--j-color-scheme-background-primary-a)*1)); } .no-touchevents .push-option.push-option.jmi-variant-colours .option-wrapper.push-option-image:hover, .push-option.push-option.jmi-variant-colours input:checked+.option-wrapper.push-option-image { background-color:hsla(var(--j-color-scheme-background-primary-h),var(--j-color-scheme-background-primary-s),calc(var(--j-color-scheme-background-primary-l) - 2%),calc(var(--j-color-scheme-background-primary-a)*1)); --background-color:hsla(var(--j-color-scheme-background-primary-h),var(--j-color-scheme-background-primary-s),calc(var(--j-color-scheme-background-primary-l) - 2%),calc(var(--j-color-scheme-background-primary-a)*1)); box-shadow:0px .2px .2px rgba(0,0,0,.15),0px .3px .2px -.5px rgba(0,0,0,.14),-.1px .6px .5px -1px rgba(0,0,0,.12),-.1px 1.2px 1px -1.5px rgba(0,0,0,.11),-.2px 2.2px 1.8px -2px rgba(0,0,0,.1),-.3px 3.8px 3.1px -2.5px rgba(0,0,0,.08),-.5px 6.1px 5px -3px rgba(0,0,0,.07),-.8px 9.4px 7.7px -3.5px rgba(0,0,0,.06),-1.1px 13.7px 11.2px -4px rgba(0,0,0,.04),-1.6px 19.2px 15.8px -4.5px rgba(0,0,0,.03); } /* ⚠ 283 THE COLOUR INDICATOR IS A PILL - the owner, 2026-10-08, after 282: „Värviindikaatori suurus on ok aga ta võiks olla horisontaalselt ovaal/lapik/laiem, mitte ring. Pool diaameetrist lisaks laiusele." Today's circle: the 28 × 28 swatch (Journal -> Stiilid -> Toote valikud' option image size) + 4px padding + 2px border = 40 × 40. The pill keeps the height (40) and adds half the diameter to the width (60): the swatch 48 × 28, covering it undistorted (object-fit: cover, style.min.css), the ends fully round (radius 99px, as the length buttons). 282's mark, the gap between the two and the labels' gaps stay. */ .push-option.push-option.jmi-variant-colours .option-wrapper.push-option-image img { width: 48px; height: 28px; object-fit: cover; border-radius: 99px; }