/* =============================================================================
eID.gov.rs - shared chrome
The header, the navigation and the footer: everything that is identical on
every page and becomes _Layout.cshtml plus its partials. Structural styling
comes from the exported eds-lib blocks that each page links before this
file; what is here is the content those blocks carry and this site's
documented departures from them, each marked DEVIATION.
Contents
1. Base
2. Component configuration
3. Header content
4. Navigation deviations
5. Footer content
6. Chrome breakpoints
7. Reduced motion
========================================================================== */
/* -----------------------------------------------------------------------------
1. Base
-------------------------------------------------------------------------- */
:root {
--page-content: 960px;
--page-gutter: var(--eds-space-4);
/* ice-blue, brand-dark-blue, black-100 and shadow-forma are declared by the
export itself, in its "Page tokens with no eds-lib equivalent" section.
What follows is what that section does not cover yet.
Two colours from the Dropdown frame. Neither is in the export; both belong
in that section once the library gains a token for them. */
--eid-color-nav-panel-item: #487293;
/* Figma Mobile/Primary Shades/300 */
--eid-color-nav-panel-divider: #b3c3d0;
/* 6px. Figma calls it radius/button-medium on the drawer's two account
buttons and corners/medium on the contact form's note: same step, two
names, so it is named here for the step rather than for either use. The
export's radius scale goes 4, 8 - it has no 6. */
--eid-radius-medium: 6px;
/* eds-lib $light-error, Figma schemes/error. The export has no error token
yet, so it is named here rather than invented. */
--eid-color-error: #ba1a1a;
/* Figma extended (ui)/Green/light/color - the "requirement met" green on the
new-password form. eds-lib does have a `$light-success`, but it is #81C784,
a container green meant to sit behind something: as text on white it comes
out at 1.9:1 and fails AA outright. The two are not the same role, so this
is named here rather than pointed at the library's. 6.5:1 on white. */
--eid-color-success: #476730;
/* The drawer's expand glyph. The library draws this one as the Material
Symbols ligature `expand_more`, and the export ships no Material Symbols
font; its own `--_icon-chevron-down` is the desktop root chevron, a thin
stroked vector at 11px. The Menu frame's mobile rows carry the filled
arrow-down-s-line - the same family as the library's `--_icon-arrow-right`,
turned a quarter - so it is that path, stated once. */
--eid-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.172L16.95 8.222L18.364 9.636L12 16L5.636 9.636L7.05 8.222L12 13.172Z' fill='black'/%3E%3C/svg%3E");
/* The button component's hover, over its own 200ms transition: a tonal
button takes `filter: brightness(0.95)`, a filled one darkens.
How much it darkens is taken from what the library actually ships, not
from the `darken()` call in its source: the built CSS turns the filled
primary #36618E into rgb(48.6, 87.3, 127.8), which is every channel at
90% - ten percent of the way to black. Read as an HSL step instead it
would halve the lightness of this page's darker primary (#003964, the
export's own token and the Figma value) and land almost on black. So the
step is the ratio, and the hex is the fallback for it. */
--eid-color-primary-hover: #003350;
--eid-color-primary-hover: color-mix(in srgb, var(--eds-color-primary) 90%, black);
--eid-button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--eds-color-surface-container-lowest);
color: var(--eds-neutral-20);
font-family: var(--eds-font-family-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* -----------------------------------------------------------------------------
2. Component configuration
Set through the hooks the components expose, so none of this is a fork.
-------------------------------------------------------------------------- */
.nav {
/* DEVIATION — the frame's Main Nav Link is 14px on 18px insets; the library
default is 15px on 14px. Those insets are what make the row widths match
the frame (105 / 101 / 144 / 80 / 88 / 90 px). */
--nav-root-item-padding-inline: 18px;
--nav-root-item-font-size: 14px;
/* The Dropdown frame, through the panel's own hooks. Its 251px width, its
56px rows, its 20/16 insets and its square top-right corner are already
the library's defaults - only these three colours differ. */
--nav-panel-bg: var(--eid-color-ice-blue);
--nav-item-color: var(--eid-color-nav-panel-item);
--nav-divider-color: var(--eid-color-nav-panel-divider);
/* The drawer, through the same kind of hook. The Menu frame draws both of
its rules in schemes/outline-variant - the first level at full strength,
the sub-level at half - where the library defaults to two greys of its
own (#c8ced4 / #e7e9ec). The sub-level's half is carried in the colour
rather than in an `opacity`, because the rule is painted as a gradient
and the row behind it must stay opaque. */
--nav-mobile-divider-color: var(--eds-color-outline-variant);
--nav-mobile-divider-color-nested: color-mix(in srgb, var(--eds-color-outline-variant) 50%, transparent);
/* Every trailing glyph in the frame is the row's own primary, not the
library's lighter steel blue. The arrows are then taken to half. */
--nav-mobile-chevron-color: var(--eds-color-primary);
}
.eds-header-root {
/* DEVIATION — the frame's brand lockup is 316.8px wide; the library clamps it
to 280, which cuts the tagline short. */
--eds-header-brand-max-width: 320px;
/* DEVIATION — the open-menu frame keeps the closed header's 24px lead-in;
the block's open state drops to 16. */
--eds-header-open-padding-inline-start: var(--eds-space-6);
}
/* The pinned header.
`.eds-header--sticky` on the header root is the block's `[sticky]` input,
and it pins the bar rather than the whole header: the top bar scrolls out of
view with the page and only the bar stays. Whatever the browser scrolls to on
its own would then land underneath that bar - the skip link's jump to
`#main` above all - so the bar's height is taken off as scroll padding. It
is the bar's height alone, because the strip is already gone by the time
anything is pinned. */
:root {
/* The mobile bar is the 56px tap target inside its own insets, plus the
header's bottom rule. */
--eid-header-bar-height: calc( var(--eds-header-toggle-size) + var(--eds-header-mobile-padding-block) * 2 + var(--eds-header-border-width));
}
@media (min-width: 905px) {
:root {
/* The desktop bar is the brand mark inside the block's own insets, plus
the same rule. The 54px is the mark's height, set on `.logo__mark`. */
--eid-header-bar-height: calc( 54px + var(--eds-header-padding-block) * 2 + var(--eds-header-border-width));
}
}
html {
scroll-padding-top: var(--eid-header-bar-height);
}
/* -----------------------------------------------------------------------------
3. Header content
-------------------------------------------------------------------------- */
/* 3.1 Top bar --------------------------------------------------------------- */
.topbar__link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 35px;
padding-inline: 15px;
color: inherit;
font-weight: var(--eds-font-weight-medium);
text-decoration: none;
white-space: nowrap;
}
.topbar__link--button {
border: 0;
background: none;
cursor: pointer;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
/* The glyph is exported pointing left and rotated into place, as in the design */
.topbar__chevron {
width: 4.44px;
height: 8px;
transform: rotate(-90deg);
transition: transform var(--eds-duration-medium) var(--eds-ease-standard);
}
.topbar__divider {
width: 2px;
height: 35px;
background: var(--eid-color-black-100);
opacity: 0.5;
}
/* The script switcher hangs off the top bar's chevron. Same panel as the
account dropdown - ice blue, the corner it meets the trigger on left square,
its own elevation - sized for the top bar's 11px rows. */
.topbar-menu {
position: relative;
display: flex;
}
.topbar-panel {
display: none;
position: absolute;
inset-block-start: 100%;
inset-inline-end: 0;
z-index: var(--nav-z, 1000);
min-width: 100%;
padding-block: var(--eds-space-2);
border-radius: var(--eds-radius-xs);
border-start-end-radius: 0;
background: var(--eid-color-ice-blue);
box-shadow: 0 1px 9px rgba(0, 57, 100, 0.15);
}
.topbar-menu.open > .topbar-panel {
display: flex;
flex-direction: column;
}
.topbar-panel a {
padding: var(--eds-space-2) 15px;
color: color-mix(in srgb, var(--eds-color-primary) 70%, transparent);
font-size: var(--eds-font-size-label-small);
line-height: var(--eds-line-height-label-small);
font-weight: var(--eds-font-weight-medium);
letter-spacing: 0.3px;
white-space: nowrap;
text-decoration: none;
}
.topbar-panel a:hover {
background: var(--nav-item-hover-bg, #eaf1ff);
color: var(--eds-color-primary);
}
/* The script the page is already in. */
.topbar-panel a[aria-current] {
color: var(--eds-color-primary);
font-weight: 700;
}
/* The glyph is exported pointing left; closed it is rotated down, open it
points back up, which is what the navigation-menu does with its own. */
.topbar-menu.open .topbar__chevron {
transform: rotate(90deg);
}
/* 3.2 Brand lockup ---------------------------------------------------------- */
.logo {
display: flex;
align-items: center;
gap: var(--eds-space-3);
min-width: 0;
max-width: 100%;
text-decoration: none;
}
/* eds-lib's own mark, from brand.css, at the size the frame draws it. */
.logo__mark.eds-brand.logo-symbol {
flex-shrink: 0;
width: 40px;
height: 54px;
}
.logo__type {
display: flex;
flex-direction: column;
min-width: 0;
/* `text-align`, not `align-items`: the children stay stretched so the tagline
can ellipsise, and the wordmark stays flush left with it even when the
lockup as a whole is centred. */
text-align: start;
}
.logo__name {
font-size: var(--eds-font-size-headline-small);
line-height: 24px;
color: var(--eid-color-brand-dark-blue);
white-space: nowrap;
}
.logo__name b {
font-weight: 700;
}
/* Two lines in the mobile header and in the footer, one on the desktop header
— the only place with a row height to hold. */
.logo__tagline {
line-height: var(--eds-line-height-body-small);
color: color-mix(in srgb, var(--eid-color-brand-dark-blue) 50%, transparent);
}
/* 3.3 Drawer toggle --------------------------------------------------------- */
/* DEVIATION — the block renders its icon as a Material Symbols ligature
(`menu` / `close`). That font is not part of this export, so the bars are
drawn in CSS and fold into a cross when the checkbox is on. */
.eds-header__toggle {
color: var(--eds-header-color-primary);
}
.eds-header__toggle-icon,
.eds-header__toggle-icon::before,
.eds-header__toggle-icon::after {
display: block;
width: 20px;
height: 2px;
border-radius: 1px;
background: currentcolor;
transition: transform var(--eds-duration-medium) var(--eds-ease-standard);
}
.eds-header__toggle-icon {
position: relative;
}
.eds-header__toggle-icon::before,
.eds-header__toggle-icon::after {
content: "";
position: absolute;
left: 0;
}
.eds-header__toggle-icon::before {
top: -6.5px;
}
.eds-header__toggle-icon::after {
top: 6.5px;
}
.eds-header-root.eds-header--open .eds-header__toggle-icon {
background: transparent;
}
.eds-header-root.eds-header--open .eds-header__toggle-icon::before {
transform: translateY(6.5px) rotate(45deg);
}
.eds-header-root.eds-header--open .eds-header__toggle-icon::after {
transform: translateY(-6.5px) rotate(-45deg);
}
/* 3.4 Account buttons ------------------------------------------------------- */
.account-button {
display: flex;
align-items: center;
justify-content: center;
/* Leading inset only — the trailing inset lives on the label. */
padding-inline-start: 15px;
border-radius: var(--eds-radius-sm);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: var(--eid-button-transition);
}
.account-button__icon {
width: 20px;
height: 20px;
opacity: 0.4;
}
.account-button span {
padding: var(--eds-space-3) 18px var(--eds-space-3) var(--eds-space-2);
}
.account-button--tonal {
background: var(--eds-color-primary-container);
color: var(--eds-color-on-primary-container);
}
.account-button--tonal:hover {
filter: brightness(0.95);
}
.account-button--filled {
background: var(--eds-color-primary);
color: var(--eds-color-on-primary);
}
.account-button--filled:hover {
background: var(--eid-color-primary-hover);
}
/* The drawer footer splits its two buttons evenly. DEVIATION — the frame draws
the block on the drawer's own surface, with neither a fill of its own nor a
rule above it. */
.eds-header__account {
gap: var(--eds-space-4);
padding: var(--eds-space-4);
}
.eds-header__account .account-button {
flex: 1 1 0;
}
/* The drawer draws the pair at a size of their own: 16/24 insets around a 24px
icon, on the frame's 6px corner, and the icon at full strength rather than
the 40% the header row uses. */
.account-button--drawer {
gap: var(--eds-space-2);
padding: var(--eds-space-4) var(--eds-space-6);
border-radius: var(--eid-radius-medium);
}
.account-button--drawer .account-button__icon {
width: 24px;
height: 24px;
opacity: 1;
}
.account-button--drawer span {
padding: 0;
}
/* -----------------------------------------------------------------------------
4. Navigation deviations
-------------------------------------------------------------------------- */
/* The desktop row must be able to wrap. The library keeps it on one line, which
is right at the frame's 1280 but overlaps the brand between md and lg, where
six items plus two account buttons do not fit. */
@media (min-width: 905px) {
/* The library keeps the row on one line, which is right at the frame's 1280
but overlaps the brand between md and lg, where six items plus two account
buttons do not fit. Wrapping is the fallback — and the brand gives up width
first, so a few pixels short of the frame costs an ellipsis rather than a
second nav row. */
.eds-header__brand {
flex: 0 1 auto;
}
.nav ul[data-depth="0"] {
flex-wrap: wrap;
}
}
/* From lg there is room for the whole row, so the menu stops shrinking and the
brand absorbs whatever is missing. Below lg the menu shrinks and the nav
wraps instead of overlapping. */
@media (min-width: 1240px) {
.eds-header__menu {
flex: 1 0 auto;
}
}
/* The frame's desktop nav ends at еУправа: ending the session is a row the
open-menu frame draws in the drawer only. */
@media (min-width: 905px) {
.nav ul[data-depth="0"] > li.is-signout {
display: none;
}
}
@media (min-width: 905px) {
/* DEVIATION — the library draws the trailing arrow only on a row that opens
a further level. The Dropdown frame puts one on every row, the same way
the mobile drawer does. */
.nav li > ul > li > a::after {
content: "";
flex: 0 0 auto;
width: var(--nav-trailing-icon-size, 24px);
height: var(--nav-trailing-icon-size, 24px);
background-color: var(--nav-trailing-icon-color, #003964);
mask: var(--_icon-arrow-right) center / contain no-repeat;
}
/* DEVIATION — the panel is drawn with an elevation the library does not
give it, and there is no hook for one. */
.nav li > ul {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
}
/* 4.1 Account dropdown ------------------------------------------------------ */
/* The Регистрација button opens a panel of its own. The nav's dropdown is a
different component, so this is built from the frame - but it borrows the
panel's colour and its z-index so the two behave as one system. */
.account-menu {
position: relative;
}
.account-panel {
display: none;
position: absolute;
inset-block-start: 100%;
inset-inline-end: 0;
z-index: var(--nav-z, 1000);
min-width: -webkit-fill-available;
padding-block: 14px;
border-radius: var(--eds-radius-xs);
background: var(--eid-color-ice-blue);
box-shadow: 0 1px 9px rgba(0, 57, 100, 0.15);
}
.account-menu.open > .account-panel {
display: flex;
flex-direction: column;
gap: 2px;
}
.account-panel a {
padding: 10px 18px 10px 9px;
color: color-mix(in srgb, var(--eds-color-primary) 70%, transparent);
font-size: var(--eds-font-size-body-small);
font-weight: var(--eds-font-weight-medium);
text-align: end;
text-decoration: none;
}
.account-panel a:hover {
color: var(--eds-color-primary);
}
/* The drawer's Регистрација button opens the same choices as the desktop one,
but upwards: the button sits at the bottom of the drawer, so a panel opening
downwards would run off the screen. */
.eds-header__account {
align-items: flex-start;
}
.account-menu--drawer {
flex: 1 1 0;
min-width: 0;
}
.account-menu--drawer > .account-button {
width: 100%;
box-sizing: border-box;
}
.account-menu--drawer > .account-panel {
inset-block-start: auto;
inset-block-end: 100%;
inset-inline: 0;
padding-block: var(--eds-space-2);
}
.account-menu--drawer > .account-panel a {
text-align: start;
}
@media (max-width: 904.98px) {
/* DEVIATION — the library gives a mobile row a chevron only when it expands,
and draws it as a Material Symbols ligature. The frame puts an arrow on
every row that navigates, a chevron on the one that expands, and nothing
on the one that leaves the portal. Both vectors are the component's own.
The two glyphs are not the same size and not the same weight of colour:
the arrow is 18px at half strength, the chevron 24px at full. */
.nav ul[data-depth="0"] > li > a::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-inline-start: auto;
opacity: 0.5;
background-color: var(--nav-mobile-chevron-color, #8ba4b8);
mask: var(--_icon-arrow-right) center / contain no-repeat;
font-size: 0;
}
/* The chevron is the one glyph the frame draws at full strength, and the
only one that turns - the library's own `.open` rotation does that. */
.nav ul[data-depth="0"] > li.has-child > a::after {
width: 24px;
height: 24px;
opacity: 1;
mask-image: var(--eid-icon-chevron-down);
}
.nav ul[data-depth="0"] > li.is-external > a::after {
content: none;
}
/* DEVIATION — every row in the frame starts on the same 24px line, at both
levels; the library indents by depth from a 16px base. The sub-list's own
8px inset is what sets its rows apart, so the text does not need to move. */
.nav a {
padding-inline-start: var(--eds-space-6);
}
/* The frame leaves 32px between the last row and the location line. The
block centres this slot for the desktop row, so the drawer has to say
stretch or the list collapses to its text width. */
.eds-header-root.eds-header--open .eds-header__menu {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: var(--eds-space-7);
}
/* The frame sets the two account buttons side by side and lets them split
the row; the block opens the slot as a block, which stacks them. */
.eds-header-root.eds-header--open .eds-header__account {
display: flex;
}
/* The frame lifts the drawer's header off the list with a shadow, where the
closed header has a hairline border. */
.eds-header-root.eds-header--open .eds-header__row {
position: relative;
z-index: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
@media (max-width: 904.98px) {
.nav ul[data-depth="1"] > li > a::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-inline-start: auto;
opacity: 0.5;
background-color: var(--nav-mobile-chevron-color, #8ba4b8);
mask: var(--_icon-arrow-right) center / contain no-repeat;
}
/* A sub-level row that opens a level of its own swaps the arrow for the
chevron, exactly as the first level does - the size and the strength are
what tell the two rows apart. The frame's own sub-level shows this on
"Документа и уверења"; the pages carry two levels today, so this is the
rule that keeps a third correct when the Razor port adds one. */
.nav ul[data-depth="1"] > li.has-child > a::after {
width: 24px;
height: 24px;
opacity: 1;
mask-image: var(--eid-icon-chevron-down);
}
/* DEVIATION — the frame insets the open submenu inside the drawer rather
than running it full-bleed. */
.nav ul[data-depth="1"] {
padding: var(--eds-space-1) var(--eds-space-2) var(--eds-space-2);
background: var(--nav-mobile-bg, #f8f9ff);
}
/* DEVIATION — the frame's sub-level rule is dashed, 2 on 2; the library
draws every rule solid and exposes a colour hook but no style hook. The
border stays where the library put it, transparent, so the row keeps the
height it was given, and the dashes are painted the way the component
paints its own dashed rule on the desktop row: a repeating gradient.
`--depth` is the library's own indent counter, which Angular sets and a
static list has to state once per level. */
.nav ul[data-depth="1"] > li > a {
--depth: 1;
border-bottom-color: transparent;
background-image: repeating-linear-gradient( to right, var(--nav-mobile-divider-color-nested) 0 2px, transparent 2px 4px );
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1px;
}
/* The sub-level closes on the wrapper's own edge, not on a rule. */
.nav ul[data-depth="1"] > li:last-child > a {
background-image: none;
}
/* The open row's label is the frame's body-large-emphasized, where every
other first-level row is body-large. It also gives up its rule: the frame
rules the group, below the sub-level, not the trigger above it. The
border stays in place, transparent, so opening a row does not move the
rows under it by a pixel. */
.nav ul[data-depth="0"] > li.has-child.open > a {
border-bottom-color: transparent;
font-weight: var(--eds-font-weight-medium);
}
.nav ul[data-depth="0"] > li.has-child.open > ul {
border-bottom: 1px solid var(--nav-mobile-divider-color);
}
/* The row that ends the session is the frame's only error-coloured link. */
.nav ul[data-depth="0"] > li.is-signout > a {
color: var(--eid-color-error);
justify-content: flex-start;
text-align: start;
}
.nav ul[data-depth="0"] > li.is-signout > a::after {
content: none;
}
}
/* -----------------------------------------------------------------------------
5. Footer content
-------------------------------------------------------------------------- */
/* DEVIATION — the block stacks its brand link (logo above wordmark). The frame
reuses the header's horizontal lockup here. */
.eds-footer__brand-link.logo {
flex-direction: row;
gap: var(--eds-footer-brand-gap);
}
.eds-footer .logo__tagline {
white-space: normal;
}
/* Masked so each glyph takes its colour from --eds-footer-color-icon and
reacts to hover, which is what the block's `__social-icon` expects. */
.social--instagram {
/* mask-src: assets/social-instagram.svg */
mask-image: url('data:image/svg+xml,');
}
.social--facebook {
/* mask-src: assets/social-facebook.svg */
mask-image: url('data:image/svg+xml,');
}
.social--x {
/* The exported glyph is the 19.5px inner mark, not a full 24px tile. */
mask-size: 19.5px 19.5px;
/* mask-src: assets/social-x.svg */
mask-image: url('data:image/svg+xml,');
}
.social--youtube {
/* mask-src: assets/social-youtube.svg */
mask-image: url('data:image/svg+xml,');
}
/* 3.5 Skip link ------------------------------------------------------------- */
/* Not part of any block: a static page has no router to move focus, so the
first focusable element jumps past the header. */
.skip-link {
position: absolute;
left: var(--eds-space-4);
top: 0;
z-index: calc(var(--eds-header-open-z, 1000) + 1);
padding: var(--eds-space-3) var(--eds-space-4);
border-radius: 0 0 var(--eds-radius-sm) var(--eds-radius-sm);
background: var(--eds-color-primary);
color: var(--eds-color-on-primary);
font-weight: var(--eds-font-weight-medium);
text-decoration: none;
transform: translateY(-100%);
}
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid var(--eds-color-on-primary);
outline-offset: -4px;
}
/* 3.6 Drawer extras --------------------------------------------------------- */
/* The open-menu frame closes the drawer's list with a row that is not
navigation: the chosen location and a settings button. It exists only while
the drawer is open, which is why the block has no slot for it. */
.menu-extra {
display: none;
align-items: center;
justify-content: space-between;
gap: var(--eds-space-4);
padding: 5px var(--eds-space-4);
}
.eds-header-root.eds-header--open .menu-extra {
display: flex;
}
.menu-extra__group {
display: flex;
align-items: flex-start;
gap: var(--eds-space-2);
}
.menu-extra__text {
display: flex;
flex-direction: column;
gap: 3px;
color: var(--eid-color-brand-dark-blue);
font-size: var(--eds-font-size-body-small);
line-height: var(--eds-line-height-body-small);
letter-spacing: 0.4px;
}
.menu-extra__label {
font-weight: var(--eds-font-weight-medium);
}
.menu-extra__link {
font-weight: 700;
text-decoration-line: underline;
text-underline-position: from-font;
}
.menu-extra__help {
width: 18px;
height: 18px;
opacity: 0.4;
}
/* The frame's small filled button: the library's extra-small square button. */
.button-xs {
padding: 6px 12px;
border: 0;
/* Figma radius/button-xsmall, 4px - the export's radius-sm. */
border-radius: var(--eds-radius-sm);
background: var(--eds-color-primary);
color: var(--eds-color-on-primary);
font-family: inherit;
font-size: var(--eds-font-size-label-small);
line-height: var(--eds-line-height-label-small);
font-weight: var(--eds-font-weight-medium);
letter-spacing: 0.5px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: var(--eid-button-transition);
}
.button-xs:hover {
background: var(--eid-color-primary-hover);
}
/* -----------------------------------------------------------------------------
6. Chrome breakpoints
-------------------------------------------------------------------------- */
@media (min-width: 905px) {
:root {
--page-gutter: var(--eds-space-6);
}
/* One line on the desktop header, which has a row height to hold. */
.eds-header .logo__tagline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: var(--eds-line-height-body-medium);
}
.eds-header .logo__name {
line-height: normal;
}
.eds-footer {
margin-top: 87px;
}
}
/* -----------------------------------------------------------------------------
7. Reduced motion
The navigation-menu carries its own `prefers-reduced-motion` block; the
button transition and the toggle's fold are ours, so they need one too.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.account-button,
.button-xs,
.button,
.eds-header__toggle-icon,
.eds-header__toggle-icon::before,
.eds-header__toggle-icon::after,
.topbar__chevron {
transition: none;
}
}