/* ===================================================================== bnd-r2 — variants.css --------------------------------------------------------------------- Component variants + universal tweaks added by designer-pack-008 (AAP render fixes + owner review round 2), applications of bnd-render-laws.md. The baseline theme/common/media.css stay VERBATIM; all new-variant styling lives here only. Load order: theme -> common -> media -> variants. ===================================================================== */ /* ---- UNIVERSAL: tighten the gaps between sections (owner: round 2) ---- Baseline .sec is 26px (32px mobile); halve it estate-wide. A few extra px at the TOP of each section for breathing room (owner: round 4). */ .sec{padding:18px 0 14px} .cta{margin:16px auto} @media (max-width:767px){ .sec{padding:20px 0 16px} } /* ---- Law 3 + Law 1: inline CTAs centered, never a grey box ---- */ .cta--bar{background:transparent;text-align:center;padding:0} .cta--bar .cta__bar-main{justify-content:center} .cta--bar .cta__tag{flex:0 1 auto} .cta--bar .cta__points{justify-content:center} /* A CTA contained inside a DARK beat-section reads light-on-dark (owner round 3). */ .sec--dark .cta__tag{color:#fff} .sec--dark .cta__points{color:rgba(255,255,255,.78)} .sec--dark .cta__points li:not(:first-child)::before{background:rgba(255,255,255,.35)} .sec--dark .cta__note{color:rgba(255,255,255,.72)} /* (The side "portrait" testimonial variant was retired per owner round 2 — testimonials use the standard avatar card; lead-ins are regular paragraphs.) */ /* ---- Law 2 alt: MWJ "review" testimonial variant ---- Ported verbatim from mensworldjournal.com/quiz/quiz.css (.testimonial-card/.tc-*): circular gradient avatar, name + green VERIFIED, gold stars, quote. A page picks ONE testimonial style and keeps it. */ .tm-reviews{margin:18px 0;clear:both} .testimonial-card{background:#fff;border:1px solid #e5ecf2;border-radius:14px;padding:18px 18px 16px;box-shadow:0 1px 3px rgba(15,30,50,.04);margin:14px 0} .tc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .tc-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;user-select:none;overflow:hidden} .tc-avatar .imgph,.tc-avatar img{width:100%;height:100%;aspect-ratio:1/1;border-radius:50%;margin:0} .tc-avatar--blue{background:linear-gradient(135deg,#3a6ea8,#284f7c)} .tc-avatar--amber{background:linear-gradient(135deg,#d68a3a,#a05f1f)} .tc-avatar--green{background:linear-gradient(135deg,#4a9670,#2c6b4d)} .tc-avatar--plum{background:linear-gradient(135deg,#8a5a8c,#5e3d62)} .tc-avatar--teal{background:linear-gradient(135deg,#3aa39a,#1f7a72)} .tc-avatar--rust{background:linear-gradient(135deg,#c45a3a,#8a3a22)} .tc-meta{flex:1;min-width:0} .tc-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px} .tc-name{font-weight:700;font-size:15px;color:#1a2a3a} .tc-verified{display:inline-flex;align-items:center;gap:3px} .tc-verified-check{color:#1a8c5e;font-size:13px;font-weight:700} .tc-verified-label{font-size:10px;font-weight:800;letter-spacing:.8px;color:#1a8c5e;text-transform:uppercase} .tc-subline{font-size:12.5px;color:#6b7a8d;line-height:1.3} .tc-stars{display:inline-flex;gap:2px;margin-bottom:10px;font-size:14px} .tc-star{color:#d8dde3;line-height:1} .tc-star--on{color:#f5a623} .tc-quote{margin:0;font-size:14.5px;line-height:1.55;color:#1a2a3a;font-style:normal} .tc-quote-mark{color:#1a8c5e;font-weight:700;font-size:18px;margin-right:4px;line-height:0;vertical-align:-2px} /* ---- Law 4: option / comparison trees -> horizontal, stacked (not columns) ---- */ .optioncards--hstack{display:block} .optioncards--hstack .optioncard{border-top:none;border-left:6px solid #c8ccd3;margin:14px 0} .optioncards--hstack .optioncard--red{border-left-color:var(--red)} .optioncards--hstack .optioncard--green{border-left-color:var(--green)} .optioncards--hstack .optioncard--neutral{border-left-color:#c8ccd3} /* ---- Law 5: scarcity as a pull-out SECTION, not a red button ---- */ .scarcity--pullout{display:block;text-align:left;clear:both; background:#fdecea;color:var(--ink); border:1px solid #f1c6c0;border-left:5px solid var(--red); border-radius:10px;padding:18px 22px;margin:16px 0;font-weight:400;box-shadow:none} .scarcity--pullout .scarcity__lead{display:block;text-transform:uppercase;letter-spacing:.06em; font-family:var(--font-cta);font-weight:800;font-size:12px;color:var(--red);margin:0 0 6px} .scarcity--pullout .scarcity__msg{font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.35;color:var(--ink)} /* ---- Law 6: horizontal bullets — single centered flex-wrap row (owner round 2) ---- On desktop they sit on ONE line where they fit (e.g. 4 across); on narrow screens each takes ~half width so they wrap 2-up (4 -> 2+2, no 3+1 orphan). */ .hbullets{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin:18px 0 0;padding:0;list-style:none} .hbullets li{position:relative;display:flex;align-items:center;gap:8px; font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);white-space:nowrap} .hbullets li::before{content:"\2713";color:var(--green);font-weight:800;font-size:17px} .sec--dark .hbullets li{color:#fff} .heroletter .hbullets{margin-top:16px} @media (max-width:560px){ .hbullets li{flex:0 1 calc(50% - 18px);justify-content:center} } /* ===================================================================== pack-009 — page-wide IMAGE-TREATMENT overlay (Law 7) One treatment is chosen for the whole page via the body class `image-style--`; EVERY content image (.bnd-img — the real and the .imgph placeholder both carry it) inherits it. No per-piece image styling. Component-intrinsic shapes (avatars, feature icons, seal) are RE-ASSERTED so the page treatment never squares them. ===================================================================== */ /* A — rounded-bordered (default): no overrides; the base bnd look applies. */ /* B — photo: the fsbo "polaroid" — a white matte frame (drawn with layered box-shadows so it survives both real and the .imgph placeholder, no wrapper needed), a slight tilt that alternates by float side, the orange bottom edge, a soft drop shadow, on warm paper so the white matte reads. (The salmon tape strip + handwritten caption are per-image bits that need a caption slot — out of scope for a page-wide treatment.) */ body.image-style--photo{ background:var(--cream); } /* palette-scoped warm paper */ .image-style--photo .bnd-img{ border-radius:2px; border:0; border-bottom:5px solid var(--frame); box-shadow: 0 6px 0 11px var(--page), 0 8px 0 12px rgba(22,35,61,.12), 0 24px 46px 6px rgba(22,35,61,.20); transform:rotate(-1.3deg); } .image-style--photo .bnd-img.float-right{ transform:rotate(1.4deg); } .image-style--photo .bnd-img.float-left{ transform:rotate(-1.4deg); } /* clearance so the polaroid matte + drop shadow never crowd the next beat */ .image-style--photo .photo-frame{ margin-top:24px; margin-bottom:34px; } .image-style--photo .bnd-img.float-left, .image-style--photo .bnd-img.float-right{ margin-top:12px; margin-bottom:30px; } /* C — abstract: the image over a SHAPE that VARIES down the page — circle, triangle, diagonal box — peeking from behind. Drawn on the .imgph placeholder's ::before, cycled by section position (palette colours). Real falls back to offset palette rectangles (varied shapes on real photos need the frame wrapper). */ .image-style--abstract .bnd-img{ border-radius:14px; border:0; } .image-style--abstract .imgph.bnd-img{ overflow:visible; box-shadow:0 12px 28px rgba(22,35,61,.12); } .image-style--abstract img.bnd-img{ box-shadow:14px 16px 0 0 rgba(42,114,184,.18), -12px -12px 0 0 rgba(244,179,44,.20); } /* default shape: circle (blue) */ .image-style--abstract .imgph::before{ content:""; position:absolute; z-index:-1; opacity:.24; width:62%; aspect-ratio:1/1; border-radius:50%; top:-24px; left:-28px; background:var(--blue); } /* every 2nd image-section: triangle (gold), peeking bottom-right */ .image-style--abstract .ovrfl > section:nth-of-type(3n+2) .imgph::before{ background:var(--gold); border-radius:0; opacity:.30; clip-path:polygon(50% 0, 100% 100%, 0 100%); width:58%; top:auto; left:auto; bottom:-26px; right:-30px; } /* every 3rd image-section: diagonal box (green), peeking right */ .image-style--abstract .ovrfl > section:nth-of-type(3n) .imgph::before{ background:var(--green); border-radius:6px; opacity:.22; width:56%; aspect-ratio:4/3; top:auto; left:auto; bottom:-20px; right:-30px; transform:rotate(15deg); } /* component-intrinsic images never get the abstract shape */ .image-style--abstract .tc-avatar .imgph, .image-style--abstract .tm-card__av .imgph, .image-style--abstract .feat-ic .imgph, .image-style--abstract .seal-img .imgph{ overflow:hidden; } .image-style--abstract .tc-avatar .imgph::before, .image-style--abstract .tm-card__av .imgph::before, .image-style--abstract .feat-ic .imgph::before, .image-style--abstract .seal-img .imgph::before{ display:none; } /* Component-intrinsic shapes stay circular/clean under EVERY treatment (avatars, review avatars, case avatars, feature icons, guarantee seal). */ .image-style--photo .tm-card__av .bnd-img, .image-style--abstract .tm-card__av .bnd-img, .image-style--photo .tc-avatar .bnd-img, .image-style--abstract .tc-avatar .bnd-img, .image-style--photo .case--avatar .case__media .bnd-img, .image-style--abstract .case--avatar .case__media .bnd-img, .image-style--photo .feat-ic .bnd-img, .image-style--abstract .feat-ic .bnd-img, .image-style--photo .seal-img .bnd-img, .image-style--abstract .seal-img .bnd-img{ border-radius:50%; border:0; box-shadow:none; transform:none; } /* ---- tighter spacing around pull-quotes (owner: universal) ---- baseline .pullq--mark/--hand carry 28px/24px vertical margins. */ .pullq--mark{margin:12px auto} .pullq--hand{margin:14px auto} /* ===================================================================== pack-010 — gallery rescope (presentation chrome; gallery-only classes, inert on real pages). Two component categories (Law 7) + philosophy notes + good-use examples. ===================================================================== */ .g-intro{max-width:var(--maxw);margin:0 auto;text-align:center} .g-intro__h{font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--ink);margin:0} .g-intro__p{font-family:var(--font-body);font-size:17px;color:var(--body);margin:12px auto 0;max-width:56ch} /* category badge */ .g-cat{display:inline-block;font-family:var(--font-cta);font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:8px} .g-cat--pick{background:#eef2fb;color:var(--blue);border:1px solid #cfdcf3} .g-cat--tool{background:#eef6ee;color:var(--green);border:1px solid #cfe6cf} /* philosophy note — the short rule beside a component / group */ .g-note{font-family:var(--font-body);font-size:15px;font-style:italic;color:var(--muted); margin:0 auto 4px;max-width:64ch;border-left:3px solid #d7dbe1;padding-left:12px;text-align:left} .g-note b{font-style:normal;color:var(--ink)} /* pick-one set */ .g-pickone{border:1px dashed #c6cdf0;border-radius:14px;padding:18px 18px 6px;background:#fafbff} .g-pickone__hd{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);margin:0 0 4px} .g-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px} .g-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:12px} @media(max-width:680px){ .g-grid2,.g-grid3{grid-template-columns:1fr} } .g-variant{background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:14px} .g-variant__tag{display:block;font-family:var(--font-cta);font-size:12px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* image-treatment demo cells (the treatment needs an ancestor .image-style--X) */ .g-imgdemo{padding:18px;border-radius:12px;border:1px solid #e4e7ec} .g-imgdemo--rounded{background:#fff} .g-imgdemo--photo{background:var(--cream)} .g-imgdemo--abstract{background:#fff} /* good-use example marker */ .g-example__tag{display:inline-block;font-family:var(--font-cta);font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--gold-ink);background:#fdf6e1;border:1px solid var(--cream-bd); border-radius:6px;padding:3px 9px;margin-bottom:6px} /* ===================================================================== pack-011 — Studio framework (Law 7): a selectable page framework that REPLACES the solid-color band cycle with bg-image → light → bg-image → light (muted). framework--blank = the current look (unchanged). Studio only changes what a band's background IS, never how beats split (Law 1). The engine assigns each beat the next band; image bands reuse reverse-type (sec--dark) text over a scrim; bg-image-1 / bg-image-2 are named slots (placeholder pattern until real files drop into images/). ===================================================================== */ body.framework--studio{ background:#eceae4; } /* muted page tint (no bright yellow) */ /* LIGHT bands — soft muted neutral between the image bands */ .studio-band--light{ background:#f4f2ec; } /* IMAGE bands — placeholder pattern OR the dropped photo, under a dark scrim */ .studio-band--img{ position:relative; background:#3b4150; } /* overrides the sec--dark gradient */ .studio-band--img:not([style*="background-image"]){ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 16px, rgba(0,0,0,.06) 16px 32px); } .studio-band--img::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(18,24,38,.56), rgba(18,24,38,.72)); } .studio-band--img > .container{ position:relative; z-index:2; } /* DIAGONAL dividers (owner, pack-011): each band's top is cut on a slant and pulled up over the previous band, so the boundary reads diagonal — not a flat 0° line. Only the band-OPENING beat (.studio-start) carries the cut; beats continuing a band stay flush, so within-band seams stay invisible (same colour, single scrim). The first band keeps a flush top (.studio-top). A roomy band padding-bottom keeps the overlap eating empty space, never copy. */ body.framework--studio{ --studio-slant:34px; } .studio-band{ padding-bottom:46px; } /* > slant, so the cut never clips copy */ .studio-band.studio-start{ margin-top:calc(var(--studio-slant) * -1); padding-top:calc(18px + var(--studio-slant)); clip-path:polygon(0 var(--studio-slant), 100% 0, 100% 100%, 0 100%); } .studio-band.studio-start.studio-top{ margin-top:0; padding-top:18px; clip-path:none; } .studio-band.studio-start .bg-label{ top:calc(var(--studio-slant) + 12px); } /* clear of the diagonal cut */ /* legible reverse-type the heroletter classes don't get from sec--dark */ .studio-band--img .heroletter__title, .studio-band--img .heroletter__dek{ color:#fff; } .studio-band--img .heroletter__kicker{ color:#cfe0f5; } /* soft accent, not bright */ .studio-band--img .heroletter__mast{ background:rgba(255,255,255,.10); border-left-color:#cfe0f5; } .studio-band--img .hbullets li{ color:#fff; } /* self-contained panels keep their OWN ink text on an image band (no leak from sec--dark) */ .studio-band--img :is(.offer-box,.bxcard,.legalbox,.boxed,.securebx,.optioncard,.tm-card,.testimonial-card,.giftbx,.package,.case,.scarcity--pullout){ color:var(--body); } .studio-band--img .offer-box .bdhding1{ color:var(--blue); } /* ===================================================================== BAND SELECTOR (owner, 2026-06-27) — replaces the studio "template". Colors are CSS variables (one-line re-theme). Diagonal MODE is picked by the page's framework value: colorbands-straight | -uniform | -chaotic. Structure: white (no band) + colored (sec--soft) + 1-2 highlight (sec--dark). Scoped to .framework--colorbands* so other pages stay byte-identical. ===================================================================== */ [class*="framework--colorbands"]{ background:#fff; --band-colored:#e9f1fb; /* light blue colored band */ --band-highlight:#15396b; /* dark blue highlight band */ --band-slant:26px; } [class*="framework--colorbands"] .sec--soft{ background:var(--band-colored); } [class*="framework--colorbands"] .sec--dark{ background:var(--band-highlight); background-image:none; } /* diagonal geometry — PARALLELOGRAM bands (diagonal top AND bottom = no straight edges). Generous top+bottom padding (> slant) so a cut never touches copy. Bands are full-bleed (.sec is width:100%). 'straight' mode skips the clip. */ .framework--colorbands-uniform .sec--soft, .framework--colorbands-uniform .sec--dark, .framework--colorbands-chaotic .sec--soft, .framework--colorbands-chaotic .sec--dark{ position:relative; padding:calc(36px + var(--band-slant)) 0; } .framework--colorbands-uniform .sec--soft, .framework--colorbands-uniform .sec--dark{ clip-path:polygon(0 var(--band-slant), 100% 0, 100% calc(100% - var(--band-slant)), 0 100%); } .framework--colorbands-chaotic .sec:nth-of-type(odd).sec--soft, .framework--colorbands-chaotic .sec:nth-of-type(even).sec--dark{ clip-path:polygon(0 var(--band-slant), 100% 0, 100% calc(100% - var(--band-slant)), 0 100%); } .framework--colorbands-chaotic .sec:nth-of-type(even).sec--soft, .framework--colorbands-chaotic .sec:nth-of-type(odd).sec--dark{ clip-path:polygon(0 0, 100% var(--band-slant), 100% 100%, 0 calc(100% - var(--band-slant))); } .framework--colorbands-straight .sec--soft, .framework--colorbands-straight .sec--dark{ padding:36px 0; } /* first section: clean straight top, diagonal bottom only */ [class*="framework--colorbands-"] .sec:first-of-type{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--band-slant)), 0 100%); } .framework--colorbands-straight .sec:first-of-type{ clip-path:none; } /* highlighter doodle (owner, 2026-06-27) — soft gold marker swipe behind a phrase; pair with .mark-underline for "highlight + underline". box-decoration-break so it wraps cleanly across lines. */ .mark-hl{ background:linear-gradient(101deg, rgba(244,179,44,0) .5%, rgba(244,179,44,.46) 2.5%, rgba(244,179,44,.42) 96%, rgba(244,179,44,0) 99%); padding:.04em .18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* hero book cover (owner, 2026-06-27) — keep a book image a sane portrait size, centered in the hero band, instead of a full-width block. */ [class*="framework--colorbands"] .heroletter .photo-frame{ max-width:240px; margin:18px auto 0; display:block; } /* double hand-underline (owner, 2026-06-27) — pair with .mark-underline; two wobbly strokes for extra emphasis. */ .mark-underline--double{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3,7C45,1,80,10,118,5S178,3,197,6' fill='none' stroke='%232c5aa0' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M3,15C45,10,80,18,118,13S178,11,197,14' fill='none' stroke='%232c5aa0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-size:100% .66em; padding-bottom:.28em; } /* doodles ON TOP (owner, 2026-06-27) — stars & arrows are pen-markup OVERLAYS (absolute) in the margin, NOT inline characters that push the text. Reads like someone marked the page up with a pen. Underlines/circles stay inline (on the text). */ .bxlist li > .mark-star{ position:absolute; left:-1.55em; top:-.28em; width:1.5em; height:1.5em; margin:0; transform:rotate(-13deg); pointer-events:none; } .bxlist li > .harrow{ position:absolute; left:-3.4em; top:-.15em; margin:0; pointer-events:none; }