/* ============================================================================ * Botanica — CONTROL LAYER (round 4, R4-01) * * WHY THIS FILE EXISTS * Three defects across rounds 2 and 3 shared one shape: legacy theme CSS beat a * component that exposes a control to the client, while getComputedStyle happily * reported success. * round 2 — cover overlay span at 0x0: darkening set, painted nothing * round 2 — Parisienne had no @font-face, silently fell back * round 3 — `color:#FBF7EF!important` beat every hero colour swatch * Catching the fourth one is not a plan. This file makes the class impossible. * * HOW IT WORKS * CSS cascade layers invert for `!important`: among author important * declarations, EARLIER layers win, and unlayered important ranks LOWEST. * So an important declaration inside the first-declared layer cannot be beaten * by any unlayered rule in the theme, in GeneratePress or in WooCommerce — * regardless of specificity, source order, or its own `!important`. * * Only the whole theme staying UNLAYERED makes this safe: layering everything * would push theme normal declarations below unlayered plugin CSS. This file is * therefore deliberately narrow — it protects the controllable properties and * nothing else. * * WHAT BELONGS HERE * Only properties a client-facing control writes to. Adding a rule here means * "the owner controls this and the theme may not argue". Everything structural * (position, z-index, overflow, transitions) stays in style.css. * * Proof that it holds lives in the control-effectiveness suite (R4-02): * python3 scratchpad/r4_controls.py * which injects a hostile `!important` rule per property and asserts the control * still wins by PAINTED result. * ========================================================================== */ @layer bc-control; @layer bc-control { /* ---- hero: the text block's position, width and alignment -------------- Controls: drag-to-position, "Teksto pločio riba", "Lygiavimas". */ .botanica .bc-hero.bh .bh__block{ --bh-w-eff:max(var(--bh-maxw,74%),min(240px,100% - 2*var(--pad,20px)))!important; left:calc(var(--bh-w-eff) / 2 + var(--bh-xf,.5) * (100% - var(--bh-w-eff)))!important; top:calc(var(--bh-halfy,25%) + var(--bh-yf,.5) * (100% - 2 * var(--bh-halfy,25%)))!important; width:var(--bh-w-eff)!important; /* max-width must be protected too: a hostile max-width constrains the box even when width itself is protected (found by the R4-02 hostile control). */ max-width:calc(100% - 2*var(--pad,20px))!important; text-align:var(--bh-align,center)!important; align-items:var(--bh-items,center)!important; /* ---- hero: text plate (R9). Control "Teksto fonas". The photo is never touched, so this panel is the only thing standing between cream type and a bright photograph — it has to be un-overridable like the rest. */ background:var(--bh-plate,none)!important; -webkit-backdrop-filter:var(--bh-plate-blur,none)!important; backdrop-filter:var(--bh-plate-blur,none)!important; padding:var(--bh-plate-pad,0)!important; /* R-LOOP3 (HARD GATE #14): the block sizes tightly to its children with zero headroom, so the LAST visible line's descender ink (title, when lead/button are hidden — e.g. About) gets clipped by the overflow: hidden containment backstop in style.css. Fixing that in style.css alone did nothing: this layer's `padding` shorthand above is !important and always wins the bottom side too, regardless of specificity or source order (that IS this file's whole job — see the file header). So the safety margin has to be added HERE, as an !important override of just padding-bottom, using --bh-block-pb (hero-model.php) which is always a single valid scalar length (unlike --bh-plate-pad, which is sometimes a 2-value shorthand and cannot be fed into calc()). This still fully protects the plate's own vertical padding — --bh-block-pb already includes it when a plate is active. */ padding-bottom:var(--bh-block-pb,12px)!important; } /* ---- hero: height. Control "Hero aukštis". ---------------------------- */ .botanica .bc-hero.bh{ height:var(--bh-h,660px)!important; min-height:var(--bh-h,660px)!important; } /* ---- hero: overlay strength + direction. Control "Nuotraukos patamsinimas". This is the property whose 0x0 box started it all. --- */ .botanica .bc-hero.bh > .wp-block-cover__background{ position:absolute!important;inset:0!important;display:block!important; background:var(--bh-overlay)!important; opacity:1!important; } /* ---- hero: photo framing (R10). Controls "Nuotraukos vieta" + "Priartinimas". The whole point is that the constant that used to live in the stylesheet is now hers, so nothing in a stylesheet may take it back. */ .botanica .bc-hero .bc-hero__img{ object-position:var(--bh-img-x,50%) var(--bh-img-y,50%)!important; scale:var(--bh-img-z,1)!important; } /* ---- hero: per-line typography. Controls: šriftas, storis, dydis, tarpai tarp raidžių, eilučių tarpai, spalva, rodyti/slėpti. `color` here is the exact declaration round 3 found being overridden. */ .botanica .bc-hero.bh .bh__eyebrow{ display:var(--bh-eyebrow-d,block)!important; font-family:var(--bh-eyebrow-ff)!important;font-weight:var(--bh-eyebrow-fw)!important; font-style:var(--bh-eyebrow-fi)!important; font-size:min(var(--bh-eyebrow-fs),calc(var(--bh-h,660px) * .05),max(3.6vw,0px))!important; letter-spacing:var(--bh-eyebrow-ls)!important;line-height:var(--bh-eyebrow-lh)!important; color:var(--bh-eyebrow-c)!important; } .botanica .bc-hero.bh .bh__script{ display:var(--bh-script-d,block)!important; font-family:var(--bh-script-ff)!important;font-weight:var(--bh-script-fw)!important; font-style:var(--bh-script-fi)!important; font-size:min(var(--bh-script-fs),calc(var(--bh-h,660px) * .16),max(11vw,0px))!important; letter-spacing:var(--bh-script-ls)!important;line-height:var(--bh-script-lh)!important; color:var(--bh-script-c)!important; } .botanica .bc-hero.bh .bh__title{ display:var(--bh-title-d,block)!important; font-family:var(--bh-title-ff)!important;font-weight:var(--bh-title-fw)!important; font-style:var(--bh-title-fi)!important; font-size:min(var(--bh-title-fs),calc(var(--bh-h,660px) * .22),max(13vw,0px))!important; letter-spacing:var(--bh-title-ls)!important;line-height:var(--bh-title-lh)!important; color:var(--bh-title-c)!important; } .botanica .bc-hero.bh .bh__lead{ display:var(--bh-lead-d,block)!important; font-family:var(--bh-lead-ff)!important;font-weight:var(--bh-lead-fw)!important; font-style:var(--bh-lead-fi)!important; font-size:min(var(--bh-lead-fs),calc(var(--bh-h,660px) * .055),max(4.6vw,0px))!important; letter-spacing:var(--bh-lead-ls)!important;line-height:var(--bh-lead-lh)!important; color:var(--bh-lead-c)!important; } .botanica .bc-hero.bh .bh__button{display:var(--bh-button-d,block)!important;} .botanica .bc-hero.bh .bh__button .wp-block-button__link{ font-family:var(--bh-button-ff)!important;font-weight:var(--bh-button-fw)!important; font-size:min(var(--bh-button-fs),calc(var(--bh-h,660px) * .04),max(3.6vw,0px))!important; letter-spacing:var(--bh-button-ls)!important; } /* ---- section background tone + show/hide (SE-02). --------------------- */ .botanica .is-style-tone-light{background:#FFFFFF!important;} .botanica .is-style-tone-cream{background:var(--surface,#F4EFE4)!important;} .botanica .is-style-tone-dark{background:var(--ink,#2A2723)!important;} .botanica .is-style-tone-dark, .botanica .is-style-tone-dark h1,.botanica .is-style-tone-dark h2, .botanica .is-style-tone-dark h3,.botanica .is-style-tone-dark h4, .botanica .is-style-tone-dark p,.botanica .is-style-tone-dark li, .botanica .is-style-tone-dark .bc-eyebrow,.botanica .is-style-tone-dark .bc-meta{ color:#FBF7EF!important; } /* ---- trust-icon sizing (SE-03). The normaliser guarantees the artwork; this guarantees the box it is drawn into. --------------------------- */ .botanica .bc-iconstrip img{ height:calc(var(--bi) * var(--benefit-scale,1))!important; width:calc(var(--bi) * var(--benefit-scale,1))!important; object-fit:contain!important; } /* ---- skilčių tekstas: dydis, spalva, šriftas (2026-08-30) -------------- Controls: „Skilčių antraštės / tekstas — dydis, šriftas, spalva". DYDIS — KONKRETUS, NE DAUGIKLIS. Pirmas bandymas buvo `font-size: calc(1em * var(--scale,1))`, ir jis sugriovė viską: `1em` skaičiuojamas nuo TĖVO, ne nuo paties elemento, tad 40px antraštė virto 16px. Išmatuota iš karto ir perdaryta. Dabar kiekvienas įvardytas dydis turi savo clamp(), atkartojantį temos ritmą, o „Kaip yra" nerašo nieko — tad kol ji nieko nepasirinko, čia negalioja jokia taisyklė. Hero ir nuotaikos juostos neliečiamos: jos turi savo valdiklius, o dvi durys į vieną reikšmę yra tai, ko šis projektas jau atsikratė. Kaina, mygtukai ir prekių pavadinimai irgi ne — jie ne dekoracija, o veiksmas. */ .botanica .bc-section h2, .botanica .bc-cardgrid__head, .botanica .bc-card h3{ font-family:var(--bs-h-ff,var(--serif))!important; color:var(--bs-h-c,var(--ink))!important; } /* `.bc-quote-narrow` TAIP PAT yra `.bc-section`, tad si taisykle pagaudavo ir „Apie netobula grozi" citata — o kadangi ji sluoksnyje, jos !important nugalejo temos `.bc-quote-narrow p{font-family:var(--script)!important}`. Rezultatas: dekoratyvinis Waterfall tyliai virsdavo Jost. Savininke tai pastebejo („kazkodel pasikeite sriftas"), ir ji buvo teisi. Citata turi savo valdiklius (zr. inc/about-content.php), tad cia ji paprasciausiai isbraukiama. */ .botanica .bc-section p:not(.bc-soft-quote), .botanica .bc-card p, .botanica .bc-rule-list .bc-rule-row span:last-child{ font-family:var(--bs-b-ff,var(--sans))!important; color:var(--bs-b-c,var(--meta))!important; } /* Dydžiai. Numatyto („m") nėra sąmoningai — nieko neperrašom be reikalo. */ body[data-bs-h="s"] .bc-section h2, body[data-bs-h="s"] .bc-cardgrid__head{font-size:clamp(23px,3vw,35px)!important;} body[data-bs-h="s"] .bc-card h3{font-size:clamp(15px,1.25vw,18px)!important;} body[data-bs-h="l"] .bc-section h2, body[data-bs-h="l"] .bc-cardgrid__head{font-size:clamp(29px,3.8vw,45px)!important;} body[data-bs-h="l"] .bc-card h3{font-size:clamp(19px,1.6vw,23px)!important;} body[data-bs-b="s"] .bc-section p, body[data-bs-b="s"] .bc-card p, body[data-bs-b="s"] .bc-rule-list .bc-rule-row span:last-child{font-size:14px!important;} body[data-bs-b="l"] .bc-section p, body[data-bs-b="l"] .bc-card p, body[data-bs-b="l"] .bc-rule-list .bc-rule-row span:last-child{font-size:17px!important;} /* ---- mood band: where the caption sits on the photograph (P24) --------- Controls: „Užrašo vieta iš kairės / iš viršaus", „Užrašo dydis", „Teksto lygiavimas", ir atskiros tų pačių dalykų reikšmės telefonui. The words are placed inside a box that is the band INSET BY --pad, not the band itself. That is what makes 0 % and 100 % usable ends of the slider rather than a caption glued to the cut edge — the gutter is built into the coordinate system instead of being clamped back in afterwards. Two things measured wrong before this shape, and both are why the rules below look heavier than „set left and top": 1. An absolutely positioned box shrinks to fit the space left of the containing block's edge. At x = 100 % that space is a few pixels, so „Labai didelis" produced a 334px column of stacked words — the control appeared to do the opposite of its name. Hence an explicit width. 2. .bc-mood__inner is height:100% of a band that is height:auto on the phone. With the plate out of flow the inner collapsed to its own padding, percentages resolved against 96px, and y = 100 % put the caption 102px ABOVE the photograph. Hence inset, not height. */ .botanica .bc-mood--placed .bc-mood__inner{ position:absolute!important; inset:var(--pad,20px)!important; max-width:none!important; margin:0!important; padding:0!important; height:auto!important; } .botanica .bc-mood--placed .bc-mood__plate{ position:absolute!important; margin:0!important; left:var(--bm-x,0%)!important; top:var(--bm-y,50%)!important; transform:translate(calc(-1 * var(--bm-x,0%)), calc(-1 * var(--bm-y,50%)))!important; /* --bm-plate-w is `fit-content` and appears ONLY when she has set „Užrašo plotis". Then the plate wraps the heading and her ch value — resolved against the heading's own font — is what decides the width. Unset, this is the named size exactly as before. */ width:var(--bm-plate-w,var(--bm-w,min(560px,100%)))!important; } /* Width and type size apply whether or not she has moved the caption: a product may want bigger words in the place they already are. */ .botanica .bc-mood__plate{ max-width:var(--bm-plate-max,var(--bm-w,min(560px,100%)))!important; text-align:var(--bm-align,left)!important; /* P#7 — „ar galima nusiimti tą baltą foną po tekstu": taip, ir ne tik nusiimti. Ta pati plokštelė ir tie patys keturi pasirinkimai kaip hero, piešiami tuo pačiu botanica_hero_plate_css(), tad tai, ką ji išmoko ant pradžios nuotraukos, galioja ir čia. Numatyta reikšmė — dabartinis vaizdas, tad nieko nepasikeičia, kol ji pati nepasirenka. */ background:var(--bm-plate,rgba(251,247,239,.70))!important; padding:var(--bm-plate-pad,clamp(20px,2.6vw,30px) clamp(22px,3.4vw,40px))!important; -webkit-backdrop-filter:var(--bm-plate-blur,none)!important; backdrop-filter:var(--bm-plate-blur,none)!important; } .botanica .bc-mood__inner h2{ font-size:var(--bm-fs,44px)!important; /* The 18ch cap in style.css and the width cap fought each other the moment „Labai didelis" was chosen: the plate grew and the heading did not. The plate is the one carrying her choice, so the cap was removed outright. 2026-09-03: it is now HER cap, and the default is still `none` — an untouched band renders exactly as it did, and style.css's 18ch stays as dead as it has been since that line was written. It has to be set here rather than in style.css: this declaration is `!important` inside a layer, and for !important the cascade puts layers ABOVE unlayered CSS. A `max-width` written in style.css loses to this line and measures as a no-op — which is what the first cut of this control did. */ max-width:var(--bm-width,none)!important; } /* 520px, because that is the width at which the theme's own mood rules change (style.css: height, inner padding, 30px heading). A different breakpoint here would leave a band between the two that is half phone and half desktop. */ @media (max-width:520px){ /* Her phone numbers, or the placement the band has always had — never the desktop percentages. 70 % across a 1280px band is beside the candle; the same 70 % on a 390px phone is on top of it. */ .botanica .bc-mood--placed:not(.bc-mood--placed-m) .bc-mood__inner{ position:relative!important; inset:auto!important; max-width:var(--maxw,1280px)!important; margin:0 auto!important; padding:48px var(--pad,20px)!important; height:100%!important; } .botanica .bc-mood--placed:not(.bc-mood--placed-m) .bc-mood__plate{ position:static!important; transform:none!important; width:auto!important; } .botanica .bc-mood--placed-m .bc-mood__inner{ position:absolute!important; inset:var(--pad,20px)!important; max-width:none!important; margin:0!important; padding:0!important; height:auto!important; } .botanica .bc-mood--placed-m .bc-mood__plate{ position:absolute!important; margin:0!important; left:var(--bm-x-m,0%)!important; top:var(--bm-y-m,50%)!important; transform:translate(calc(-1 * var(--bm-x-m,0%)), calc(-1 * var(--bm-y-m,50%)))!important; width:var(--bm-plate-w,var(--bm-w-m,var(--bm-w,min(560px,100%))))!important; } .botanica .bc-mood__plate{ max-width:var(--bm-plate-max,var(--bm-w-m,var(--bm-w,min(560px,100%))))!important; } /* Her phone width, else the desktop one, else uncapped — the same sparse inheritance as every other phone answer in this panel. */ .botanica .bc-mood__inner h2{ font-size:var(--bm-fs-m,var(--bm-fs,30px))!important; max-width:var(--bm-width-m,var(--bm-width,none))!important; } } } /* ============================================================================ NUOTAIKOS BLOKAS — kadravimas, užrašo spalva, patamsinimas (2026-09-03) ============================================================================ Three controls the band never had. Measured before they existed: the photo lost 13.89 % off the top and the same off the bottom at every desktop width, and 19.6 % off EACH SIDE at 390px, always from the centre, with nothing on the site able to move it. The heading was painted dark olive by style.css's own `.bc-mood__inner h2{color:var(--ink)}` and had no colour field at all. Everything below is scoped to a class the renderer adds ONLY when she has set a value. No class, no rule — so an untouched band is byte-identical. These sit in @layer bc-control on purpose. The theme is unlayered, so a layered rule beats it at any specificity WITHOUT `!important`. That is the whole reason this layer exists: round 1 shipped `color:#FBF7EF!important` which silently beat every hero colour swatch, and an unlayered override here would read as correct and do nothing (STANDING-LAWS 2 and 19). ---------------------------------------------------------------------------- */ @layer bc-control { /* --- the photograph ------------------------------------------------------ Only `object-position`. Not `object-fit`, not a size, not a transform: the band's own cover behaviour is what she is aiming, not replacing. */ .botanica .bc-mood--focus img{ object-position:var(--bm-img-x,50%) var(--bm-img-y,50%); } /* --- the words and the darkening behind them ----------------------------- NOT here, and this note is the reason. Both were first written in this layer as ordinary declarations and both measured as a no-op: the heading stayed rgb(42,39,35) and the overlay stayed `none`, with the classes and the custom properties correctly on the element. For NORMAL declarations the cascade puts UNLAYERED styles ABOVE every layer, so style.css's own `.bc-mood__inner h2{color:var(--ink)}` and `.bc-mood__overlay{background:none}` beat anything written here. A layer only outranks unlayered CSS for !important declarations — which is exactly why every other rule in this file carries one. Rather than add `!important`, style.css now CONSUMES the two variables with its existing values as the fallbacks: color:var(--bm-color,var(--ink)) background:var(--bm-scrim,none) Unset renders identically, her value wins, and no specificity fight exists to lose. See style.css, section 8. */ /* Her phone numbers, never the desktop ones. 520px is the width at which the theme's own mood rules change, so a different breakpoint here would leave a band that is half phone and half desktop — the same reasoning, and the same number, as the caption rules above. */ @media (max-width:520px){ .botanica .bc-mood--focus-m img{ object-position:var(--bm-img-x-m,var(--bm-img-x,50%)) var(--bm-img-y-m,var(--bm-img-y,50%)); } } }