/* Oswald: used only by the level-select-showcase price tape's / — self-contained here (not the skin's global --dm-font-display token) so no other section is affected by adding it. */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap'); .dm-native-cats{max-width:var(--dm-ncat-max,var(--dm-container,1240px));margin-inline:auto}.dm-native-cats__header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.dm-native-cats__header h2{margin:0;color:var(--dm-text);font-family:var(--dm-font-display,var(--dm-font-body,sans-serif));font-size:clamp(24px,3vw,38px);line-height:1.1;font-weight:var(--dm-display-weight,800);letter-spacing:var(--dm-display-track,normal)}.dm-native-cats__header p{margin:8px 0 0;color:var(--dm-muted)}.dm-native-cats__all{color:var(--dm-primary);font-weight:700;text-decoration:none;white-space:nowrap}.dm-native-cats__grid{display:grid;grid-template-columns:repeat(var(--dm-ncat-cols),minmax(0,1fr));gap:var(--dm-ncat-gap)}.dm-native-cats__card{position:relative;isolation:isolate;min-height:var(--dm-ncat-height);overflow:hidden;border-radius:var(--dm-ncat-radius);background:var(--dm-surface);border:1px solid var(--dm-border);box-shadow:var(--dm-shadow-card);color:var(--dm-on-primary,#fff);text-decoration:none;transform:translateZ(0);transition:transform .28s ease,box-shadow .28s ease}.dm-native-cats__card.is-featured{grid-column:span 2;grid-row:span 2;min-height:calc(var(--dm-ncat-height)*2 + var(--dm-ncat-gap))}.dm-native-cats[data-layout=minimal] .dm-native-cats__card{box-shadow:none;border-radius:0}.dm-native-cats[data-hover-raise=true] .dm-native-cats__card:hover{transform:translateY(-5px)}.dm-native-cats__media,.dm-native-cats__shade{position:absolute;inset:0}.dm-native-cats__media img{width:100%;height:100%;object-fit:var(--dm-ncat-fit,cover);transition:transform .5s cubic-bezier(.2,.7,.2,1)}.dm-native-cats[data-fit=contain] .dm-native-cats__media img{object-fit:contain}.dm-native-cats[data-hover-zoom=true] .dm-native-cats__card:hover img{transform:scale(1.055)}.dm-native-cats__shade{z-index:1;background:linear-gradient(to top,rgba(0,0,0,var(--dm-ncat-overlay)),rgba(0,0,0,0) 70%)}.dm-native-cats__body{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:3px}.dm-native-cats[data-position=bottom-center] .dm-native-cats__body{text-align:center;align-items:center}.dm-native-cats[data-position=center] .dm-native-cats__body{inset:0;justify-content:center;align-items:center;text-align:center}.dm-native-cats[data-position=top-left] .dm-native-cats__body{top:16px;bottom:auto}.dm-native-cats[data-position=top-center] .dm-native-cats__body{top:16px;bottom:auto;text-align:center;align-items:center}.dm-native-cats__body strong{font-size:var(--dm-ncat-title-size,clamp(16px,1.6vw,22px));font-weight:var(--dm-ncat-title-weight,800);color:var(--dm-ncat-title-color,inherit);line-height:1.05;display:block;padding:var(--dm-ncat-title-pad,0);margin-top:var(--dm-ncat-title-mt,0);transform:translate(var(--dm-ncat-title-ox,0),var(--dm-ncat-title-oy,0))}.dm-native-cats__badge{transform:translate(var(--dm-ncat-badge-ox,0),var(--dm-ncat-badge-oy,0));margin-top:var(--dm-ncat-badge-mt,0);padding:var(--dm-ncat-badge-pad,4px) 8px}.dm-native-cats__body small{display:block;padding:var(--dm-ncat-eyebrow-pad,0);margin-top:var(--dm-ncat-eyebrow-mt,0);transform:translate(var(--dm-ncat-eyebrow-ox,0),var(--dm-ncat-eyebrow-oy,0))}.dm-native-cats__gallery-viewport{position:absolute;inset:0;overflow:hidden}.dm-native-cats__gallery-track{position:absolute;inset:0}.dm-native-cats__gallery-track img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--dm-ncat-fit,cover)}.dm-native-cats__gallery-dots{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;justify-content:center;gap:5px;margin:0;padding:0;list-style:none}.dm-native-cats__gallery-dots [data-dmc-dot]{width:6px;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5);transition:background .2s ease}.dm-native-cats__gallery-dots [data-dmc-dot][aria-current=true]{background:#fff}.dm-native-cats__body small{font-size:11px;letter-spacing:.08em;opacity:.82}.dm-native-cats__badge{align-self:flex-start;padding:4px 8px;border-radius:999px;background:var(--dm-primary);color:var(--dm-on-primary);font-size:10px;font-weight:800}.dm-native-cats[data-position=bottom-center] .dm-native-cats__badge,.dm-native-cats[data-position=center] .dm-native-cats__badge{align-self:center}@media(max-width:900px){.dm-native-cats__grid{grid-template-columns:repeat(var(--dm-ncat-cols-tablet),minmax(0,1fr))}.dm-native-cats__card.is-featured{grid-column:span 1;grid-row:span 1;min-height:var(--dm-ncat-height)}}@media(max-width:620px){.dm-native-cats__header{align-items:start;flex-direction:column}.dm-native-cats__grid{grid-template-columns:repeat(var(--dm-ncat-cols-mobile),minmax(0,1fr))}.dm-native-cats[data-mobile=rail] .dm-native-cats__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.dm-native-cats[data-mobile=rail] .dm-native-cats__card{flex:0 0 min(78vw,280px);scroll-snap-align:start}} .dm-native-cats[data-layout=carousel] .dm-native-cats__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.dm-native-cats[data-layout=carousel] .dm-native-cats__card{flex:0 0 min(34vw,360px);scroll-snap-align:start}.dm-native-cats[data-layout=carousel] .dm-native-cats__card.is-featured{min-height:var(--dm-ncat-height)}@media(max-width:900px){.dm-native-cats[data-layout=carousel] .dm-native-cats__card{flex-basis:min(58vw,320px)}}@media(max-width:620px){.dm-native-cats[data-layout=carousel] .dm-native-cats__card{flex-basis:min(78vw,280px)}} /* * side-title: a left intro column beside a fixed-count card row (reference: * "SELECT / YOUR LEVEL" beside 3 level cards). Reuses __card/__media/__body * unchanged — only the section-level flex wrap and the badge/price visual * treatment are new (2026-08-20, level-select-showcase preset). * * Colors sampled directly off the reference PNG (System.Drawing pixel * sampling, not eyeballing): price-strip fill histogram-mode RGB(60,90,10) * — a muted dark olive, not the skin's neon --dm-accent lime; badge * border/text around RGB(90-120,100-150,40-60) — a soft sage green. * * Sizing: max_width comes from this site's own --dm-container (1120px, * confirmed live, not the reference screenshot's 1701px export width — * that number was never a CSS target). card/gap/intro figures below are * the reference's own normalized ratios (card-width/total≈23.5%, * gap/total≈1.1%, height/width≈1.61:1) applied to that 1120px container * via the preset's max_width/gap/card_height/intro_width settings * (2026-08-20, corrected after a first pass wrongly used 1680px). */ .dm-native-cats[data-layout="side-title"]{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);background:#050505} .dm-native-cats[data-layout="side-title"] .dm-native-cats__card{background:#050505;border:1px solid rgba(150,130,95,.22);box-shadow:none} .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro{flex:0 0 var(--dm-ncat-intro-w,20%);display:flex;flex-direction:column;gap:12px;min-width:0} /* font-size doubled from the prior pass: pixel-measured against the reference, the intro TEXT BLOCK (two lines + underline) fills ~55% of the card's own height there; at the previous clamp(22px,2.2vw,30px) it only reached ~29% here — the column width ratio was already correct, the type inside it was undersized (2026-08-20, pixel-parity pass). */ .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro h2{margin:0;color:var(--dm-text,#fff);font-family:var(--dm-font-display,var(--dm-font-body,sans-serif));font-size:clamp(34px,3.6vw,52px);line-height:1.05;font-weight:var(--dm-display-weight,800);letter-spacing:var(--dm-display-track,normal);text-transform:uppercase} .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro-line{display:block} /* Same brush-stroke silhouette as .dm-ticket__title::after (street-paper-ticket.css) so every heading underline on the page reads as one hand — the flat rounded bar was the last SaaS-clean rule on this heading. Colour stays the tape's muted olive rather than the bright accent, on purpose (2026-08-21, street pass). */ .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro h2::after{content:"";display:block;width:96px;height:10px;margin-top:18px;background:#86a352;clip-path:polygon(1% 42%, 14% 20%, 34% 8%, 58% 4%, 79% 10%, 96% 24%, 100% 46%, 92% 72%, 74% 88%, 52% 96%, 30% 92%, 12% 78%, 3% 60%);transform:rotate(-1.5deg)} .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro p{margin:0;color:var(--dm-muted)} .dm-native-cats[data-layout="side-title"] .dm-native-cats__grid{flex:1 1 auto;grid-template-columns:repeat(3,minmax(0,1fr))} /* site-shell.css's global `body.dm-site-shell-enabled img{height:auto}` outranks this rule's own `.dm-native-cats__media img{height:100%}` (two tag selectors beat one), so a forced-cover fill would collapse to the image's intrinsic ratio and let the card's own background show through — confirmed live (2026-08-20). Scoped to side-title only, not a site-shell edit. Fit itself is `contain` (set via the preset's image_fit), so nothing here crops. */ .dm-native-cats[data-layout="side-title"] .dm-native-cats__media img{height:100%!important} /* Price tape v3: approved direction is a worn, semi-transparent moss-green LABEL, not a fully-torn banner — roughness lives on the LEFT/RIGHT ends only, top/bottom stay nearly straight (a few units of waviness on a 700-tall-unit viewBox). Mask is one non-repeating SVG (viewBox 700x100, left-edge and right-edge each their own independent notch sequence, generated the same deterministic-sine way as the prior pass's tile — see assets/svg/torn-edge-tile-v3.svg for the readable source of this inline data URI). `isolation:isolate` + z-index:-1 on both pseudo- elements keeps grain/stains confined to this element's own stacking context, behind the text, and — since mask-image clips descendants too — automatically confined to the torn silhouette (2026-08-20, v3 pass). */ .dm-native-cats[data-layout="side-title"] .dm-native-cats__price-strip{position:absolute;z-index:2;left:50%;bottom:5px;width:58%;height:40px;transform:translateX(-50%) rotate(-.25deg);display:flex;align-items:center;justify-content:center;gap:8px;isolation:isolate;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 100' preserveAspectRatio='none'%3E%3Cpath d='M20,4.9 L60,3.4 L100,4.4 L140,6.2 L180,4.3 L220,3.5 L260,5 L300,4.1 L340,4 L380,6 L420,4.7 L460,3 L500,4.7 L540,4.8 L580,3.9 L620,5.6 L660,5.2 L684,4 L680,10 L675,16 L694,22 L683,28 L679,34 L677,40 L693,46 L682,52 L678,58 L679,64 L693,70 L682,76 L677,82 L682,88 L692,94 L680,94.4 L640,96.4 L600,96.2 L560,94.7 L520,95 L480,96 L440,95.9 L400,95.3 L360,94.9 L320,95.5 L280,96.4 L240,95.5 L200,94.3 L160,95.7 L120,96.9 L80,94.9 L40,94.1 L7,96 L13,90 L31,84 L10,78 L10,72 L28,66 L15,60 L11,54 L20,48 L20,42 L15,36 L12,30 L23,24 L21,18 L5,12 L22,6 Z' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 100' preserveAspectRatio='none'%3E%3Cpath d='M20,4.9 L60,3.4 L100,4.4 L140,6.2 L180,4.3 L220,3.5 L260,5 L300,4.1 L340,4 L380,6 L420,4.7 L460,3 L500,4.7 L540,4.8 L580,3.9 L620,5.6 L660,5.2 L684,4 L680,10 L675,16 L694,22 L683,28 L679,34 L677,40 L693,46 L682,52 L678,58 L679,64 L693,70 L682,76 L677,82 L682,88 L692,94 L680,94.4 L640,96.4 L600,96.2 L560,94.7 L520,95 L480,96 L440,95.9 L400,95.3 L360,94.9 L320,95.5 L280,96.4 L240,95.5 L200,94.3 L160,95.7 L120,96.9 L80,94.9 L40,94.1 L7,96 L13,90 L31,84 L10,78 L10,72 L28,66 L15,60 L11,54 L20,48 L20,42 L15,36 L12,30 L23,24 L21,18 L5,12 L22,6 Z' fill='%23fff'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;color:#f3ecdf;background:radial-gradient(ellipse at 14% 32%,rgba(194,205,145,.18) 0 10%,transparent 31%),radial-gradient(ellipse at 76% 64%,rgba(24,38,10,.20) 0 12%,transparent 35%),linear-gradient(95deg,rgba(78,107,34,.72) 0%,rgba(103,137,52,.74) 20%,rgba(122,150,72,.68) 42%,rgba(94,126,44,.73) 64%,rgba(115,142,61,.70) 83%,rgba(74,102,30,.72) 100%);white-space:nowrap} .dm-native-cats[data-layout="side-title"] .dm-native-cats__price-strip::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 3px),repeating-linear-gradient(98deg,rgba(0,0,0,.07) 0px,rgba(0,0,0,.07) 1px,transparent 1px,transparent 4px)} /* stains/wear — a few fixed dark and pale patches, not a repeating pattern, so it reads as ink/pigment inconsistency rather than digital noise. */ .dm-native-cats[data-layout="side-title"] .dm-native-cats__price-strip::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(ellipse 18% 60% at 8% 50%,rgba(20,30,8,.28),transparent 70%),radial-gradient(ellipse 10% 40% at 91% 30%,rgba(20,30,8,.22),transparent 70%),radial-gradient(ellipse 14% 45% at 60% 82%,rgba(210,215,175,.14),transparent 70%),linear-gradient(105deg,transparent 46%,rgba(0,0,0,.08) 47%,transparent 49%)} .dm-native-cats[data-layout="side-title"] .dm-native-cats__price-strip small{font-family:"Oswald",sans-serif;font-weight:500;font-size:11px;letter-spacing:.03em;opacity:.85} .dm-native-cats[data-layout="side-title"] .dm-native-cats__price-strip strong{font-family:"Oswald",sans-serif;font-weight:700;font-size:20px;letter-spacing:.01em} @media(max-width:900px){ .dm-native-cats[data-layout="side-title"]{flex-direction:column;align-items:stretch;gap:20px} .dm-native-cats[data-layout="side-title"] .dm-native-cats__intro{flex:0 0 auto} .dm-native-cats[data-layout="side-title"] .dm-native-cats__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:620px){ .dm-native-cats[data-layout="side-title"] .dm-native-cats__grid{grid-template-columns:1fr} } /* * category.cards has its own real slot role ("category"), so the layout's * torn-paper seam (street-magazine.css, .dm-slot + .dm-slot::before) draws * on .dm-slot--category same as any other boundary — confirmed live * (2026-08-20) as a beige zigzag band over this section's top edge. * Reference is flat black with no separator. Scoped by the side-title * marker (present only for level-select-showcase), not by resource_key — * same convention as slider.css's [data-dm-slider-player] rule, so this * follows the preset rather than a specific instance. */ [data-dm-layout="street-magazine"][data-dm-seam="torn-paper"] .dm-slot:has(.dm-native-cats[data-layout="side-title"])::before{display:none!important} /* * .dm-native-cats is centered (max-width + margin-inline:auto) inside its * own `.dm-section__inner` wrapper, which is always full-bleed/transparent * — that wrapper is shared structure every section type renders into, not * something this preset owns. With the black card row narrower than that * wrapper, the transparent gutter on each side let `body`'s own beige * background (rgb(224,202,174), this skin's paper token) show through as a * frame around the showcase — confirmed live via computed style walk up * the ancestor chain (2026-08-20). Painting the wrapper black only when it * holds this preset's side-title layout closes that gutter without * touching body or any other section's `.dm-section__inner`. */ .dm-section__inner:has(.dm-native-cats[data-layout="side-title"]){background:#050505} /* * mode-list (2026-08-21, source-v2 migration reference: "Find Your Mode"). * A numbered navigation row, not a product grid — image is genuinely * optional (media/shade simply hidden), reusing badge/title/eyebrow exactly * as every other layout does: badge -> "01", title(strong) -> "ENERGY", * eyebrow(small) -> "FOCUS / MOTIVATION". `display:contents` on __body lets * those three become direct grid items of the card itself, so no PHP change * was needed for this layout. Assumes a badge is always set for this mode — * if a future instance omits it, title would shift into the badge's column; * acceptable for this reference-matched usage, flagged here rather than * hidden. */ .dm-native-cats[data-layout="mode-list"] .dm-native-cats__grid{ display:block; border-top:1px solid var(--dm-border,rgba(240,234,220,.14)); } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card{ position:relative; display:grid; grid-template-columns:60px 1.2fr 1fr auto; align-items:center; column-gap:16px; min-height:112px; padding-inline:4px; border-radius:0; border:0; border-bottom:1px solid var(--dm-border,rgba(240,234,220,.14)); box-shadow:none; background:transparent; color:var(--dm-text,inherit); transition:background .25s ease,padding-left .25s ease; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card:hover{ padding-left:18px; background:rgba(255,255,255,.03); } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__media, .dm-native-cats[data-layout="mode-list"] .dm-native-cats__shade{display:none} .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body{ position:static; display:contents; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__badge{ align-self:center; padding:0; border-radius:0; background:transparent; color:var(--dm-primary,inherit); font-size:11px; letter-spacing:.08em; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body strong{ font-family:var(--dm-font-display,inherit); font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-.02em; color:inherit; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body small{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dm-muted,inherit); opacity:1; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card::after{ content:"→"; justify-self:end; color:var(--dm-primary,inherit); font-size:20px; } @media(max-width:782px){ .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card{ grid-template-columns:38px 1fr auto; min-height:94px; } .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body small{display:none} }