/* OSIRIS member card, paleta E (22 Oct 2026; reparațiile 1 și 2 pe 26 Oct). Cercetarea: cercetare/sectiuni/carduri/fisa.md. Shark (plătit): holograma după exemplul 26 (Holographic Card) — două câmpuri mari de lumină (albastru electric | gheață) care alunecă peste banda artei împotriva luminii, balena ca hologramă a cardului, lumina care urmărește cursorul; tehnica straturilor din pokemon-cards-css și hover-tilt (simeydotme): folie color-dodge, strălucire overlay, arc. Shrimp (gratuit): același card, sticlă închisă, mată, cu unde fine desenate din cod care se aprind unde trece lumina. Fără WebGL: totul e CSS; mcard.js scrie doar câteva variabile (--mx/--my lumina, --fx/--fy folia, --o cât e de aprins). Totul e în cqw (1cqw = 1% din lățimea cardului; la 400 × 250, 1cqw = 4px). Raport 1,6; colțuri 3,75cqw (ISO 7813). Culorile: doar prin tokenii de mai jos (ai site-ului: --accent #38bdf8, --accent-deep #1d4ed8, --nile-strong #7dd3fc, --text, --bg) și tripletele RGB pentru nuanțele cu transparență. */ .mcard,[data-mcard]{container-type:inline-size; --mc-ink:var(--text); --mc-dim:#c5cdda; /* textul secundar (OSR, Member, Since): ≥ 4,5:1 peste cea mai luminoasă pată a efectului */ --mc-acc:#bae6fd; /* eticheta planului: gheața deschisă a paletei (sky-200), aceeași familie ca accentul */ --mc-frost:#bae6fd; /* vârful de lumină al foliei */ --mc-edge:#1a2236;--mc-sig:#e8edf5;--mc-sig-ink:#0b0f18;--mc-stripe:#05070d;--mc-stripe-hi:#0b0f18; /* tripletele RGB (pentru rgb(... / alfa)): alb #f2f4f8, albastru #1d4ed8, cer #38bdf8, gheață #7dd3fc, gheață deschisă #bae6fd, lumina rece a străluciriii #dbeafe, întunericul umbrarului #04060e, noaptea site-ului #06080f, cerneala semnăturii #0b0f18 */ --mc-ink-rgb:242 244 248;--mc-blue-rgb:29 78 216;--mc-sky-rgb:56 189 248;--mc-ice-rgb:125 211 252;--mc-frost-rgb:186 230 253; --mc-glow-rgb:219 234 254;--mc-dark-rgb:4 6 14;--mc-night-rgb:6 8 15;--mc-sig-ink-rgb:11 15 24; --mc-hair:rgb(var(--mc-ink-rgb) / .14); /* the finish (base colours), set by data-finish-now; graphite / abyss double as the no-JS fallback */ --mc-b1:#161c2a;--mc-b2:#0f1420;--mc-b3:#0a0e17;--mc-g1:rgb(var(--mc-sky-rgb) / .10);--mc-g2:rgb(var(--mc-blue-rgb) / .12); /* live light, written by mcard.js */ --mx:30%;--my:24%;--fx:50%;--fy:50%;--o:.35} .mcard{position:relative;display:block;width:100%;aspect-ratio:1.6; font-family:var(--font-sans);color:var(--mc-ink);line-height:1;text-align:left; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none} .mcard[role="button"]{cursor:pointer} .mcard.is-tilt{touch-action:pan-y} .mcard:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:3.75% / 6%} /* finishes: the same card in a few base tones (the stream mixes them); old names are aliased in mcard.js */ .mcard[data-finish-now="graphite"],[data-mcard]:not(.mcard){--mc-b1:#161c2a;--mc-b2:#0f1420;--mc-b3:#0a0e17;--mc-g1:rgb(var(--mc-sky-rgb) / .10);--mc-g2:rgb(var(--mc-blue-rgb) / .12)} .mcard[data-finish-now="midnight"]{--mc-b1:#121a30;--mc-b2:#0c1222;--mc-b3:#080c17;--mc-g1:rgb(var(--mc-sky-rgb) / .10);--mc-g2:rgb(var(--mc-blue-rgb) / .18)} .mcard[data-finish-now="abyss"],[data-mcard][data-plan="shark"]:not(.mcard),[data-mcard][data-plan="trial"]:not(.mcard){--mc-b1:#0d1a3c;--mc-b2:#08112a;--mc-b3:#060a19;--mc-g1:rgb(var(--mc-sky-rgb) / .12);--mc-g2:rgb(var(--mc-blue-rgb) / .32)} .mcard[data-finish-now="tide"]{--mc-b1:#0f2150;--mc-b2:#0a1535;--mc-b3:#071028;--mc-g1:rgb(var(--mc-ice-rgb) / .10);--mc-g2:rgb(var(--mc-sky-rgb) / .2)} /* ---- the 3D chain: stage (perspective) > press (scales to .97 when pressed) > rot (turned from JS) ---- 26 / hover-tilt: the eye ~2.4 card widths away, so ±10° reads as a real card in the hand */ .mcard__stage{position:absolute;inset:0;perspective:240cqw;perspective-origin:50% 50%} .mcard__press{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s cubic-bezier(0,0,.2,1)} .mcard.is-pressable .mcard__press:active{transform:scale(.97)} .mcard__rot{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} /* five layers: back, three edge layers (0.76 mm on 85.6 mm), front */ .mcard__face,.mcard__edge{position:absolute;inset:0;border-radius:3.75cqw} .mcard__edge{background:var(--mc-edge);transform:translateZ(calc(var(--z,0) * .2cqw))} .mcard__face{overflow:hidden;isolation:isolate;background:var(--mc-b3);-webkit-backface-visibility:hidden;backface-visibility:hidden; box-shadow:0 1.6cqw 5cqw -1.8cqw rgb(0 0 0 / .7)} .mcard__front{transform:translateZ(.44cqw)} .mcard__back{transform:translateZ(-.44cqw) rotateY(180deg)} /* ---- the layers of a face, bottom to top: base, art, film, whale, foil, glare, sheen, shade, type, rim ---- */ .mcard__bg,.mcard__art,.mcard__film,.mcard__foil,.mcard__shade,.mcard__glare,.mcard__sheen,.mcard__rim{position:absolute;inset:0;pointer-events:none} .mcard__bg{background: radial-gradient(120% 95% at 100% 0%,var(--mc-g1),transparent 58%), radial-gradient(95% 85% at 0% 100%,var(--mc-g2),transparent 62%), linear-gradient(155deg,var(--mc-b1) 0%,var(--mc-b2) 46%,var(--mc-b3) 100%)} /* fine etched lines, the "grain" of the card (pokemon: 1px scanlines; Amex: guilloché): 1px every 3px at 400px */ .mcard__bg::after{content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(115deg,rgb(var(--mc-ink-rgb) / .035) 0 .25cqw,rgb(var(--mc-ink-rgb) / 0) .25cqw .75cqw)} /* Shrimp: ripples drawn from code (no picture), lit where the light is (the mask follows --mx / --my) */ .mcard--shrimp .mcard__art{opacity:.32;background:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; -webkit-mask-image:radial-gradient(75% 95% at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .45) 55%,rgb(0 0 0 / .12) 100%); mask-image:radial-gradient(75% 95% at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .45) 55%,rgb(0 0 0 / .12) 100%)} .mcard--shrimp .mcard__foil,.mcard--shrimp .mcard__whale{display:none} /* the film = the hologram of 26: two big fields of light (electric blue | a dark gap | ice) on a 200% gradient that slides against the light 1.5× farther than the foil, so the colours swap across the card as the pointer crosses it. It lives in the art band (the mask: the band under the top row down to the number row, the gap between OSIRIS and the plan, the right of the number row) and stays faint (.3) under the type, which keeps every text ≥ 4,5:1 (measured: lab/carduri/r1/, r2/). The band's top stops are px over cqw, like the text floors, so on a phone-sized card (233px) the plan label stays above the light (on a 416px card 6cqw + 24px = 49px ≈ 19% of the height, as before). Shrimp gets only a clean glass streak, no colour. */ .mcard__film{z-index:1;mix-blend-mode:screen;background-size:260% 260%;background-position:var(--fx) var(--fy)} .mcard--shark .mcard__film{opacity:calc(.5 + var(--o) * .5);background-size:200% 200%; background-position:calc(50% + (var(--fx) - 50%) * 1.5) calc(50% + (var(--fy) - 50%) * 1.5); background-image:linear-gradient(118deg,rgb(var(--mc-blue-rgb) / 0) 0%,rgb(var(--mc-blue-rgb) / .95) 14%,rgb(var(--mc-blue-rgb) / .95) 27%, rgb(var(--mc-sky-rgb) / .9) 37%,rgb(var(--mc-ice-rgb) / .85) 44%,rgb(var(--mc-sky-rgb) / 0) 52%, rgb(var(--mc-blue-rgb) / .9) 66%,rgb(var(--mc-sky-rgb) / .8) 78%,rgb(var(--mc-blue-rgb) / 0) 94%); --mc-holo:linear-gradient(180deg,rgb(0 0 0 / 0) calc(6cqw + 12px),#000 calc(6cqw + 24px),#000 56%,rgb(0 0 0 / 0) 64%), radial-gradient(ellipse 24% 13% at 54% 11%,#000 45%,rgb(0 0 0 / 0) 100%), radial-gradient(ellipse 17% 11% at 85% 64%,#000 45%,rgb(0 0 0 / 0) 100%), linear-gradient(rgb(0 0 0 / .3),rgb(0 0 0 / .3)); -webkit-mask-image:var(--mc-holo);mask-image:var(--mc-holo)} .mcard--shrimp .mcard__film{opacity:calc(.7 + var(--o) * .9);background-size:200% 200%; background-image:linear-gradient(118deg,rgb(var(--mc-ink-rgb) / 0) 40%,rgb(var(--mc-ink-rgb) / .08) 46%,rgb(var(--mc-ink-rgb) / .2) 49.5%,rgb(var(--mc-ink-rgb) / .08) 53%,rgb(var(--mc-ink-rgb) / 0) 60%)} /* Shark: the whale is the card's hologram (like the Visa dove / Mastercard globes on real cards): the picture, whole, inside the card (3cqw from the right edge, under the top row, above the number), kept calm, and the same iridescent foil masked to its shape AND to the light, so it lights up where the light passes */ .mcard__whale{position:absolute;z-index:1;right:3cqw;top:11cqw;width:86cqw;aspect-ratio:960/246;pointer-events:none;transform:rotate(-3deg);transform-origin:70% 50%} .mcard__whale::before,.mcard__whale::after{content:"";position:absolute;inset:0} .mcard__whale::before{background:url("/assets/img/mcard/rechin.webp") center/100% 100% no-repeat;filter:saturate(.85) brightness(.78)} .mcard__whale::after{ background:repeating-linear-gradient(110deg,var(--accent-deep) 0%,var(--accent) 7%,var(--nile-strong) 11%,var(--nile-strong) 14%,var(--nile-strong) 17%,var(--accent) 21%,var(--accent-deep) 28%); background-size:300% 300%;background-position:var(--fx) var(--fy); -webkit-mask-image:url("/assets/img/mcard/rechin.webp"),radial-gradient(farthest-side circle at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .45) 45%,rgb(0 0 0 / .12) 100%); -webkit-mask-size:100% 100%,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in; mask-image:url("/assets/img/mcard/rechin.webp"),radial-gradient(farthest-side circle at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .45) 45%,rgb(0 0 0 / .12) 100%); mask-size:100% 100%,100% 100%;mask-repeat:no-repeat;mask-composite:intersect; mix-blend-mode:color-dodge;opacity:calc(.42 + var(--o) * .58)} /* a soft light from the hologram onto the card round it */ .mcard--shark .mcard__art{background:radial-gradient(42% 34% at 66% 33%,rgb(var(--mc-sky-rgb) / .16),rgb(var(--mc-sky-rgb) / 0) 100%)} /* the fine foil over the whole card (pokemon "shine", in our blues), lit only where the light is */ .mcard__foil{z-index:1; background: repeating-linear-gradient(110deg,var(--accent-deep) 0%,var(--accent) 7%,var(--nile-strong) 11%,var(--mc-frost) 14%,var(--nile-strong) 17%,var(--accent) 21%,var(--accent-deep) 28%), repeating-linear-gradient(115deg,rgb(0 0 0 / .5) 0 .25cqw,rgb(255 255 255 / .18) .25cqw .5cqw); background-size:300% 300%,100% 100%;background-position:var(--fx) var(--fy),center;background-blend-mode:overlay; mix-blend-mode:color-dodge;opacity:calc(.08 + var(--o) * .34); -webkit-mask-image:radial-gradient(farthest-corner circle at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .5) 26%,rgb(0 0 0 / .08) 70%); mask-image:radial-gradient(farthest-corner circle at var(--mx) var(--my),#000 0%,rgb(0 0 0 / .5) 26%,rgb(0 0 0 / .08) 70%)} /* keeps the type on dark ground in every moment of the effect (measured: lab/carduri/r1/) */ .mcard__shade{z-index:2;background: linear-gradient(180deg,rgb(var(--mc-dark-rgb) / .62) 0%,rgb(var(--mc-dark-rgb) / .46) 13%,rgb(var(--mc-dark-rgb) / 0) 25%,rgb(var(--mc-dark-rgb) / 0) 47%,rgb(var(--mc-dark-rgb) / .5) 57%,rgb(var(--mc-dark-rgb) / .66) 68%,rgb(var(--mc-dark-rgb) / .72) 100%)} /* the glare at the light: a small, soft spot (26) that shows on a dark card (screen), and over it the broad light-to-shade of hover-tilt / pokemon (overlay). Both sit under the shade, so where the type is the light is held down. Reparațiile 2: the spot is faint (.07) and the sheen is tinted with the pale ice, not white, and the ice field of the film and the whale's foil peak are the ice (--mc-ice-rgb / --nile-strong), not the pale ice: with the light on the right they used to add up to a milky grey patch (judecata_2, 3). Measured in lab/carduri/r2/: white-grey share of the lit pixels 20 % → 6 %, ΔE and contrast unchanged */ .mcard__glare{z-index:1;mix-blend-mode:screen;opacity:calc(.25 + var(--o) * .75); background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgb(var(--mc-ink-rgb) / .07) 0%,rgb(var(--mc-glow-rgb) / .03) 14%,rgb(var(--mc-glow-rgb) / 0) 36%)} /* (a sibling, not a child: a child of a blended layer would only blend inside that layer) */ .mcard__sheen{z-index:1;mix-blend-mode:overlay;opacity:calc(.3 + var(--o) * .7); background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgb(var(--mc-frost-rgb) / .28) 0%,rgb(var(--mc-ice-rgb) / .09) 28%,rgb(var(--mc-night-rgb) / .26) 90%)} .mcard--shrimp .mcard__glare{opacity:calc(.04 + var(--o) * .12)} /* the hairline round the edge, brighter where the light is */ .mcard__rim{z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--mc-hair),inset 0 1px 0 rgb(var(--mc-ink-rgb) / .16)} .mcard__rim::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:calc(.25 + var(--o) * .75); background:radial-gradient(70% 90% at var(--mx) var(--my),rgb(var(--mc-frost-rgb) / .75),rgb(var(--mc-sky-rgb) / .18) 45%,rgb(var(--mc-sky-rgb) / 0) 75%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .mcard--shrimp .mcard__rim::after{opacity:calc(.12 + var(--o) * .4)} /* ---- front: the type (texts unchanged; fonts only through the tokens). Floors in px so a phone-sized card stays readable: 10,5px for the small labels, 11px for the name, the date and the list on the back, 9px for OSIRIS ---- */ .mcard__ui{position:absolute;inset:0;z-index:3} .mcard__top{position:absolute;left:6cqw;right:6cqw;top:6cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw} .mcard__brand{display:flex;align-items:center;min-width:0} .mcard__brand b{font-family:var(--font-wide,var(--font-sans));font-weight:900;font-stretch:125%;font-size:max(3.1cqw,9px);letter-spacing:.22em;line-height:1} .mcard__plan{font-size:max(3.2cqw,10.5px);font-weight:600;letter-spacing:.01em;line-height:1;color:var(--mc-acc);white-space:nowrap} .mcard__num{position:absolute;left:6cqw;top:37cqw;display:flex;align-items:center;font-family:var(--font-mono);font-size:6.1cqw;font-weight:500;line-height:1.2; font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;white-space:nowrap;text-shadow:0 .15cqw .4cqw rgb(0 0 0 / .55)} .mcard__pre{display:block;margin-right:.42em;color:var(--mc-dim)} .mcard__grp{display:flex;margin-right:.4em} .mcard__grp:last-child{margin-right:0} .mcard__slot{position:relative;display:block;width:var(--mc-slot,.62em);height:1.2em;overflow:hidden;text-align:center} .mcard__col{display:block} .mcard__col i{display:block;height:1.2em;line-height:1.2em;font-style:normal;font-variant-numeric:tabular-nums lining-nums} .mcard__col i.is-ph{color:var(--mc-dim)} .mcard__bottom{position:absolute;left:6cqw;right:6cqw;bottom:5.8cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:5cqw} .mcard__field{display:block;min-width:0} .mcard__field small{display:block;margin-bottom:1.2cqw;font-family:var(--font-sans);font-size:max(2.75cqw,10.5px);font-weight:600;letter-spacing:.01em;line-height:1;color:var(--mc-dim)} .mcard__field b{display:block;font-size:max(3.9cqw,11px);font-weight:600;letter-spacing:.01em;word-spacing:.08em;line-height:1.15;white-space:nowrap;text-shadow:0 .15cqw .4cqw rgb(0 0 0 / .5)} .mcard__holder{flex:1 1 auto} .mcard__name{overflow:hidden;text-overflow:ellipsis;font-size:max(calc(3.9cqw * var(--fit,1)),11px)!important;line-height:max(4.5cqw,12.5px)!important} /* a shrunk long name keeps the row height */ .mcard__name.is-empty{color:var(--mc-dim)} .mcard__since{flex:0 0 auto;text-align:right} .mcard__since b{font-family:var(--font-mono);font-size:max(4.3cqw,11px);font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums lining-nums} /* ---- back ---- */ .mcard__back .mcard__bg::after{opacity:.35} .mcard__stripe{position:absolute;left:0;right:0;top:6cqw;height:10.6cqw;z-index:1;background:linear-gradient(180deg,var(--mc-stripe),var(--mc-stripe-hi) 55%,var(--mc-stripe))} .mcard__sig{position:absolute;left:6cqw;right:6cqw;top:21.5cqw;z-index:3;display:flex;align-items:center;gap:3cqw;height:9.4cqw} .mcard__sigpad{position:relative;flex:1 1 auto;height:100%;display:flex;align-items:center;justify-content:flex-end;padding:0 2.6cqw;border-radius:1.6cqw;color:var(--mc-sig-ink); background:repeating-linear-gradient(-45deg,rgb(var(--mc-sig-ink-rgb) / .06) 0 .55cqw,rgb(var(--mc-sig-ink-rgb) / 0) .55cqw 1.3cqw),var(--mc-sig)} .mcard__dots{font-size:max(4.6cqw,10.5px);font-weight:700;letter-spacing:.14em;line-height:1;white-space:nowrap;overflow:hidden} .mcard__url{flex:0 0 auto;font-family:var(--font-sans);font-size:max(2.7cqw,10.5px);font-weight:600;letter-spacing:.01em;color:var(--mc-dim)} .mcard__included{position:absolute;left:6cqw;top:35.5cqw;z-index:3;font-family:var(--font-sans);font-size:max(2.75cqw,10.5px);font-weight:600;letter-spacing:.01em;color:var(--mc-dim)} .mcard__perks{position:absolute;left:6cqw;right:6cqw;top:max(40.5cqw,calc(35.5cqw + 14px));z-index:3;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw 4cqw} .mcard__perks li{display:flex;align-items:center;gap:1.7cqw;font-size:max(3.1cqw,11px);font-weight:600;letter-spacing:-.005em;line-height:1.1} .mcard__perks svg{width:max(3.3cqw,9px);height:max(3.3cqw,9px);flex-shrink:0;color:var(--mc-acc)} /* a phone-sized card (≤ 260px): the 11px list keeps its two columns by tightening the gaps, never by cutting a word */ @container (max-width:260px){ .mcard__perks{gap:2.2cqw 2.4cqw} .mcard__perks li{gap:3px} } /* ---- glowing frame on the part being typed (the register window): 4 corners + 4 edges moved with transform only ---- */ .mcard__hl{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s ease} .mcard__hl.is-on{opacity:1} .mcard__hl i{position:absolute;left:0;top:0;display:block;transform-origin:0 0;transition:transform .3s ease} .mcard__hl.is-jump i{transition:none} .mcard__hl .c{width:2.86cqw;height:2.86cqw;border:0 solid var(--mc-ink);filter:drop-shadow(0 0 .6cqw var(--nile-strong))} .mcard__hl .c1{border-top-width:1px;border-left-width:1px;border-top-left-radius:2.86cqw} .mcard__hl .c2{border-top-width:1px;border-right-width:1px;border-top-right-radius:2.86cqw} .mcard__hl .c3{border-bottom-width:1px;border-left-width:1px;border-bottom-left-radius:2.86cqw} .mcard__hl .c4{border-bottom-width:1px;border-right-width:1px;border-bottom-right-radius:2.86cqw} .mcard__hl .h{width:600px;height:1px;background:var(--mc-ink);filter:drop-shadow(0 0 .6cqw var(--nile-strong))} .mcard__hl .v{width:1px;height:600px;background:var(--mc-ink);filter:drop-shadow(0 0 .6cqw var(--nile-strong))} /* static cards (the scanner stream) never turn: no back, no edges, no shadow to repaint */ .mcard--static .mcard__back,.mcard--static .mcard__edge{display:none} .mcard--static .mcard__rot{will-change:auto} .mcard--static .mcard__face{box-shadow:none} /* before mcard.js runs (or without JavaScript): the same card, still, so the page keeps its place and its look. cqw only measure the children of a card, so the box itself uses % and the art sits in ::before */ [data-mcard]:not(.mcard){position:relative;display:block;width:100%;aspect-ratio:1.6;border-radius:3.75% / 6%;overflow:hidden;color:var(--mc-ink); background:radial-gradient(120% 120% at 93% 14%,rgb(var(--mc-night-rgb) / 0) 0%,rgb(var(--mc-night-rgb) / .25) 35%,var(--mc-b2) 78%),url("data:image/svg+xml;utf8,") center/100% 100% no-repeat, radial-gradient(95% 85% at 0% 100%,var(--mc-g2),transparent 62%),linear-gradient(155deg,var(--mc-b1) 0%,var(--mc-b2) 46%,var(--mc-b3) 100%); box-shadow:inset 0 0 0 1px var(--mc-hair),0 1.6cqw 5cqw -1.8cqw rgb(0 0 0 / .7)} [data-mcard][data-plan="shark"]:not(.mcard),[data-mcard][data-plan="trial"]:not(.mcard){ background:radial-gradient(120% 95% at 100% 0%,rgb(var(--mc-sky-rgb) / .16),transparent 58%),radial-gradient(95% 85% at 0% 100%,var(--mc-g2),transparent 62%), linear-gradient(155deg,var(--mc-b1) 0%,var(--mc-b2) 46%,var(--mc-b3) 100%)} [data-mcard]:not(.mcard)::before{content:"OSIRIS";position:absolute;inset:0;padding:6cqw;font-family:var(--font-wide,var(--font-sans));font-weight:900;font-stretch:125%;font-size:max(3.1cqw,9px);letter-spacing:.22em;line-height:1} [data-mcard][data-plan="shark"]:not(.mcard)::before,[data-mcard][data-plan="trial"]:not(.mcard)::before{ background:url("/assets/img/mcard/rechin.webp") right 3cqw top 11cqw/86cqw auto no-repeat} [data-mcard]:not(.mcard)::after{content:attr(data-plan);position:absolute;right:6cqw;top:6cqw;font-family:var(--font-sans);font-size:max(3.2cqw,10.5px);font-weight:600;letter-spacing:.01em;line-height:1;color:var(--mc-acc);text-transform:capitalize} [data-mcard][data-plan="trial"]:not(.mcard)::after{content:"7-day pass"} [data-mcard]:not([data-plan]):not(.mcard)::after{content:"shrimp"}