<div class="c-hero c-hero--simple c-hero--bolded-title animate__animated animate__fadeIn">
<div class="c-hero__content">
<h1 class="c-hero__title">Travel</h1>
<div class="c-hero__subtitle">Abbiamo esperienza su progetti di ogni complessità in ambito Travel. Qui troverai alcune case history su servizi, prodotti ed esperienze migliori del settore.</div>
</div>
</div>
<div class="c-hero c-hero--simple{% if modifier is defined %} {{ modifier }}{% endif %} animate__animated animate__fadeIn">
<div class="c-hero__content">
{% if label is defined %}
<p class="c-hero__label">{{ label }}</p>
{% endif %}
<h1 class="c-hero__title">{{ title|raw }}</h1>
{% if subtitle is defined %}
<div class="c-hero__subtitle">{{ subtitle }}</div>
{% endif %}
</div>
</div>
{
"modifier": "c-hero--bolded-title",
"title": "Travel",
"subtitle": "Abbiamo esperienza su progetti di ogni complessità in ambito Travel. Qui troverai alcune case history su servizi, prodotti ed esperienze migliori del settore."
}
.c-hero {
margin-top: spacing(space-48);
margin-bottom: spacing(space-48);
position: relative;
@include min-screen(bp(large)) {
margin-top: spacing(space-96);
margin-bottom: spacing(space-96);
}
&:after {
content: '';
display: block;
width: remify(64px);
height: remify(2px);
background-color: useHSL(--accent-100);
position: absolute;
left: 0;
bottom: 0;
}
}
.c-hero__content {
padding-bottom: spacing(space-24);
@include min-screen(bp(small)) {
padding-bottom: spacing(space-48);
}
@include min-screen(bp(xlarge)) {
padding-bottom: spacing(space-96);
}
}
.c-hero__title {
@include font-scale(level-9, $font-primary, regular);
color: useHSL(--primary-100);
}
.c-hero__subtitle {
@include font-scale(level-7, $font-primary, regular);
color: useHSL(--primary-100);
margin-top: spacing(space-24);
a {
color: useHSL(--primary-100);
text-decoration-color: useHSL(--accent-100);
}
}
.c-hero__label {
@include font-scale(level-2, $font-secondary, bold);
color: useHSL(--primary-100);
}
/*------------------------------------*
Person
*------------------------------------*/
.c-hero--person {
margin-top: spacing(space-24);
margin-bottom: spacing(space-24);
@include min-screen(bp(large)) {
margin-top: spacing(space-48);
margin-bottom: spacing(space-48);
}
.c-hero__content {
@include min-screen(bp(large)) {
padding-bottom: 0;
}
}
.c-hero__image {
width: 100%;
max-width: remify(375px);
aspect-ratio: 1/1;
object-fit: cover;
object-position: center top;
margin-top: spacing(space-24);
@include min-screen(bp(large)) {
margin-top: 0;
max-width: 100%;
width: remify(592px);
}
}
.c-hero__title {
@include font-scale(level-9, $font-primary, extrabold);
}
.c-hero__role {
@include font-scale(level-5, $font-primary, regular);
color: useHSL(--primary-100);
margin-top: spacing(space-2);
@include min-screen(bp(large)) {
margin-top: spacing(space-8);
}
}
.c-hero__subtitle {
margin-top: spacing(space-16);
@include min-screen(bp(large)) {
margin-top: spacing(space-24);
}
}
.c-hero__socials {
margin-top: spacing(space-16);
@include min-screen(bp(large)) {
margin-top: spacing(space-24);
}
}
.c-hero__socials--mobile {
@include min-screen(bp(large)) {
display: none;
}
}
.c-hero__socials--desk {
display: none;
margin-bottom: spacing(space-24);
@include min-screen(bp(large)) {
display: block;
}
}
.c-hero__socials__label {
@include font-scale(level-0, $font-secondary, bold);
color: useHSL(--primary-100);
margin-bottom: spacing(space-16);
}
}
/*------------------------------------*
Bolded title
*------------------------------------*/
.c-hero--bolded-title {
.c-hero__title {
@include font-scale(level-9, $font-primary, extrabold);
}
}
No notes defined.