/* * Realink — design polish layer. * * Result of a design audit (redesign-existing-projects skill): each block * fixes one audited defect — a missing display font, dead a11y states, token * tuning, micro-interaction gaps. Loaded last in , after the theme * bundles and the content layer, so every rule wins ties by cascade order * without !important. Nothing here touches the verbatim Elementor markup or * the generated bundles. */ /* ---- Display font --------------------------------------------------------- * shell.css sets 'Unbounded' on the footer CTA headline, the lead-form title * and the submit button, but no @font-face ever loaded it, so all of them * silently fell back to the system sans. Self-hosted variable subsets * (cyrillic + latin, weight axis 400-900) from Google Fonts v12. */ @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/unbounded/unbounded-vf-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/unbounded/unbounded-vf-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Unbounded is a wide display face; at the CTA's 900 weight a touch of negative tracking keeps the headline dense instead of sprawling. */ .rl-headline { letter-spacing: -0.02em; } /* ---- Focus states --------------------------------------------------------- * The theme ships `:focus{outline:none}`, which leaves keyboard navigation * with no focus indicator anywhere on the site. Restore a visible ring for * keyboard focus only; pointer clicks stay outline-free as before. Text * fields keep their existing border-colour focus cue instead of a ring. */ :focus-visible { outline: 2px solid var(--accent, #E3C083); outline-offset: 2px; } :is(input, textarea, select):focus-visible { outline: none; } /* ---- Text selection ------------------------------------------------------- * The default blue selection clashes with the gold-on-charcoal palette. */ ::selection { background: rgba(227, 192, 131, .3); color: #fff; } /* ---- Scrollbars ----------------------------------------------------------- * Stock light-grey scrollbars sit loud on the dark theme (page scroll, code * blocks, wide tables). Quiet, track-less thumbs instead. */ html { scrollbar-color: #363b42 #191919; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #363b42; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #47505b; } /* ---- Heading line-wrap ---------------------------------------------------- * Multi-line headings routinely stranded a single word on the last line. * `balance` only redistributes the existing wrap — sizes and metrics stay. */ h1, h2, h3, .rl-headline, .rl-page-head__title { text-wrap: balance; } .rl-doc .entry-content p { text-wrap: pretty; } /* ---- Success-green token -------------------------------------------------- * The hand-authored pages define `--green:#4EEEA0` (~82% saturation) — neon * next to the muted gold accent. Same hue family, saturation pulled down: * checks, "live" badges and icon tiles keep their meaning without shouting. * The .rl-cta-live chip hardcodes the old green in its fill/border, so it is * retinted alongside the token. */ .rl { --green: #74CBA0; --green-dim: rgba(116, 203, 160, .12); } .rl .rl-cta-live { background: rgba(116, 203, 160, .1); border-color: rgba(116, 203, 160, .28); } /* ---- Footer CTA: stray checkmark ------------------------------------------ * The footer form block reuses the .rl-trust-item class name that the home * hero styles with a '✓' ::before. The footer markup carries its own * .rl-trust-dot check, so every trust line rendered TWO checks. The wrapper * class .rl-cta-wrap exists only in the footer shell — hero lists keep * their pseudo-element check. */ .rl-cta-wrap .rl-trust-item::before { content: none; } /* Give the floating lead-form card real elevation over the CTA panel. */ .rl-form-box { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } /* ---- Pressed feedback ----------------------------------------------------- * The shared gold buttons hover-lift 1px but a press gave no response. * Settle them back with a hair of compression; selector list mirrors the * unified button block in content.css so cascade order decides. */ .rl-btn:active, .rl-submit:active, .rl-calc__cta:active, .rl-cookie__ok:active, .rl-lock__btn:active, .pp-button:active, .elementor-button.elementor-button:active, .elementor-kit-11 .elementor-button:not(.bdt-offcanvas-button):active, .elementor-kit-11 .bdt-ep-button:active, .uicore-navbar a.uicore-btn:active, button.metform-btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; } /* ---- Tabular figures ------------------------------------------------------ * Live numbers re-render (the calculator total recalculates on every input); * fixed-width digits stop the layout twitching around them. */ .rl-calc__total, .rl-calc__rangeval, .rl-case__stat-num, .rl-mini__num, .rl-caselist__count, .rl-hub__n { font-variant-numeric: tabular-nums; } /* ---- Card depth ----------------------------------------------------------- * Card hovers lift and recolour the border but cast nothing, so the lift * reads flat. A soft charcoal shadow with a hint of the gold underneath * gives the motion actual depth. */ .rl-card, .rl-case, .rl-mini { transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease; } .rl-card:hover, .rl-case:hover, .rl-mini:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .38), 0 2px 10px rgba(227, 192, 131, .05); } /* ---- Current page in the navigation --------------------------------------- * WordPress marked the active menu item server-side; the migrated header is * a static fragment, so no page was ever highlighted. nav-current.js * restores the native classes — the theme's own rules then colour the link * (menu-typo-ch → primary). Explicit colour kept as a fallback, plus a * quiet tint for the open section's parent item. */ .uicore-navbar .uicore-menu li.current-menu-item > a { color: var(--uicore-primary-color, #E3C083); } .uicore-navbar .uicore-menu li.current-menu-ancestor > a { color: rgba(255, 255, 255, .95); } /* ---- Skip link ------------------------------------------------------------ * Keyboard users had to tab through the whole menu on every page. Hidden * until focused, then drops in over the header. */ .rl-skip { position: fixed; left: 16px; top: -56px; z-index: 10000; padding: 10px 18px; border-radius: 6px; background: var(--accent-gradient, linear-gradient(135deg, #EFD6A6, #C9A362)); color: #14171a; font-weight: 700; font-size: 14px; text-decoration: none; transition: top .15s ease; } .rl-skip:focus { top: 12px; } /* ---- Branded 404 ---------------------------------------------------------- * Styles for resources/views/errors/404.blade.php — the stock framework * error page broke the brand completely (white, English, no way back). */ .rl-404 { max-width: var(--ui-container-size, 1240px); margin: 0 auto; padding: 96px 20px 110px; text-align: center; } .rl-404__code { margin: 0 0 6px; font-family: 'Unbounded', var(--uicore-primary-font-family, 'TildaSans-'), sans-serif; font-size: clamp(84px, 16vw, 160px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; background: var(--accent-gradient, linear-gradient(135deg, #EFD6A6, #C9A362)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .rl-404__title { margin: 0 0 12px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--uicore-headline-color, #fff); } .rl-404__text { margin: 0 auto 32px; max-width: 520px; font-size: 16px; line-height: 1.6; color: rgba(190, 201, 214, .85); } .rl-404__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; } .rl-404__links { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; } .rl-404__links a { color: var(--accent, #E3C083); text-decoration: none; } .rl-404__links a:hover { text-decoration: underline; } /* Primary uses the shared .rl-btn treatment from content.css (gold gradient, dark bold text, hover lift); only sizing is set here. The ghost variant avoids the .rl-btn class entirely — the shared block paints its text dark with !important, which would vanish on a transparent background. */ .rl-404 .rl-btn, .rl-404__ghost { display: inline-block; padding: 13px 26px; border-radius: 6px; font-size: 15px; text-decoration: none; } .rl-404__ghost { border: 1px solid var(--ui-border-color, #282b2e); color: #fff; font-weight: 600; transition: border-color .2s ease, transform .2s ease; } .rl-404__ghost:hover { border-color: var(--accent, #E3C083); transform: translateY(-1px); } .rl-404__ghost:active { transform: translateY(0) scale(.985); } /* ---- Reduced motion ------------------------------------------------------- * The scroll-reveal, the pulsing "live" dot and smooth anchor scrolling all * ignore the OS-level motion preference. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .uicore-animate-scroll { animation: none; } .rl-cta-live span { animation: none; } .rl-card, .rl-case, .rl-mini, .rl-nav-link, .rl-tg { transition-duration: .01s; } .rl-card:hover, .rl-case:hover, .rl-mini:hover { transform: none; } }