/* loaded via /lib/styles-newdesign.php */
.navbar .btn-mycourses {
padding: 3px 12px;
height: auto;
min-width: 30px;
border: 0;
background: none;
font-size: 20px;
}
#mycoursecollection {
width:100%;
}
.coursecase {
max-width:1140px;
} /* display:none; */
#casenavigation { clear:both; margin-top:15px; margin-right:20px; font-size:15px; float:right; }
/*
---------------------------------------------
---------------------------------------------
---------------------------------------------
modal mycourses
---------------------------------------------
---------------------------------------------
---------------------------------------------
*/
#mycoursecollection .modal-dialog {
height: calc(100vh - 60px);
height: calc(100svh - 60px);
height: calc(100dvh - 60px);
min-height: calc(100vh - 60px);
min-height: calc(100svh - 60px);
min-height: calc(100dvh - 60px);
max-height: calc(100vh - 60px);
max-height: calc(100svh - 60px);
max-height: calc(100dvh - 60px);
overflow-y:auto;
min-width: calc(100vw - 60px);
font-size: 10pt;
}
#mycoursecollection .modal-body {
min-height: calc(100vh - 60px);
min-height: calc(100svh - 60px);
min-height: calc(100dvh - 60px);
padding:15px 0;
}
@media (max-width:767px) {
#mycoursecollection .modal-dialog {
height: calc(100vh - 20px);
height: calc(100svh - 20px);
height: calc(100dvh - 20px);
min-height: calc(100vh - 20px);
min-height: calc(100svh - 20px);
min-height: calc(100dvh - 20px);
max-height: calc(100vh - 20px);
max-height: calc(100svh - 20px);
max-height: calc(100dvh - 20px);
overflow-y:auto;
min-width: calc(100vw - 20px);
}
#mycoursecollection .modal-body {
min-height: calc(100vh - 60px);
min-height: calc(100svh - 60px);
min-height: calc(100dvh - 60px);
padding:15px 0;
}
.courseshelves {margin-left:0; margin-right:0;}
}
#mycoursecollection .modal-body .container,
#mycoursecollection .modal-body .coursecase {
max-width:100%;
}
#mycoursecollection .modal-header {
padding:15px 0 0 0;
border-bottom:0;
position:sticky;
z-index:1060;
top:0px;
background:white;
border-radius:6px 6px 0 0;
}
#mycoursecollection .modal-header ul {
padding-inline-start:15px;
}
#mycoursecollection .modal-header .close {
margin-right:15px;
}
#mycoursecollection .modal-footer {
border-bottom:0;
position:sticky;
z-index:1060;
bottom:0px;
background:white;
border-radius:0 0 6px 6px;
}
/*
---------------------------------------------
---------------------------------------------
---------------------------------------------
products
---------------------------------------------
---------------------------------------------
---------------------------------------------
*/
/* Płótno makiety */
products {
--size: 180px; /* everything conforms to this number, has to be separate from -h */
--h: var(--size);
--radius: 2.5%;
--aspect-ratio:4/5;
--text-display: block;
--text-size: 20px;
--line-height:calc(var(--text-size) * 0.9);
--sheet-line-height: calc(var(--text-size) / 10);
--sheet-line-color:rgba(0,0,0,0.05);
--box-shadow-dark:0 6px 12px rgba(0,0,0,.18);
--box-shadow-white: 0 2px 0 rgba(255,255,255,.25);
--paper-color:#fefefe;
--cover-color: #d9bf4a;
--text-color: #3d3d3d;
/* min-height: 100vh; */
padding: calc(var(--h) * 40 / 180) 0;
display: grid;
grid-template-columns: repeat(var(--auto-fit, auto-fit), calc(var(--h) * 4 / 5)); /* 4/5 is ratio of widest product, binder, set --multiple-products=0 when 1 product */
column-gap: calc(var(--h) * 40 / 180);
row-gap: calc(var(--h) * 60 / 180);
justify-content: center;
}
@media (max-width:767px) {
products {
--h: 180px;
padding: 15px;
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
column-gap: 30px;
row-gap: 45px;
}
}
/* common, define before .bner etc. */
products .producttype {
position: absolute;
bottom: -9%;
font-size: calc(var(--h) * 9 / 180);
color: #888;
text-align: center;
width: 100%;
display:none;
}
/* Wspólne dla kartek */
products .sheet {
--line-width: 100%;
position: absolute; inset: 0;
background: var(--paper-color);
aspect-ratio:2/3;
/* miękkie krawędzie + delikatny rant */
box-shadow:
inset 0 0 0 0.5px rgba(255,255,255,1),
0.3px 0.6px 0px rgba(0,0,0,.10),
0.3px 0.3px 0px rgba(0,0,0,.12);
}
/* Subtelne „zawinięcia” krawędzi – gradienty przy krawędziach */
products .sheet::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 40%) top/100% 1% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,0) 40%) bottom/100% 1% no-repeat,
linear-gradient(90deg, rgba(0,0,0,.07), rgba(0,0,0,0) 40%) left/1% 100% no-repeat,
linear-gradient(270deg,rgba(0,0,0,.07), rgba(0,0,0,0) 40%) right/1% 100% no-repeat;
mix-blend-mode: multiply;
opacity:.9;
}
/* „Tekst” – szare linie */
products .sheet .lines{
position: relative; /* because it has to move sometimes */
margin: 10%;
z-index: 3;
display: var(--text-display);
}
products .sheet .lines .line {
border-top:var(--sheet-line-height) solid var(--sheet-line-color);
width:var(--line-width);
margin-bottom:calc(2 * var(--sheet-line-height));
}
products .sheet .lines .separator {
border-top:0;
width:100%;
height:calc(3 * var(--sheet-line-height));
}
products .sheet .dropletter {
position:absolute;
left:0;
aspect-ratio:1/1.1; /* added x-padding */
z-index:4;
height:calc(8 * var(--sheet-line-height));
background: var(--paper-color) url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
products .sheet .image {
aspect-ratio:175/145;
z-index:4;
width:var(--line-width);
margin:0 auto;
opacity:0.05;
/* don't use opacity inside this svg */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
products .sheet .lines .signature {
border-bottom:calc(var(--h) * 0.5 / 180) solid rgba(0,0,0,0.6);
color:rgba(0,0,0,0.6);;
height:10%;
font-size:35%;
text-align:left;
width:35%;
aspect-ratio:3/1;
padding-right:2%;
margin:11% 2% 0 auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 120'%3E%3Cpath d='M10 60 c 30 -24 50 24 80 0 c 24 -18 40 18 64 0 c 18 -12 30 12 48 0 c 12 -8 20 8 32 0' fill='none' stroke='%231565c0' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* SEGREGATOR */
products .binder {
--reveal: 2%;
--hardware-left: 4.6%;
--slot-top: 34.4%;
--slot-gap: 20.7%;
--slot-width: 17.27%;
--slot-height: 2.5%;
--text-size: calc(var(--h) * 22 / 180);
--line-height:calc(var(--text-size) * 0.80);
position: relative;
height: var(--h);
aspect-ratio: 4/5;
border-radius: var(--radius);
box-shadow: var(--box-shadow-dark), var(--box-shadow-white);
background: var(--cover-color);
isolation: isolate; /* blend bez wpływu na tło strony */
display:block;
margin:0 auto;
}
products .binder .cover{
position:absolute; inset:0;
overflow: hidden;
background:
radial-gradient(120% 120% at 120% 110%, rgba(0,0,0,.12) 0, rgba(0,0,0,.10) 32%, rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.01)),
var(--img);
background-size: cover, cover, cover;
background-position: center top;
z-index:1;
box-shadow: inset calc(var(--h) * 1 / 180) 0px calc(var(--h) * 1 / 180) calc(var(--h) * 1 / 180) rgba(0, 0, 0, 0.15);
border-radius:inherit;
}
/* SPINE jako druga warstwa – „górna karta” */
products .binder .spine{
position:absolute; top:0; right:0; bottom:0; left: var(--reveal);
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
background: transparent;
z-index:3;
}
/* Zawinięcia brzegów – wewnętrzna wklęsłość + highlight */
/* Zawinięcia + highlight prawej + mocniejsze dno (100% %-owe) */
products .binder .spine::before{
content:"";
position:absolute; inset:0;
pointer-events:none;
border-radius: inherit;
background:
/* RIGHT – wąski, wysoki połysk + łagodny rozbłysk dalej w lewo */
linear-gradient(to left,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.30) 0.6%,
rgba(255,255,255,.10) 2.2%,
rgba(255,255,255,0) 40%) right / 0.1% 100% no-repeat,
linear-gradient(to left, rgba(255,255,255,10), rgba(0,0,0,0)) right / 0.5% 100% no-repeat,
/* BOTTOM – mocniejsze podwinięcie + wąski jasny rant tuż przy krawędzi */
linear-gradient(to top,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.18) 1.2%,
rgba(0,0,0,.30) 0.5%,
rgba(0,0,0,0) 81%) bottom / 100% .5% no-repeat,
linear-gradient(to top, rgba(255,255,255,.28), rgba(255,255,255,0)) bottom / 100% 1.1% no-repeat,
/* GÓRA i LEWA – delikatne rants (jak było, ale w % i subtelniej) */
linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0) 35%) top / 100% 1.2% no-repeat,
linear-gradient(to right, rgba(255,255,255,.16), rgba(255,255,255,0) 40%) left / 1.2% 100% no-repeat;
/* radialny podkreślacz narożnika BR, spaja oba efekty */
mask: radial-gradient(140% 140% at 100% 100%, #000 45%, #000 70%);
}
/* cień rzucany na lewy odsłonięty pasek (na zewnątrz spine) */
products .binder .spine::after{
content:"";
position:absolute; top:0; bottom:0; left: calc(0% - var(--reveal)); width: var(--reveal);
/* od krawędzi spine -> w lewo do krawędzi segregatora */
background: linear-gradient(90deg, rgba(0,0,0,.02) 70%, rgba(0,0,0,.3) 90%);
filter: blur(calc(var(--h) * 0.1 / 180)); /* skaluje się z widokiem; nadal % w efekcie */
pointer-events:none;
}
products .binder .texture {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left: var(--reveal);
z-index:5;
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
box-shadow: inset 0 0 0 calc(var(--h)*0.3/180) rgba(0,0,0,.3);
/* stała kratka 90° + subtelna podkratka + ziarno */
--grid: calc(var(--h) * 3 / 180); /* wielkość pola kratki (zmień, jeśli chcesz gęściej/rzadziej) */
--subgrid: calc(var(--h) * 1 / 180); /* podział połówkowy */
background:
/* główna kratka: ciemniejsze piony/poziomy */
url("data:image/svg+xml;utf8,") repeat,
/* podkratka: jaśniejsze linie co połowę oczka */
url("data:image/svg+xml;utf8,") repeat,
/* drobne ziarno jak w Twoim wzorze */
url("data:image/svg+xml;utf8,") repeat;
background-size:
var(--grid) var(--grid), /* kratka */
var(--subgrid) var(--subgrid), /* podkratka */
36px 36px; /* ziarno */
background-blend-mode: multiply, screen, normal;
opacity:.55;
}
products .binder h2 {
z-index: 4;
display: var(--text-display);
position: absolute;
bottom: 0;
left: 1.6%;
font-size: var(--text-size);
font-weight: 800;
text-align: left;
line-height: var(--line-height);
letter-spacing: calc(var(--h) * -1 / 180);
padding: 0 2%;
margin: 5% 0;
max-height: calc(8 * var(--line-height));
overflow:clip;
max-width:calc(100% - 1.6% - var(--reveal));
color: var(--text-color);
text-shadow: 0 calc(var(--h) * 0.5 / 180) 0 rgba(255, 255, 255, 0.5);
}
products .binder .producttype {
position: absolute;
bottom: 50%;
top: 0;
font-size: calc(var(--h) * 9 / 180);
color: var(--text-color);
text-align: left;
text-transform: uppercase;
width: auto;
height: calc(var(--h) * 9 / 180);
display: var(--text-display);
/* transform: rotate(-90deg); */
translate: 22% 22%;
z-index: 4; /* under .texture */
font-weight: 800;
letter-spacing: calc(var(--h) * 0.5 / 180);
}
/* OKUCIA (metalowe sloty) */
products .binder .hardware{
position:absolute; inset:0; z-index:5;
}
/* Pozycje prostsze i poprawne */
products .binder .slot.top{ top: var(--slot-top); }
products .binder .slot.bottom{ top: calc( var(--slot-top) + 100% - var(--slot-top) - var(--slot-top) - var(--slot-height) ); }
/* KORPUS */
products .binder .slot{
position:absolute;
left: var(--hardware-left);
width: var(--slot-width);
height: var(--slot-height);
border-radius: 9999px;
}
/* Warstwy wewnątrz slotu */
products .binder .slot > span{ position:absolute; inset:0; border-radius:inherit; display:block; }
/* 1) RANT – stal z miękkimi krawędziami (bez „ząbków” conic) */
products .binder .slot .rim{
background:
/* walec gór/dół */
linear-gradient(180deg,
rgba(255,255,255,.85) 0%,
rgba(225,230,236,.55) 10%,
rgba(146,154,164,.35) 88%,
rgba(60,66,74,.55) 100%),
/* chłodne przejścia (delikatne kliny) */
linear-gradient(90deg, #dfe4ea 0%, #aeb6bf 50%, #e9edf1 100%);
box-shadow: 0px 0.5px 1px 0.5px rgba(66, 68, 90, 0.5) inset;
filter: blur(calc(var(--h) * 0.1 / 180));
}
/* 2) WNĘKA – grafit + miękkie „inset shadows” na obwodzie (maski kapsuły) */
products .binder .slot .cavity{
inset: 15% 6%;
background:
linear-gradient(180deg, #4b5056 0%, #22272b 65%, #14181b 100%);
/* przydymione obrzeże wewnętrzne dookoła */
mask:
/* kapsuła pełna */
radial-gradient(closest-side, #000 98%, transparent) left / 50% 100% no-repeat,
radial-gradient(closest-side, #000 98%, transparent) right / 50% 100% no-repeat,
linear-gradient(#000 0 0) center / 100% 100% no-repeat;
}
products .binder .slot .cavity::after{
content:""; position:absolute; inset:0; border-radius:inherit;
background:
/* górny i dolny półcień */
linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)) top/100% 28% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)) bottom/100% 28% no-repeat,
/* końcówki kapsuły – miękkie półcienie */
radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0) 70%) left / 36% 100% no-repeat,
radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0) 70%) right/ 36% 100% no-repeat;
opacity:.65; pointer-events:none;
filter:blur(calc(var(--h) * 0.1 / 180));
}
/* ZŁOTY PRĘT – realistyczny walec ze smużkami i przyciemnionymi krawędziami */
products .binder .slot .bar{
position:absolute;
inset: 23% 9%;
border-radius: 9999px;
background:
/* baza – złoto z czernią na krawędziach (walec) */
linear-gradient(180deg,
#0a0a0a 0%,
#7b6834 8%,
#b78f1d 18%,
#eedc9a 42%,
#d1ad55 55%,
#9a7b2b 68%,
#4a3d1a 88%,
#0a0a0a 100%),
/* mikropasmowanie metalu (delikatne smugi) */
repeating-linear-gradient(180deg,
rgba(255,255,255,.10) 0 0.35%,
rgba(0,0,0,.10) 0.7%,
rgba(0,0,0,0) 1.2%);
/* kapsułowe wygaszanie końców */
mask:
radial-gradient(closest-side, #000 70%, transparent) left / 22% 100% no-repeat,
radial-gradient(closest-side, #000 70%, transparent) right/ 22% 100% no-repeat,
linear-gradient(#000 0 0) center / 100% 100% no-repeat;
}
/* krawędzie walca i końcówki – miękkie zacienienie */
products .binder .slot .bar::before{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:
linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 18%) top/100% 40% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0) 18%) bottom/100% 42% no-repeat,
radial-gradient(120% 100% at 10% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 55%) left / 35% 100% no-repeat,
radial-gradient(120% 100% at 90% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 55%) right/ 35% 100% no-repeat;
opacity:.55;
}
/* specular – wąska smuga i jaśniejszy rdzeń */
products .binder .slot .bar::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)) center 36% / 86% 8% no-repeat,
linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)) center 48% / 70% 6% no-repeat;
mix-blend-mode: screen; opacity:.85;
}
/* 4) POŁYSKI – hotspoty i pasek na górnej krawędzi */
products .binder .slot .gloss{
inset: 5%;
pointer-events: none;
background:
/* jasny pasek na górnym rancie stali */ linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) top / 100% 14% no-repeat,
/* wąska smuga na złotym pręcie */
linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)) center 38% / 76% 10% no-repeat,
/* ciepłe hotspoty przy końcach pręta */
radial-gradient(120% 140% at 12% 45%, rgba(255, 238, 180, .55), rgba(255, 238, 180, 0) 60%) left 12% center / 26% 46% no-repeat,
radial-gradient(120% 140% at 88% 55%, rgba(255, 238, 180, .55), rgba(255, 238, 180, 0) 60%) right 12% center / 26% 46% no-repeat;
mix-blend-mode: screen;
opacity: .3;
filter: blur(calc(var(--h) * 0.8 / 180));
}
/* ======= EVENT TAG – folia, karta, ranty, cienie ======= */
products .eventtag {
--text-size: calc(var(--h) * 20 / 180);
--line-height: calc(var(--text-size) * 0.9);
position:relative;
height: var(--h);
aspect-ratio: var(--tag-aspect-ratio, 500/680); /* wysokość z var(--w) */
margin:0 auto;
border-radius: calc(var(--radius) * 1.25);
display:block;
isolation:isolate;
/* cień całej zawieszki */
background: transparent;
border:1px solid #ffffff;
box-shadow:0px calc(var(--h) * -1 / 180) calc(var(--h) * 1 / 180) calc(var(--h) * 0.5 / 180) rgba(66, 68, 90, 0.1) inset, var(--box-shadow-dark), var(--box-shadow-white);
}
/* PRZEŹROCZYSTA FOLIA – bryła + jasne krawędzie + wewn. cień */
products .eventtag::before {
content:"";
position:absolute; inset:0;
border-radius: inherit;
/* półprzeźroczysta płyta PVC */
background:
/* delikatne zafarbienia tworzywa */
radial-gradient(120% 100% at 80% -10%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04)),
rgba(255,255,255,.18);
/* jasne ranty + łagodna wklęsłość przy krawędziach (w %!) */
box-shadow:
inset 0 0 0 calc(var(--h) * 1 / 180) rgba(255,255,255,.85),
inset 0 calc(var(--h) * 1 / 180) calc(var(--h) * 3 / 180) 0 rgba(255,255,255,.5),
inset 0 calc(var(--h) * 2 / 180) calc(var(--h) * 4 / 180) rgba(0,0,0,.18),
inset calc(var(--h) * 1 / 180) 0 calc(var(--h) * 3 / 180) rgba(255,255,255,.35),
inset calc(var(--h) * -1 / 180) 0 calc(var(--h) * 3 / 180) rgba(0,0,0,.10);
backdrop-filter: blur(.6px) saturate(1.02);
z-index:1;
}
/* KIESZEŃ – wewnętrzny „rowek” od ramki folii */
products .eventtag::after {
content:"";
position:absolute;
inset:1.8%;
border-radius: calc(var(--radius) * 1.1);
box-shadow:
inset 0 0 0 calc(var(--h) * 1 / 180) rgba(255, 255, 255, .9), inset 0 0 calc(var(--h) * 2 / 180) rgba(0, 0, 0, .22);
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.03));
z-index:1;
}
/* SZCZELINA – slot w folii pod zawieszkę */
products .eventtag .slot {
position:absolute;
top:4.6%;
left:50%;
width:32%;
aspect-ratio: 7/1.4;
transform: translateX(-50%);
border-radius: 9999px;
z-index:2;
background:
radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0) 70%) left / 50% 100% no-repeat,
radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0) 70%) right / 50% 100% no-repeat,
linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 65%) center/100% 100% no-repeat;
box-shadow:
0 calc(var(--h) * 0.8 / 180) calc(var(--h) * 1.2 / 180) rgba(0,0,0,.25),
inset 0 calc(var(--h) * 0.3 / 180) calc(var(--h) * 1 / 180) rgba(255,255,255,.65);
}
/* KARTA W ŚRODKU (zachowujemy zmienne) */
/*linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08)) */
products .eventtag .card {
position:absolute;
overflow:clip;
aspect-ratio: var(--aspect-ratio);
bottom: 4%;
left: 4%;
width: 92%;
border-radius: calc(var(--radius) * 1.1);
background-color:var(--cover-color);
background-image:var(--img);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
z-index:2;
border:1px solid white;
box-shadow: calc(var(--h) * -0.1 / 180) calc(var(--h) * 0.1 / 180) calc(var(--h) * 0.5 / 180) calc(var(--h) * 0.1 / 180) rgba(0, 0, 0, .25), inset -0.1px 0.1px 0.1px rgba(255, 255, 255, .65);
}
/* DODATKOWY cień karty na folii (realizm warstw) */
products .eventtag .card::after {
content:"";
position:absolute; inset:0;
border-radius: inherit;
box-shadow: inset 0 -2px 3px rgba(0,0,0,.09);
pointer-events:none;
}
/* Napis – używa var(--text-color) */
products .eventtag h2 {
position:absolute;
left:5%;
width:100%;
bottom:9%;
display: var(--text-display);
margin:0;
z-index:3;
font-weight: 800;
font-size:var(--text-size);
line-height:var(--line-height);
letter-spacing:-2%;
color: var(--text-color);
text-align:left;
text-transform:uppercase;
/* subtelny emboss */
text-shadow:0 1px 0 var(--cover-color),
0 1px 1px rgba(0,0,0,.08);
}
/* POŁYSK FOLII – smugi i hotspoty */
products .eventtag .foil {
position:absolute; inset:0;
border-radius: inherit;
pointer-events:none;
mix-blend-mode: screen;
z-index:3;
background:
linear-gradient(75deg, rgba(255,255,255,.35), rgba(255,255,255,0)) left -20% top 10% / 30% 80% no-repeat,
linear-gradient(-65deg, rgba(255,255,255,.25), rgba(255,255,255,0)) right -10% top 0 / 36% 70% no-repeat,
radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%) no-repeat;
filter: blur(calc(var(--h) * 0.6 / 180)) saturate(1.05);
}
/* === EVENT BAG === */
products .eventbag{
/* zmienne domyślne – można nadpisać inline */
--aspect-ratio: 4/5;
--text-size: calc(var(--h) * 22 / 180);
--line-height: calc(var(--text-size) * 0.9);
--radius: 2%;
position: relative;
height: var(--h);
aspect-ratio: 4/5;
display:block;
isolation:isolate;
margin:0 auto;
border-radius: var(--radius);
background: var(--cover-color, #c63d37);
box-shadow: var(--box-shadow-dark), var(--box-shadow-white);
}
/* lekkie „fazowanie” krawędzi torby */
products .eventbag::before{
content:"";
position:absolute; inset:0;
border-radius: inherit;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)) top/100% 1.6% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,0)) bottom/100% 2.2% no-repeat,
linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0)) left/1% 100% no-repeat,
linear-gradient(270deg, rgba(0,0,0,.10), rgba(0,0,0,0)) right/1% 100% no-repeat;
opacity:.65;
}
products .eventbag .eventtag {
--h: calc(var(--size) / 4);
--tag-aspect-ratio: 4 / 3;
--aspect-ratio: 9 / 5;
--cover-color: var(--tag-cover-color);
--text-color: var(--tag-text-color);
--text-size: calc(var(--size) / 4 * 25 / 180);
transform: rotate(-10deg);
transform-origin: 35% -500%;
}
products .eventbag .eventtag .card {
display:grid;
place-items:center;
background-image:none;
}
/* szczelina-uchwyt (slot) */
products .eventbag .slot {
position:absolute;
top:6%;
left:50%;
transform:translateX(-50%);
width:calc(100% / 3);
aspect-ratio: 7/1.6;
border: calc(var(--h) * 0.1 / 180) solid rgba(0, 0, 0, 0.3);
border-radius:9999px;
background: /* wewn. cień (krawędzie wycięcia) */
linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 65%) center / 100% 100% no-repeat,
var(--bg-sec, #fff);
box-shadow:
inset 0 calc(var(--h) * 0.8 / 180) calc(var(--h) * 1.4 / 180) rgba(0, 0, 0, .22),
inset 0 calc(var(--h) * 0.3 / 180) calc(var(--h) * 0.8 / 180) rgba(255, 255, 255, .65);
}
/* przeszycie pod uchwytem (delikatny rowek) */
products .eventbag .slot::after{
content: "";
position: absolute;
left: -100%;
right: -100%;
top: 180%;
height: 1px;
background: linear-gradient(0deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .32), rgba(0, 0, 0, .12));
opacity: .6;
}
/* pole zadruku – utrzymuje ratio przez zmienną --aspect-ratio */
products .eventbag .print{
position:absolute;
left:0;
width:100%;
aspect-ratio: var(--aspect-ratio);
top:0;
border-radius: calc(var(--radius) * 0.6);
overflow:clip;
background-color: transparent;
background-image: var(--img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
products .eventbag .print::after{
content: "";
position: absolute;
border-radius: calc(var(--radius) - 0.3%);
inset: 0.5%;
box-shadow: inset 0 0 0px calc(var(--h) * 0.3 / 180) rgba(0, 0, 0, 0.3);
background:
/* jasne mikropaski */
repeating-linear-gradient(125deg,
rgba(255,255,255,.045) 0 calc(var(--h) * 1 / 180),
rgba(255,255,255,0) calc(var(--h) * 1 / 180) calc(var(--h) * 4 / 180)),
/* ciemne mikropaski */
repeating-linear-gradient(305deg,
rgba(0,0,0,.035) 0 calc(var(--h) * 1 / 180),
rgba(0,0,0,0) calc(var(--h) * 1 / 180) calc(var(--h) * 4 / 180)),
/* ziarno – powtarzalny kafelek SVG */
url("data:image/svg+xml;utf8,");
/* skala i mieszanie warstw */
background-size:
220% 220%, /* pasy 1 */
220% 220%, /* pasy 2 */
32px 32px; /* tile SVG */
background-blend-mode: multiply, multiply, normal;
opacity:.55;
}
/* napis na torbie – tylko struktura; wygląd ustawisz sam */
products .eventbag h2 {
position:absolute;
inset:auto 2% 2% 2%;
display: var(--text-display);
font-size: var(--text-size);
line-height: var(--line-height);
margin:0;
color: var(--text-color, #f4ead8);
text-transform: uppercase;
font-weight: 800;
text-align: left;
letter-spacing: calc(var(--h) * -1 / 180);
max-height: calc(7 * var(--line-height));
overflow:clip;
max-width:130%;
text-shadow: 0 calc(var(--h) * 0.5 / 180) 0 rgba(255, 255, 255, 0.5);
}
products .eventbag .producttype {
font-size: calc(var(--h) * 6.5 / 180);
hyphens: auto;
word-wrap: break-word;
overflow-wrap: break-word;
position: absolute;
left: 0%;
bottom:unset;
top:0;
width:unset; /* set by aspect-ratio */
height: calc(var(--h) * 0.16);
display: grid;
align-items: center;
margin: 0;
z-index: 3;
font-weight: 600;
color: var(--cover-color);
text-align: center;
text-transform: uppercase;
transform: rotate(-10deg);
translate: 175% 30%;
aspect-ratio: 9 / 5;
letter-spacing: calc(var(--h) * 0.2 / 180);
line-height: calc(var(--h) * 6 / 180);
}
/* Dokument */
products .agreement {
--text-size:calc(var(--h) * 18 / 180);
--line-height:calc(var(--text-size) * 0.9);
--sheet-line-height: calc(var(--text-size) / 8);
position: relative;
height: var(--h);
aspect-ratio: 4 / 5; /* AR 2:3 */
margin: 0 auto;
box-shadow: none; /* added to .sleeve:before */
background: transparent; /* nic pod spodem */
isolation: isolate;
display:block;
}
products .agreement .sheet {
inset:4%;
aspect-ratio:4/5;
}
/* Trzy kartki pod spodem */
products .agreement .under{ z-index: 1; }
products .agreement .under.u1{ transform: rotate(1.2deg); transform-origin: 50% 55%; }
products .agreement .under.u2{ transform: rotate(-1.2deg); transform-origin: 48% 52%; }
products .agreement .under.u3{ transform: rotate(-2deg); transform-origin: 52% 54%; }
products .agreement .under.sleeve {
transform: rotate(4.5deg);
transform-origin: 52% 54%;
inset: 3%;
border-radius: var(--radius);
background: var(--cover-color);
border: 0;
box-shadow: none;
backdrop-filter: blur(calc(var(--h) * 0.6 / 180)) saturate(1.02);
}
products .agreement .under.sleeve::before {
/*transform: rotate(4.5deg);
transform-origin: 52% 54%;*/
inset: -2% -2.5%;
border-radius: calc(var(--radius) + 1.5%);
background: color-mix(in srgb, var(--cover-color) 50%, #fff);
box-shadow: var(--box-shadow-dark), var(--box-shadow-white);
backdrop-filter: blur(calc(var(--h) * 0.6 / 180)) saturate(1.02);
}
/* drobne uwydatnienie ramki od wewnątrz */
products .agreement .under.sleeve::after {
content: "";
position: absolute;
right: -10%;
top: 5%;
width: calc(var(--h) * 12 / 180);
aspect-ratio: 1 / 4;
border-radius: 0 20% 20% 0;
pointer-events: none;
background: color-mix(in srgb, var(--cover-color) 50%, #fff);
filter: blur(calc(var(--h) * 0.1 / 180)) saturate(1.02);
/*
right: -2.5%;
top: 5%;
width: 10px;
aspect-ratio: 1 / 2;
border-radius: 999px 0 0 999px;
pointer-events: none;
background: var(--bg-sec);
*/
}
products .agreement .cover {
position:absolute;
inset:4%;
z-index: 12;
transform: none; /* całkowicie prosta */
overflow: hidden;
background-image: var(--img);
background-size: cover, cover, cover;
background-position: center top;
}
/* Główna – prosta */
products .agreement .top {
z-index: 3;
transform: none; /* całkowicie prosta */
overflow: hidden;
/*background-image: var(--img);
background-size: cover, cover, cover;
background-position: center top;*/
}
products .agreement .top lines {
display: var(--text-display);
}
/* Mini przełamanie światła na górnym rancie głównej kartki */
products .agreement .top::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
mix-blend-mode: screen;
opacity:.4;
}
products .agreement h2 {
position: absolute;
color: #3d3d3d;
left: 0;
top: 0;
z-index: 10;
background: var(--paper-color);
font-size: var(--text-size);
line-height: var(--line-height);
font-weight: 800;
text-align: left;
letter-spacing: calc(var(--h) * -1 / 180);
padding:0 5%;
margin: 10% 0 0 0;
max-height: calc(6 * var(--line-height)); /* 5 lines */
overflow:clip;
max-width: 100%;
width: 100%;
/* cover 1 line beneth h2 */
box-shadow: 0px calc(var(--h) * 3 / 180) 0 0 var(--paper-color);
}
products .agreement .producttype {
position: absolute;
top: 0;
bottom:unset;
width:auto;
font-size: calc(var(--h) * 7 / 180);
color: var(--cover-color); /* it's on a light cover color rim */
text-align: center;
letter-spacing: calc(var(--h) * 0.5 / 180);
text-transform: uppercase;
height: calc(var(--h) * 7 / 180);
display: block;
transform: rotate(-85.5deg);
translate: calc(var(--h) * 134 / 180) calc(var(--h) * 39 / 180);
z-index: 20;
filter:brightness(65%);
}
/* ====== CZERWONA FLAGA (bez napisu) ====== */
products .agreement .flag {
/* rozmiar i kolor – zmień według potrzeby */
--flag-h: calc(var(--h) * 6 / 180);
--flag-w: 15%;
--flag-color: #c23333;
/*display:var(--text-display);*/
position:absolute;
bottom: 14%; /* pozycja na wysokości kartki */
right: calc(var(--h) * -5 / 180); /* wystaje poza krawędź */
width: var(--flag-w);
height: var(--flag-h);
background: var(--flag-color);
border-radius: 0 calc(var(--flag-h) * .45) calc(var(--flag-h) * .45) 0;
box-shadow:
inset 0 calc(var(--h) * 0.2 / 180) 0 rgba(255,255,255,.25),
inset 0 calc(var(--h) * -0.2 / 180) 0 rgba(0,0,0,.06);
z-index: 4; /* nad kartką */
}
/* grot w lewo */
products .agreement .flag::before{
content:"";
position:absolute;
top:50%; left:0;
transform: translate(calc(-100% + calc(var(--h) * 0.1 / 180)), -50%);
border: calc(var(--flag-h) * .5) solid transparent;
border-right-color: var(--flag-color);
}
/* miękki obrys pod spodem (separacja od tła) */
products .agreement .flag::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
box-shadow: calc(var(--h) * 2 / 180) calc(var(--h) * 2 / 180) 0 rgba(0,0,0,.06);
opacity:.25; pointer-events:none;
}
/* SHEETS */
/* ereader */
/* === E-READER (CSS) === */
/* nic w .space nie zmieniamy – wszystko namespacowane w .ereader */
products .ereader{
--radius: 6%;
--bezel: 3%; /* grubość czarnej ramki dookoła ekranu */
--frame: var(--cover-color, #0d0f12); /* kolor ramki/obudowy */
--paper-color: rgb(233,233,227); /* „papier” e-ink */
--aspect-ratio: 4/5; /* proporcje kartki/okladki */
--text-size:calc(var(--h) * 18 / 180);
--line-height: calc(var(--text-size) * 0.9);
--sheet-line-height: calc(var(--text-size) / 8);
position:relative;
height: var(--h);
aspect-ratio: 3/4.2; /* zbliżone do podglądu */
display:block;
isolation:isolate;
filter: saturate(1.02);
transform: translateZ(0); /* ostrzejsze krawędzie */
box-shadow: var(--box-shadow-dark), var(--box-shadow-white);
border-radius: var(--radius);
background: var(--frame);
margin:0 auto;
}
products .ereader .producttype {
position: absolute;
bottom: calc(var(--bezel));
font-size: calc(var(--h) * 9 / 180);
color: var(--text-color);
text-align: center;
width: 100%;
letter-spacing: calc(var(--h) * 0.5 / 180);
font-weight: 900;
display: block;
z-index: 20;
opacity:0.7;
}
products .ereader .devicelogo {
height:3%;
position:absolute;
bottom:calc(1.7 * var(--bezel));
left:50%;
transform:translateX(-50%); /* centers the box itself */
aspect-ratio:691/148;
opacity:0.5;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
products .ereader h2 {
position:relative;
width:100%;
padding: 5% 2%;
max-height: calc(5 * var(--line-height) + (5% * 0.8)); /* 4 lines + padding */
overflow:clip;
top:var(--bezel);
display: var(--text-display);
z-index:3;
margin:5% 0 15% 0;
font-weight: 800;
font-size:var(--text-size);
line-height:var(--line-height);
letter-spacing: -2%;
color: var(--text-color);
background:var(--cover-color);
text-align:center;
/* subtelny emboss */
text-shadow:0 1px 0 var(--cover-color),
0 1px 1px rgba(0,0,0,.08);
box-shadow:0px calc(var(--h) * 10 / 180) 0 0 var(--cover-color), 0px calc(var(--h) * -20 / 180) 0 0 var(--cover-color);
}
/* Zewnętrzny „edge highlight” + subtelne zawinięcia przy krawędziach */
products .ereader .edge{
position:absolute; inset:0;
border-radius: inherit;
pointer-events:none;
background:
/* górny rant */
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) top/100% 2.2% no-repeat,
/* dolny rant – mocniejszy jak w referencji */
linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,0)) bottom/100% 2.8% no-repeat,
/* lewy i prawy rant */
linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0)) left/1.4% 100% no-repeat,
linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,0)) right/1.4% 100% no-repeat;
mix-blend-mode: screen;
opacity:.65;
}
/* Fazowanie obudowy – delikatna „półka” jak w zdjęciu narożnika */
products .ereader .bevel{
position:absolute; inset:0.5%;
border-radius: calc(var(--radius) - 0.5%);
background: var(--frame);
filter: brightness(85%); /* make it darker */
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.04),
inset 0 1px 2px rgba(0,0,0,.35);
}
/* Wewnętrzny rant ramki (wąska poświata na czerni) */
products .ereader .rim{
position:absolute; inset: 0.7%;
border-radius: calc(var(--radius) - 0.7%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 0 10px rgba(0,0,0,.35);
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
}
/* SZYBA + ODBICIA */
products .ereader .glass{
position:absolute;
inset: 1% 1.2%;
border-radius: calc(var(--radius) - 1%);
overflow: clip;
background: #0b0d10; /* baza pod czarny bezel */
box-shadow: inset 0 0 0 calc(var(--h) * 1 / 180) rgba(255,255,255,.12);
}
/* CZARNY BEZEL + „broda” u dołu */
products .ereader .bezel{
position:absolute; inset:0;
border-radius: inherit;
padding: var(--bezel);
background:
radial-gradient(120% 140% at 100% 100%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%) no-repeat,
#0b0d10;
}
/* EKRAN (papier) – używamy .space .sheet wewnątrz */
products .ereader .viewport{
position:absolute;
inset: var(--bezel); /* chin is a result of .viewport aspect-ratio */;
border-radius: calc(var(--radius)/4);
background-image: var(--img);
background-size: cover, cover, cover;
background-position: center top;
aspect-ratio: var(--aspect-ratio);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.06),
inset 0 .6px 1.2px rgba(0,0,0,.06);
overflow:hidden;
}
/* Nadpisania dla kartki w ekranie – TYLKO w namespacie .ereader */
products .ereader .viewport .sheet{
position:absolute;
background: var(--paper-color);
display:var(--text-display);
box-shadow:
inset 0 0 0 0.5px rgba(0,0,0,.06),
inset 0 -1px 2px rgba(0,0,0,.04);
}
products .ereader .viewport .sheet::before{
/* delikatne zawinięcia jak w realnym e-inku */
background:
linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,0) 45%) top/100% 2% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,0) 50%) bottom/100% 3% no-repeat,
linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,0) 45%) left/1.2% 100% no-repeat,
linear-gradient(270deg,rgba(0,0,0,.03), rgba(0,0,0,0) 45%) right/1.2% 100% no-repeat;
opacity:.9;
}
/* „Papierowe” odszumienie – subtelny szum i mleczny bloom */
products .ereader .viewport .sheet::after{
content:"";
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:
radial-gradient(100% 120% at 10% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%) no-repeat,
url("data:image/svg+xml;utf8,") repeat;
mix-blend-mode: multiply;
opacity:1;
}
/* Smugi i hotspoty na szkle – jak na referencyjnych zbliżeniach */
products .ereader .anti-glare{
position:absolute;
inset:0;
border-radius: inherit;
pointer-events:none;
background:
linear-gradient(70deg, rgba(255,255,255,.18), rgba(255,255,255,0)) left -12% top 8%/28% 70% no-repeat,
linear-gradient(-60deg, rgba(255,255,255,.10), rgba(255,255,255,0)) right -8% top 0/32% 65% no-repeat,
radial-gradient(90% 70% at 50% -10%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%) no-repeat;
mix-blend-mode: screen;
filter: blur(calc(var(--h) * 0.4 / 180));
opacity:.55;
}
/* tablet vert */
products .tablet{
--radius: 4%;
--bezel: 2%; /* grubość czarnej ramki dookoła ekranu */
--frame: var(--cover-color, #0d0f12); /* kolor ramki/obudowy */
--paper-color:#ffffff; /* „papier” e-ink */
--aspect-ratio: 4/5; /* proporcje kartki/okladki */
--text-size:calc(var(--h) * 18 / 180);
--line-height: calc(var(--text-size) * 0.9);
--sheet-line-height: calc(var(--text-size) / 8);
position:relative;
height: var(--h);
aspect-ratio: 4/5; /* zbliżone do podglądu */
display:block;
isolation:isolate;
filter: saturate(1.02);
transform: translateZ(0); /* ostrzejsze krawędzie */
box-shadow: var(--box-shadow-dark), var(--box-shadow-white);
border-radius: var(--radius);
background: var(--frame);
margin:0 auto;
}
products .tablet h2 {
position:relative;
width:100%;
padding: 5% 2%;
max-height: calc(6 * var(--line-height) + (5% * 0.8)); /* 4 lines + padding */
overflow:clip;
top:var(--bezel);
display: var(--text-display);
z-index:3;
margin:5% 0 15% 0;
font-weight: 800;
font-size:var(--text-size);
line-height:var(--line-height);
letter-spacing: -2%;
color: var(--text-color);
background:var(--cover-color);
text-align:center;
/* subtelny emboss */
text-shadow:0 1px 0 var(--cover-color),
0 1px 1px rgba(0,0,0,.08);
box-shadow:0px calc(var(--h) * 10 / 180) 0 0 var(--cover-color), 0px calc(var(--h) * -20 / 180) 0 0 var(--cover-color);
}
products .tablet .producttype {
position: absolute;
top: calc(var(--bezel) + 2%);
font-size: calc(var(--h) * 9 / 180);
color: var(--text-color);
text-align: center;
font-weight: 600;
letter-spacing: calc(var(--h) * 0.5 / 180);
text-transform: uppercase;
width: 100%;
display: var(--text-display);
z-index: 20;
}
/* Zewnętrzny „edge highlight” + subtelne zawinięcia przy krawędziach */
products .tablet .edge{
position:absolute; inset:0;
border-radius: inherit;
pointer-events:none;
background:
/* górny rant */
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) top/100% 2.2% no-repeat,
/* dolny rant – mocniejszy jak w referencji */
linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,0)) bottom/100% 2.8% no-repeat,
/* lewy i prawy rant */
linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0)) left/1.4% 100% no-repeat,
linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,0)) right/1.4% 100% no-repeat;
mix-blend-mode: screen;
opacity:.65;
}
/* Fazowanie obudowy – delikatna „półka” jak w zdjęciu narożnika */
products .tablet .bevel{
position:absolute; inset:0.5%;
border-radius: calc(var(--radius) - 0.5%);
background: var(--frame);
filter: brightness(85%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.04),
inset 0 1px 2px rgba(0,0,0,.35);
}
/* Wewnętrzny rant ramki (wąska poświata na czerni) */
products .tablet .rim{
position:absolute; inset: 0.7%;
border-radius: calc(var(--radius) - 0.7%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 0 10px rgba(0,0,0,.35);
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
}
/* SZYBA + ODBICIA */
products .tablet .glass{
position:absolute;
inset: 1% 1.2%;
border-radius: calc(var(--radius) - 1%);
overflow: clip;
background: #0b0d10; /* baza pod czarny bezel */
box-shadow: inset 0 0 0 calc(var(--h) * 1 / 180) rgba(255,255,255,.12);
}
/* CZARNY BEZEL + „broda” u dołu */
products .tablet .bezel{
position:absolute; inset:0;
border-radius: inherit;
padding: var(--bezel);
background:
radial-gradient(120% 140% at 100% 100%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%) no-repeat,
#0b0d10;
}
/* EKRAN (papier) – używamy .space .sheet wewnątrz */
products .tablet .viewport{
position:absolute;
inset: var(--bezel); /* chin is a result of .viewport aspect-ratio */;
border-radius: calc(var(--radius)/4);
background-image: var(--img);
background-size: cover, cover, cover;
background-position: center top;
aspect-ratio: var(--aspect-ratio);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.06),
inset 0 .6px 1.2px rgba(0,0,0,.06);
overflow:hidden;
}
/* Nadpisania dla kartki w ekranie – TYLKO w namespacie .tablet */
products .tablet .viewport .sheet {
position:absolute;
background: var(--paper-color);
display: var(--text-display);
box-shadow:
inset 0 0 0 0.5px rgba(0,0,0,.06),
inset 0 -1px 2px rgba(0,0,0,.04);
}
products .tablet .viewport .sheet::before{
/* delikatne zawinięcia jak w realnym e-inku */
background:
linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,0) 45%) top/100% 2% no-repeat,
linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,0) 50%) bottom/100% 3% no-repeat,
linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,0) 45%) left/1.2% 100% no-repeat,
linear-gradient(270deg,rgba(0,0,0,.03), rgba(0,0,0,0) 45%) right/1.2% 100% no-repeat;
opacity:.9;
}
products .tablet .sheet .lines .columns3 {
display: grid;
grid-template-columns: repeat(auto-fit, 30%); /* 4/5 is ratio of widest product, binder */
column-gap: calc(10% / 3);
row-gap: calc(var(--h) * 1 / 180);
justify-content: center;
}
products .tablet .sheet .lines .columns3 .image {
width: 100%;
float:none;
}
products .tablet .sheet .lines .columns3 .line {
width:65%;
float:none;
}
products .tablet .sheet .lines {
margin:5%;
}
products .tablet .sheet .lines .line {
width:80%;
float:right;
}
products .tablet .sheet .lines .image {
width:15%;
float:left;
margin-left:3%;
}
products .tablet .sheet .lines .separator {
clear:both;
}
/* „Papierowe” odszumienie – subtelny szum i mleczny bloom */
products .tablet .viewport .sheet::after{
content:"";
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:
radial-gradient(100% 120% at 10% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%) no-repeat,
url("data:image/svg+xml;utf8,") repeat;
mix-blend-mode: multiply;
opacity:1;
}
/* Smugi i hotspoty na szkle – jak na referencyjnych zbliżeniach */
products .tablet .glare-diagonal{
/* controls */
--angle: -36deg; /* tilt of streak; use 36deg to mirror */
--band: 14%; /* bright band thickness */
--feather: 18%; /* soft outer feather */
position:absolute;
inset:-12%; /* overscan so rotation covers corners */
border-radius:inherit;
pointer-events:none;
mix-blend-mode:screen;
opacity:.78;
filter: blur(calc(var(--h) * 0.4 / 180)) saturate(1.03);
/* two diagonal bands + subtle hotspot */
background:
/* bright core */
linear-gradient(var(--angle),
transparent calc(50% - var(--band)),
rgba(255,255,255,.20) 50%,
transparent calc(50% + var(--band)))
center/140% 140% no-repeat,
/* feathered halo */
linear-gradient(var(--angle),
transparent calc(50% - calc(var(--band) + var(--feather))),
rgba(255,255,255,.20) 50%,
transparent calc(50% + calc(var(--band) + var(--feather))))
center/140% 140% no-repeat,
/* soft top hotspot */
radial-gradient(120% 70% at 50% -12%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%) no-repeat;
}
products .tablet .glare{
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
/* stronger speculars + edge sheens + hotspot */
background:
/* top reflection band */
linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)) top / 100% 12% no-repeat,
/* lower edge curl */
linear-gradient(0deg, rgba(255,255,255,.18), rgba(255,255,255,0)) bottom / 100% 10% no-repeat,
/* left and right edge sheens */
linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0)) left / 2% 100% no-repeat,
linear-gradient(270deg, rgba(255,255,255,.14), rgba(255,255,255,0)) right / 2.2% 100% no-repeat,
/* long diagonal streaks */
linear-gradient(68deg, rgba(255,255,255,.28), rgba(255,255,255,0)) left -8% top 6% / 40% 85% no-repeat,
linear-gradient(-62deg, rgba(255,255,255,.20), rgba(255,255,255,0)) right -6% top 0 / 42% 78% no-repeat,
/* soft oval hotspot near top */
radial-gradient(120% 70% at 50% -12%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%) no-repeat;
mix-blend-mode: screen; /* glossy on dark bezels */
filter: blur(calc(var(--h) * 0.25 / 180)) saturate(1.05);
opacity:.85;
}