/* RHERRA Brand Visual System — homepage overrides */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"); :root { /* Light theme — default (template light mode) */ --rherra-bg: #f5f6f8; --rherra-surface: #ffffff; --rherra-surface-2: #e9ecf0; --rherra-text: #0c0f12; --rherra-muted: #57616b; --rherra-muted-2: #8a939c; --rherra-border: rgba(12, 15, 18, 0.1); --rherra-border-strong: rgba(12, 15, 18, 0.18); --rherra-turquoise: #20e0d0; --rherra-mint: #55f0c4; --rherra-orange: #ff9b50; --rherra-accent: #f26a17; --rherra-accent-rgb: 242, 106, 23; --rherra-coral: #e05243; --rherra-gradient: linear-gradient( 135deg, #14b8a6 0%, #2dd4a8 32%, #ff9b50 68%, #f06455 100% ); --rherra-gradient-soft: linear-gradient( 135deg, rgba(242, 106, 23, 0.14) 0%, rgba(224, 82, 67, 0.1) 55%, rgba(20, 184, 166, 0.08) 100% ); --rherra-glow: 0 0 40px rgba(242, 106, 23, 0.16), 0 0 80px rgba(224, 82, 67, 0.08); --rherra-radius: 9999px; --rherra-radius-card: 1rem; --rherra-header-bg: rgba(255, 255, 255, 0.92); --rherra-grid-line: rgba(12, 15, 18, 0.04); } /* Dark theme — applied to early by theme-init.js and kept in sync by Alpine's darkMode toggle, so the first paint is already dark */ html.b, html.eh { color-scheme: dark; background-color: var(--rherra-bg) !important; --rherra-bg: #080b0d; --rherra-surface: #101517; --rherra-surface-2: #151a1d; --rherra-text: #f7f8f8; --rherra-muted: #9aa4ab; --rherra-muted-2: #6f7a82; --rherra-border: rgba(247, 248, 248, 0.08); --rherra-border-strong: rgba(247, 248, 248, 0.14); --rherra-turquoise: #20e0d0; --rherra-mint: #55f0c4; --rherra-orange: #ff9b50; --rherra-accent: #ff9b50; --rherra-accent-rgb: 255, 155, 80; --rherra-coral: #f06455; --rherra-gradient: linear-gradient( 135deg, #20e0d0 0%, #55f0c4 32%, #ff9b50 68%, #f06455 100% ); --rherra-gradient-soft: linear-gradient( 135deg, rgba(255, 155, 80, 0.22) 0%, rgba(240, 100, 85, 0.14) 55%, rgba(32, 224, 208, 0.08) 100% ); --rherra-glow: 0 0 40px rgba(255, 155, 80, 0.18), 0 0 80px rgba(240, 100, 85, 0.08); --rherra-radius: 9999px; --rherra-radius-card: 1rem; --rherra-header-bg: rgba(8, 11, 13, 0.92); --rherra-grid-line: rgba(247, 248, 248, 0.03); } /* Base */ html { background-color: var(--rherra-bg) !important; color-scheme: light; } body { background-color: var(--rherra-bg) !important; color: var(--rherra-muted) !important; font-family: Manrope, sans-serif !important; } body.b, body.eh { background-color: var(--rherra-bg) !important; } h1, h2, h3, h4, h5, h6 { font-family: "Space Grotesk", sans-serif !important; color: var(--rherra-text); } img { max-width: 100%; } /* Remap template palette → RHERRA */ .b .sm, .b .rm, .b .tm { background-color: var(--rherra-bg) !important; } .fh, .qh { background-color: var(--rherra-surface) !important; } .hh { background-color: var(--rherra-surface) !important; } /* Solid orange accent by default; full logo gradient reserved for primary CTAs */ .gh { background-image: none !important; background-color: var(--rherra-accent) !important; color: #061012 !important; } .hh\/\[0\.15\] { background-image: none !important; background-color: var(--rherra-accent) !important; } .mk { color: var(--rherra-accent) !important; } .kk { color: var(--rherra-text) !important; } .wm { color: var(--rherra-text) !important; } /* Theme-toggle sun icon — follows text color so it stays visible on both themes */ .wn { fill: var(--rherra-text) !important; } .pk, .ok { color: var(--rherra-muted) !important; } .ch, .dh, .b .pm, .b .qm { border-color: var(--rherra-border) !important; } .b .a { background-color: var(--rherra-surface) !important; border-color: var(--rherra-border-strong) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } /* Dropdown arrow (45° diamond) — match the panel instead of template navy */ .b .a::before { background-color: var(--rherra-surface-2) !important; border-color: var(--rherra-border-strong) !important; } /* Menu chevron — follow muted text instead of template blue-grey. Scoped to nav links so the theme-toggle sun icon (.th.om) is untouched; hover and open state stay accent. */ a.xl svg.th { fill: var(--rherra-muted-2) !important; } a.xl:hover svg.th, a.xl svg.th.wh { fill: var(--rherra-accent) !important; } .fill-\[\#4E6BFF\], [fill="#4E6BFF"] { fill: var(--rherra-accent); } /* Primary interactive accents */ .mk, .b .bn:hover, a.xl:hover { color: var(--rherra-accent) !important; } .b .ym:hover, .b .ym\/40:hover, .b .dn:focus, .b .dn\/40:focus { border-color: rgba(255, 155, 80, 0.45) !important; } .b .zm:hover { background-image: none !important; background-color: var(--rherra-accent) !important; } .b ._m:hover { background-color: var(--rherra-surface-2) !important; } /* Soft feature icon wells — orange-led */ .mh { background: rgba(255, 155, 80, 0.16) !important; } .nh { background: rgba(255, 155, 80, 0.12) !important; } .oh { background: rgba(240, 100, 85, 0.14) !important; } /* Buttons — solid orange by default */ a.lk.gh, .project-tab-btn.gh, button.gh, a.vc.ek.rg.lk.gh { background-image: none !important; background-color: var(--rherra-accent) !important; color: #061012 !important; border: 0; box-shadow: 0 8px 24px rgba(255, 155, 80, 0.16); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } a.lk.gh:hover, .project-tab-btn.gh:hover, a.vc.ek.rg.lk.gh:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 155, 80, 0.24); filter: brightness(1.05); } /* Special primary CTA — logo gradient (use sparingly) */ a.ek.jk.lk.gh, .header-actions .btn-signup { background-image: var(--rherra-gradient) !important; background-color: transparent !important; color: #061012 !important; box-shadow: 0 8px 28px rgba(255, 155, 80, 0.18); } a.ek.jk.lk.gh:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255, 155, 80, 0.28), 0 0 24px rgba(240, 100, 85, 0.12); filter: brightness(1.05); } /* Hero CTA block — stack the primary button above the secondary link and keep both from shrinking, so labels never wrap to multiple lines. */ .tc.tf.yo.zf.mb { flex-direction: column; align-items: flex-start; gap: 1rem; } .tc.tf.yo.zf.mb a { flex-shrink: 0; white-space: nowrap; } /* Home keeps the CTA pair side by side, centred on the same axis */ .rherra-hero .tc.tf.yo.zf.mb { flex-direction: row; align-items: center; gap: 30px; } .rherra-hero .tc.tf.yo.zf.mb a { align-self: center; } /* Primary CTA in page heroes — keep the natural 52px pill: prevent the flex container from stretching it vertically and shrinking it horizontally (which used to break the label onto multiple lines). */ a.ek.jk.lk.gh { flex-shrink: 0; align-self: flex-start; white-space: nowrap; } /* ScrollReveal anti-FOUC — elements start hidden from the first paint. ScrollReveal overrides with inline visibility: visible + opacity when the bundle initialises, so content only appears through the entrance animation instead of flashing "already loaded" first. */ .animate_top, .animate_left, .animate_right, .animate_bottom { visibility: hidden; } /* Auth submit buttons (Sign Up / Sign In) + header Sign Up — same logo gradient as the hero CTA. Combined with the template's lk gh button classes so this wins over the solid-orange .gh rules (higher specificity). */ button.btn-rherra-gradient, a.lk.btn-rherra-gradient { background-image: var(--rherra-gradient) !important; background-color: transparent !important; color: #061012 !important; border: 0; box-shadow: 0 8px 28px rgba(255, 155, 80, 0.18); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } button.btn-rherra-gradient:hover, a.lk.btn-rherra-gradient:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255, 155, 80, 0.28), 0 0 24px rgba(240, 100, 85, 0.12); filter: brightness(1.05); } a.ek.rg.lk.ml.il.gi.ri.mh, a.ek.rg.lk.ml.il.gi.ri.tl, a[class*="mh"][class*="tl"] { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } a.ek.rg.lk.ml.il.gi.ri:hover { transform: translateY(-2px); } /* Cards / panels */ .sg.oi, .sg.vk, .animate_top.rj.sg, .animate_top.sg { background-color: var(--rherra-surface) !important; border: 1px solid var(--rherra-border); box-shadow: none; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .sg.oi:hover, .sg.vk:hover, .animate_top.rj.sg:hover, .animate_top.sg:hover { border-color: rgba(255, 155, 80, 0.28); box-shadow: var(--rherra-glow); transform: translateY(-3px); } /* Pricing cards */ .animate_top.rj.sg.hh { background-color: var(--rherra-surface) !important; border: 1px solid var(--rherra-border); } /* Header */ header.g { background: transparent; backdrop-filter: blur(0); } header.hh, header.sm, header._k, header.bl, header.ll, header.hh.sm { background-color: var(--rherra-header-bg) !important; backdrop-filter: blur(16px); box-shadow: none !important; } .logo-rherra { display: block; height: 32px; width: auto; max-width: 148px; object-fit: contain; } header .logo-rherra { height: 26px; width: auto; max-width: 148px; } /* Brand lockup — logo + wordmark; grows only on desktop so the header height (driven by the Sign Up button, 50px) stays identical to base */ .brand-lockup { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; } .brand-wordmark { font-family: "Space Grotesk", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--rherra-text); white-space: nowrap; } @media (min-width: 1024px) { header .logo-rherra { height: 36px; max-width: 190px; } .brand-wordmark { font-size: 1.25rem; } } /* ========== Hero ========== */ .rherra-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 50% at 85% 35%, rgba(255, 155, 80, 0.14) 0%, transparent 60%), radial-gradient(ellipse 40% 45% at 70% 70%, rgba(240, 100, 85, 0.1) 0%, transparent 55%), radial-gradient(ellipse 35% 40% at 20% 20%, rgba(85, 240, 196, 0.08) 0%, transparent 50%), var(--rherra-bg); min-height: 32rem; padding-top: 8.5rem; padding-bottom: 4rem; } .rherra-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rherra-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rherra-grid-line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, black 10%, transparent 70%); pointer-events: none; opacity: 0.55; z-index: 0; } .rherra-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: 8%; top: 18%; border-radius: 50%; background: var(--rherra-gradient-soft); filter: blur(60px); opacity: 0.55; pointer-events: none; z-index: 0; } .rherra-hero > * { position: relative; z-index: 1; } .rherra-hero .hero-shapes-legacy { display: none !important; } .rherra-hero .hero-glow-ring { position: absolute; right: 6%; top: 22%; width: min(46vw, 520px); height: min(46vw, 520px); border-radius: 50%; border: 1px solid transparent; background: linear-gradient(var(--rherra-bg), var(--rherra-bg)) padding-box, var(--rherra-gradient) border-box; opacity: 0.22; pointer-events: none; z-index: 0; filter: blur(0.5px); } .rherra-hero .hero-geo { position: absolute; right: 18%; top: 28%; width: 180px; height: 180px; opacity: 0.35; pointer-events: none; z-index: 0; background: var(--rherra-gradient); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 30 L50 10 L80 30 L80 45 L50 25 L20 45 Z M20 55 L50 35 L80 55 L80 70 L50 50 L20 70 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 30 L50 10 L80 30 L80 45 L50 25 L20 45 Z M20 55 L50 35 L80 55 L80 70 L50 50 L20 70 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; } .rherra-hero h1 { font-size: clamp(2.4rem, 5vw, 4.25rem) !important; line-height: 1.08 !important; letter-spacing: -0.03em; font-weight: 700 !important; color: var(--rherra-text) !important; max-width: 14ch; } .rherra-hero .fq, .rherra-hero p.fq { color: var(--rherra-muted) !important; font-size: 1.0625rem; line-height: 1.7; max-width: 36rem; width: 100% !important; } .rherra-hero .hero-image-wrap { display: none; position: absolute; } .rherra-hero .hero-image-wrap img[src*="hero.png"] { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45)); } /* Section rhythm */ section { position: relative; } section.ji, section.lj, section.pj, section.pg { background-color: transparent; } /* Soft section dividers via alternating surface wash */ #features { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Team / pricing decorative shapes — mute loud blues */ section img[src*="shape-08"], section img[src*="shape-09"], section img[src*="shape-10"], section img[src*="shape-11"], section img[src*="shape-12"], section img[src*="shape-13"], section img[src*="shape-03"], section img[src*="shape-06"], section img[src*="shape-07"], section img[src*="shape-05"] { opacity: 0.25; filter: saturate(0.7) hue-rotate(120deg) brightness(1.1); } /* CTA / form sections */ section#support, section.i.pg.fh { background-color: var(--rherra-surface) !important; } /* Form fields */ input, textarea, select { background-color: var(--rherra-bg) !important; border-color: var(--rherra-border-strong) !important; color: var(--rherra-text) !important; } input::placeholder, textarea::placeholder { color: var(--rherra-muted-2) !important; } /* Footer */ footer, .footer { background-color: var(--rherra-bg) !important; border-top: 1px solid var(--rherra-border); } /* Swiper bullets */ .swiper-pagination-bullet-active { background: var(--rherra-accent) !important; } /* Project filter tabs */ .projects-tab { background-color: var(--rherra-surface) !important; border: 1px solid var(--rherra-border); } .project-tab-btn { color: var(--rherra-muted) !important; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .project-tab-btn.gh.lk { color: #061012 !important; } /* Accessibility: keep readable contrast */ a:focus-visible, button:focus-visible { outline: 2px solid var(--rherra-accent); outline-offset: 3px; } /* Counter numbers — solid text only */ .gk.vj { color: var(--rherra-text) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; } /* Subtle motion for premium feel */ @keyframes rherra-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .rherra-hero .animate_left { animation: rherra-fade-up 0.9s ease both; } .rherra-hero .hero-glow-ring { animation: rherra-pulse 8s ease-in-out infinite; } @keyframes rherra-pulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.03); } } @media (max-width: 1023px) { .rherra-hero .hero-glow-ring, .rherra-hero .hero-geo { display: none; } .rherra-hero h1 { max-width: none; } } /* Deep palette remaps for leftover template utilities */ .sh { background-image: none !important; background-color: var(--rherra-accent) !important; } .wh, .ul:hover, .c:hover .mm { fill: var(--rherra-accent) !important; } .vl:hover { fill: var(--rherra-coral) !important; } .rl:hover, .rl\/40:hover, .dm:focus, .dm\/40:focus, .c:hover .jm { border-color: rgba(255, 155, 80, 0.45) !important; } .tl:hover, .c:hover .km { background-image: none !important; background-color: var(--rherra-accent) !important; } .xl:hover { color: var(--rherra-accent) !important; } ._l:hover, .bm:hover, .em:focus { --tw-shadow: 0px 10px 28px rgba(255, 155, 80, 0.22) !important; --tw-shadow-colored: 0px 10px 28px rgba(255, 155, 80, 0.22) !important; box-shadow: 0px 10px 28px rgba(255, 155, 80, 0.22) !important; } .sl:hover { background-color: var(--rherra-coral) !important; } /* Keep secondary text muted on dark surfaces */ p, span, li { color: inherit; } footer p, footer a, #features p, .hq { color: var(--rherra-muted) !important; } footer a:hover { color: var(--rherra-accent) !important; } /* Ensure dark surface sections don't flash white */ .b .fh, .b .hh { background-color: var(--rherra-surface) !important; } .b .qh { background-color: var(--rherra-surface-2) !important; }