/* ============================================================================ BINERET STUDIO — PRICING PAGE ---------------------------------------------------------------------------- Loads on /packages/ only, printed by hand at wp_head priority 102 (see inc/packages.php). It is printed rather than enqueued for the reason set out in inc/brand.php: part of this theme's CSS lives in the database and is echoed at priority 100, so an enqueued sheet loses every specificity tie to it. 102 puts this last in , after the brand layer at 101. It follows the same contract as the home page rebuild (assets/css/home.css): · a card is sized by its content — no height, no min-height, no fixed row; · radius 14 on a card, 22 on a panel, pill on an action; · space on the 4 · 8 · 12 · 16 · 24 · 32 · 48 scale; · one action height (44px here, because these are the page's main verbs); · body copy capped at 62 characters, card copy at 42; · tokens only — no literal colours, so both colour modes are covered by the same declaration. The raised-surface recipe for `.pkg` itself is NOT here. It lives in bineret-brand.css §6 alongside `.bento__link` and `.b-card`, so the studio's cards and the marketplace's cards are the same object rendered by the same three layers. One recipe, two pages. ========================================================================== */ /* The topbar is sticky and 60px tall inside a floating shell, so an in-page jump lands with the heading it aimed at already scrolled under the chrome. `scroll-margin` is the fix for exactly this, and it has to sit on every id the jump nav and the deep links can target — the three service groups, the nine tiers, and the four standalone sections. */ .pkg-group, .pkg, #addons, #what-changes, #how, #terms, #talk{ scroll-margin-block-start:96px; } /* — the jump nav under the page title — */ .pkg-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:24px; } .pkg-jump__link{ display:inline-flex; align-items:center; gap:8px; min-block-size:40px; padding-inline:16px; border-radius:var(--lav-r-pill,999px); border:1px solid var(--lav-line); background:var(--surf-1); color:var(--lav-text-secondary); text-decoration:none; font-size:var(--lav-text-sm,0.9rem); font-weight:500; white-space:nowrap; transition:color .2s var(--lav-ease,ease), border-color .2s var(--lav-ease,ease); } .pkg-jump__link:hover,.pkg-jump__link.is-active{ color:var(--lav-text-primary); border-color:var(--lav-line-strong); } /* 🔴 These two glyphs take the CTA blue, not the faint `--surf-glyph-strong` watermark tint the marketplace tiles use. The tint is a decoration painted on a gradient, where nothing is asked of it; here the same value sits as a character on a flat card fill and measures 1.48:1, which the audit flags and is right to flag — aria-hidden or not, a visible glyph that cannot be seen is not a decoration, it is a defect. `--lav-cta` is 8.10:1 in light and 6.73:1 in dark against what it sits on. */ .pkg-jump__glyph{ font-size:16px; line-height:1; color:var(--lav-cta); } .pkg-note{ margin:16px 0 0; max-inline-size:62ch; color:var(--lav-text-tertiary); font-size:var(--lav-text-sm,0.9rem); line-height:1.55; } /* — one service group — */ .pkg-group__head{ display:flex; align-items:flex-start; gap:16px; margin-block-end:24px; } .pkg-group__glyph{ flex:0 0 auto; display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); font-size:22px; line-height:1; color:var(--lav-cta); } .pkg-group__text{ min-inline-size:0; } .pkg-group__title{ margin:0; font-family:var(--lav-font-display); font-weight:700; font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem); line-height:1.12; letter-spacing:var(--lav-track-tight); } .pkg-group__summary{ margin:6px 0 0; color:var(--lav-text-secondary); font-size:var(--lav-text-md,1.05rem); line-height:1.45; max-inline-size:62ch; } .pkg-group__lede{ margin:12px 0 0; color:var(--lav-text-tertiary); font-size:var(--lav-text-sm,0.9rem); line-height:1.6; max-inline-size:62ch; } /* — the three tiers — `align-items:stretch` on the grid plus `margin-block-start:auto` on the CTA is what keeps three cards of different lengths ending on the same line WITHOUT any of them declaring a height. That distinction is the whole point: the cards are equal because the grid makes them equal, not because a number was written down. */ .pkg-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; } .pkg{ position:relative; display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); } /* The recommended tier is marked with a rim and a badge, and nothing else. It is NOT scaled up or lifted out of the row: a decoy that shouts is the exact pattern the audience this page is written for recognises and discounts. The badge straddles the top border rather than sitting inside the card, because a label inside the card is an extra line that only one of the three has — which pushes that card's name, price and checklist down and destroys the row alignment the comparison depends on. The rim colour itself lives in bineret-brand.css; see the note there. */ .pkg__flag{ position:absolute; inset-block-start:0; inset-inline-start:24px; transform:translateY(-50%); margin:0; padding:4px 10px; border-radius:var(--lav-r-pill,999px); background:var(--lav-cta); color:var(--lav-cta-ink); font-size:var(--lav-text-xs,0.72rem); font-weight:700; line-height:1.4; text-transform:uppercase; letter-spacing:var(--lav-track-wide); } .pkg__name{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:1.15rem; line-height:1.2; color:var(--lav-text-primary); } .pkg__figure{ margin:4px 0 0; } .pkg__amount{ font-family:var(--lav-font-display); font-weight:700; font-size:clamp(1.6rem,1.35rem + 1vw,2.1rem); line-height:1.05; letter-spacing:var(--lav-track-tight); color:var(--lav-text-primary); } .pkg__fit{ margin:8px 0 0; color:var(--lav-text-secondary); font-size:var(--lav-text-sm,0.9rem); line-height:1.55; max-inline-size:42ch; } /* Label above value, always — even where the value would have fitted beside it. One tier's timeline is "2 weeks" and another's is "Rolling, three-month minimum"; side by side, one wraps and one does not, and the three checklists below them start on three different lines. Stacking costs one line on every card and buys the row back. */ .pkg__timeline{ display:flex; flex-direction:column; gap:2px; margin:12px 0 0; padding-block:12px; border-block:1px solid var(--lav-line); font-size:var(--lav-text-sm,0.9rem); color:var(--lav-text-secondary); } .pkg__timeline-k{ color:var(--lav-text-tertiary); text-transform:uppercase; letter-spacing:var(--lav-track-wide); font-size:var(--lav-text-xs,0.78rem); } .pkg__list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .pkg__list li{ display:flex; align-items:flex-start; gap:8px; font-size:var(--lav-text-sm,0.9rem); line-height:1.5; color:var(--lav-text-secondary); } .pkg__tick{ inline-size:16px; block-size:16px; flex:0 0 auto; margin-block-start:3px; color:var(--lav-cta); } .pkg__cta{ margin-block-start:auto; padding-block-start:16px; align-self:stretch; justify-content:center; } /* — add-ons: a price list, not nine more cards — */ .pkg-addons{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--lav-line); } .pkg-addon{ display:flex; align-items:baseline; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding-block:16px; border-block-end:1px solid var(--lav-line); } .pkg-addon__text{ flex:1 1 24rem; min-inline-size:0; } .pkg-addon__name{ margin:0; font-size:1.05rem; font-weight:600; line-height:1.3; color:var(--lav-text-primary); } .pkg-addon__note{ margin:4px 0 0; color:var(--lav-text-tertiary); font-size:var(--lav-text-sm,0.9rem); line-height:1.55; max-inline-size:62ch; } .pkg-addon__price{ margin:0; flex:0 0 auto; white-space:nowrap; font-family:var(--lav-font-display); font-weight:700; font-size:1.25rem; color:var(--lav-text-primary); } /* — what changes the number — */ .pkg-factors{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:pkg-factor; } .pkg-factor{ padding:24px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); } .pkg-factor__t{ margin:0; font-size:1.02rem; font-weight:600; line-height:1.3; color:var(--lav-text-primary); } .pkg-factor__t::before{ counter-increment:pkg-factor; content:counter(pkg-factor) ". "; color:var(--lav-text-tertiary); font-variant-numeric:tabular-nums; } .pkg-factor__d{ margin:8px 0 0; color:var(--lav-text-tertiary); font-size:var(--lav-text-sm,0.9rem); line-height:1.6; } /* — the closing band's secondary way out — */ .pkg-alt{ margin:16px 0 0; color:var(--lav-text-tertiary); font-size:var(--lav-text-sm,0.9rem); line-height:1.6; } .pkg-alt a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } /* ============================================================================ RESPONSIVE — the same ladder as the home page: 940 · 767 · 560. ============================================================================ */ @media (max-width:940px){ .pkg-grid,.pkg-factors{ grid-template-columns:repeat(2,1fr); } /* Two columns leave the third tier alone on its own row, and the tier that is alone should be the one nobody is being steered to — so the recommended card keeps its place and the last one drops. That is the natural source order, which is why nothing has to be reordered here. */ } @media (max-width:767.98px){ .pkg-grid,.pkg-factors{ grid-template-columns:1fr; } /* In one column the "where most people start" badge, which straddles its card's top border, lands in the 16px gap and touches the card above it. A wider row gap is the whole fix. */ .pkg-grid{ row-gap:32px; } .pkg{ padding:16px; } .pkg-group__glyph{ inline-size:38px; block-size:38px; font-size:19px; } } @media (max-width:560px){ .pkg-addon{ align-items:flex-start; } .pkg-addon__price{ order:-1; } } @media (prefers-reduced-motion:reduce){ .pkg-jump__link{ transition:none; } } /* ============================================================================ SERVICES — the landing grid and the single-service page ---------------------------------------------------------------------------- Same contract as everything else: a card is sized by its content, radius 14, space on the 4/8/12/16/24/32/48 scale, one action height. The raised surface for `.svc-card` is the shared glass recipe in bineret-brand.css §6, so a service card and a marketplace tile are the same object. ============================================================================ */ .svc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; } .svc-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:14px; border:1px solid var(--lav-line); transition:transform var(--lav-dur-base,.26s) var(--lav-ease,ease), border-color var(--lav-dur-base,.26s) var(--lav-ease,ease); } .svc-card:hover{ transform:translateY(-2px); } .svc-card__glyph{ font-family:var(--lav-font-display); font-size:22px; line-height:1; color:var(--lav-cta); margin-block-end:2px; } .svc-card__title{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:1.05rem; line-height:1.25; } .svc-card__title a{ color:var(--lav-text-primary); text-decoration:none; } /* One stretched link per card: the whole card is the target, so the 24px floor is met by the card rather than by the title. */ .svc-card__title a::after{ content:""; position:absolute; inset:0; border-radius:14px; } .svc-card__desc{ margin:0; color:var(--lav-text-tertiary); font-size:0.875rem; line-height:1.5; max-inline-size:42ch; } .svc-card__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:auto 0 0; padding-block-start:12px; } .svc-card__price{ font-weight:700; font-size:0.95rem; color:var(--lav-text-primary); } .svc-card__more{ margin-inline-start:auto; font-size:var(--lav-text-xs,0.78rem); color:var(--lav-text-tertiary); white-space:nowrap; } .svc-card:hover .svc-card__more{ color:var(--lav-cta); } /* — single service — */ .svc-crumb{ display:flex; align-items:center; gap:8px; margin-block-end:16px; font-size:var(--lav-text-sm,0.9rem); color:var(--lav-text-tertiary); } .svc-crumb a{ color:inherit; text-decoration:none; min-block-size:24px; display:inline-flex; align-items:center; } .svc-crumb a:hover{ color:var(--lav-text-primary); } .svc-hero{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:32px; align-items:start; } .svc-hero__glyph{ display:block; font-family:var(--lav-font-display); font-size:34px; line-height:1; color:var(--lav-cta); margin-block-end:12px; } .svc-hero__summary{ margin:12px 0 0; max-inline-size:62ch; color:var(--lav-text-secondary); font-size:var(--lav-text-md,1.05rem); line-height:1.5; } .svc-fit{ display:flex; flex-direction:column; gap:4px; margin:24px 0 0; padding-inline-start:16px; border-inline-start:2px solid var(--lav-cta); max-inline-size:62ch; color:var(--lav-text-secondary); font-size:var(--lav-text-sm,0.9rem); line-height:1.55; } .svc-fit__k{ color:var(--lav-text-tertiary); text-transform:uppercase; letter-spacing:var(--lav-track-wide); font-size:var(--lav-text-xs,0.78rem); } .svc-facts{ display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:14px; border:1px solid var(--lav-line); background-color:var(--glass-fill); background-image:var(--glass-sheen); box-shadow:var(--glass-rim), var(--glass-cast); } .svc-facts__row{ display:flex; flex-direction:column; gap:2px; margin:0; } .svc-facts__k{ color:var(--lav-text-tertiary); text-transform:uppercase; letter-spacing:var(--lav-track-wide); font-size:var(--lav-text-xs,0.78rem); } .svc-facts__v{ color:var(--lav-text-primary); font-size:var(--lav-text-sm,0.95rem); } .svc-facts__v--big{ font-family:var(--lav-font-display); font-weight:700; font-size:1.7rem; line-height:1.1; letter-spacing:var(--lav-track-tight); } .svc-facts__cta{ margin-block-start:4px; justify-content:center; } .svc-facts__note{ margin:0; color:var(--lav-text-tertiary); font-size:var(--lav-text-xs,0.78rem); line-height:1.5; } .svc-facts__note a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } .svc-prose{ max-inline-size:62ch; color:var(--lav-text-secondary); font-size:var(--lav-text-md,1.02rem); line-height:1.7; } .svc-prose p{ margin:0 0 16px; } /* Scope, in two columns. The "not included" column is the one people skip, so it is not visually demoted — same card, same weight, one different tick. */ .svc-scope{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; } .svc-scope__col{ gap:12px; } .svc-x{ color:var(--lav-text-tertiary); } .svc-rel{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .svc-rel__text{ flex:1 1 26rem; min-inline-size:0; } .svc-rel__flag{ position:static; transform:none; display:inline-block; margin:0 0 8px; } .svc-rel__buy{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; } @media (max-width:940px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } .svc-hero{ grid-template-columns:1fr; gap:24px; } } @media (max-width:767.98px){ .svc-grid,.svc-scope{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .svc-card{ transition:none; } .svc-card:hover{ transform:none; } } /* `.pkg` sets `flex-direction:column`, and `.svc-rel` reuses `.pkg` for its surface. Without resetting the direction, `align-items:center` centred the whole text block instead of aligning two columns — the badge ended up in the middle of the card. Stating the direction is the fix. */ .svc-rel{ flex-direction:row; } /* Both services templates run several `lav-sec--tight` blocks back to back, and two adjacent ones put ~190px of nothing between a heading and the thing it introduces. One value, applied on the two body classes. */ .single-bnrt_service .lav-sec--tight, .post-type-archive-bnrt_service .lav-sec--tight{ padding-block:clamp(20px, 2.6vw, 36px); } .single-bnrt_service .lav-sec, .post-type-archive-bnrt_service .lav-sec{ padding-block:clamp(28px, 3.6vw, 52px); } .single-bnrt_service .lav-head, .post-type-archive-bnrt_service .lav-head{ margin-block-end:var(--lav-space-6, 24px); }