/** Shopify CDN: Minification failed Line 71:49 Unexpected "@media" **/ /* ========================================================================== OKO 2.0 — dosage calculator page Loaded after oko-2.0.css; inherits its tokens via the .oko2 scope. ========================================================================== */ .calc-head{padding:calc(74px + clamp(30px,5vw,58px)) 0 clamp(30px,4vw,46px)} .calc-head .eyebrow{margin-bottom:14px} .oko2 .calc-head h1.display{font-size:clamp(2.1rem,5.2vw,3.9rem);margin:0 0 16px;margin-left:var(--optical)} .calc-head .lede{color:var(--paper-soft)} /* single column now the side rail has gone — the tool gets the full measure, capped so the formula cards do not stretch to an unreadable width */ .calc-grid{ display:grid;grid-template-columns:minmax(0,1fr); max-width:1040px; padding-bottom:clamp(30px,4vw,48px); } /* the safety caveat, read once, at the foot of the page */ .calc-note{ max-width:1040px;margin:0 0 clamp(60px,8vw,110px); padding-left:16px;border-left:2px solid var(--line-2); font-size:0.92rem;line-height:1.6;color:var(--paper-faint); } /* ---------- the tool ---------- */ .calc-card{ background:var(--panel);border:1px solid var(--line); border-left:3px solid var(--lime); padding:clamp(24px,3vw,38px); } /* These are the page's real headings — one open question at a time — so they are sized and coloured as headings, not as captions. They were 13.8px muted grey and read as small print next to the controls they introduce. */ .calc-step{ font-family:var(--f-mono);font-weight:700;font-size:1.18rem;letter-spacing:.08em; text-transform:uppercase;color:var(--paper);display:flex;align-items:baseline; gap:.7em;margin:0 0 20px;line-height:1.2; } .calc-step .n{ color:var(--lime);font-size:.9em;margin-right:0; /* a fixed column so 01/02/03 line up down the card */ flex:0 0 auto;min-width:1.6em; } .calc-block + .calc-block{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)} /* formula picker: radio cards */ .calc-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} @media (max-width:560px){.calc-prods{grid-template-columns:1fr}} /* Cards align to the top with one consistent inset all round, and a fixed gap between name and description — previously the tight 12/14px padding and 2px gap made the two-line cards read cramped against the one-liners. */ /* vehicle left, identity right — the picture does the recognising */ .calc-prod{ text-align:left;background:var(--ink);border:1px solid var(--line-2); padding:0;cursor:pointer;transition:border-color .15s,background .15s; display:grid;grid-template-columns:132px minmax(0,1fr);align-items:stretch; overflow:hidden; } /* Tinted with the range colour. mix-blend-mode:color takes the hue and saturation from the overlay and keeps the photograph's own luminance, so the vehicle stays fully readable instead of being flooded. isolate keeps the blend inside the thumbnail — it must never reach the card's text. */ /* lime is far more saturated than the other five hues — at the shared strength it turned the loader olive, so this one is dialled back */ .calc-prod[data-key="lifelong"] .calc-prod:hover @media (max-width:560px){ .calc-prod{grid-template-columns:104px minmax(0,1fr)} } /* the OKO mark carries the range colour; the name below matches it */ .calc-prod:focus-visible{outline:3px solid var(--lime);outline-offset:2px} /* Only the OKO mark carries the range colour. The name stays paper white — it is the thing being read, and white on ink is 16:1 against the best any brand hue manages. Colour identifies; white reads. */ .calc-prod .t{ font-family:var(--f-mono);font-weight:700;font-size:1.02rem;letter-spacing:.05em; text-transform:uppercase;color:var(--paper);line-height:1.25; } .calc-prod .d{font-size:0.98rem;color:var(--paper-faint);line-height:1.4} /* tyre input */ .calc-form{display:flex;gap:9px;flex-wrap:wrap} .calc-form input{ flex:1 1 220px;min-width:0; font-family:var(--f-mono);font-weight:700;font-size:1rem;letter-spacing:.04em; color:var(--paper);background:var(--ink); border:1.5px solid var(--line-2);border-radius:999px;padding:.95rem 1.3rem; } .calc-form input::placeholder{color:var(--paper-faint);font-weight:500} .calc-form input:focus{outline:none;border-color:var(--lime)} .calc-form .btn{flex:0 0 auto} .calc-hint{margin:12px 0 0;font-size:0.98rem;color:var(--paper-faint);line-height:1.5} /* example-size chips — the legacy guided list, folded into the flow */ .calc-sizes{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:16px} .calc-sizes[hidden]{display:none} .calc-sizes-label{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.14em; text-transform:uppercase;color:var(--paper-faint);margin-right:4px; } .calc-sizes button{ font-family:var(--f-mono);font-weight:500;font-size:0.86rem;letter-spacing:.04em; color:var(--paper-soft);background:transparent; border:1px solid var(--line);border-radius:999px;padding:.4rem .75rem; cursor:pointer;transition:color .15s,border-color .15s; } .calc-sizes button:hover{color:var(--lime);border-color:var(--lime)} /* result */ .calc-err{display:none;margin:18px 0 0;font-size:0.98rem;color:#FF8A73} .calc-err.show{display:block} /* The answer is the point of the page, so it is a filled lime panel rather than another row of text on ink. Everything inside flips to --on-lime. */ .calc-out{display:none} .calc-out.show{ display:block;background:var(--lime);color:var(--on-lime); margin:26px 0 0;padding:clamp(20px,2.4vw,28px); } .calc-out .row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .calc-out .lvl{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.16em; text-transform:uppercase;color:rgba(21,19,8,.66);min-width:96px; } .calc-out .amt{ font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.6vw,3.2rem); color:var(--on-lime);line-height:1.1;margin-left:var(--optical); } .calc-out .per{font-size:0.98rem;color:rgba(21,19,8,.7)} .calc-out .desc{margin:12px 0 0;font-size:0.98rem;color:rgba(21,19,8,.78)} .calc-out .cta{margin-top:18px} .calc-out .cta .btn{white-space:nowrap} /* ---------- side rail ---------- */ .calc-side{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)} .calc-side > div{background:var(--panel);padding:clamp(20px,2.4vw,28px)} .calc-side h2{ font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:1.1rem;line-height:1.1;margin:0 0 16px;margin-left:var(--optical); } .calc-side ol{list-style:none;margin:0;padding:0;counter-reset:c} .calc-side ol li{ counter-increment:c;display:grid;grid-template-columns:auto 1fr;gap:12px; padding:9px 0;font-size:0.98rem;color:var(--paper-soft);line-height:1.5; } .calc-side ol li::before{ content:"0" counter(c); font-family:var(--f-mono);font-weight:700;font-size:0.86rem;color:var(--lime); padding-top:.2em; } .calc-side .warn{ font-size:0.98rem;color:var(--paper-soft);line-height:1.55;margin:0; padding-left:14px;border-left:2px solid var(--lime); } /* ---------- step 03: what you'll need ---------- */ .calc-plan{margin-top:26px;border-top:1px solid var(--line);padding-top:24px} .plan-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .plan-lbl{ font-family:var(--f-mono);font-weight:500;font-size:0.86rem;letter-spacing:.06em; text-transform:uppercase;color:var(--paper-soft); } .plan-total{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.04em; color:var(--lime); } /* the same stepper pill the product pages use */ .calc-plan .qty{ display:flex;align-items:stretch;min-height:44px; border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--ink); } .calc-plan .qty-btn{ width:38px;background:transparent;border:0;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--paper);transition:color .16s,background .16s; } .calc-plan .qty-btn svg{width:16px;height:16px;display:block} .calc-plan .qty-btn:hover{background:rgba(255,255,255,.08);color:var(--lime)} .calc-plan .qty input{ width:44px;text-align:center;background:transparent;border:0;padding:0; font-family:var(--f-mono);font-weight:700;font-size:.95rem;color:var(--paper); -moz-appearance:textfield; } .calc-plan .qty input::-webkit-outer-spin-button, .calc-plan .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .calc-plan .qty input:focus{outline:none} .calc-plan .qty:focus-within{border-color:var(--lime)} /* One pack per row. Two-up worked at the old type size, but at the larger sizes the name, note and price fought for a 320px card — a plan is only ever two or three lines, so full width costs nothing and reads far better. */ .plan-items{display:grid;grid-template-columns:1fr;gap:8px;margin-top:18px} .plan-item{ display:grid;grid-template-columns:64px auto 1fr auto;align-items:center;gap:14px; background:var(--ink);border:1px solid var(--line-2);padding:12px 18px 12px 12px; transition:border-color .15s; } .plan-item:hover{border-color:var(--lime)} .pi-img{ width:64px;height:64px;background:var(--photo);display:grid;place-items:center;overflow:hidden; } .pi-img img{width:100%;height:100%;object-fit:contain;padding:6%} .pi-count{ font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--lime); white-space:nowrap; } .pi-body{display:grid;gap:2px;min-width:0} .pi-name{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.05em; text-transform:uppercase;color:var(--paper); } .pi-sub{font-size:0.98rem;color:var(--paper-faint);line-height:1.35} /* routes + reset inside the planner */ /* The plan's buy footer — the product page's pattern, one column. The lime add-all with its note, then .pdp-world (styled in oko-2.0-product.css, loaded globally) carrying the distributor route and the abroad line. */ .plan-go{margin-top:20px} .plan-go #planAddAll{width:100%;justify-content:center} .plan-go .pdp-world{margin-top:16px;padding-top:16px} /* ---- territory (html.oko2-abroad, set by oko-2.0-geo.js) ---- */ /* Quantities and litres are as useful to a distributor buyer as to a UK one — only the money and the basket leave the page. */ html.oko2-abroad .plan-go #planAddAll, html.oko2-abroad .pi-price, html.oko2-abroad .plan-total-money{display:none} .plan-reset{margin:18px 0 0} .pi-price{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.03em; color:var(--paper);justify-self:end;white-space:nowrap; } /* Narrow rows drop the price onto its own line. This block has to sit AFTER the .plan-item and .pi-price declarations it overrides: a duplicate `.plan-item{grid-template-columns:64px auto 1fr auto}` further down the file was cancelling it at every width, so the title column stayed at 103px on a phone and the price rendered in a zero-width track. */ @media (max-width:520px){ .plan-item{grid-template-columns:56px auto 1fr;row-gap:6px} .pi-price{grid-column:2 / -1;justify-self:start} } /* ---------- input mode toggle + dropdowns ---------- */ .calc-mode{ display:inline-flex;border:1.5px solid var(--line-2);border-radius:999px; overflow:hidden;margin-bottom:14px; } .calc-mode .mode{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.08em; text-transform:uppercase;color:var(--paper-soft);background:transparent;border:0; padding:.55rem 1.1rem;cursor:pointer;transition:color .15s,background .15s; } .calc-mode .mode.is-active{background:var(--lime);color:var(--on-lime)} .calc-mode .mode:focus-visible{outline:3px solid var(--lime);outline-offset:-3px} .calc-select{position:relative;flex:1 1 160px;min-width:0} .calc-select select{ width:100%;appearance:none;-webkit-appearance:none; font-family:var(--f-mono);font-weight:700;font-size:.9rem;letter-spacing:.04em; color:var(--paper);background:var(--ink); border:1.5px solid var(--line-2);border-radius:999px;padding:.95rem 2.6rem .95rem 1.3rem; cursor:pointer; } .calc-select select:focus{outline:none;border-color:var(--lime)} .calc-select select:disabled{opacity:.45;cursor:not-allowed} .calc-select::after{ content:"";position:absolute;right:1.2rem;top:50%; width:8px;height:8px;margin-top:-6px;pointer-events:none; border-right:2px solid var(--paper-soft);border-bottom:2px solid var(--paper-soft); transform:rotate(45deg); } /* each step appears when the previous one is answered */ .calc-block[hidden], .calc-plan[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ .calc-block:not([hidden]) + .calc-block:not([hidden]), .calc-plan:not([hidden]){animation:calcReveal .32s cubic-bezier(.16,1,.3,1) both} } @keyframes calcReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ---------- collapsed step summaries ---------- */ .calc-body[hidden]{display:none} .calc-summary{ /* baseline, not centre: the mark is an inline-flex around a replaced element so its baseline is its own bottom edge, which puts the formula name's baseline exactly on the bottom of the OKO mark. */ display:flex;align-items:baseline;justify-content:space-between;gap:10px; flex-wrap:wrap;margin-top:-4px; } /* A row holding the label miniature centres on it instead: the chip is an object with a box, so its baseline is meaningless next to "Change". */ .calc-summary:has(.cs-label){align-items:center;margin-top:0} .calc-summary[hidden]{display:none} .cs-value{ font-family:var(--f-mono);font-weight:700;font-size:1.05rem;letter-spacing:.04em; color:var(--lime); } .cs-change{ font-family:var(--f-body);font-weight:600;font-size:.98rem; color:var(--paper-soft);background:transparent;border:0;padding:.2rem 0; cursor:pointer;text-decoration:underline;text-underline-offset:4px; transition:color .15s; } .cs-change:hover{color:var(--lime)} .cs-change:focus-visible{outline:3px solid var(--lime);outline-offset:3px} /* a finished step is quieter than the one being answered */ .calc-block.is-done .calc-step{ color:var(--paper-soft);font-size:0.95rem;letter-spacing:.14em;margin-bottom:8px; } .calc-block.is-done .calc-step .n{color:var(--paper-faint)} .calc-block.is-done{padding-top:18px;margin-top:18px} /* ---- the answered formula, as the label it was picked from ---- Step 1 collapses to a miniature of the same label the card wore. It shares the ground, ink, keyline and grain of .calc-prod (see the label surface rule further down) and drops the strapline — at this size the roundel and the name are the whole lock-up. */ .calc-summary{--pc:var(--lime)} .cs-label{ display:inline-flex;align-items:center;gap:9px; padding:7px 13px 7px 11px;margin-right:auto; } .cs-mark{display:inline-flex;align-items:center;color:var(--lime);line-height:0} .cs-label.is-pale .cs-mark{color:var(--pc)} .oko2 .cs-label .lbl-mark svg,.cs-mark svg{height:17px;width:auto;display:block} .cs-mark:empty{display:none} /* Inside the label the name is the label's own ink, not lime — lime on a coloured ground is exactly what the per-card contrast maths avoids. */ /* 18.9px at 700 clears WCAG's large-text threshold, which is the bar the per-card ink was chosen against (3:1). At 16px the same ink would be held to 4.5:1 and Truck & Bus's white-on-red would miss it. */ .calc-summary .cs-label .cs-value{color:inherit;font-size:1.18rem;line-height:1.08} /* Step 2 has no label to wear, so its answer stays the lime line it was. */ .calc-summary .cs-value{color:var(--lime)} /* ---------- the OKO Cap strip in "What you will need" -------------------- */ /* Not a plan-item: it has no price, no link and never reaches the basket — the cap ships inside the bottle. Styled as a note, not a product row, so it cannot be mistaken for something to buy. */ /* Matches .plan-item exactly — it now sits in the list as one of the rows, and the 3px lime left border it used to carry pushed its thumbnail 2px out of line with the ones above. The lime "Included" is what marks it as different. */ .plan-cap{ margin-top:12px;background:var(--ink);border:1px solid var(--line-2); } .plan-cap[hidden]{display:none} /* the same column rhythm as a plan row, so it reads as part of the order */ /* identical column track to .plan-item, so "Included" lands in the price column and the thumbnail and title line up with the rows above */ .plan-cap-head{ display:grid;grid-template-columns:64px auto 1fr auto;align-items:center;gap:14px; padding:12px 18px 12px 12px; } .pi-count--ghost{visibility:hidden} /* the mark is artwork on transparency, so it is fitted rather than cropped and sits on the row's own ground instead of the packshot grey */ .plan-cap-head .pi-img.is-mark{background:none;border:0} .plan-cap-head .pi-img.is-mark img{object-fit:contain;padding:6px} /* "Included" sits where the other rows carry a price */ .pi-included{ font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.08em; text-transform:uppercase;color:var(--lime);white-space:nowrap; } /* On a phone the four tracks left the title column 27px wide and the subtitle wrapped to seven lines. Thumbnail plus one column here, with "Included" sitting under the text rather than fighting it for width. */ @media (max-width:640px){ .plan-cap-head{grid-template-columns:56px 1fr;row-gap:8px} .plan-cap-head .pi-count--ghost{display:none} .plan-cap-head .pi-included{grid-column:2;justify-self:start} } /* a secondary action under the subtitle, not a button competing with the row */ .oko2 .plan-cap-toggle{ align-self:start;justify-self:start;margin-top:6px; display:inline-flex;align-items:center;gap:.4em; font-family:var(--f-mono);font-weight:700;font-size:0.86rem;letter-spacing:.04em; color:var(--paper-faint);background:none;border:0;padding:0;cursor:pointer; transition:color .16s; } .oko2 .plan-cap-toggle svg{width:14px;height:14px;transition:transform .25s ease} .oko2 .plan-cap-toggle:hover{color:var(--lime)} .oko2 .plan-cap-toggle:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px} .oko2 .plan-cap-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .plan-cap-vid{padding:0 20px 20px} .plan-cap-vid[hidden]{display:none} /* The header is sticky on every page now, so anything that scrolls itself to the top of the viewport has to clear it. The step collapse uses block:'center' and is unaffected; the reset uses block:'start' and would have landed the top of the calculator underneath the bar. */ #okoCalc{scroll-margin-top:92px} @media (max-width:980px){ #okoCalc{scroll-margin-top:82px} } /* ---------- value check ------------------------------------------------- */ .plan-value{ margin-top:12px;padding:18px 20px; background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line-2); } .plan-value[hidden]{display:none} .pv-q{ display:block;margin:0 0 12px; font-family:var(--f-mono);font-weight:700;font-size:0.88rem;letter-spacing:.06em; text-transform:uppercase;color:var(--paper-soft); } .pv-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pv-field{position:relative;display:flex;align-items:center;flex:0 0 auto} .pv-cur{ position:absolute;left:1rem;font-family:var(--f-mono);font-weight:700; font-size:1rem;color:var(--paper-faint);pointer-events:none; } .oko2 .pv-field input{ width:150px;font-family:var(--f-mono);font-weight:700;font-size:1rem; color:var(--paper);background:var(--ink); border:1.5px solid var(--line-2);border-radius:999px; padding:.7rem 1rem .7rem 2.1rem; } .oko2 .pv-field input:focus{outline:none;border-color:var(--lime)} .pv-per{margin:0;font-size:0.98rem;color:var(--paper-faint);flex:1 1 200px;min-width:0} .pv-out{margin-top:16px} .pv-out[hidden]{display:none} /* the bar is scaled to the threshold, not to 100% — "well under" should look well under, and the full width IS the limit the rule cares about */ .pv-bar{ height:8px;border-radius:999px;background:var(--ink); border:1px solid var(--line-2);overflow:hidden; } .pv-bar span{display:block;height:100%;background:var(--lime);transition:width .35s cubic-bezier(.16,1,.3,1)} .pv-line{margin:12px 0 0;font-size:1.02rem;line-height:1.55;color:var(--paper-soft)} .pv-line b{color:var(--paper);font-weight:700} .pv-alt{margin:14px 0 0;font-size:1rem;line-height:1.55;color:var(--paper-faint)} .pv-alt[hidden]{display:none} @media (max-width:560px){ .oko2 .pv-field input{width:100%} .pv-field{flex:1 1 100%} } /* ---------- step 03: list beside the value check ------------------------ */ .plan-cols{ display:grid;gap:12px;align-items:start;margin-top:18px; grid-template-columns:minmax(0,1fr) minmax(0,340px); } /* nothing to compare yet — the list takes the full width rather than leaving a hole where the panel would be */ .plan-cols.is-solo{grid-template-columns:1fr} @media (max-width:900px){ .plan-cols{grid-template-columns:1fr} } /* inside the grid the panel is a column, not a stacked block. The list keeps an 18px margin from when it sat under the total row; as a grid child that pushed it 18px below the panel beside it. */ .plan-cols .plan-items{margin-top:0} .plan-cols .plan-value{margin-top:0;height:auto} .plan-cols .pv-row{flex-direction:column;align-items:stretch;gap:10px} .plan-cols .pv-field{flex:1 1 auto} .oko2 .plan-cols .pv-field input{width:100%} .plan-cols .pv-per{flex:1 1 auto} /* ---------- left column: the list and the cap together ------------------ */ .plan-left{display:flex;flex-direction:column;gap:12px;min-width:0} .plan-left .plan-cap{margin-top:0} /* ---------- removable accessory rows ------------------------------------ */ /* The suggestion is a row, not a link: the product link and the remove button are siblings inside it, because a