<h3 class="c-title c-title--multiline u-relative">
Cronaca
</h3>
<h3 class="c-title {% if modifier %}c-title--{{modifier}}{% endif %} u-relative">
{% if dossier %}
<svg class="c-title__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 32" fill="none">
<path fill="#FA630D" d="M16 32a16 16 0 1 0 0-32 16 16 0 0 0 0 32Z"/>
<path fill="#1C1A17" d="M12 4.4a2.4 2.4 0 0 0-2.4 2.4v5.4a1.9 1.9 0 0 0 .9 3.5 1.9 1.9 0 0 0 .9-3.5V6.8c0-.3.3-.6.6-.6h3c.4 0 .7.3.7.6v4.3l-.7-.4-3-1.4v2.5c.7.5 1 1.3 1 2 0 1.5-1 2.6-2.5 2.6a2.6 2.6 0 0 1-1.6-4.6V7.7h-.1c-2-1-4.7.6-6.2 3.5-1.4 3-1 6.1.9 7.1l13.9 7.3 5.1-11.1-4.3-2.2-.7-.3V6.8c0-1.3-1.1-2.4-2.4-2.4h-.7V.1l-1.8.3v4H12Z"/>
<path fill="#F3F2F1" d="m32 16-9.5-1.5c-2-1-4.8.8-6.2 3.9-1.4 3-1 6.3 1 7.2l3.4 5.7A16 16 0 0 0 32 16Z"/>
<path fill="#1C1A17" d="M22.6 14.9c-1.7-1-4.2.6-5.6 3.5-1.3 2.9-1 6 .7 7 1.8 1 4.3-.7 5.6-3.6 1.4-2.8 1-6-.7-7Zm-.3 7.4c-1.6 2.6-3.8 3.7-5 2.5-1.2-1.2-.8-4.3.8-6.9 1.6-2.6 3.8-3.7 5-2.5 1.1 1.2.8 4.3-.8 7Z"/>
<path fill="currentColor" d="M47.9 25.6a8 8 0 0 0 5.7-2c1.4-1.3 2-3.3 2-5.8 0-1.5-.6-3-1.5-4a10 10 0 0 0-4.3-2.7l-.9-.6-.9-.5-.7-.5c-.3-.1-.3-.3-.5-.6-.2-.2-.2-.5-.2-.7 0-1 .9-1.4 2.6-1.4a5 5 0 0 1 2.3.5c.9.3 1.4.6 2 1.3l1-3.8-.2-.3-.7-.7c-.4-.3-.7-.5-1.2-.6l-1.8-.5c-.7-.2-1.5-.3-2.4-.3-5.4 0-8.2 2.3-8.2 6.9 0 .8.2 1.6.3 2.3.4.6.6 1.3 1 1.8.3.5.8 1 1.3 1.3l1.4 1 1.2.6c1.5.7 2.3 1.2 2.8 1.7.6.5.9 1 .9 1.6 0 .7-.2 1-.7 1.2a7 7 0 0 1-2.3.3c-1 0-2-.3-3-.8a8.5 8.5 0 0 1-2.2-1.8l-.5 4.6c.1.3.5.5.8.8.4.4 1 .5 1.6.9.7.3 1.4.5 2.3.6.9.2 2 .2 3 .2Zm20.3-.4c1 0 2.1-.1 3-.6.9-.5 1.6-1 2.1-1.8s1-1.7 1.2-2.7c.4-1 .4-2.1.4-3.3 0-2.6-.6-4.6-1.6-6-1-1.5-2.6-2.2-4.9-2.2a5.9 5.9 0 0 0-4.2 1.6V9H61l-4.2 1.2v2l1.3.6V31h6.6v-6.6l1.7.7 2 .1Zm-3-2.6h-.8V12.4c.5-.3.9-.3 1.4-.3a2 2 0 0 1 1.6.8c.3.5.7 1.5.7 2.6v3.3c0 2.5-.9 3.8-2.8 3.8Zm20.5.7c-1.2 0-2-1.2-2-3.7v-6.2c0-.9.3-1.5.6-2s.7-.7 1.4-.7c1.2 0 2 1.4 2 3.8v6.1a4 4 0 0 1-.6 2c-.4.5-.9.7-1.4.7Zm-.2 2.3c3.1 0 5.6-.7 7-2.2 1.6-1.5 2.3-3.6 2.3-6.6 0-2.8-.7-5-2.1-6.4-1.4-1.5-3.7-2.2-7-2.2s-5.6.7-7.1 2.2C77 11.9 76.5 14 76.5 17c0 3 .6 5 2 6.4 1.6 1.5 3.9 2.2 7 2.2Zm16.2 0a11.6 11.6 0 0 0 4-.9c.4-.1.6-.3 1-.6v-2.6l-.6.3-.7.2a2 2 0 0 1-1.4-.5c-.4-.4-.5-1-.5-2v-7.1h3.3V8.9h-3.3V4.5h-3.7l-2 4.4-2.5.7v2.6h1.5v6.6c0 2.5.4 4.3 1 5.3 1 1 2.2 1.5 4 1.5Zm6.7-.4h6.6V0h-1.4L107 1v1.8l1.3.6v21.8Zm9.4 0h6.6V9H121l-4.4 1.2v2l1.3.6v12.5h-.2Zm3-18.1h.6L125 4v-.7L121.4.2h-.7l-3.3 3.1V4l3.3 3ZM135 32c5.6 0 8.6-2.5 8.6-7.4V11.7l1.2-.8V9.1l-3.8-.2h-3.2l-.3.8a9 9 0 0 0-4.4-1 5.8 5.8 0 0 0-5 2.5c-.6.9-1 1.7-1.3 2.7-.3 1-.3 2.1-.3 3.3 0 2.6.5 4.6 1.6 6 1 1.5 2.6 2.2 4.8 2.2 1.6 0 3.2-.5 4.2-1.6v2.4l-.2.9-.5.6-.9.5c-.3.2-.9.2-1.4.2l-1.9-.3a5 5 0 0 1-1.6-.7l-1.2 2.6a7 7 0 0 0 2.7 1.4c.7.4 1.9.6 3 .6Zm.6-10c-1 0-1.6-.5-2.1-1.5-.2-.7-.4-1.4-.4-2.2v-3c0-2.6.9-3.9 2.8-3.9.3 0 .5 0 .9.2v10c-.4.4-.7.4-1.3.4Zm17 3.2V14l.2-.1.2-.2s.2 0 .2-.2c.2 0 .2-.2.3-.2l.4-.1c.2 0 .2-.2.3-.2h.4c1 0 1.7.6 1.5 1.8v10.4h6.8V14.8c0-2.3-.3-3.8-1.2-4.8-.7-1-2-1.5-4-1.5l-1.5.3-1.4.7-1 .8-.8.7-.3.3V0h-1.4l-6.4 1v1.8l1.2.6v21.8h6.5Zm17.5.4a11.6 11.6 0 0 0 4-.9l.9-.6v-2.6l-.6.3-.7.2a2 2 0 0 1-1.4-.5c-.3-.4-.5-1-.5-2v-7.1h3.3V8.9h-3.3V4.5h-3.7l-2 4.4-2.5.7v2.6h1.4v6.6c0 2.5.4 4.3 1 5.3 1 1 2.1 1.5 4 1.5Z"/>
</svg>
{% else %}
{{title}}
{% endif %}
{% if link %}
<a href="" class="u-absolute u-right u-bottom-xsmall u-label-05 u-no-underline o-link-text">
{{link}}
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
</svg>
</a>{% endif %}
</h3>
{
"title": "Cronaca",
"modifier": "multiline"
}
// Name: Title
// Description: Introduce a new section or module
//
// Component: `c-title`
//
//
// Modifiers: `c-title--border`
// `c-title--bullet`
// `c-title--featured`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
// `settings/v7/global`
// `settings/v7/spacing.tokens`
//
// ========================================================================
// Variables
// ========================================================================
$title-background: var(--title-background);
$title-background-dark: var(--theme-color-darker);
$title-border: var(--title-border);
$title-divider-background: var(--background-color);
$title-divider-color: var(--divider-color);
$title-multiline-background: repeating-linear-gradient(to bottom, transparent, transparent 2px, $title-divider-color 2px, $title-divider-color 3px);
$title-height-logo: 40px;
$title-width-logo: 150px;
// ========================================================================
.c-title {
// Custom properties
// ======================================================================
--title-background: #{$ui-03};
--title-border: #{$ui-02};
--title-text: #{$text-01};
// ======================================================================
body[data-channel*="foto"] &,
body[data-model*="video"] &,
body[data-channel*="video"] & {
--title-text: #{$inverse-01};
--title-border: #{$inverse-01};
}
@media (prefers-color-scheme: dark) {
body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
--title-text: #{$inverse-01};
--title-border: #{$inverse-01};
}
}
@each $category, $name in $categories {
@if ($category!="notizie"){
[data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
--title-border: #{color($categories, $category, dark)};
--title-text: #{color($categories, $category, darker)};
&.c-title--featured-multiline,
&.c-title--featured {
--title-border: #{$inverse-01};
--title-text: #{$inverse-01};
}
}
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
--title-text: #{color($categories, $category, base)};
&.c-title--featured-multiline,
&.c-title--featured {
--title-border: #{$inverse-01};
--title-text: #{$inverse-01};
}
}
}
[data-color-scheme*="dark"][data-theme="today"][data-channel^="/#{$category}/"] & {
--title-border: #{color($categories, $category, dark)};
--title-text: #{color($categories, $category, base)};
&.c-title--featured-multiline,
&.c-title--featured {
--title-border: #{$inverse-01};
--title-text: #{$inverse-01};
}
}
}
}
//
// Default title color values
//
body[data-channel*="foto"]:not([data-color-scheme="user-light"]) &,
body[data-channel*="video"]:not([data-color-scheme="user-light"]) &,
body[data-color-scheme*="dark"]:not([data-model*="sponsor"]) &,
#{$global-background-dark} &,
#{$global-background-primary} &,
&--featured,
&--featured-multiline {
--title-border: #{$inverse-01};
--title-text: #{$inverse-01};
}
// ========================================================================
position: relative;
margin-bottom: $margin-medium;
border-bottom: 1px solid $title-divider-color;
color: var(--title-text);
@include type(title-03);
&__logo {
max-height: $title-height-logo;
width: $title-width-logo;
}
&--multiline-small,
&--featured-multiline {
&::after {
position: absolute;
bottom: calc(var(--title-multiline-position) * -1);
left: 0;
content: '';
display: block;
width: 100%;
height: 10px;
// background-color: $title-divider-background;
background-image: $title-multiline-background;
background-repeat: repeat-x;
background-position: bottom;
}
}
&--multiline,
&--multiline-small {
--title-multiline-position: 13px;
border-bottom: 3px solid $title-border;
body[data-channel*="dossier"] & ,
body[data-model*="approfondimento"] & {
border-bottom: 3px solid $approfondimento-gray-light;
}
}
&--multiline-small {
font-size: $primer;
}
&--featured {
margin-bottom: 0;
}
&--featured,
&--featured-multiline {
padding: $padding-small;
border-bottom: 0;
background-color: $title-background;
@include type(title-06);
@media (prefers-color-scheme: dark) {
body:not([data-color-scheme*="light"]) & {
background-color: $ui-01-10;
}
}
}
&--featured-multiline {
--title-multiline-position: 10px;
}
//
// Divider and color variations
//
#{$global-background-primary} & {
border-bottom-color: var(--theme-color-light);
&::after {
background-color: var(--theme-color-light);
}
&--featured {
background-color: $title-background-dark;
}
}
.o-bg-dark[data-section-key*="focus-channel-cover"] & {
&--featured {
background-color: $ui-01-10;
}
}
}
No notes defined.