/* /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); } /* /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; } .mkt-footer-col h2[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 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; } .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; } .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; } .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); } } /* /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: #e75f87; 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: #e75f87; color: #ffffff; 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. */