<div class="c-card c-card--collab shadow-card hover:shadow-card-on bg-white min-h-info flex flex-col justify-center items-center c-card--info m-auto w-full max-w-card relative pt-11 pb-11 shadow-card">
<img class="max-w-logos mx-auto mb-4 lazyload" data-src="/dist/images/logo-wolford.png" alt="">
<div class="hidden" id="collab_mango">
<div class="px-4 text-center">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique expedita distinctio et quod fuga excepturi!</p>
</div>
</div>
<a href="#mango" data-modal-button="data-mango" data-target="#collab_mango" data-accordion-btn class="o-btn o-btn--sm text-blush relative py-4 px-3 justify-center">
<span class="block">Read more</span>
</a>
<script type="application/json" id="data-mango">
{
"heading": "Follow Asta on Instagram",
"body": "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique expedita distinctio et quod fuga excepturi!</p>",
"images": [{
"url": "/dist/images/23594415-1901816780079210-9111761723915763712.jpg",
"alt": null,
"id": "0"
}, {
"url": "/dist/images/asta8.jpg",
"alt": null,
"id": "1"
}, {
"url": "/dist/images/asta-valentaite-su-maudymosi-kostiumeliu-ms-mermaid-by-av-5899886ab2288.jpg",
"alt": null,
"id": "2"
}, {
"url": "/dist/images/01-8-2.jpg",
"alt": null,
"id": "3"
}],
"logo": {
"url": "/dist/images/logo-wolford.png",
"alt": null
}
}
</script>
</div>
<div class="c-card c-card--collab shadow-card hover:shadow-card-on bg-white min-h-info flex flex-col justify-center items-center c-card--info m-auto w-full max-w-card relative pt-11 pb-11 shadow-card">
<img class="max-w-logos mx-auto mb-4 lazyload" data-src="{{ logo.url }}" alt="">
<div class="hidden" id="collab_{{ id }}">
<div class="px-4 text-center">
{{ body|raw }}
</div>
</div>
<a href="#{{ id }}" data-modal-button="data-{{ id }}" data-target="#collab_{{ id }}" data-accordion-btn class="o-btn o-btn--sm text-blush relative py-4 px-3 justify-center">
<span class="block">{{ text|default('Read more')}}</span>
</a>
{% set data = {
heading: heading,
body: body,
images: slides,
logo: logo
} %}
<script type="application/json" id="data-{{ id }}">
{{data|json_encode|raw}}
</script>
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"id": "mango",
"heading": "Follow Asta on Instagram",
"logo": {
"url": "/dist/images/logo-wolford.png",
"alt": null
},
"body": "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique expedita distinctio et quod fuga excepturi!</p>",
"slides": [
{
"url": "/dist/images/23594415-1901816780079210-9111761723915763712.jpg",
"alt": null,
"id": "0"
},
{
"url": "/dist/images/asta8.jpg",
"alt": null,
"id": "1"
},
{
"url": "/dist/images/asta-valentaite-su-maudymosi-kostiumeliu-ms-mermaid-by-av-5899886ab2288.jpg",
"alt": null,
"id": "2"
},
{
"url": "/dist/images/01-8-2.jpg",
"alt": null,
"id": "3"
}
]
}
.c-card {
transition: box-shadow 300ms ease, clip-path 300ms ease;
&::after {
@apply .absolute .block .m-auto .pin;
box-shadow: 0 rem(40px) rem(50px) rgba(0, 0, 0, 0.05);
transition: box-shadow 300ms ease, transform 300ms ease;
z-index: -1;
transform-origin: 50%;
content: ' ';
@include mq($from: breakpoint('lg')) {
top: rem(10px);
bottom: rem(10px);
right: rem(10px);
left: rem(10px);
}
}
&:hover {
.c-card-clip {
clip-path: inset(0 0);
}
&::after {
@apply .shadow-card-on;
transform: scale(1);
}
}
}
.c-card--info {
width: rem(280px);
}
.c-card--info::after {
display: none;
}
.c-card-clip {
@include mq($from: breakpoint('lg')) {
transition: clip-path 300ms ease;
clip-path: inset(rem(10px) rem(10px));
}
}
.c-card--collab {
transition: box-shadow 300ms ease;
}
.c-card--info {
.o-icon {
@apply .absolute .pin-t;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.c-card--collaboration {
.c-card__panel {
transform: translate3d(0, rem(60px), 0);
}
}
.c-card-list {
@include mq($from: breakpoint('md')) {
& > div {
&:nth-child(even) {
margin-right: 0;
}
}
}
@include mq($from: breakpoint('lg')) {
& > div {
&:nth-child(even) {
@apply .mr-su;
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
}
// .c-carousel--latest {
// [data-carousel-item] {
// opacity: 0.5;
// transition: opacity 300ms ease;
// //pointer-events: none;
// &.is-selected {
// opacity: 1;
// // pointer-events: auto;
// }
// }
// }
.c-card--info {
&:hover {
.o-icon__bg {
transform: rotate(45deg) scale(1.15);
}
}
}
@include mq($from: breakpoint('lg')) {
.c-card--vertical {
img {
max-height: rem(250px);
}
}
}
.c-card--resp__inner {
min-height: rem(290px);
}
There are no notes for this item.