88 lines
1.8 KiB
CSS
88 lines
1.8 KiB
CSS
@layer components.blocks {
|
|
.simple-header {
|
|
@mixin border-t var(--border-hairline), solid, var(--color-border-subtle);
|
|
@mixin border-b var(--border-hairline), solid, var(--color-border-normal);
|
|
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-surface-base);
|
|
}
|
|
|
|
.simple-header__inner {
|
|
@mixin layout-wrapper;
|
|
@mixin py var(--size-14);
|
|
|
|
display: grid;
|
|
gap: var(--size-10);
|
|
|
|
@media (--bp-desktop) {
|
|
@mixin layout-columns;
|
|
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.simple-header__text {
|
|
@media (--bp-desktop) {
|
|
grid-column: body-start / margin-end;
|
|
grid-row: 1;
|
|
}
|
|
}
|
|
|
|
.simple-header__eyebrow {
|
|
@mixin typo_label;
|
|
@mixin ma var(--size-0);
|
|
|
|
color: var(--color-text-quiet);
|
|
}
|
|
|
|
.simple-header__title {
|
|
@mixin mt var(--size-6);
|
|
@mixin mb var(--size-0);
|
|
|
|
font-family: var(--font-display);
|
|
font-size: clamp(var(--type-9), 6vw, var(--size-15));
|
|
font-weight: var(--font-weight-display);
|
|
line-height: 1;
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
|
|
.simple-header__standfirst {
|
|
@mixin typo_standfirst;
|
|
@mixin mt var(--size-8);
|
|
@mixin mb var(--size-0);
|
|
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.simple-header__count {
|
|
@mixin ma var(--size-0);
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
order: -1;
|
|
|
|
aspect-ratio: 1;
|
|
width: var(--size-14);
|
|
|
|
font-family: var(--font-header);
|
|
font-size: var(--type-7);
|
|
font-weight: var(--font-weight-heading);
|
|
line-height: 1;
|
|
color: var(--color-text-on-accent);
|
|
|
|
background-color: var(--color-primary);
|
|
box-shadow: var(--shadow-raised);
|
|
|
|
@media (--bp-desktop) {
|
|
grid-column: rail-start / rail-end;
|
|
grid-row: 1;
|
|
width: var(--size-16);
|
|
font-size: var(--type-10);
|
|
}
|
|
}
|
|
|
|
.simple-header__hidden {
|
|
@mixin visually-hidden;
|
|
}
|
|
}
|