diff --git a/tenants/escolinha/36-kc-theme.yaml b/tenants/escolinha/36-kc-theme.yaml index d2bd435..c301373 100644 --- a/tenants/escolinha/36-kc-theme.yaml +++ b/tenants/escolinha/36-kc-theme.yaml @@ -53,7 +53,20 @@ data: } a{color:inherit} - .stage{display:grid;grid-template-columns:56% 44%;min-height:100vh} + .stage{position:relative;display:grid;grid-template-columns:56% 44%;min-height:100vh} + + /* Faixa pontilhada na costura: a foto nao vira branco liso, ela se desfaz + em pontos. Fica sobre as duas colunas, por isso pende de .stage e nao de + uma delas. As mascaras apagam as pontas para a faixa nao ter borda. */ + .costura{ + position:absolute;top:0;bottom:0;left:48%; + width:230px;transform:translateX(-50%); + pointer-events:none;z-index:1;opacity:.9; + background-image:radial-gradient(circle, var(--orange) 1.6px, transparent 1.6px); + background-size:9px 9px; + -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 45%, #000 60%, transparent 100%); + mask-image:linear-gradient(90deg, transparent 0, #000 45%, #000 60%, transparent 100%); + } /* ---------- Foto (esquerda) ---------- */ .foto{ @@ -179,6 +192,14 @@ data: } .painel{padding:32px 22px 44px;align-items:flex-start} .pontos{display:none} + /* Na vertical a costura e horizontal: a faixa acompanha a borda da foto. */ + .costura{ + top:auto;bottom:auto;left:0;right:0;width:auto; + height:110px;transform:none; + margin-top:135px; + -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 40%, transparent 100%); + mask-image:linear-gradient(180deg, transparent 0, #000 40%, transparent 100%); + } .marca{margin-bottom:26px} } @@ -186,6 +207,7 @@ data:
+