/* ATELIER NORR (LC-R3, stream XN): the whole stylesheet of the six Norr pages. ZS's own code. Quiet slow luxury. Self-contained: replaces the old example stack (examples / motion / visual-packaging / approved-refinements / quality-refinements / closure / experience / launch / launch-media / examples-fixes / r3-tokens are NOT linked from the Norr pages any more). Class prefix r3x-norr-, custom properties --nx-*. One grade (the baked plum water, see assets/zs/img/r3-norr-sources.json), one numbering notation, one solid button, no divider lines between sections: sections are separated by space and tone and blend over --fade (140 / 120 / 96 px). Hidden start states hang on html.lib-on only; html.no-motion and no-JS show the complete composed page. Only transform, opacity, clip-path and custom properties move on scroll. Every svh has a vh fallback, every modern plane colour has a flat fallback. Sections: 0 fonts, 1 tokens, 2 base, 3 type, 4 buttons+links, 5 planes, 6 chrome (bar, header, menu, footer, note, dialog, dock), 7 reveal, 8 hero (porthole), 9 statement (ink), 10 chapters (deck), 11 ritual selector, 12 details + invitation, 13 close, 14 inner pages, 99 reduced motion. */ /* ================================ 0. FONTS ================================ */ @font-face { font-family: "Norr Serif"; src: url("/assets/fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Norr Serif"; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Norr Sans"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Norr Sans"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Norr Sans"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; } /* metric-matched fallbacks (same measurements as the ZS foundation): the swap moves nothing */ @font-face { font-family: "Norr Serif Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); font-weight: 400 500; size-adjust: 96.2%; ascent-override: 95.6%; descent-override: 30.1%; line-gap-override: 0%; } @font-face { font-family: "Norr Serif Fallback"; src: local("Times New Roman Bold"), local("Times Bold"), local("Liberation Serif Bold"); font-weight: 600 700; size-adjust: 90.7%; ascent-override: 101.5%; descent-override: 32%; line-gap-override: 0%; } @font-face { font-family: "Norr Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 400; size-adjust: 107%; ascent-override: 90.6%; descent-override: 22.4%; line-gap-override: 0%; } @font-face { font-family: "Norr Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 500; size-adjust: 108.2%; ascent-override: 89.6%; descent-override: 22.2%; line-gap-override: 0%; } @font-face { font-family: "Norr Sans Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 600 800; size-adjust: 101.1%; ascent-override: 95.9%; descent-override: 23.7%; line-gap-override: 0%; } /* ================================ 1. TOKENS ================================ */ :root { --nx-serif: "Norr Serif", "Norr Serif Fallback", Georgia, serif; --nx-sans: "Norr Sans", "Norr Sans Fallback", system-ui, sans-serif; /* plum ground (the baked plum water has this black: r3-norr-hero left edge 22,13,21) */ --nx-floor: #160d15; /* hero plate, the deepest plane */ --nx-night: #1d111b; /* header, footer, details */ --nx-plum: #2b1825; /* deep plum */ --nx-mulberry: #45243a; /* mulberry */ --nx-clay: #6e4350; /* rose clay */ --nx-blush: #e8dbd5; --nx-paper: #f2ede8; --nx-pearl: #f9f4ef; --nx-cream: #f7ece5; /* text on dark */ --nx-cream2: #d9c7c4; /* muted text on dark */ --nx-champ: #e9cfb8; /* accent on dark, ring, em words */ --nx-btn: #efd8c6; /* the solid button on dark */ --nx-tint: #7a4a63; /* the plum-rose the dark/light blends pass through (no grey smoke) */ --nx-ink: #2c2027; /* text on light */ --nx-ink2: #50404a; /* muted text on light */ --nx-wine: #6f424f; /* accent on light */ --nx-gut: clamp(20px, 5vw, 88px); --nx-max: 1280px; --nx-head: 92px; --nx-bar: 52px; /* the ZS demo bar: the 44 px switch + 2 x 4 px padding, as the other five (b6 fix34; was 44) */ --nx-fade: 96px; --nx-ease: cubic-bezier(.22, .61, .36, 1); --nx-ease-io: cubic-bezier(.45, 0, .55, 1); } @media (min-width: 768px) { :root { --nx-fade: 120px; } } @media (min-width: 1100px) { :root { --nx-fade: 140px; } } @media (max-width: 760px) { :root { --nx-bar: 96px; --nx-head: 76px; } } /* RC3: two 44 px rows + 2 x 4 px padding (b6 fix34; was 88) */ @media (max-height: 480px) { .r3x-norr-plane { --nx-fade: 96px; } } /* landscape phones: the phone fade, not 120 px of a 390 px high window (tone rule: ~96 px on a phone); on the planes only, the hero keeps its own melt */ /* ================================ 2. BASE ================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; } html.lib-on { scroll-behavior: smooth; } @media (max-width: 760px) { html { scroll-padding-bottom: 96px; } } /* the phone booking dock must never cover a focused or anchored element */ body.r3x-norr-body { margin: 0; background: var(--nx-floor); color: var(--nx-ink); font: 400 17px/1.65 var(--nx-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } :where(.r3x-norr-body img, .r3x-norr-body svg) { display: block; max-width: 100%; } :where(.r3x-norr-body h1, .r3x-norr-body h2, .r3x-norr-body h3, .r3x-norr-body p, .r3x-norr-body figure, .r3x-norr-body dl, .r3x-norr-body dd) { margin: 0; } :where(.r3x-norr-body a) { color: inherit; text-decoration: none; } :where(.r3x-norr-body button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; } :where(.r3x-norr-body button:disabled) { cursor: default; } .r3x-norr-body :focus-visible { outline: 2px solid var(--fc, currentColor); outline-offset: 4px; } .r3x-norr-body summary:focus-visible { outline-offset: -2px; } .r3x-norr-body .r3x-norr-faq summary:focus-visible { outline-offset: 4px; } :where(.r3x-norr-body em) { font-style: normal; } .r3x-norr-body [hidden] { display: none !important; } html:not(.js) .r3x-norr-body [data-ritual-panel][hidden] { display: block !important; } main { display: block; overflow-x: clip; } .r3x-norr-skip { position: fixed; top: -100px; transform: translateY(-100%); left: 16px; z-index: 99; padding: 14px 18px; background: var(--nx-pearl); color: var(--nx-ink); font: 500 15px/1 var(--nx-sans); border-radius: 6px; } .r3x-norr-skip:focus { top: 16px; transform: none; } .r3x-norr-wrap { position: relative; width: min(var(--nx-max), 100% - 2 * var(--nx-gut)); margin-inline: auto; } /* ================================ 3. TYPE ================================ */ /* serif for every voice that matters; Inter only for labels, UI and body */ .r3x-norr-label { font: 600 13px/1.5 var(--nx-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ac, currentColor); margin-bottom: 1.4rem; } .r3x-norr-stair, .r3x-norr-poster, .r3x-norr-h2 { font-family: var(--nx-serif); font-weight: 400; letter-spacing: -.012em; text-wrap: balance; } .r3x-norr-stair > span, .r3x-norr-poster > span:not(.r3x-norr-w) { display: block; } .r3x-norr-stair > span + span { padding-left: .9em; } /* the staircase: one indent step, about one letter (G-60, template 55) */ .r3x-norr-h2 { font-size: min(clamp(2.55rem, 1.1rem + 4.35vw, 5.6rem), 15vw); line-height: .98; } .r3x-norr-poster { font-size: clamp(2.7rem, .95rem + 5.5vw, 7rem); line-height: 1.02; } .r3x-norr-em { color: var(--ac, inherit); } .r3x-norr-lead { text-wrap: pretty; font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.65 var(--nx-sans); color: var(--tx2, inherit); max-width: 34em; } .r3x-norr-ghost { position: absolute; z-index: 0; margin: 0; font: 400 clamp(9rem, 30vw, 27rem)/.74 var(--nx-serif); letter-spacing: -.03em; color: var(--tx); opacity: .055; pointer-events: none; user-select: none; white-space: nowrap; } /* round 3b-2 (P4-058, P4-045, P4-069, F-39): a ghost word never sits behind a heading or body copy. Measured (evidence/r3/final9/XN/measure/ghost_before.json): at 1440 every one of the 11 ghost words overlapped a headline, a lead, a caption, a button or the fact lines (kontakt: "Göteborg" behind "Inför din stund" and again as the text "Hitta hit: Göteborg" right beside it). The device was also the house tell Glöd shares. So: off from 700 px (the layouts with two columns), and on portrait phones only on two places where it sits in clear space (Hud, De små detaljerna). The words stay in the markup (aria-hidden). */ .r3x-norr-ghost { display: none; } @media (max-width: 699px) and (orientation: portrait) { .r3x-norr-chap--1 > .r3x-norr-ghost, .r3x-norr-details > .r3x-norr-ghost { display: block; } } @media (max-width: 760px) { .r3x-norr-stair > span + span { padding-left: .5em; } } /* ================================ 4. BUTTONS + LINKS ================================ */ .r3x-norr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .9em; min-height: 56px; padding: 0 34px; border-radius: 999px; font: 600 15.5px/1.2 var(--nx-sans); letter-spacing: .01em; text-align: center; transition: background-color .35s var(--nx-ease), color .35s var(--nx-ease), box-shadow .35s var(--nx-ease); } .r3x-norr-btn > span[aria-hidden] { display: inline-block; transition: transform .35s var(--nx-ease); } .r3x-norr-btn--pearl { background: var(--nx-btn); color: #2b1825; --fc: var(--nx-champ); } .r3x-norr-btn--plum { background: var(--nx-plum); color: var(--nx-cream); --fc: var(--nx-wine); } .r3x-norr-btn--xl { min-height: 64px; padding: 0 44px; font-size: 17px; } @media (hover: hover) { .r3x-norr-btn--pearl:hover { background: #fff0e4; } .r3x-norr-btn--plum:hover { background: var(--nx-mulberry); } .r3x-norr-btn:hover > span[aria-hidden] { transform: translate(3px, -3px); } } .r3x-norr-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: 500 15px/1.3 var(--nx-sans); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .42em; background: none; } .r3x-norr-link > span[aria-hidden] { display: inline-block; text-decoration: none; transition: transform .3s var(--nx-ease); } @media (hover: hover) { .r3x-norr-link:hover > span[aria-hidden] { transform: translate(3px, -3px); } } /* ================================ 5. PLANES (tone, never lines) ================================ */ /* a plane paints its own colour below a blend zone of --nx-fade; the zone fades from --from (the plane above) in 8 eased steps; text sits below it (padding-top) */ .r3x-norr-plane { position: relative; isolation: isolate; color: var(--tx); --fc: var(--ac); padding-top: calc(var(--nx-fade) + var(--nx-pt, clamp(40px, 6vw, 96px))); padding-bottom: var(--nx-pb, clamp(56px, 8vw, 128px)); } .r3x-norr-plane::before, .r3x-norr-plane::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; } .r3x-norr-plane::before { top: 0; height: var(--nx-fade); background: var(--c); background: linear-gradient(to bottom, var(--from), var(--c)); } /* plain sRGB blend first; the oklab ramp below replaces it where supported */ .r3x-norr-plane::after { top: calc(var(--nx-fade) - 1px); bottom: 0; background: var(--c); } /* fix round 2 (F-11): a blend between a dark and a light tone does not pass through grey smoke. Its middle is pulled toward the plum hue (--nx-tint, up to 44 % at the centre, a bell over the 140 px) wherever the two neighbours are far apart in lightness (--tw: 1 below); close tones keep the plain oklab ramp. */ @supports (background: color-mix(in oklab, red, blue)) { .r3x-norr-plane::before { background: linear-gradient(to bottom, var(--from) 0%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 9%), color-mix(in oklab, var(--c) 4%, var(--from))) 12.5%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 22%), color-mix(in oklab, var(--c) 16%, var(--from))) 25%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 36%), color-mix(in oklab, var(--c) 32%, var(--from))) 37.5%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 44%), color-mix(in oklab, var(--c) 50%, var(--from))) 50%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 36%), color-mix(in oklab, var(--c) 68%, var(--from))) 62.5%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 22%), color-mix(in oklab, var(--c) 84%, var(--from))) 75%, color-mix(in oklab, var(--nx-tint) calc(var(--tw, 0) * 9%), color-mix(in oklab, var(--c) 96%, var(--from))) 87.5%, var(--c) 100%); } } /* round 3b-2 (P4-059, P4-012): the TINTED BRIDGE (FXL recipe, evidence/r3/final8/FXL/RECIPE.md). The 44 percent pull toward --nx-tint above changes the LIGHTNESS and leaves the chroma of a dark <-> light blend at .037 (rgb 133..146,108..118,119..130: a dusty mauve-grey). Here the eased lightness curve of the plain oklab ramp is kept as it is and only the CHROMA of the middle is lifted, with a bell, in the plum-rose hue of the room (OKLab: + K(t) * .075 * (0, cos 352, sin 352), K = sin(pi t)^2, scaled by --tw: 1 = far-apart neighbours): Cmid .086-.094, hue 352, no plateau, the ends are the neighbours' own colours. Engines without relative colours keep the round-2 block above, which is still correct. */ @supports (color: oklab(from red l a b)) and (background: color-mix(in oklab, red, blue)) { .r3x-norr-plane::before { --nx-ba: calc(.075 * var(--tw, 0) * cos(352deg)); --nx-bb: calc(.075 * var(--tw, 0) * sin(352deg)); background: linear-gradient(to bottom, var(--from) 0%, oklab(from color-mix(in oklab, var(--c) 3%, var(--from)) l calc(a + var(--nx-ba) * 0.0955) calc(b + var(--nx-bb) * 0.0955)) 10%, oklab(from color-mix(in oklab, var(--c) 10%, var(--from)) l calc(a + var(--nx-ba) * 0.3455) calc(b + var(--nx-bb) * 0.3455)) 20%, oklab(from color-mix(in oklab, var(--c) 22%, var(--from)) l calc(a + var(--nx-ba) * 0.6545) calc(b + var(--nx-bb) * 0.6545)) 30%, oklab(from color-mix(in oklab, var(--c) 35%, var(--from)) l calc(a + var(--nx-ba) * 0.9045) calc(b + var(--nx-bb) * 0.9045)) 40%, oklab(from color-mix(in oklab, var(--c) 50%, var(--from)) l calc(a + var(--nx-ba) * 1) calc(b + var(--nx-bb) * 1)) 50%, oklab(from color-mix(in oklab, var(--c) 65%, var(--from)) l calc(a + var(--nx-ba) * 0.9045) calc(b + var(--nx-bb) * 0.9045)) 60%, oklab(from color-mix(in oklab, var(--c) 78%, var(--from)) l calc(a + var(--nx-ba) * 0.6545) calc(b + var(--nx-bb) * 0.6545)) 70%, oklab(from color-mix(in oklab, var(--c) 90%, var(--from)) l calc(a + var(--nx-ba) * 0.3455) calc(b + var(--nx-bb) * 0.3455)) 80%, oklab(from color-mix(in oklab, var(--c) 97%, var(--from)) l calc(a + var(--nx-ba) * 0.0955) calc(b + var(--nx-bb) * 0.0955)) 90%, var(--c) 100%); } } /* clay <-> blush / paper / pearl is also a dark-ish <-> light hand-off (dL .46, before "Ritualer"): --tw never covered it (it measured Cmid .037, hue 10, pink-grey) */ :is(.r3x-norr-t-paper, .r3x-norr-t-blush, .r3x-norr-t-pearl):is(.r3x-norr-f-clay), :is(.r3x-norr-t-clay):is(.r3x-norr-f-paper, .r3x-norr-f-blush, .r3x-norr-f-pearl) { --tw: .7; } /* neighbours of nearly the same tone (light-light, or floor/night) need no 140 px blend: a short one keeps the tone rule and the page shorter (F-14) */ :is(.r3x-norr-t-paper, .r3x-norr-t-blush, .r3x-norr-t-pearl):is(.r3x-norr-f-paper, .r3x-norr-f-blush, .r3x-norr-f-pearl), :is(.r3x-norr-t-floor, .r3x-norr-t-night):is(.r3x-norr-f-floor, .r3x-norr-f-night) { --nx-fade: 64px; } :is(.r3x-norr-t-paper, .r3x-norr-t-blush, .r3x-norr-t-pearl):is(.r3x-norr-f-floor, .r3x-norr-f-night, .r3x-norr-f-plum, .r3x-norr-f-mulberry), :is(.r3x-norr-t-floor, .r3x-norr-t-night, .r3x-norr-t-plum, .r3x-norr-t-mulberry):is(.r3x-norr-f-paper, .r3x-norr-f-blush, .r3x-norr-f-pearl) { --tw: 1; } .r3x-norr-t-floor { --c: var(--nx-floor); --tx: var(--nx-cream); --tx2: var(--nx-cream2); --ac: var(--nx-champ); } .r3x-norr-t-night { --c: var(--nx-night); --tx: var(--nx-cream); --tx2: var(--nx-cream2); --ac: var(--nx-champ); } .r3x-norr-t-plum { --c: var(--nx-plum); --tx: var(--nx-cream); --tx2: var(--nx-cream2); --ac: var(--nx-champ); } .r3x-norr-t-mulberry { --c: var(--nx-mulberry); --tx: var(--nx-cream); --tx2: #e3d3d0; --ac: var(--nx-champ); } .r3x-norr-t-clay { --c: var(--nx-clay); --tx: #fff7f1; --tx2: #f3e4df; --ac: #f6dcc6; } .r3x-norr-t-blush { --c: var(--nx-blush); --tx: var(--nx-ink); --tx2: var(--nx-ink2); --ac: var(--nx-wine); } .r3x-norr-t-paper { --c: var(--nx-paper); --tx: var(--nx-ink); --tx2: var(--nx-ink2); --ac: var(--nx-wine); } .r3x-norr-t-pearl { --c: var(--nx-pearl); --tx: var(--nx-ink); --tx2: var(--nx-ink2); --ac: var(--nx-wine); } .r3x-norr-f-floor { --from: var(--nx-floor); } .r3x-norr-f-night { --from: var(--nx-night); } .r3x-norr-f-plum { --from: var(--nx-plum); } .r3x-norr-f-mulberry { --from: var(--nx-mulberry); } .r3x-norr-f-clay { --from: var(--nx-clay); } .r3x-norr-f-blush { --from: var(--nx-blush); } .r3x-norr-f-paper { --from: var(--nx-paper); } .r3x-norr-f-pearl { --from: var(--nx-pearl); } /* ================================ 6. CHROME ================================ */ /* the ZS bar (ZS ink, always) */ .r3x-norr-bar { position: relative; z-index: 50; display: flex; align-items: center; gap: 22px; min-height: var(--nx-bar); padding: 4px var(--nx-gut); background: #0c0c0f; color: #f3f0ea; font: 500 14px/1.4 var(--nx-sans); letter-spacing: .02em; } .r3x-norr-bar > a { display: inline-flex; align-items: center; min-height: 44px; } .r3x-norr-bar > span { margin-right: auto; } .r3x-norr-bar b { font-weight: 600; color: #dcbc7e; margin-left: 4px; } .r3x-norr-bar :focus-visible { outline: 2px solid #dcbc7e; outline-offset: 1px; } /* THE demo-bar motion control, round 3b-2 (P4-064, 075, 089, 096, 138): ONE component for all six examples (reusable copy: evidence/r3/final8/XM/demo_bar_component.css + .js, proven in Smula). ONE constant visible label and accessible name "Pausa rörelse"; aria-pressed="true" = motion is off; the state is DRAWN as a switch (aria-hidden track + knob, knob right on a gold track = paused), not as the ambiguous word ": på"; a button of at least 44 x 44 px everywhere; with the system's reduced motion the same switch is shown thrown and the button is disabled, "Minskad rörelse" is its title and description. The drawn pill is 36 px high inside the 44 px hit area, so the bar keeps its 44 px (72 px on phones) and the first screen under it does not move. */ .zs-mo { --mo-fg: #f3f0ea; --mo-ink: #0c0c0f; --mo-gold: #dcbc7e; position: relative; display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 18px 0 17px; margin: 0; font: inherit; line-height: 1.2; color: inherit; white-space: nowrap; cursor: pointer; background: transparent; border: 0; border-radius: 999px; -webkit-tap-highlight-color: transparent; } .zs-mo::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(243, 240, 234, .38); border-radius: 999px; pointer-events: none; transition: background-color .2s, border-color .2s; } .zs-mo > * { position: relative; } @media (hover: hover) { .zs-mo:hover:not(:disabled)::before { background: rgba(243, 240, 234, .12); } } .zs-mo[aria-pressed="true"]::before { background: rgba(243, 240, 234, .12); border-color: rgba(243, 240, 234, .62); } .zs-mo:disabled { opacity: .72; cursor: default; } .r3x-norr-bar .zs-mo:focus-visible { outline: 2px solid var(--mo-gold); outline-offset: -2px; } /* a capsule ring on the 44 px target itself, inside the bar (never clipped by the top of the window) */ .zs-mo__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66); background: transparent; transition: background-color .2s, border-color .2s; } .zs-mo__sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--mo-fg); transition: transform .22s cubic-bezier(.25, .46, .45, .94), background-color .2s; } .zs-mo[aria-pressed="true"] .zs-mo__sw { background: var(--mo-gold); border-color: var(--mo-gold); } .zs-mo[aria-pressed="true"] .zs-mo__sw i { transform: translateX(14px); background: var(--mo-ink); } .zs-mo[hidden] { display: none; } html.no-motion .zs-mo__sw, html.no-motion .zs-mo__sw i, html.no-motion .zs-mo::before { transition: none; } @media (prefers-reduced-motion: reduce) { .zs-mo__sw, .zs-mo__sw i, .zs-mo::before { transition: none; } } @media (max-width: 1099px) { .r3x-norr-bar .zs-mo { font-size: 14px; } } /* 14 px type below 1100 px */ @media (max-width: 760px) { .r3x-norr-bar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 44px 44px; gap: 0 12px; padding: 4px max(20px, 5vw); font-size: 14px; } .r3x-norr-bar > a:first-child { grid-row: 1; min-height: 44px; } .r3x-norr-bar > span { grid-row: 1; grid-column: 2; margin: 0; text-align: right; } /* F-17 / b6 TYP-08: the disclosure label inherits the bar size (14 px), never below 13 px */ .r3x-norr-bar > .zs-mo { grid-row: 2; justify-self: start; } .r3x-norr-bar > a:last-child { grid-row: 2; grid-column: 2; justify-self: end; min-height: 44px; font-size: 14px; } } /* header: floats over the first plane (negative margin keeps the DOM order) */ .r3x-norr-head { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nx-head); margin-bottom: calc(-1 * var(--nx-head)); padding: 0 var(--nx-gut); color: var(--nx-cream); --fc: var(--nx-champ); } .r3x-norr-word { display: inline-flex; align-items: center; min-height: 44px; font: 400 clamp(1.15rem, 1rem + .55vw, 1.5rem)/1 var(--nx-serif); letter-spacing: .24em; white-space: nowrap; } /* the logo link is a 44 px high target (was 18 px: WCAG 2.5.8) */ .r3x-norr-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); } .r3x-norr-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--nx-sans); letter-spacing: .02em; } .r3x-norr-nav a:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--nx-ease); } .r3x-norr-nav a[aria-current="page"]:not(:last-child)::after { transform: scaleX(1); } @media (hover: hover) { .r3x-norr-nav a:not(:last-child):hover::after { transform: scaleX(1); } } .r3x-norr-nav a:last-child { padding: 0 24px; border: 1px solid rgba(247, 236, 229, .55); border-radius: 999px; transition: background-color .35s var(--nx-ease), color .35s var(--nx-ease); } @media (hover: hover) { .r3x-norr-nav a:last-child:hover { background: var(--nx-btn); color: #2b1825; } } .r3x-norr-nav a[aria-current="page"]:last-child { background: var(--nx-btn); color: #2b1825; } .r3x-norr-menu { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 14px; font: 500 14px/1 var(--nx-sans); letter-spacing: .04em; } .r3x-norr-menu__i { display: inline-block; font-size: 20px; transition: transform .35s var(--nx-ease); } .r3x-norr-menu[aria-expanded="true"] .r3x-norr-menu__i { transform: rotate(45deg); } @media (max-width: 699px) { .r3x-norr-menu { display: inline-flex; position: relative; z-index: 2; } .r3x-norr-word { position: relative; z-index: 2; } .r3x-norr-nav { position: fixed; z-index: 1; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 96px var(--nx-gut) 48px; background: var(--nx-floor); visibility: hidden; opacity: 0; transition: opacity .4s var(--nx-ease), visibility 0s linear .4s; } .r3x-norr-nav.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--nx-ease), visibility 0s; } .r3x-norr-nav a { min-height: 64px; font: 400 clamp(2.4rem, 11vw, 3.6rem)/1.1 var(--nx-serif); letter-spacing: -.01em; } .r3x-norr-nav a:not(:last-child)::after { display: none; } .r3x-norr-nav a[aria-current="page"]:not(:last-child) { color: var(--nx-champ); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } /* b6 MN-07: not colour alone */ .r3x-norr-nav a:last-child { margin-top: 20px; min-height: 56px; padding: 0 34px; font: 600 16px/1 var(--nx-sans); border-color: var(--nx-btn); } html.nx-menu-open { overflow: hidden; } html.nx-menu-open .r3x-norr-head { z-index: 60; } } /* P4-093: the menu on landscape phones narrower than 700 px (667x375, 640x360, 568x320). The portrait panel (centred column, 64 px rows in 40-58 px type) is about 400 px tall: it spilled over the wordmark, hid behind the demo bar and clipped the Boka button. Here the panel starts below the wordmark row (bar + header), the links are a two-column list of 48 px rows in 26-31 px type, the Boka button follows the list, and the panel scrolls by itself (overscroll contained) if a window is ever shorter still. Never taller than the window. */ @media (max-width: 699px) and (max-height: 480px) { .r3x-norr-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; align-items: center; justify-content: stretch; column-gap: 24px; row-gap: 0; padding: calc(var(--nx-bar) + var(--nx-head) + 2px) max(var(--nx-gut), env(safe-area-inset-right, 0px)) 16px max(var(--nx-gut), env(safe-area-inset-left, 0px)); max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .r3x-norr-nav a { min-height: 48px; font-size: clamp(1.6rem, 4.6vw, 1.95rem); line-height: 1.15; } .r3x-norr-nav a:last-child { grid-column: 1; justify-self: start; margin-top: 6px; min-height: 48px; padding: 0 30px; font: 600 15px/1 var(--nx-sans); } } /* footer: the name as a graphic word, edge to edge (G-58, G-59); never through a letter, 12 characters */ .r3x-norr-foot { --nx-pt: clamp(28px, 4vw, 56px); --nx-pb: clamp(24px, 2.4vw, 40px); color: var(--tx); } .r3x-norr-foot__home { display: block; width: min(var(--nx-max), 100% - 2 * var(--nx-gut)); margin: 0 auto clamp(20px, 3vw, 40px); } .r3x-norr-foot__word { width: 100%; height: auto; aspect-ratio: 1000 / 150; overflow: visible; } .r3x-norr-foot__word text { font-family: var(--nx-serif); font-weight: 400; fill: var(--nx-cream); } .r3x-norr-foot__grid, .r3x-norr-foot__note { width: min(var(--nx-max), 100% - 2 * var(--nx-gut)); margin-inline: auto; } .r3x-norr-foot__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; } .r3x-norr-foot__sig p { margin-top: 14px; font-size: 14px; color: var(--tx2); } .r3x-norr-foot__label { font: 600 13px/1.5 var(--nx-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ac); margin-bottom: 8px; } .r3x-norr-foot nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .r3x-norr-foot nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .4em; transition: text-decoration-color .3s; } @media (hover: hover) { .r3x-norr-foot nav a:hover { text-decoration-color: currentColor; } } .r3x-norr-foot__note { margin-top: clamp(20px, 3vw, 36px); padding-top: 0; font-size: 13px; line-height: 1.6; color: var(--tx2); max-width: 46em; margin-left: max(var(--nx-gut), calc((100% - var(--nx-max)) / 2)); } @media (max-width: 760px) { .r3x-norr-foot__grid { grid-template-columns: 1fr; gap: 28px; } } /* the ZS package note: ZS ink (not the example's palette), price in the one serif price style */ .r3x-norr-note { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: clamp(32px, 4.5vw, 60px) var(--nx-gut); background: #0c0c0f; color: #f3f0ea; font: 400 14px/1.65 var(--nx-sans); --fc: #dcbc7e; } .r3x-norr-note h2 { font: 500 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.2 var(--nx-sans); letter-spacing: -.02em; margin-bottom: 16px; } .r3x-norr-note p { color: #c9c5bc; max-width: 52ch; } .r3x-norr-note .eyebrow { font: 600 13px/1.5 var(--nx-sans); letter-spacing: .15em; text-transform: uppercase; color: #dcbc7e; margin-bottom: 18px; } .r3x-norr-note .package-price { font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--nx-serif); color: #f3f0ea; margin-bottom: 18px; } .r3x-norr-note .package-price span { display: inline-block; margin-left: 10px; font: 400 14px/1 var(--nx-sans); color: #c9c5bc; } .r3x-norr-note .r3x-norr-link { margin: 12px 20px 0 0; color: #f3f0ea; } /* P4-041: the ask of the package band is a PILL on every example (Smula, Kvarteret and Lumen have one; here it was a small text link beside two others, the weakest ask for the highest price): gold on Premium Max */ .r3x-norr-note .r3x-norr-note__cta { min-height: 54px; padding: 0 24px; margin: 12px 10px 0 0; border-radius: 999px; background: #dcbc7e; color: #0c0c0f; font-weight: 600; text-decoration: none; transition: background-color .3s var(--nx-ease); } .r3x-norr-note .r3x-norr-note__cta:focus-visible { outline: 2px solid #f3f0ea; outline-offset: 3px; } @media (hover: hover) { .r3x-norr-note .r3x-norr-note__cta:hover { background: #ecd29c; } } @media (max-width: 420px) { .r3x-norr-note .r3x-norr-note__cta { display: flex; justify-content: center; width: 100%; margin-right: 0; } } @media (max-width: 760px) { .r3x-norr-note { grid-template-columns: 1fr; gap: 28px; } } /* booking dialog */ .r3x-norr-dialog { border: 0; padding: 0; width: min(560px, 100% - 32px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); background: var(--nx-paper); color: var(--nx-ink); border-radius: 4px; --fc: var(--nx-wine); } .r3x-norr-dialog::backdrop { background: rgba(12, 6, 12, .78); } .r3x-norr-dialog > div { padding: 40px; display: grid; gap: 14px; justify-items: start; } .r3x-norr-dialog .r3x-norr-label { color: var(--nx-wine); margin-bottom: 0; } .r3x-norr-dialog h2 { font: 400 min(clamp(2rem, 1.5rem + 2vw, 2.8rem), 17vw)/1.05 var(--nx-serif); } .r3x-norr-dialog p { font-size: 15px; color: var(--nx-ink2); } @media (max-width: 760px) { .r3x-norr-dialog > div { padding: 28px 22px; } } @media (max-height: 480px) { .r3x-norr-dialog > div { padding: 18px 22px; gap: 8px; } .r3x-norr-dialog h2 { font-size: 1.65rem; } .r3x-norr-dialog p { font-size: 14px; } .r3x-norr-dialog .r3x-norr-btn { min-height: 48px; } .r3x-norr-dialog .r3x-norr-link { min-height: 40px; } } /* b6 fix63: the whole dialog fits a landscape phone */ /* sticky booking dock on phones (inert and hidden until the hero has been left; never over the close) */ .r3x-norr-dock { display: none; } @media (max-width: 760px) { .r3x-norr-dock { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(22, 13, 21, .96) 55%, rgba(22, 13, 21, 0)); transform: translateY(110%); opacity: 0; visibility: hidden; transition: transform .5s var(--nx-ease), opacity .4s var(--nx-ease), visibility 0s linear .5s; pointer-events: none; } .r3x-norr-dock.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--nx-ease), opacity .4s var(--nx-ease), visibility 0s; pointer-events: auto; } .r3x-norr-dock .r3x-norr-btn { width: 100%; max-width: 360px; min-height: 52px; box-shadow: 0 8px 24px rgba(12, 6, 12, .55); } } /* landscape phones and short windows: a compact pill in the bottom-right corner (no full-width band over a 360 px high window); the strip beside it stays clickable */ @media (max-width: 760px) and (max-height: 480px) { html { scroll-padding-bottom: 72px; } .r3x-norr-dock { left: auto; justify-content: flex-end; padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) 16px; background: none; } .r3x-norr-dock .r3x-norr-btn { width: auto; max-width: none; min-height: 48px; padding: 0 26px; font-size: 14.5px; } } html.no-motion .r3x-norr-dock { transition: none; } @media (max-width: 400px) { .r3x-norr-bar { padding-inline: 20px; column-gap: 8px; letter-spacing: 0; } } /* 320 px: the 12 px disclosure label and the link share one row */ /* ================================ 7. REVEAL ================================ */ html.lib-on .r3x-norr-rise { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.2s var(--nx-ease), transform 1.2s var(--nx-ease); transition-delay: calc(var(--i, 0) * 70ms); } html.lib-on .r3x-norr-rise.is-in { opacity: 1; transform: none; } html.lib-on:not(.nx-ready) .r3x-norr-rise { animation: nx-failsafe 0s linear 2.6s forwards; } @keyframes nx-failsafe { to { opacity: 1; transform: none; } } /* ================================ 8. HERO: the porthole (template 53, G-03, W-05 round variant) ================================ */ /* Fix round 2 (F-01): the first screen is ONE photographic world. A dim copy of the plate (the world) fills the whole stage and a lit round window (the porthole, clip-path circle, template 53) opens onto the same picture at the same scale, so hand, petals and water stay in view and the plum field is never empty. One composition engine (container units on .r3x-norr-hero__box) serves desktop, tablet and landscape phones; portrait phones keep the composed stack below. Nothing here holds the LCP picture at opacity 0: the entrance is a 0.4 s lift of a floor-coloured overlay (F-06 method) plus a transform-only settle. */ .r3x-norr-hero { position: relative; background: var(--nx-floor); color: var(--nx-cream); --fc: var(--nx-champ); } .r3x-norr-hero__stage { position: relative; isolation: isolate; padding: calc(var(--nx-head) + 22px) var(--nx-gut) clamp(40px, 8vw, 72px); } /* ambient glow of the same picture (pre-blurred 480 px derivative, no live blur): the plum field behind the porthole is photographic, never flat */ .r3x-norr-hero__stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("/assets/zs/img/r3-g-atmos-norr-480.webp") 74% 50% / auto 112% no-repeat; opacity: .44; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 80%); } .r3x-norr-hero__box { display: grid; justify-items: start; gap: 0; width: min(var(--nx-max), 100%); margin-inline: auto; } .r3x-norr-hero__copy { display: contents; } .r3x-norr-hero__k { order: 1; color: var(--nx-champ); } .r3x-norr-hero__h1 { order: 2; font-size: clamp(3rem, 1rem + 8.6vw, 6.6rem); line-height: .96; margin-bottom: clamp(24px, 5vw, 40px); } .r3x-norr-hero__h1 .r3x-norr-em, .r3x-norr-hero__h1 > span + span { color: var(--nx-champ); } .r3x-norr-hero__plate { order: 3; position: relative; width: min(86vw, 520px, 48vh); width: min(86vw, 520px, 48svh); aspect-ratio: 1; align-self: center; justify-self: center; border-radius: 50%; outline: 1px solid rgba(233, 207, 184, .5); outline-offset: 10px; overflow: hidden; } /* overflow: the slow push-in of the picture (8b) never leaves its round frame */ .r3x-norr-hero__plate picture { display: contents; } .r3x-norr-hero__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* XN2: the living water. Two warped copies of the plate (r3x-norr.js adds them after the first paint, only when motion is allowed) cross-fade over it, see section 8b. Never in the markup: no request without motion. */ .r3x-norr-hero__wv, .r3x-norr-hero__wvw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; pointer-events: none; user-select: none; } .r3x-norr-hero__lt { position: absolute; left: 22%; top: 0; width: 56%; height: 100%; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(ellipse 50% 46% at 50% 54%, rgba(255, 214, 176, .95) 0, rgba(255, 190, 150, .45) 45%, rgba(255, 170, 130, 0) 100%); } .r3x-norr-hero__world, .r3x-norr-hero__ring, .r3x-norr-hero__second, .r3x-norr-hero__cue, .r3x-norr-hero__veil, .r3x-norr-hero__melt { display: none; } .r3x-norr-hero__foot { order: 4; display: grid; gap: 20px; justify-items: start; margin-top: clamp(28px, 6vw, 48px); } .r3x-norr-hero__foot p { font: 400 1.0625rem/1.55 var(--nx-sans); color: var(--nx-cream); } /* the first screen is never held at opacity 0: a floor-coloured overlay lifts in 0.4 s while the picture settles (transform only) */ html.lib-on .r3x-norr-hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--nx-floor); animation: nx-lift .4s linear both; } @keyframes nx-lift { from { opacity: 1; } to { opacity: 0; } } html.lib-on .r3x-norr-hero__plate { animation: nx-breathe 1.4s var(--nx-ease) both; } @keyframes nx-breathe { from { transform: scale(.95); } to { transform: none; } } /* P4-143: the whole engine below is written in container-query units (cqw / cqh) on a size container. An engine without them (Chrome before 105, Safari before 16, Firefox before 110) drops every declaration that uses one and would draw a broken stage, so the engine only exists where the container is supported; everywhere else the composed stack above (copy, then the round picture) is the first screen, which is the portrait-phone layout and complete. */ @supports (container-type: size) { /* THE ENGINE: desktop, tablet and landscape phones (>= 700 px wide, or a landscape window >= 560 px). The stage is a box of container units. */ @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .r3x-norr-hero__stage { height: calc(100vh - var(--nx-bar)); height: calc(100svh - var(--nx-bar)); min-height: 300px; padding: 0; overflow: clip; } .r3x-norr-hero__stage::before { background-position: 72% 50%; background-size: cover; opacity: .3; } html.lib-on .r3x-norr-hero__plate { animation: none; } /* the lift of the overlay is the entrance here; the desktop block below adds its own transform-only settle */ .r3x-norr-hero__box { position: absolute; left: 50%; top: 0; bottom: 0; width: min(100%, 1920px); transform: translateX(-50%); display: block; container-type: size; margin: 0; --nx-cx: 71%; --nx-cxn: 71; --nx-cy: 50%; --nx-cyn: 50; --nx-ax: .68; --nx-ay: .42; --nx-s0: .86; --nx-rf: .355; /* the picture is never drawn larger than 920 px high (source 854 px): on taller windows the stage's glow carries the rest */ --nx-ih: min(max(104cqh, calc(100cqw / 2.1569)), 920px); --nx-iw: calc(var(--nx-ih) * 2.1569); --nx-r0: min(calc(var(--nx-ih) * var(--nx-rf)), 28cqw); /* the widest headline that keeps "Kom tillbaka" (4.92 em wide) a clear 32 px left of the circle: gutter + 4.95 em + 32 px <= circle left edge */ --nx-h1cap: calc((var(--nx-cxn) * 1cqw - var(--nx-r0) - var(--nx-gut) - 32px) / 4.95); } /* the world: the whole picture, dim, registered with the porthole (same box, same scale, same anchor) */ .r3x-norr-hero__world { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; /* the dim world is gone 100 px above the foot of the stage, so the join with the next plane is a plain floor tone (boundary check) */ -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent calc(100% - 100px)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent calc(100% - 100px)); } .r3x-norr-hero__world picture { display: contents; } .r3x-norr-hero__wimg, .r3x-norr-hero__wvw { position: absolute; max-width: none; border-radius: 0; height: var(--nx-ih); width: var(--nx-iw); opacity: .42; left: calc(var(--nx-cxn) * 1cqw - var(--nx-iw) * var(--nx-ax)); top: calc(var(--nx-cyn) * 1cqh - var(--nx-ih) * var(--nx-ay)); transform-origin: calc(var(--nx-ax) * 100%) calc(var(--nx-ay) * 100%); transform: translate3d(0, var(--nx-ty, 0px), 0) scale(var(--nx-ps, var(--nx-s0))); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 84%, transparent 100%); mask-composite: intersect; } .r3x-norr-hero__plate { position: absolute; inset: 0; width: auto; aspect-ratio: auto; align-self: auto; justify-self: auto; border-radius: 0; outline: 0; overflow: hidden; clip-path: circle(var(--nx-r, var(--nx-r0)) at var(--nx-cx) var(--nx-cy)); } .r3x-norr-hero__img, .r3x-norr-hero__wv { position: absolute; max-width: none; border-radius: 0; height: var(--nx-ih); width: var(--nx-iw); left: calc(var(--nx-cxn) * 1cqw - var(--nx-iw) * var(--nx-ax)); top: calc(var(--nx-cyn) * 1cqh - var(--nx-ih) * var(--nx-ay)); transform-origin: calc(var(--nx-ax) * 100%) calc(var(--nx-ay) * 100%); transform: translate3d(0, var(--nx-ty, 0px), 0) scale(var(--nx-ps, var(--nx-s0))); /* the photograph melts into the floor at its own edges (they only show once the window opens on a screen wider than the picture) */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 88%, transparent 100%); mask-composite: intersect; } /* the soft light that travels over the face is registered with the picture like the picture itself (same anchor, same scroll scale), a half-width box centred on the face */ .r3x-norr-hero__lt { left: calc(var(--nx-cxn) * 1cqw - var(--nx-iw) * var(--nx-ax) + var(--nx-iw) * .41); top: calc(var(--nx-cyn) * 1cqh - var(--nx-ih) * var(--nx-ay)); width: calc(var(--nx-iw) * .5); height: var(--nx-ih); transform-origin: calc((var(--nx-ax) - .41) / .5 * 100%) calc(var(--nx-ay) * 100%); transform: translate3d(0, var(--nx-ty, 0px), 0) scale(var(--nx-ps, var(--nx-s0))); } .r3x-norr-hero__ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: var(--nx-ringo, 1); } .r3x-norr-hero__ring circle { cx: var(--nx-cx); cy: var(--nx-cy); r: var(--nx-r, var(--nx-r0)); fill: none; stroke: rgba(233, 207, 184, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; } /* the copy: one column, vertically centred in the left field (label, headline, ask) */ .r3x-norr-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: absolute; inset: 0; z-index: 3; padding: calc(var(--nx-head) * .8) 0 4cqh var(--nx-gut); pointer-events: none; } .r3x-norr-hero__copy > * { pointer-events: auto; } .r3x-norr-hero__k { margin: 0 0 3cqh; } .r3x-norr-hero__h1 { margin: 0; font-size: min(9.3cqw, 17cqh, var(--nx-h1cap)); line-height: .94; } .r3x-norr-hero__foot { margin: 6cqh 0 0; width: min(31em, 38cqw); gap: 20px; } .r3x-norr-hero__second { display: block; position: absolute; z-index: 3; left: var(--nx-gut); bottom: 14cqh; margin: 0; font: 400 min(8.4cqw, 15cqh)/.94 var(--nx-serif); letter-spacing: -.012em; color: var(--nx-cream); opacity: 0; visibility: hidden; } .r3x-norr-hero__second span { display: block; } .r3x-norr-hero__second span + span { padding-left: .9em; color: var(--nx-champ); } /* decorative scene layers never take a pointer: the aria-hidden "En annan rytm." sits above the ask (same box, later in the DOM) and used to swallow every click and tap on "Hitta din ritual" (XN fix 1). The cue stays a real link; r3x-norr.js makes it inert once it has faded out. */ .r3x-norr-hero__world, .r3x-norr-hero__world *, .r3x-norr-hero__second, .r3x-norr-hero__second *, .r3x-norr-hero__ring, .r3x-norr-hero__ring *, .r3x-norr-hero__veil, .r3x-norr-hero__melt { pointer-events: none; user-select: none; } .r3x-norr-hero__cue { display: inline-flex; align-items: center; gap: 10px; position: absolute; z-index: 3; right: var(--nx-gut); bottom: 6cqh; min-height: 44px; font: 500 13.5px/1 var(--nx-sans); letter-spacing: .06em; color: var(--nx-cream); } .r3x-norr-hero__cue span { display: inline-block; animation: nx-cue 2.8s var(--nx-ease-io) infinite; } @keyframes nx-cue { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(5px); } } html.no-motion .r3x-norr-hero__cue span { animation: none; } /* header scrim and the melt of the plate into the floor (no hard photo edge, ever) */ .r3x-norr-hero__veil, .r3x-norr-hero__melt { display: block; position: absolute; left: calc(50% - 50vw); width: 100vw; z-index: 2; pointer-events: none; } .r3x-norr-hero__veil { top: 0; height: 150px; background: linear-gradient(to bottom, var(--nx-floor), rgba(22, 13, 21, 0)); } .r3x-norr-hero__melt { bottom: 0; height: var(--nx-fade); background: linear-gradient(to top, var(--nx-floor), rgba(22, 13, 21, 0)); } } /* the box edges sit inside the window once it is wider than 1920 px: the stage's own glow carries the rest */ @media (min-width: 1700px) and (min-height: 560px) { .r3x-norr-hero__stage::before { opacity: .4; } } /* windows 1024-1280 wide: the circle sits a little further right to leave the headline its room */ @media (min-width: 700px) and (max-width: 1280px) and (min-height: 560px) { .r3x-norr-hero__box { --nx-cx: 73%; --nx-cxn: 73; --nx-rf: .34; --nx-r0: min(calc(var(--nx-ih) * var(--nx-rf)), 27cqw); } } /* tablets in portrait: copy on top, the porthole below it, the world rises from the bottom of the stage */ @media (min-width: 700px) and (max-width: 1023px) and (orientation: portrait) { .r3x-norr-hero__stage { height: min(calc(100vh - var(--nx-bar)), 900px); height: min(calc(100svh - var(--nx-bar)), 900px); } .r3x-norr-hero__box { --nx-cx: 66%; --nx-cxn: 66; --nx-cy: 60%; --nx-cyn: 60; --nx-ih: min(72cqh, 700px); --nx-r0: min(30cqw, calc(var(--nx-ih) * .36)); --nx-ay: .44; --nx-s0: 1; --nx-h1cap: 11.4cqw; } .r3x-norr-hero__copy { justify-content: flex-start; padding: calc(var(--nx-head) + 5cqh) 0 0 var(--nx-gut); } .r3x-norr-hero__h1 { font-size: min(11.4cqw, 9.2cqh); } .r3x-norr-hero__k { margin-bottom: 2.4cqh; } .r3x-norr-hero__foot { margin-top: 4cqh; width: min(24em, 44cqw, calc(var(--nx-cxn) * 1cqw - var(--nx-r0) - var(--nx-gut) - 8px)); } .r3x-norr-hero__second { bottom: 8cqh; } } /* landscape phones and short windows: copy left, a large porthole right, nothing below the fold that the ask needs */ @media (min-width: 560px) and (orientation: landscape) and (max-height: 559px) { :root { --nx-head: 60px; } .r3x-norr-hero__box { --nx-cx: 74%; --nx-cxn: 74; --nx-cy: 58%; --nx-cyn: 58; --nx-ay: .42; --nx-s0: 1; --nx-r0: min(36cqh, 24cqw); --nx-h1cap: 11cqh; } /* RC3 MP-02: the ring top clears the 60 px header */ .r3x-norr-hero__copy { padding: calc(var(--nx-head) * .8) 0 3cqh var(--nx-gut); } .r3x-norr-hero__k { margin-bottom: 1.5cqh; } .r3x-norr-hero__h1 { font-size: min(9cqw, 15.5cqh, var(--nx-h1cap)); } .r3x-norr-hero__foot { margin-top: 4cqh; gap: 10px; width: min(26em, 52cqw); } .r3x-norr-hero__foot p { font-size: .875rem; line-height: 1.4; } .r3x-norr-hero__foot .r3x-norr-btn { min-height: 46px; padding: 0 26px; } .r3x-norr-hero__second, .r3x-norr-hero__cue { display: none; } } /* desktop: motion on = a pinned runway; the porthole grows into the full frame (--nx-p 0..1 is written by r3x-norr.js, everything else is custom-property maths) */ @media (min-width: 1024px) and (min-height: 560px) { html.lib-on .r3x-norr-hero { height: calc(100vh + 230vh); height: calc(100svh + 230svh); } html.lib-on .r3x-norr-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: calc(-1 * var(--nx-bar)); padding-top: 0; } html.lib-on .r3x-norr-hero__box { --nx-t: clamp(0, (var(--nx-p, 0) - .10) / .52, 1); --nx-e: calc(var(--nx-t) * var(--nx-t) * (3 - 2 * var(--nx-t))); --nx-r: calc(var(--nx-r0) + (var(--nx-r1, 112cqw) - var(--nx-r0)) * var(--nx-e)); --nx-ps: calc(var(--nx-s0) + (1 - var(--nx-s0)) * var(--nx-e)); --nx-ty: calc(var(--nx-e) * (var(--nx-ih) * var(--nx-ay) - var(--nx-cyn) * 1cqh)); --nx-ringo: calc(1 - clamp(0, (var(--nx-e) - .55) / .35, 1)); --nx-away: clamp(0, (var(--nx-p, 0) - .04) / .12, 1); /* the headline has gone before the growing circle reaches it (p .16), so it never runs over skin */ --nx-in2: clamp(0, (var(--nx-p, 0) - .74) / .16, 1); } html.lib-on .r3x-norr-hero__k, html.lib-on .r3x-norr-hero__h1, html.lib-on .r3x-norr-hero__foot { opacity: calc(1 - var(--nx-away)); transform: translate3d(0, calc(var(--nx-away) * -22px), 0); } html.lib-on .r3x-norr-hero__cue { opacity: calc(1 - var(--nx-away) * 2.4); } html.lib-on .r3x-norr-hero__second { visibility: visible; opacity: var(--nx-in2); transform: translate3d(0, calc((1 - var(--nx-in2)) * 26px), 0); } html.lib-on .r3x-norr-hero[data-state="open"] .r3x-norr-hero__copy, html.lib-on .r3x-norr-hero[data-state="open"] .r3x-norr-hero__cue { visibility: hidden; } html.lib-on .r3x-norr-hero__plate, html.lib-on .r3x-norr-hero__world { transform-origin: var(--nx-cx) var(--nx-cy); animation: nx-settle 1.6s var(--nx-ease) both; } @keyframes nx-settle { from { transform: scale(1.05); } to { transform: none; } } } } /* ================================ 8b. HERO: the living water (XN2, round 3c) ================================ */ /* David (batch 2): light, water, petals and slow zoom "ALMOST IMPERCEPTIBLE, not like an effect". Everything here hangs on .nx-live, which r3x-norr.js sets after the first paint and only while motion is allowed (never under reduced motion, the demo bar's pause, Save-Data or 2g); the static page is the composed poster. Compositor properties only (scale, opacity). The pictures, the dim world and the two warped copies all carry the SAME push-in (same duration, same start, same origin), so they stay registered to the pixel. */ .r3x-norr-hero .r3x-norr-hero__wv, .r3x-norr-hero .r3x-norr-hero__wvw { opacity: 0; } .r3x-norr-hero.nx-live .r3x-norr-hero__img, .r3x-norr-hero.nx-live .r3x-norr-hero__wimg { animation: nx-push 38s var(--nx-ease-io) infinite alternate; } .r3x-norr-hero.nx-live .r3x-norr-hero__wv, .r3x-norr-hero.nx-live .r3x-norr-hero__wvw { --nx-wvmax: .62; animation: nx-push 38s var(--nx-ease-io) infinite alternate, nx-wv 26s var(--nx-ease-io) infinite backwards; } .r3x-norr-hero.nx-live .r3x-norr-hero__wvw { --nx-wvmax: .26; } /* the dim world carries the plate at .42: the copies peak at .42 of their porthole value */ .r3x-norr-hero.nx-live [data-v="b"] { animation-delay: 0s, 13s; } @keyframes nx-push { from { scale: 1; } to { scale: 1.012; } } @keyframes nx-wv { 0%, 100% { opacity: 0; } 24% { opacity: var(--nx-wvmax, .5); } 48% { opacity: 0; } } html .r3x-norr-hero.nx-live.nx-idle * { animation-play-state: paused; } /* off screen: nothing runs (html in front: beats the animation shorthands above, whatever their order) */ .r3x-norr-hero.nx-live .r3x-norr-hero__lt { --nx-ltmax: .26; animation: nx-lt 40s var(--nx-ease-io) infinite alternate; } @keyframes nx-lt { 0% { translate: -24% 0; opacity: 0; } 16%, 84% { opacity: var(--nx-ltmax, .26); } 100% { translate: 24% 0; opacity: 0; } } html.no-motion .r3x-norr-hero.nx-live * { animation-play-state: paused; } html.no-motion .r3x-norr-hero .r3x-norr-hero__wv, html.no-motion .r3x-norr-hero .r3x-norr-hero__wvw, html.no-motion .r3x-norr-hero .r3x-norr-hero__lt { opacity: 0 !important; } /* ================================ 8c. SUB-PAGES: the opening picture pushes in (XN2, round 3c) ================================ */ /* The same slow push-in as the hero (<= 1.4 percent over 40 s) on the opening picture of ritualer, detaljer, ditt besök, boka and the plate of filosofi; the round / arch / tall picture and its hairline ring breathe together so nothing drifts out of its frame. html.nx-amb is set by r3x-norr.js only while motion is allowed; the demo bar's pause freezes it in place (paused), reduced motion never starts it. */ html.nx-amb.lib-on .r3x-norr-port { animation: nx-breathe 2.2s var(--nx-ease) both, nx-pp 40s var(--nx-ease-io) infinite alternate; } html.nx-amb.no-motion .r3x-norr-port { animation: nx-pp 40s var(--nx-ease-io) infinite alternate; animation-play-state: paused; } html.nx-amb .r3x-norr-phil__plate { animation: nx-pp2 44s var(--nx-ease-io) infinite alternate; transform-origin: 62% 45%; } html.nx-amb.no-motion .r3x-norr-phil__plate { animation-play-state: paused; } @keyframes nx-pp { from { scale: 1; } to { scale: 1.014; } } @keyframes nx-pp2 { from { scale: 1; } to { scale: 1.025; } } /* ================================ 9. STATEMENT: scroll-inked (G-54, W-38) ================================ */ .r3x-norr-statement { --nx-pt: clamp(24px, 4vw, 56px); --nx-pb: clamp(48px, 7vw, 104px); } @media (min-width: 1024px) and (min-height: 600px) { .r3x-norr-statement { min-height: min(72vh, 660px); min-height: min(72svh, 660px); display: grid; align-content: center; } } .r3x-norr-statement .r3x-norr-poster { max-width: 14.5em; --dim: #6f5f68; } .r3x-norr-statement__p { margin-top: clamp(24px, 3.4vw, 44px); margin-left: auto; max-width: 28em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); } @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .r3x-norr-statement__p { margin-right: 4%; } } .r3x-norr-poster .r3x-norr-em { --tx: var(--ac); } .r3x-norr-poster .r3x-norr-w { color: var(--tx); } @supports (color: color-mix(in srgb, red, blue)) { html.lib-on .r3x-norr-poster .r3x-norr-w { color: color-mix(in srgb, var(--tx) calc(var(--w, 0) * 100%), var(--dim)); } } html.lib-on:not(.nx-ready) .r3x-norr-poster .r3x-norr-w { color: var(--tx); } /* ================================ 10. CHAPTERS: Hud / Händer / Närvaro (stacking deck W-20, zig-zag G-72, staircase G-60, ghost words W-31) ================================ */ /* fix round 2 (F-04, F-14): two columns from 700 px (the portrait stack was used on landscape phones and tablets), pictures capped at 56 svh, the static page trimmed; the pinned deck (motion on, desktop) is unchanged and keeps its own 100 svh cards */ .r3x-norr-deck { position: relative; } .r3x-norr-chap { --nx-pt: clamp(24px, 4vw, 44px); --nx-pb: clamp(48px, 6vw, 84px); overflow: clip; display: grid; align-items: center; } .r3x-norr-chap__in { position: relative; width: min(var(--nx-max), 100% - 2 * var(--nx-gut)); margin-inline: auto; display: grid; gap: clamp(28px, 5vw, 48px); } .r3x-norr-chap__txt { position: relative; z-index: 1; } .r3x-norr-chap__txt .r3x-norr-h2 { margin-bottom: clamp(18px, 2.6vw, 28px); } .r3x-norr-chap__fig { position: relative; justify-self: center; width: min(80vw, 400px); aspect-ratio: 1; overflow: hidden; margin: 0; } .r3x-norr-chap__fig img { width: 100%; height: 100%; object-fit: cover; } .r3x-norr-shape-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent); mask-image: linear-gradient(to bottom, #000 74%, transparent); } .r3x-norr-shape-circle { border-radius: 50%; box-shadow: 0 0 0 1px rgba(233, 207, 184, .0); } .r3x-norr-shape-oval { aspect-ratio: 4 / 5; border-radius: 50%; } .r3x-norr-shape-tall { aspect-ratio: 4 / 5; border-radius: 28px; } .r3x-norr-chap .r3x-norr-shape-arch, .r3x-norr-chap .r3x-norr-shape-oval { aspect-ratio: 5 / 6; } /* round 3b-2 (P4-008): the three chapters no longer repeat one round aperture: Hud is an ARCH, Händer a TALL RECTANGLE with soft corners, Närvaro a FULL-BLEED PLATE that melts into the plane (a band edge to edge on phones, a half-bleed plate on the right from 700 px). The round shapes stay where they mean something: the porthole of the hero, the inset of De små detaljerna, the closing face. */ .r3x-norr-chap .r3x-norr-shape-tall { aspect-ratio: 4 / 5; } .r3x-norr-chap .r3x-norr-shape-plate { justify-self: stretch; width: calc(100% + 2 * var(--nx-gut)); margin-inline: calc(-1 * var(--nx-gut)); aspect-ratio: 5 / 4; border-radius: 0; overflow: hidden; /* the picture melts into the plane on all four sides; the outermost 12 px at the window's edges are pure plane tone (the margin strips of the tone-seam check stay clean) */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, transparent 12px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 12px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, transparent 12px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 12px), transparent 100%); mask-composite: intersect; } .r3x-norr-chap .r3x-norr-shape-plate img { object-position: 50% 46%; } .r3x-norr-chap--3 { --nx-pb: 104px; } /* the band ends 100 px above the next tone: a photograph never touches a tone join (boundary check) */ .r3x-norr-chap__dim { position: absolute; inset: 0; z-index: 5; background: #0c060c; opacity: 0; pointer-events: none; } .r3x-norr-chap .r3x-norr-ghost { top: auto; bottom: -.12em; left: -.03em; } .r3x-norr-chap--2 .r3x-norr-ghost { left: auto; right: -.03em; } .r3x-norr-chap--3 .r3x-norr-ghost { left: -.03em; } @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .r3x-norr-chap__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .r3x-norr-chap__txt { grid-column: 1 / span 6; } .r3x-norr-chap__fig { grid-column: 8 / span 5; width: min(100%, 380px, 56vh); width: min(100%, 380px, 56svh); justify-self: end; } .r3x-norr-chap .r3x-norr-shape-circle { width: min(100%, 400px, 46vh); width: min(100%, 400px, 46svh); } .r3x-norr-chap--2 .r3x-norr-chap__txt { grid-column: 7 / span 6; grid-row: 1; } .r3x-norr-chap--2 .r3x-norr-chap__fig { grid-column: 1 / span 5; grid-row: 1; justify-self: start; } .r3x-norr-chap--3 .r3x-norr-chap__txt { grid-column: 1 / span 6; } .r3x-norr-chap .r3x-norr-shape-tall { width: min(100%, 360px, 46vh); width: min(100%, 360px, 46svh); } /* the plate is anchored to the plane (the grid wrapper of this chapter is not a containing block), right edge to right edge, melting into the plane on its left, top and bottom */ .r3x-norr-chap--3 .r3x-norr-chap__in { position: static; } .r3x-norr-chap .r3x-norr-chap__fig.r3x-norr-shape-plate { position: absolute; z-index: 0; top: 0; right: 0; bottom: 100px; left: auto; width: min(52%, 800px); margin: 0; aspect-ratio: auto; justify-self: auto; grid-column: auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, transparent 0, #000 calc(var(--nx-fade) * 1.1), #000 calc(100% - 120px), transparent 100%), linear-gradient(to left, transparent 0, transparent 12px, #000 48px); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, transparent 0, #000 calc(var(--nx-fade) * 1.1), #000 calc(100% - 120px), transparent 100%), linear-gradient(to left, transparent 0, transparent 12px, #000 48px); mask-composite: intersect, intersect; } } @media (min-width: 1024px) { .r3x-norr-chap--1 .r3x-norr-chap__txt .r3x-norr-h2 { font-size: clamp(3rem, 1rem + 5vw, 6.4rem); } } /* motion on, desktop: panels stack like cards; each one covers the one before it (its blend zone is alpha, so the cover is soft) */ @media (min-width: 1024px) and (min-height: 600px) { html.lib-on .r3x-norr-chap { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; padding-top: calc(var(--nx-fade) * .5); padding-bottom: 32px; --from: transparent; --tw: 0; } html.lib-on .r3x-norr-chap--1 { z-index: 1; } html.lib-on .r3x-norr-chap--2 { z-index: 2; } html.lib-on .r3x-norr-chap--3 { z-index: 3; } html.lib-on .r3x-norr-chap__dim { opacity: calc(var(--nx-q, 0) * .6); } html.lib-on .r3x-norr-chap__in { transform: translate3d(0, calc(var(--nx-q, 0) * -6vh), 0); transform: translate3d(0, calc(var(--nx-q, 0) * -6svh), 0); } html.lib-on .r3x-norr-chap--3 .r3x-norr-chap__in { transform: none; } /* the last card is never covered (--nx-q is always 0), and a transform here would make the wrapper the containing block of its full-bleed plate */ html.lib-on .r3x-norr-chap__fig { width: min(100%, 440px, 62vh); width: min(100%, 440px, 62svh); } html.lib-on .r3x-norr-chap .r3x-norr-shape-circle { width: min(100%, 420px, 52vh); width: min(100%, 420px, 52svh); } } /* ================================ 11. RITUAL SELECTOR (word index with synced card, W-72 family) ================================ */ .r3x-norr-ritual { --nx-pt: clamp(28px, 4vw, 64px); --nx-pb: clamp(48px, 6vw, 88px); } .r3x-norr-ritual__grid { display: grid; gap: clamp(28px, 5vw, 48px); } .r3x-norr-ritual__intro .r3x-norr-h2 { margin-bottom: clamp(18px, 2.4vw, 28px); } /* round 3b-2 (P4-069): the ritual list is no longer a ruled ledger (01 / 02 / 03 between hairlines, the same device as Glöd's list): three soft PILLS, each with its number in a small ring and its arrow in another, the chosen one filled plum. Same words, same buttons (aria-pressed), 84 px high. */ .r3x-norr-ritual__list { display: grid; align-content: start; gap: 12px; } .r3x-norr-ritual__list button { display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; align-items: center; gap: 14px; min-height: 84px; padding: 12px 14px; text-align: left; border: 1px solid rgba(80, 64, 74, .34); border-radius: 999px; transition: background-color .45s var(--nx-ease), color .45s var(--nx-ease), border-color .45s var(--nx-ease), transform .45s var(--nx-ease); } .r3x-norr-ritual__list .r3x-norr-n { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(111, 66, 79, .42); border-radius: 50%; font: 600 14px/1 var(--nx-sans); letter-spacing: .04em; color: var(--ac); transition: border-color .45s var(--nx-ease), color .45s var(--nx-ease); } .r3x-norr-ritual__list .r3x-norr-rname { font: 400 clamp(2rem, 1.4rem + 2.2vw, 3.2rem)/1.05 var(--nx-serif); } .r3x-norr-ritual__list .r3x-norr-arr { display: grid; place-items: center; justify-self: end; width: 44px; height: 44px; border: 1px solid rgba(111, 66, 79, .3); border-radius: 50%; font-size: 18px; line-height: 1; transition: border-color .45s var(--nx-ease), transform .45s var(--nx-ease); } .r3x-norr-ritual__list button[aria-pressed="true"] { background: var(--nx-plum); color: var(--nx-cream); border-color: transparent; --fc: var(--nx-wine); } .r3x-norr-ritual__list button[aria-pressed="true"] .r3x-norr-n { color: var(--nx-champ); border-color: rgba(233, 207, 184, .5); } .r3x-norr-ritual__list button[aria-pressed="true"] .r3x-norr-arr { border-color: rgba(247, 236, 229, .34); } @media (hover: hover) { .r3x-norr-ritual__list button[aria-pressed="false"]:hover { border-color: var(--nx-wine); background: rgba(249, 244, 239, .55); } .r3x-norr-ritual__list button:hover .r3x-norr-arr { transform: translate(2px, -2px); } } .r3x-norr-ritual__card { position: relative; padding: clamp(24px, 3.4vw, 44px); background: var(--nx-pearl); border-radius: 2px; min-height: 340px; overflow: hidden; } .r3x-norr-ritual__card article { position: relative; display: grid; gap: 14px; justify-items: start; animation: nx-card .6s var(--nx-ease) both; } .r3x-norr-ritual__card h3 { font: 400 min(clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem), 22vw)/1 var(--nx-serif); } .r3x-norr-ritual__card p { color: var(--tx2); max-width: 32em; text-wrap: pretty; } .r3x-norr-parts { font: 500 14px/1.5 var(--nx-sans); letter-spacing: .02em; color: var(--ac) !important; } .r3x-norr-price { font: 600 min(clamp(2.4rem, 1.65rem + 2.4vw, 4rem), 18.5vw)/1 var(--nx-serif); white-space: nowrap; font-variant-numeric: lining-nums; color: var(--tx); margin: 8px 0 10px; } @keyframes nx-card { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } html.no-motion .r3x-norr-ritual__card article { animation: none; } @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .r3x-norr-ritual__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .r3x-norr-ritual__intro { grid-column: 1 / span 6; grid-row: 1; } .r3x-norr-ritual__list { grid-column: 1 / span 6; grid-row: 2; } .r3x-norr-ritual__card { grid-column: 7 / span 6; grid-row: 1 / span 2; position: sticky; top: 56px; align-self: start; } } @media (min-width: 1024px) { .r3x-norr-ritual__card { grid-column: 8 / span 5; } } @media (min-width: 560px) and (orientation: landscape) and (max-height: 559px) { .r3x-norr-ritual__list { gap: 8px; } .r3x-norr-ritual__list button { min-height: 62px; padding: 6px 10px; grid-template-columns: 48px minmax(0, 1fr) 44px; } .r3x-norr-ritual__list .r3x-norr-n { width: 48px; height: 48px; } .r3x-norr-ritual__card { position: relative; top: auto; } } /* ================================ 12. DETAILS + INVITATION (organic aperture, second-scale inset G-38, ghost word W-31) ================================ */ .r3x-norr-details { overflow: clip; --nx-pt: clamp(20px, 3.6vw, 56px); --nx-pb: clamp(36px, 5vw, 72px); } .r3x-norr-details > .r3x-norr-ghost { top: calc(var(--nx-fade) + 2vw); right: -.04em; } .r3x-norr-details__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; } .r3x-norr-details__fig { position: relative; width: min(80vw, 440px); justify-self: center; } .r3x-norr-oval { aspect-ratio: 5 / 6; overflow: hidden; border-radius: 50%; } .r3x-norr-oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .r3x-norr-inset { position: absolute; right: -4%; bottom: -5%; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 7px var(--nx-night), 0 0 0 8px rgba(233, 207, 184, .5); } .r3x-norr-inset img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 46%; transform: scale(2.1); transform-origin: 72% 44%; } .r3x-norr-details__txt .r3x-norr-h2 { margin-bottom: clamp(20px, 2.6vw, 32px); } @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .r3x-norr-details__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .r3x-norr-details__fig { grid-column: 1 / span 5; width: min(100%, 400px, 62vh); width: min(100%, 400px, 62svh); justify-self: start; } .r3x-norr-details__txt { grid-column: 7 / span 6; } } /* the band "Närmare känslan" (XN2, round 3c; Q-4): the picture shows what the headline says, skin, hands and the small pause between (a candle out of focus): a plain 4:3 rounded frame with the hero's hairline ring, a house photograph at or below its own size (1024 px source, shown at most 620 px wide), ONE living element (the candle breathes; a very slow push-in), copy and picture side by side. The old capsule (a blown-up lilac smear of the water film) is gone. Without motion: the photograph alone. The film rules at the end of this block are kept for the selectable alternative (evidence/r3/final11/XN2/BAND_DECISION.md): they do nothing while the markup has no