/* /Components/Layout/HandoverLayout.razor.rz.scp.css */ /* Bare chrome for the anonymous buyer page: brand header, centred column, nothing else. Colours come from the shared tokens so dark mode just works. */ .handover-shell[b-ah5g9bak57] { min-height: 100vh; background: var(--hc-bg); } .handover-brand[b-ah5g9bak57] { padding: var(--hc-space-4) var(--hc-space-5); border-bottom: 1px solid var(--hc-border-subtle); background: var(--hc-surface); } .handover-main[b-ah5g9bak57] { max-width: 860px; margin: 0 auto; padding: var(--hc-space-5) var(--hc-space-4) var(--hc-space-8); } /* The foot sits in the same column as the page so its divider lines up with the content above it; the row of links inside it is the shared .hc-auth-footer, which brings its own divider, spacing and type size. */ .handover-footer[b-ah5g9bak57] { max-width: 860px; margin: 0 auto; padding: 0 var(--hc-space-4) var(--hc-space-6); color: var(--hc-text-muted); } /* /Components/Layout/MarketingLayout.razor.rz.scp.css */ /* Public shopfront chrome. Structure-first: everything leans on the shared tokens so a restyle is a token change, not a rewrite here. */ .mkt-shell[b-j5fxviqq77] { min-height: 100vh; display: flex; flex-direction: column; background: var(--hc-bg); color: var(--hc-text); } .mkt-topbar[b-j5fxviqq77] { position: sticky; top: 0; z-index: 10; background: var(--hc-topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hc-border-subtle); /* Smoothly firm up as the page scrolls. Always translucent enough to keep the brand and nav legible even with no JS (is-scrolled never lands then), so this transition only deepens an already-readable bar. */ transition: box-shadow 0.25s ease, background-color 0.25s ease; } /* marketing.js adds .is-scrolled once the hero (or the first screen) has passed: the bar compacts and lifts with a subtle shadow, keynote-style. */ .mkt-topbar.is-scrolled[b-j5fxviqq77] { background: var(--hc-surface); box-shadow: var(--hc-shadow-sm); } .mkt-topbar-inner[b-j5fxviqq77] { max-width: 1080px; margin: 0 auto; padding: var(--hc-space-3) var(--hc-space-4); display: flex; align-items: center; gap: var(--hc-space-5); flex-wrap: wrap; transition: padding 0.25s ease; } .mkt-topbar.is-scrolled .mkt-topbar-inner[b-j5fxviqq77] { padding-top: var(--hc-space-2); padding-bottom: var(--hc-space-2); } .mkt-nav[b-j5fxviqq77] { display: flex; gap: var(--hc-space-4); margin-inline-start: auto; } .mkt-nav a[b-j5fxviqq77] { color: var(--hc-text); text-decoration: none; font-size: var(--hc-font-size-sm); font-weight: 600; } .mkt-nav a:hover[b-j5fxviqq77] { color: var(--hc-accent); } /* ::deep, because MarketingAuthActions renders this wrapper and a child component's markup does not carry this stylesheet's scope attribute. The layout picks the class, so the rule belongs here rather than in the child; ::deep is how it reaches it. Same for .mkt-menu-actions further down. */ .mkt-topbar-inner[b-j5fxviqq77] .mkt-actions { display: flex; gap: var(--hc-space-2); align-items: center; } /* ------------------------------------------------------------------ The phone menu: burger, sliding panel, big finger-sized links. Everything here is off by default and switched on inside the phone breakpoint at the bottom of this file, under html.js-on. Blazor's scoped CSS stamps its attribute on the LAST compound selector only, so an html.js-on prefix resolves normally; what it cannot do is style or themselves, which is why the scroll lock is set by marketing.js on the element rather than declared as a class here. ------------------------------------------------------------------ */ .mkt-burger[b-j5fxviqq77] { display: none; margin-inline-start: auto; /* 44px square: the smallest comfortable target, all of it the button rather than just the 22px of bars inside it. */ width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: var(--hc-radius); color: var(--hc-text); cursor: pointer; -webkit-tap-highlight-color: transparent; } .mkt-burger:hover[b-j5fxviqq77] { background: var(--hc-surface-sunken); } .mkt-burger-bars[b-j5fxviqq77] { position: relative; display: block; width: 22px; height: 16px; } .mkt-burger-bars i[b-j5fxviqq77] { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.18s ease; } .mkt-burger-bars i:nth-child(1)[b-j5fxviqq77] { top: 0; } .mkt-burger-bars i:nth-child(2)[b-j5fxviqq77] { top: 7px; } .mkt-burger-bars i:nth-child(3)[b-j5fxviqq77] { top: 14px; } /* Bars to cross. The outer two travel to the middle line and rotate through each other, the middle one shrinks away under them. Keyed off aria-expanded rather than a class of our own, so the open state has one home: the attribute a screen reader already reads. */ .mkt-burger[aria-expanded="true"] .mkt-burger-bars i:nth-child(1)[b-j5fxviqq77] { transform: translateY(7px) rotate(45deg); } .mkt-burger[aria-expanded="true"] .mkt-burger-bars i:nth-child(2)[b-j5fxviqq77] { opacity: 0; transform: scaleX(0.3); } .mkt-burger[aria-expanded="true"] .mkt-burger-bars i:nth-child(3)[b-j5fxviqq77] { transform: translateY(-7px) rotate(-45deg); } @supports (transition-timing-function: linear(0, 1)) { .mkt-burger-bars i[b-j5fxviqq77] { transition-timing-function: var(--hc-spring-panel); } } /* The panel itself. Fixed to the viewport from the bottom edge of the bar (--mkt-bar-h, measured by marketing.js on open) to the floor, so the brand and the button stay put and only the page below is replaced. Closed, it is parked a full panel-height above its resting place and behind the bar, which sits a layer higher and turns opaque while it travels. visibility carries the tab order: hidden takes every link out of it, and its transition is delayed on the way out so the slide is seen to finish. */ .mkt-menu[b-j5fxviqq77] { display: none; position: fixed; inset: var(--mkt-bar-h, 64px) 0 0; z-index: 9; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--hc-bg); transform: translateY(-100%); visibility: hidden; transition: transform 0.34s ease, visibility 0s linear 0.34s; } .mkt-menu.is-open[b-j5fxviqq77] { transform: translateY(0); visibility: visible; transition: transform 0.42s ease, visibility 0s; } @supports (transition-timing-function: linear(0, 1)) { .mkt-menu[b-j5fxviqq77] { transition-timing-function: var(--hc-spring-exit), linear; } .mkt-menu.is-open[b-j5fxviqq77] { transition-timing-function: var(--hc-spring-panel), linear; } } .mkt-menu-inner[b-j5fxviqq77] { display: flex; flex-direction: column; justify-content: space-between; gap: var(--hc-space-6); /* Fill the panel so the sign-in buttons sit at the floor, in thumb reach, rather than floating under a short list of links. */ flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: var(--hc-space-4) var(--hc-space-4) var(--hc-space-7); } .mkt-menu-nav[b-j5fxviqq77] { display: flex; flex-direction: column; } .mkt-menu-nav a[b-j5fxviqq77] { display: flex; align-items: center; justify-content: space-between; gap: var(--hc-space-4); /* Deliberately larger than a tap target needs to be: the whole row is the link, and at this size it is hit without aiming. */ min-height: 68px; padding: var(--hc-space-3) var(--hc-space-2); border-bottom: 1px solid var(--hc-border-subtle); color: var(--hc-text); text-decoration: none; font-size: var(--hc-font-size-2xl); font-weight: 800; letter-spacing: -0.02em; -webkit-tap-highlight-color: transparent; } .mkt-menu-nav a:active[b-j5fxviqq77] { color: var(--hc-accent); } .mkt-menu-nav a i[b-j5fxviqq77] { font-size: var(--hc-font-size-base); color: var(--hc-text-muted); } .mkt-menu-inner[b-j5fxviqq77] .mkt-menu-actions { display: flex; flex-direction: column; gap: var(--hc-space-3); } /* Full width and tall to match the links above them. The buttons keep their shared .hc-btn look, only their box changes. */ .mkt-menu-inner[b-j5fxviqq77] .mkt-menu-actions .hc-btn { justify-content: center; width: 100%; min-height: 52px; font-size: var(--hc-font-size-lg); } /* The links arrive a beat after the panel, one after another, so the menu assembles rather than appearing whole. Motion-allowers only: under reduced motion they are simply there. */ html.mk-motion .mkt-menu-nav a[b-j5fxviqq77] { opacity: 0; transform: translateY(-8px); } html.mk-motion .mkt-menu.is-open .mkt-menu-nav a[b-j5fxviqq77] { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease var(--mkt-menu-delay, 0s), transform 0.3s ease var(--mkt-menu-delay, 0s); } /* Reduced motion: the panel still covers the page, it just does not travel. */ @media (prefers-reduced-motion: reduce) { .mkt-menu[b-j5fxviqq77] { transform: none; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .mkt-menu.is-open[b-j5fxviqq77] { opacity: 1; transition: opacity 0.2s ease, visibility 0s; } .mkt-burger-bars i[b-j5fxviqq77] { transition: none; } } .mkt-main[b-j5fxviqq77] { flex: 1; } /* The footer: the page's last hill. The WaveDivider inside it paints the sunken surface rising out of the page (so no border-top here), the brand scene stands on the crest and two brand blobs from the marketing kit glow behind the columns. Colour and shape all come from the shared tokens and the mk-* kit classes in marketing.css. */ .mkt-footer[b-j5fxviqq77] { position: relative; /* Pulled up by exactly the wave's own height so the hill laps over the page's last section: the divider's transparent top then shows that section through it (the pink CTA band on the home page) instead of a strip of page background appearing between the two. Click-through, because this box now covers the bottom of the content above it and a transparent footer edge must not swallow clicks on a link or button under it; the body below the wave switches events back on. */ margin-top: calc(-1 * var(--mk-divider-h)); pointer-events: none; } /* Everything below the wave. Overlaps the divider by 1px so no hairline shows at the join, exactly as .mk-cta does under its own wave. Restores pointer events after the footer's own click-through (see .mkt-footer). */ .mkt-footer-body[b-j5fxviqq77] { position: relative; margin-top: -1px; background: var(--hc-surface-sunken); pointer-events: auto; } /* The home hog and a little house on the hill. Sized here because the kit components are sized by their wrapper; the artwork inside renders in the child components, outside this scope, hence the ::deep reaches. */ .mkt-footer-scene[b-j5fxviqq77] { position: absolute; top: 0; /* 16vw puts the pair on the wave's peak (the path crests about 5/6 of the way across) rather than on the downslope nearer the edge. */ right: clamp(16px, 16vw, 232px); z-index: 2; display: flex; align-items: flex-end; gap: var(--hc-space-2); transform: translateY(-44%); pointer-events: none; } .mkt-footer-scene-house[b-j5fxviqq77] { display: block; width: clamp(30px, 4vw, 46px); aspect-ratio: 1; filter: drop-shadow(0 6px 12px rgba(22, 35, 58, 0.12)); } .mkt-footer-scene-house[b-j5fxviqq77] .mk-motif { width: 100%; height: 100%; } /* The pig svg is a 300x300 square whose drawn pig stops about 11% above the bottom edge (see the crop notes in marketing.css); the scene's translateY allows for that air so the feet read as on the hill. No overflow crop here on purpose: pig.js bobs the artwork, and a hidden overflow slices the ears off, which is exactly what the CTA hog's notes in marketing.css warn about. */ .mkt-footer-scene-pig[b-j5fxviqq77] { display: block; /* A shade bigger than the house: the pair reads home hog first. */ width: clamp(56px, 7.5vw, 92px); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.14)); } .mkt-footer-scene-pig[b-j5fxviqq77] .hc-pig { width: 100%; height: auto; } .mkt-footer-scene-pig[b-j5fxviqq77] svg { display: block; width: 100%; height: auto; } /* This footer's placement of the kit's blobs: one warm corner each side. */ .mkt-footer-blob-a[b-j5fxviqq77] { width: 420px; height: 300px; left: -90px; bottom: -110px; } /* Kept fully inside the top edge: clipped at the top it ends in a straight line exactly on the wave join, which reads as a stain rather than a glow. */ .mkt-footer-blob-b[b-j5fxviqq77] { width: 380px; height: 280px; right: -120px; top: 60px; } .mkt-footer-inner[b-j5fxviqq77] { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: var(--hc-space-6) var(--hc-space-4) var(--hc-space-5); font-size: var(--hc-font-size-sm); color: var(--hc-text-muted); } /* Brand column on the left, the three page lists together on the right: a flex row with a fixed gap inside the group, not equal grid tracks, because three short lists spread a quarter-page apart read as strays. */ .mkt-footer-cols[b-j5fxviqq77] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hc-space-6) var(--hc-space-7); flex-wrap: wrap; } .mkt-footer-about[b-j5fxviqq77] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hc-space-3); max-width: 34ch; } .mkt-footer-tagline[b-j5fxviqq77] { margin: 0; font-size: var(--hc-font-size-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--hc-text); } /* Two deliberate lines, plain then gradient, rather than letting the wrap fall mid-phrase ("all in one / place."). */ .mkt-footer-tagline .mk-grad[b-j5fxviqq77] { display: block; } .mkt-footer-blurb[b-j5fxviqq77] { margin: 0; line-height: 1.6; } /* The three lists as one group. */ .mkt-footer-nav[b-j5fxviqq77] { display: flex; gap: var(--hc-space-7); flex-wrap: wrap; } /* A label for the nav beside it, not a section of the document. It was an h2, which put three headings into the outline of every page on the site and, on the short ones, outnumbered the real content. aria-labelledby still names the nav from it, so nothing is lost for a screen reader. */ .mkt-footer-col-title[b-j5fxviqq77] { margin: 0 0 var(--hc-space-3); font-size: var(--hc-font-size-sm); font-weight: 700; color: var(--hc-text); } .mkt-footer-col ul[b-j5fxviqq77] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hc-space-2); } .mkt-footer-col a[b-j5fxviqq77] { display: inline-block; color: var(--hc-text-muted); text-decoration: none; transition: color 0.15s ease, transform 0.2s ease; } .mkt-footer-col a:hover[b-j5fxviqq77] { color: var(--hc-accent); transform: translateX(3px); } /* The bottom strip: who we legally are, the ICO registration and the year. */ .mkt-footer-base[b-j5fxviqq77] { margin-top: var(--hc-space-6); padding-top: var(--hc-space-5); border-top: 1px solid var(--hc-border-subtle); display: flex; align-items: center; gap: var(--hc-space-5); flex-wrap: wrap; } .mkt-footer-company[b-j5fxviqq77] { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: var(--hc-space-2); } .mkt-footer-company p[b-j5fxviqq77] { margin: 0; } .mkt-footer-copyright[b-j5fxviqq77] { margin: 0; font-size: var(--hc-font-size-xs); } /* The two standing marks (RLBA membership, ICO registration) as one row. They share a wrapper so they stay a pair: on a phone the base strip becomes a column, and without this the two chips would stack full width and read as more small print rather than as two badges. min-width:0 is about this wrapper's own behaviour as a flex item of the base strip: without it the automatic minimum size holds it at the width of its contents and it pushes the strip wider rather than narrowing. The chips have the same declaration for the same reason one level down. */ .mkt-footer-marks[b-j5fxviqq77] { display: flex; align-items: stretch; gap: var(--hc-space-3); min-width: 0; /* Wraps rather than squeezing. Below roughly 360px there is no honest way to fit both: the words are long ("Commissioner's", "Residential") and half a 320px screen breaks them mid-word with no hyphen, which looks like a rendering fault. One chip per line is the better answer down there, and the basis in the phone block is what decides where that happens. */ flex-wrap: wrap; } /* The ICO registration chip. Styling notes live with the markup: this is our own text treatment, not the ICO's logo, on purpose. No card, no border: it sits on the footer's own surface like everything else down here. It used to be lifted onto a white panel, which made a registration number the brightest thing in the footer. The hover is the only chrome it gets, and it is deliberately faint: a target you can find, not a button. */ .mkt-footer-ico[b-j5fxviqq77] { display: inline-flex; align-items: center; gap: var(--hc-space-3); padding: var(--hc-space-2) var(--hc-space-3); border: 0; border-radius: var(--hc-radius); background: transparent; text-decoration: none; color: var(--hc-text-muted); transition: background-color 0.2s ease; /* A flex item will not shrink below its content by default, so without this the pair overflows the footer instead of narrowing on a phone. The equal-halves rule that goes with it is in the phone block at the foot of this file, where it is actually needed; up here the two chips size themselves and sit at their natural widths. */ min-width: 0; } .mkt-footer-ico:hover[b-j5fxviqq77] { /* A wash of the page's own ink rather than a token colour: the footer sits on the sunken surface, so a surface-token background would read as a hole rather than a highlight. */ background: color-mix(in srgb, var(--hc-text) 6%, transparent); } .mkt-footer-ico:focus-visible[b-j5fxviqq77] { outline: 2px solid var(--hc-accent); outline-offset: 2px; } /* text/surface rather than the ink palette constant, so the monogram stays legible when dark mode swaps the roles. */ .mkt-footer-ico-mark[b-j5fxviqq77] { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--hc-radius-sm); background: var(--hc-text); color: var(--hc-surface); font-weight: 800; font-size: var(--hc-font-size-xs); letter-spacing: 0.04em; } /* The RLBA badge sits in the same chip as the ICO mark, but this one is a real logo rather than our own monogram, so it gets a box of the same size and nothing else: contained rather than cropped, and never recoloured. */ .mkt-footer-rlba-mark[b-j5fxviqq77] { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; border-radius: var(--hc-radius-sm); } .mkt-footer-ico-text[b-j5fxviqq77] { display: flex; flex-direction: column; gap: 2px; max-width: 24ch; font-size: var(--hc-font-size-xs); line-height: 1.35; /* A last-resort guard, not the layout. A word longer than its line does not wrap, it hangs out of the box, which showed as "Commissioner's" crossing the hover wash's rounded edge. The row wraps to one chip per line before it gets that tight (see the phone block), so in practice this never fires; it is here so a future wording change cannot put a word through the side of a chip. Both declarations are needed and neither works alone: overflow-wrap does the breaking but does NOT reduce an element's min-content width, so as a flex item its automatic minimum still held it at the width of the longest word and it overflowed anyway. min-width:0 removes that floor. */ min-width: 0; overflow-wrap: break-word; } .mkt-footer-ico-text span:first-child[b-j5fxviqq77] { color: var(--hc-text); font-weight: 600; } /* Phones: the brand alone on the left, a burger on the right, everything else in the panel behind it. 767px rather than the 639px this used to break at, because between the two the five links plus both buttons no longer fit one line and wrapped into a ragged second row. Two forms, and the no-JS one is not a degraded version of the other: without marketing.js the bar stacks the links under the brand exactly as it always did, which is the whole nav, readable and clickable. html.js-on swaps that for the burger, because a button with nothing wired to it is worse than a list of links. */ @media (max-width: 767px) { .mkt-topbar-inner[b-j5fxviqq77] { gap: var(--hc-space-3); } .mkt-nav[b-j5fxviqq77] { order: 3; width: 100%; margin-inline-start: 0; justify-content: center; padding-top: var(--hc-space-1); } .mkt-topbar-inner[b-j5fxviqq77] .mkt-actions { margin-inline-start: auto; } html.js-on .mkt-nav[b-j5fxviqq77] { display: none; } html.js-on .mkt-topbar-inner[b-j5fxviqq77] .mkt-actions { display: none; } html.js-on .mkt-burger[b-j5fxviqq77] { display: inline-flex; } html.js-on .mkt-menu[b-j5fxviqq77] { display: flex; } /* Opaque while the panel is out. The bar is translucent and blurred by default, which would show the menu sliding along behind the brand. */ .mkt-topbar.is-menu-open[b-j5fxviqq77] { background: var(--hc-surface); backdrop-filter: none; } /* Left-aligned stack rather than the old centred line: with the company details and the link columns there is too much down here for centring to read well on a phone. */ .mkt-footer-nav[b-j5fxviqq77] { gap: var(--hc-space-5) var(--hc-space-6); } /* Desktop-sized blobs cover half the footer at phone widths and read as stains behind the text; smaller and further out they go back to being a glow at the edges. */ .mkt-footer-blob-a[b-j5fxviqq77] { width: 260px; height: 200px; left: -120px; bottom: -80px; } .mkt-footer-blob-b[b-j5fxviqq77] { width: 220px; height: 170px; right: -110px; top: 120px; } .mkt-footer-base[b-j5fxviqq77] { flex-direction: column; align-items: flex-start; gap: var(--hc-space-4); } /* The company text stacks, the two marks stay a row. Full width so the pair uses the whole footer rather than sitting in a huddle on the left. */ .mkt-footer-marks[b-j5fxviqq77] { width: 100%; } /* Equal halves, with the side padding trimmed rather than removed. It was zeroed here to buy the wording a few more characters per line, and that broke the hover: the wash is drawn on the chip's own box, so with no horizontal padding it stopped dead at the text and read as a highlight applied by mistake. A target needs to look like it has edges. Space-2 all round is the smallest inset that still reads as one, and the tighter gap between mark and text pays most of the width back. The 150px basis is a wrap point rather than a width: two of them plus the gap fit a 375px screen and grow to fill it, and do not fit a 320px one, so the pair stays side by side on an ordinary phone and stacks on the narrowest. Change it and you move where that happens. */ .mkt-footer-marks .mkt-footer-ico[b-j5fxviqq77] { flex: 1 1 150px; gap: var(--hc-space-2); padding: var(--hc-space-2); } /* The 24ch cap is a reading measure for a chip with a column to itself. At half a phone's width it is never the binding constraint, and leaving it set stops the text using the room the flex basis just gave it. */ .mkt-footer-marks .mkt-footer-ico-text[b-j5fxviqq77] { max-width: none; } } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ /* Visibility per state. The success class swaps the connecting animation for the tick without moving anything else. */ .components-reconnect-first-attempt-visible[b-wg4u20bl2u], .components-reconnect-repeated-attempt-visible[b-wg4u20bl2u], .components-reconnect-failed-visible[b-wg4u20bl2u], .components-pause-visible[b-wg4u20bl2u], .components-resume-failed-visible[b-wg4u20bl2u], .components-rejoining-animation[b-wg4u20bl2u], .components-reconnect-success-tick[b-wg4u20bl2u], .components-reconnect-success-text[b-wg4u20bl2u] { display: none; } #components-reconnect-modal.components-reconnect-show:not(.components-reconnect-success) .components-reconnect-first-attempt-visible[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-show:not(.components-reconnect-success) .components-rejoining-animation[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success)[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success) .components-reconnect-repeated-attempt-visible[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success) .components-rejoining-animation[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-failed[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wg4u20bl2u] { display: block; } #components-reconnect-modal.components-reconnect-success .components-reconnect-success-tick[b-wg4u20bl2u], #components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] { display: block; } /* Full-screen overlay in the app's own palette; the tokens flip for dark mode automatically (tokens.css handles prefers-color-scheme). */ #components-reconnect-modal[b-wg4u20bl2u] { position: fixed; inset: 0; width: 100vw; /* dvh, not vh: on phones 100vh is the LARGE viewport (it includes the space behind the browser's bars), so centring in it pushed the ripple visibly below centre. dvh tracks what is actually on screen. */ height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background-color: var(--hc-bg, #f5f7fb); color: var(--hc-text, #16233a); font-family: inherit; opacity: 0; transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-wg4u20bl2u 0.4s both; } #components-reconnect-modal[open][b-wg4u20bl2u] { display: grid; place-items: center; animation: components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u 0.3s ease-in-out; animation-fill-mode: both; } #components-reconnect-modal[b-wg4u20bl2u]::backdrop { background: none; } @keyframes components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-wg4u20bl2u { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-wg4u20bl2u] { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2rem; text-align: center; } #components-reconnect-modal p[b-wg4u20bl2u] { margin: 0; text-align: center; font-size: 1.05rem; font-weight: 550; } #components-reconnect-modal button[b-wg4u20bl2u] { border: 0; background-color: var(--hc-accent, #e75f87); color: #ffffff; padding: 10px 28px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; } #components-reconnect-modal button:hover[b-wg4u20bl2u] { filter: brightness(1.08); } /* Connecting ripple. */ .components-rejoining-animation[b-wg4u20bl2u] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-wg4u20bl2u] { position: absolute; border: 3px solid var(--hc-accent, #e75f87); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-wg4u20bl2u 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-wg4u20bl2u] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-wg4u20bl2u { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* Success: a green tick draws itself in where the ripple was. */ .components-reconnect-success-tick[b-wg4u20bl2u] { width: 80px; height: 80px; } .components-reconnect-success-tick svg[b-wg4u20bl2u] { width: 80px; height: 80px; stroke: #22a06b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .components-reconnect-success-tick circle[b-wg4u20bl2u] { stroke-dasharray: 151; stroke-dashoffset: 151; animation: components-tick-draw-b-wg4u20bl2u 0.45s ease-out forwards; } .components-reconnect-success-tick path[b-wg4u20bl2u] { stroke-dasharray: 36; stroke-dashoffset: 36; animation: components-tick-draw-b-wg4u20bl2u 0.3s ease-out 0.35s forwards; } #components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] { color: #22a06b; } @keyframes components-tick-draw-b-wg4u20bl2u { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .components-rejoining-animation div[b-wg4u20bl2u], .components-reconnect-success-tick circle[b-wg4u20bl2u], .components-reconnect-success-tick path[b-wg4u20bl2u] { animation-duration: 0.01s; } } /* /Components/Marketing/SocialLinks.razor.rz.scp.css */ /* The row of social icons under the link columns. Quiet by default and only slightly less quiet on hover: these are a way out of the site, sitting in the footer, and should not compete with the links above them. The hover state is a soft tint of the ink colour with a rounded corner, which is the same treatment the mobile tab bar's active bubble uses, so the gesture already reads as "this is the thing under your cursor". */ .mkt-social[b-o04guqihhg] { display: flex; flex-wrap: wrap; gap: var(--hc-space-1); margin-top: var(--hc-space-6); } .mkt-social-link[b-o04guqihhg] { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--hc-radius-sm); color: var(--hc-text-muted); /* Colour and background only, so nothing shifts under the cursor and a reduced-motion visitor loses nothing worth having. */ transition: background-color 0.15s ease, color 0.15s ease; } .mkt-social-link svg[b-o04guqihhg] { /* The glyphs have different viewBoxes, so height is what makes them look the same size; width follows from each one's own aspect ratio. */ height: 1.05rem; width: auto; max-width: 1.25rem; /* currentColor, so the link's colour drives the mark and there is one thing to change rather than two. */ fill: currentColor; } .mkt-social-link:hover[b-o04guqihhg] { background-color: var(--hc-tab-active-bg); color: var(--hc-text); } .mkt-social-link:focus-visible[b-o04guqihhg] { background-color: var(--hc-tab-active-bg); color: var(--hc-text); } /* /Components/Pages/AboutPage.razor.rz.scp.css */ /* The about page's styling now lives in the shared, non-scoped wwwroot/css/marketing.css (linked from MarketingLayout). Nothing scoped here. */ /* /Components/Pages/AdminInsightEditPage.razor.rz.scp.css */ /* What is particular to the ARTICLE builder, and only that. The canvas itself (.ai-layout, .ai-block, .ai-toolbar, .ai-add and the rest) used to live here, on the grounds that a stack of editable blocks existed on exactly one page. The marketing email builder is now a second one, so those rules moved to components.css per CLAUDE.md section 6, and what is left below is genuinely article-only: a hero crop and two previews of things an email does not have. Every value still comes from a token. */ .ai-hero-preview[b-p4pn92smxa] { width: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--hc-radius); margin-bottom: var(--hc-space-2); display: block; } /* The preview renders public markup (mk-ins-*) inside an admin page, which does not load marketing.css. Giving it a plain surface and letting the shared tokens do the rest keeps it honest about layout and spacing without pulling the whole shopfront stylesheet into the console. */ .ai-preview[b-p4pn92smxa] { padding: var(--hc-space-5); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius); background: var(--hc-surface); line-height: 1.7; } /* ---- Search-result preview ------------------------------------------- */ .ai-serp[b-p4pn92smxa] { padding: var(--hc-space-4); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius); background: var(--hc-surface); margin-bottom: var(--hc-space-4); } .ai-serp-url[b-p4pn92smxa] { font-size: var(--hc-font-size-xs); color: var(--hc-text-muted); margin-bottom: var(--hc-space-1); word-break: break-word; } .ai-serp-title[b-p4pn92smxa] { color: var(--hc-accent); font-size: var(--hc-font-size-lg); line-height: 1.3; margin-bottom: var(--hc-space-1); } .ai-serp-desc[b-p4pn92smxa] { font-size: var(--hc-font-size-sm); color: var(--hc-text-muted); line-height: 1.45; } /* /Components/Pages/ComingSoonPage.razor.rz.scp.css */ .coming-soon[b-cv3vsl8eju] { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(160deg, #fff5f8 0%, #fafafa 55%, #fdeef3 100%); } .coming-soon-card[b-cv3vsl8eju] { max-width: 30rem; text-align: center; background: #ffffff; border: 1px solid #f3d3de; border-radius: 1rem; padding: 2.5rem 2rem; box-shadow: 0 12px 32px rgba(231, 95, 135, 0.12); } .coming-soon-logo[b-cv3vsl8eju] { width: 5rem; height: 5rem; object-fit: contain; margin-bottom: 1rem; } .coming-soon-card h1[b-cv3vsl8eju] { color: var(--hc-accent); font-size: 1.45rem; line-height: 1.3; margin: 0 0 0.75rem; } .coming-soon-card p[b-cv3vsl8eju] { color: #4a5568; margin: 0; } .coming-soon-note[b-cv3vsl8eju] { margin-top: 0.75rem; font-weight: 600; } .coming-soon-error[b-cv3vsl8eju] { margin-top: 0.75rem; color: #c53030; font-size: 0.9rem; } .coming-soon-confirm[b-cv3vsl8eju] { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .coming-soon-confirm-btn[b-cv3vsl8eju] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.6rem; border: none; border-radius: 999px; background: var(--hc-accent); color: var(--hc-on-accent); font: inherit; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .coming-soon-confirm-btn:hover[b-cv3vsl8eju] { background: #d94f78; } .coming-soon-confirm-btn:active[b-cv3vsl8eju] { transform: scale(0.98); } .coming-soon-elsewhere[b-cv3vsl8eju] { margin-top: 1.5rem; font-size: 0.9rem; } .coming-soon-attribution[b-cv3vsl8eju] { margin-top: 1.75rem; font-size: 0.78rem; } .coming-soon-attribution a[b-cv3vsl8eju] { color: #9aa3b2; text-decoration: none; } .coming-soon-attribution a:hover[b-cv3vsl8eju] { text-decoration: underline; } @media (prefers-color-scheme: dark) { .coming-soon[b-cv3vsl8eju] { background: linear-gradient(160deg, #1a1420 0%, #0f1828 55%, #1c1220 100%); } .coming-soon-card[b-cv3vsl8eju] { background: #16233a; border-color: #3a2a35; } .coming-soon-card p[b-cv3vsl8eju] { color: #c6cedb; } } /* /Components/Pages/FeaturesPage.razor.rz.scp.css */ /* The features page's styling now lives in the shared, non-scoped wwwroot/css/marketing.css (linked from MarketingLayout). Nothing scoped here. */ /* /Components/Pages/WelcomePage.razor.rz.scp.css */ /* The marketing home's styling now lives in the shared, non-scoped wwwroot/css/marketing.css (linked from MarketingLayout), because the reveal engine gates on classes the script adds to and the brand-graphics kit is shared byte-for-byte across home, features and about. Nothing scoped here. */