/* =========================================================================== Aegis by Rainmkr — the public site on the RAINMKR V7 frame. THE COPY IS LOCKED. These pages are what Amazon's SPP review reads, so this file changes presentation only: no page content, markup or text was edited to apply it. scripts/copy-lock.mjs verifies that claim by comparing every page's rendered text before and after. terms.dc.html is also hashed byte for byte into the terms-acceptance digest (api/_lib/terms.js), which is one more reason the pages themselves are never touched. HOW IT REACHES INLINE STYLES. The pages are .dc.html components that support.js renders with inline styles, and the browser normalises every one of them to the same spelling ("background: rgb(244, 241, 236)"). The site uses a dozen colours, each with one job, so each rule below matches a colour by its role and gives it its V7 equivalent. Inline styles beat a stylesheet, hence !important throughout: it is the only lever a skin has over them. The inline style never changes on hover (style-hover compiles to generated :hover classes), so a match is stable. Colour roles on the original paper version, and what each becomes in V7: bone #F4F1EC, off-white #FAF8F4, pale #F1EDE4 paper -> onyx panel black #030304 block inverse -> graphite glass, cyan top rule warm black #14120F block band -> onyx rail ink #14120F, black #030304 text text -> bone slate #6E6961 meta -> bone-soft hairline #E2DDD2 rules -> V7 hairline deep cyan #0F6E93 accent -> cyan cyan #3BC6FF accent -> stays cyan crimson #C0264D (form error) error -> V7 pink =========================================================================== */ html body { background: var(--rk-graphite) !important; color: var(--rk-bone) !important; font-weight: 400; -webkit-font-smoothing: antialiased; } /* The V7 type law: Wix Madefor Text for every word, then the exceptions below (Display for headings and figures, Azeret Mono for labels). */ /* :where() keeps this at the specificity of "html body", so every exception below outranks it. */ html body, html body :where(*:not(code):not(pre):not(kbd):not(samp)) { font-family: var(--rk-text) !important; } html body code, html body pre, html body kbd, html body samp { font-family: var(--rk-mono) !important; } html body a { color: var(--rk-bone); } /* Above the grain: the one wrapper support.js renders into. */ body > div:not(.cursor) { position: relative; z-index: 1; } /* ------------------------------------------------------------ surfaces */ /* Every section, dark or paper, is the graphite canvas itself. */ html body section[style] { background: transparent !important; } /* Specificity is the order of these rules, lowest first, so each later case overrides the general one before it. */ /* Paper blocks (and the bordered cards that sat on paper) become V7 onyx panels with a hairline edge. 0,1,3 */ html body :is(div, p):is([style*="background: rgb(244, 241, 236)"], [style*="background: rgb(250, 248, 244)"], [style*="background: rgb(241, 237, 228)"]), html body :is(div, form)[style*="border: 1px solid rgb(226, 221, 210)"][style*="border-radius"] { background: var(--rk-panel) !important; } /* Rules drawn as 1px boxes, and the containers whose grid gaps draw rules. */ html body div[style*="background: rgb(226, 221, 210)"] { background: var(--rk-hairline) !important; } /* Cells of a gap-ruled grid must be opaque, or the rule colour floods the cell: this is the onyx panel composited over graphite. 0,2,3 */ html body :is([style*="background: rgb(226, 221, 210)"], [style*="background: rgba(244, 241, 236, 0.16)"]) > div[style*="background"] { background: #070709 !important; } /* Paper inside a panel is a tile, a breath lighter, as V7 sets cards inside a widget. 0,2,4+ */ html body :is(div[style*="background: rgb(244, 241, 236)"], div[style*="background: rgb(250, 248, 244)"], div[style*="background: rgb(241, 237, 228)"], div[style*="background: rgb(3, 3, 4)"]:not([style*="position: sticky"])) :is(div, p):is([style*="background: rgb(244, 241, 236)"], [style*="background: rgb(250, 248, 244)"], [style*="background: rgb(241, 237, 228)"]), html body :is(div[style*="background: rgb(244, 241, 236)"], div[style*="background: rgb(250, 248, 244)"], div[style*="background: rgb(241, 237, 228)"], div[style*="background: rgb(3, 3, 4)"]:not([style*="position: sticky"])) div[style*="border: 1px solid rgb(226, 221, 210)"][style*="border-radius"] { background: rgb(244 241 236 / 0.035) !important; } /* Inverse blocks (black on the paper page) are the featured surfaces: V7 graphite glass, marked with a cyan top rule. 0,3,3 */ html body div[style*="background: rgb(3, 3, 4)"][style*="border-radius"]:not([style*="position: sticky"]) { background: var(--rk-glass) !important; box-shadow: var(--rk-glass-edge), inset 0 0 0 1px var(--rk-hairline) !important; border-top: 2px solid var(--rk-cyan) !important; } /* An inverse tile inside a panel or a ruled grid is the highlighted figure: a cyan tint over the opaque cell. 0,3,3, declared later */ html body :is(div[style*="background: rgb(244, 241, 236)"], div[style*="background: rgb(250, 248, 244)"], div[style*="background: rgb(226, 221, 210)"]) div[style*="background: rgb(3, 3, 4)"][style], html body div[style*="background: rgb(3, 3, 4)"]:not([style*="border-radius"]):not([style*="position: sticky"]) { background: linear-gradient(rgb(59 198 255 / 0.08), rgb(59 198 255 / 0.08)), #070709 !important; box-shadow: inset 0 0 0 1px rgb(59 198 255 / 0.3) !important; border-top: 0 !important; } /* The narrow severity bars in the product illustration keep their order of weight on dark: black (high) reads as bone, cyan stays, hairline stays. */ html body span[style*="background: rgb(3, 3, 4)"][style*="border-radius: 3px"] { background: var(--rk-bone) !important; } html body span[style*="background: rgb(226, 221, 210)"][style*="border-radius: 3px"] { background: rgb(244 241 236 / 0.28) !important; } /* Small black chips (a severity tag) become outline chips. */ html body span[style*="background: rgb(3, 3, 4)"][style*="border-radius: 999px"] { background: rgb(244 241 236 / 0.08) !important; box-shadow: inset 0 0 0 1px var(--rk-hairline-strong); } /* Pale pills (the field tags on How it works) become hairline tags. */ html body span[style*="border-radius: 999px"]:is([style*="background: rgb(241, 237, 228)"], [style*="background: rgb(250, 248, 244)"], [style*="background: rgb(244, 241, 236)"]) { background: rgb(244 241 236 / 0.06) !important; box-shadow: inset 0 0 0 1px var(--rk-hairline); } /* The warm-black bands (the marquee rail, the "never" list, two callouts) become onyx rails, as V7 sets its information rows. */ html body div[style*="background: rgb(20, 18, 15)"] { background: #070709 !important; } html body div[style*="background: rgb(20, 18, 15)"][style*="white-space: nowrap"] { border-top: 1px solid var(--rk-hairline); border-bottom: 1px solid var(--rk-hairline); } html body div[style*="background: rgb(20, 18, 15)"][style*="border-radius"] { box-shadow: inset 0 0 0 1px var(--rk-hairline); } /* The footer: the V7 footer shade over the canvas, with a hairline above. */ html body footer[style] { background: rgb(3 3 4 / 0.85) !important; border-top: 1px solid var(--rk-hairline); } /* ------------------------------------------------------------ text */ html body [style*="color: rgb(20, 18, 15)"] { color: var(--rk-bone) !important; } html body [style*="color: rgb(110, 105, 97)"] { color: var(--rk-bone-soft) !important; } html body [style*="color: rgb(15, 110, 147)"] { color: var(--rk-cyan) !important; } html body [style*="color: rgb(192, 38, 77)"] { color: var(--rk-pink) !important; } /* Black text is bone, except where it sits on cyan (a highlighted phrase). */ html body [style*="color: rgb(3, 3, 4)"]:not([style*="background: rgb(59, 198, 255)"]) { color: var(--rk-bone) !important; } /* ------------------------------------------------------------ rules */ html body [style*="solid rgb(226, 221, 210)"] { border-color: var(--rk-hairline) !important; } html body [style*="solid rgb(3, 3, 4)"] { border-color: var(--rk-hairline-strong) !important; } /* ------------------------------------------------------------ type */ /* Headlines: Wix Madefor Display 500, tight, at the size the page set. */ html body h1, html body h2, html body h3, html body h4 { font-family: var(--rk-display) !important; font-weight: 500 !important; } html body h1 { letter-spacing: -0.035em !important; line-height: 1.04 !important; } html body h2 { letter-spacing: -0.028em !important; line-height: 1.1 !important; } html body h3 { letter-spacing: -0.015em !important; } html body h4 { letter-spacing: -0.01em !important; } html body :is(h1, h2, h3, h4) :is(strong, b) { font-weight: 600 !important; } /* Figures (the heaviest inline weight is only ever a number or a price): Display 500, as V7 sets its figures. */ html body :not(h1):not(h2):not(h3):not(h4)[style*="font-weight: 900"] { font-family: var(--rk-display) !important; font-weight: 500 !important; letter-spacing: -0.03em !important; } /* Body weights fold onto the two Text cuts: 400 and 600. */ html body :not(h1):not(h2):not(h3):not(h4):is([style*="font-weight: 800"], [style*="font-weight: 700"], [style*="font-weight: 600"]) { font-weight: 600 !important; } html body :is([style*="font-weight: 300"], [style*="font-weight: 500"]) { font-weight: 400 !important; } html body strong, html body b { font-weight: 600; } /* Large bold statement lines (a closing question, a pull line) read as V7 statements: Display 500, as the reference sets its CTA lines. */ html body p:is([style*="font-size: 2"], [style*="font-size: 3"]):is([style*="font-weight: 700"], [style*="font-weight: 800"]) { font-family: var(--rk-display) !important; font-weight: 500 !important; letter-spacing: -0.015em; } /* Labels: the small capitals the pages already set (kickers, eyebrows, card captions, form labels, the footer column heads) in Azeret Mono 400. The capitals are the page's own; the tracking is V7's. */ html body :is(p, span, div, h4, label)[style*="text-transform: uppercase"][style] { font-family: var(--rk-mono) !important; font-weight: 400 !important; letter-spacing: 0.13em !important; } /* ------------------------------------------------------------ logo */ /* The V7 lockup (assets/rainmkr-logo.svg is now RAINMKR_Lockup_OnDark.svg), at the reference sizes. aspect-ratio holds the box before the SVG arrives, since the pages' width/height hints still describe the previous mark. */ html body img[src="/assets/rainmkr-logo.svg"] { width: 168px !important; height: auto !important; max-height: 42px; aspect-ratio: 613.98 / 150; } @media (max-width: 900px) { html body img[src="/assets/rainmkr-logo.svg"] { width: 130px !important; } html body footer img[src="/assets/rainmkr-logo.svg"] { width: 120px !important; } } /* The product name beside the mark: Azeret Mono, capitals, bone at 70%. */ html body .rmkr-kicker span[style*="text-transform: uppercase"], html body footer span[style*="text-transform: uppercase"][style*="font-size: 11px"] { font-size: 0.6875rem !important; color: rgb(244 241 236 / 0.7) !important; } html body .rmkr-kicker > span:first-child { background: var(--rk-hairline-strong) !important; } /* ------------------------------------------------------------ header */ /* Clear over the canvas at the top; the V7 shade once content scrolls beneath it, and solid while the phone menu is open. */ html body [style*="position: sticky"][style*="top: 0px"] { background: transparent !important; border-bottom: 0 !important; } html body [style*="position: sticky"][style*="top: 0px"]::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(rgb(3 3 4 / 0.95) 58%, rgb(3 3 4 / 0)); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .is-scrolled body [style*="position: sticky"][style*="top: 0px"]::before { opacity: 1; } html body [style*="position: sticky"][style*="top: 0px"]:has(.rmkr-mobile-panel)::before { inset: 0; background: rgb(3 3 4 / 0.97); opacity: 1; } html body .rmkr-mobile-panel { border-top-color: var(--rk-hairline) !important; } /* Nav links as V7 writes them: sentence case, Text 400, quiet until hovered. */ html body [style*="position: sticky"] a[style*="text-transform: uppercase"]:not([style*="border-radius"]) { position: relative; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--rk-text) !important; font-size: 0.9375rem !important; font-weight: 400 !important; color: var(--rk-bone-soft) !important; transition: color 0.2s ease; } html body [style*="position: sticky"] a[style*="text-transform: uppercase"]:not([style*="border-radius"]):hover { color: var(--rk-bone) !important; } /* In the open phone menu the links read as V7's menu list: Display 500. */ html body .rmkr-mobile-panel a[style*="text-transform: uppercase"]:not([style*="border-radius"]) { font-family: var(--rk-display) !important; font-size: 1.25rem !important; font-weight: 500 !important; border-bottom-color: var(--rk-hairline) !important; } /* The current page carries a live cyan node instead of an underline. */ html body [style*="position: sticky"] a[style*="solid rgb(59, 198, 255)"] { color: var(--rk-bone) !important; border-bottom-color: transparent !important; } html body .rmkr-desktop-nav a[style*="solid rgb(59, 198, 255)"]::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rk-cyan); box-shadow: 0 0 8px var(--rk-cyan); } html body .rmkr-mobile-panel a[style*="solid rgb(59, 198, 255)"] { color: var(--rk-cyan) !important; border-bottom-color: var(--rk-hairline) !important; } /* The phone menu button: a hairline square with bone bars. */ html body .rmkr-burger { border-color: var(--rk-hairline-strong) !important; border-radius: 4px !important; } html body .rmkr-burger span span { background: var(--rk-bone) !important; } /* ------------------------------------------------------------ buttons */ /* Every pill link and button takes V7's .btn: Display 600, sentence case, 4px corners, 44px tall. */ html body :is(a, button)[style*="border-radius: 999px"]:not(.rmkr-burger), html body :is(a, button)[style*="border-radius: 150px"] { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 18px !important; padding-right: 18px !important; border-radius: 4px !important; font-family: var(--rk-display) !important; font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2; text-align: center; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important; } html body :is(a, button)[style*="border-radius"][style*="display: block"] { display: flex !important; } /* Primary (the cyan pill) and the dark pill (a primary on paper): the quiet V7 CTA, a violet tint with an inset line and no outer glow. */ html body :is(a, button)[style*="border-radius"]:is([style*="background: rgb(59, 198, 255)"], [style*="background: rgb(3, 3, 4)"], [style*="background: rgb(110, 105, 97)"]) { background: var(--rk-cta-bg) !important; color: var(--rk-cta-ink) !important; border: 0 !important; box-shadow: var(--rk-cta-line) !important; } html body :is(a, button)[style*="border-radius"]:is([style*="background: rgb(59, 198, 255)"], [style*="background: rgb(3, 3, 4)"]):hover { background: var(--rk-cta-bg-hover) !important; color: var(--rk-bone) !important; box-shadow: var(--rk-cta-line-hover) !important; } /* The form's sending state (the page greys the button while it posts). */ html body button[style*="border-radius"][style*="background: rgb(110, 105, 97)"] { opacity: 0.55; } /* Secondary (the outline pill): the V7 ghost. */ html body :is(a, button)[style*="border: 1px solid"][style*="border-radius"]:not(.rmkr-burger) { background: transparent !important; color: var(--rk-bone-soft) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--rk-hairline-strong) !important; } html body :is(a, button)[style*="border: 1px solid"][style*="border-radius"]:not(.rmkr-burger):hover { color: var(--rk-bone) !important; box-shadow: inset 0 0 0 1px rgb(244 241 236 / 0.45) !important; } /* Small uppercase text links ("Full breakdown"): V7 text links, Text 600. */ html body a[style*="text-transform: uppercase"][style*="solid rgb(59, 198, 255)"]:not([style*="border-radius"]) { font-family: var(--rk-text) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 0.9375rem !important; } /* Inline links in running text: bone, a cyan underline. */ html body p a:not([style*="border-radius"]), html body li a:not([style*="border-radius"]) { text-decoration-color: var(--rk-cyan); text-underline-offset: 4px; } /* ------------------------------------------------------------ forms */ html body input:not([type='checkbox']):not([type='radio']), html body textarea, html body select { background: rgb(3 3 4 / 0.6) !important; color: var(--rk-bone) !important; border: 1px solid rgb(244 241 236 / 0.16) !important; border-radius: 6px !important; transition: border-color 0.2s ease; } html body input:hover, html body textarea:hover, html body select:hover { border-color: rgb(244 241 236 / 0.32) !important; } html body input:focus, html body textarea:focus, html body select:focus { border-color: var(--rk-cyan) !important; } html body input::placeholder, html body textarea::placeholder { color: var(--rk-bone-dim) !important; } html body select option { background: var(--rk-graphite); color: var(--rk-bone); } html body input[type='checkbox'], html body input[type='radio'] { accent-color: var(--rk-cyan); } /* ------------------------------------------------------------ focus */ html body :focus-visible { outline: 2px solid var(--rk-cyan) !important; outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------ print */ @media print { html body, html body section[style] { background: #fff !important; color: #111 !important; } html body [style*="color"] { color: #111 !important; } } /* ------------------------------------------------------------ page classes */ /* The legal and how-it-works pages colour a few things through their own