/* LEDO editorial presentation. Brand colours and type remain defined in ledo.css. */ /* TWO EDGES, NOT ONE (Owner, 2026-09-18: the text sits hard against the left edge of the gradient). `--gutter` is where the DESIGN ends: the rules between blocks and the panels' own backgrounds are drawn on it. `--text-inset` is the little more that the WORDS keep, so a paragraph never touches the edge of the panel it sits in. It is stated once and added by every container, so the whole site moves together and the grid holds; change it here and nothing else. */ :root { --page-width: 92rem; --gutter: clamp(1.25rem, 3.5vw, 3rem); --text-inset: 5px; } body { -webkit-font-smoothing: antialiased; } ::selection { background: var(--blue-bright); color: var(--night); } :where(a, button):focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 5px; } :where(section[id]) { scroll-margin-top: 1.5rem; } .site-header { max-width: var(--page-width); display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.6rem; padding: 1.15rem calc(var(--gutter) + var(--text-inset)); border-bottom: 1px solid var(--line); } .brand { gap: .6rem; font-size: .8rem; letter-spacing: .19em; white-space: nowrap; } /* A soft shadow that follows the emblem's own outline (Owner, 2026-09-19): the cut-out edge of the PNG is a little rough, and a shadow cast from the alpha rather than the box blurs that edge and lifts the badge off the header. Two passes: a tight dark one that swallows the fringe, and a soft wider one that is the actual shadow. */ .brand-logo { width: 5.6rem; height: 5.6rem; filter: drop-shadow(0 0 2px rgb(0 0 0 / 85%)) drop-shadow(0 .5rem 1.1rem rgb(0 0 0 / 70%)); } /* DESKTOP CARRIES IT LARGER (Owner, 2026-09-16, twice again). Only above the burger's breakpoint: on a phone the header is brand, burger and language in one row, and a 180px badge would leave room for nothing else. */ @media (min-width: 1101px) { /* THE ROW MUST FIT THE WINDOW (Owner, 2026-09-19: "on many sizes the site is cut off on the right"). Measured logged out at 1101px the header's content was 1214px: a 179px emblem, a 304px booking button, four links and the language pill, none of them allowed to give. Logged in, the account links add 150px more, and the overflow ran to about 1400px. So between 1101 and 1400 the emblem, the button, the wordmark and the gaps scale with the window - each reaching the size the Owner approved at 1400 and standing there from then on. The button is capped with max-width because nav-booking.css loads later and sets its width. */ .brand-logo { width: clamp(7rem, 12.8vw, 11.2rem); height: clamp(7rem, 12.8vw, 11.2rem); } .site-header { gap: clamp(.9rem, 1.8vw, 1.6rem); } .site-header > nav { min-width: 0; } /* THE MENU LINKS ON A DESKTOP (Owner, 2026-09-19): two steps larger, in capitals, and under the cursor a white bar - three times a hairline - drawn from the link's left edge to its middle, 10px above the text. The bar grows from the left, so the eye reads it as a stroke and not as a switch. */ .site-header > nav .nav-links a { position: relative; /* 14.4px from 1400 up, easing to 12.8 at 1101, so the row that holds the Russian capitals at 1400 also holds them at the narrow end. */ font-size: clamp(.8rem, 1.03vw, .9rem); letter-spacing: .1em; text-transform: uppercase; } .site-header > nav .nav-links a::before { content: ""; position: absolute; left: 0; top: -13px; width: 0; height: 3px; background: #fff; transition: width .22s ease; } .site-header > nav .nav-links a:hover::before, .site-header > nav .nav-links a:focus-visible::before { width: 50%; } @media (prefers-reduced-motion: reduce) { .site-header > nav .nav-links a::before { transition: none; } } /* The account links (Mine reiser / Logg ut, Logg inn / Registrer deg) are a sibling of