/* Rherra Brand Visual System — homepage overrides */ html { scrollbar-gutter: stable; } :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; } /* Keep nav labels on a single line (e.g. "How We Work") */ a.xl { white-space: nowrap; } /* Header — keep the CTA and theme toggle on a single line and prevent the wider nav labels from squeezing them */ a.lk.btn-rherra-gradient, button.btn-rherra-gradient { white-space: nowrap; flex-shrink: 0; } header .tc.wf.ig.pb.no, header .brand-lockup { flex-shrink: 0; } /* Header — give the logo only its natural width on desktop so the nav + actions column inherits all remaining space. The template splits the row into fixed 25%/75%, which wastes a large gap after the compact full-name logo and squeezes the menu + CTA (root cause of the CTA wrapping and the theme toggle sitting glued to it). */ @media (min-width: 1024px) { /* Keep breathing room between the logo and the nav/CTA column */ header > .oo { gap: 8.5rem; } header .to\/4 { width: auto; flex: 0 0 auto; } header .wo\/4 { width: auto; flex: 1 1 0%; } /* Pull the nav dropdowns closer to their parent item — the template hangs them 26px below the link, which leaves an awkward gap */ .c:hover .a { --tw-translate-y: 0.75rem; } } @media (min-width: 1024px) and (max-width: 1279px) { header nav ul { gap: 1.25rem; } header nav ul li a.xl { font-size: 1rem; } header .logo-rherra { height: 24px; } header a.lk.btn-rherra-gradient { padding-left: 1.25rem; padding-right: 1.25rem; } } /* Menu labels on large screens — inherit 16px from body; bump to 18px */ @media (min-width: 1280px) { header nav ul li a.xl { font-size: 1.125rem; } } .fill-\[\#4E6BFF\], [fill="#4E6BFF"] { fill: var(--rherra-accent); } /* Primary interactive accents */ .mk, .b .bn:hover, a.xl:hover { color: var(--rherra-accent) !important; } /* ========== Process Steps ========== */ .process-steps { position: relative; } .process-steps > div { position: relative; z-index: 1; padding-top: 2.25rem; padding-bottom: 2.25rem; height: 100%; } /* Desktop — two columns, equal-height boxes */ @media (min-width: 768px) { .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } } /* Mobile — single column */ @media (max-width: 767px) { .process-steps { grid-template-columns: 1fr; gap: 1rem; } } .process-outcome { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(12, 15, 18, 0.12); color: var(--rherra-muted); } .process-outcome-label { font-weight: 700; color: var(--rherra-accent); } .process-step-number { display: inline-block; margin-bottom: 0.25rem; font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--rherra-accent); } /* Keep collaboration card icons at a consistent size */ .process-collab > div img { width: 36px; height: 36px; } /* Keep leadership card icons at a consistent size */ .process-lead img { width: 36px; height: 36px; } .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); } /* Services “Learn More” — slightly smaller than default CTA pills */ a.vc.ek.lk.rg.gh.sl.gi.hi.jc { padding: 0.5rem 1.25rem; font-size: 0.875rem; line-height: 1.4; } /* 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: center; 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; white-space: nowrap; justify-content: center; text-align: center; } /* 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); display: flex; align-items: center; min-height: 45rem; padding-top: 8.5rem; padding-bottom: 5.5rem; } .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)); } /* Home hero product visual */ .rherra-hero .hero-geo { display: none; } .rherra-hero-grid { display: flex; flex-direction: column; gap: 3rem; } .hero-visual-img { display: block; width: 100%; height: auto; } /* Home hero visual — floating service tags pinned to the top of the image */ .rherra-hero-visual { position: relative; } .rherra-hero-tags.rherra-tag-list { position: absolute; top: 0.375rem; left: 0; /* right:120px shifts the centered group ~60px to the left */ right: 120px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.5rem; z-index: 2; pointer-events: none; margin-top: 0; animation: rherra-fade-up 0.7s ease both; } /* Force the 3rd pill onto a new line so the group renders as 2 rows of 2 */ .rherra-hero-tags .rherra-tag-break { flex-basis: 100%; height: 0; } /* Home page only — softer dark tags using theme colors, distinct from other pages */ .rherra-hero-tags .rherra-tag-pill { position: relative; border: 1px solid rgba(var(--rherra-accent-rgb), 0.22); background: rgba(12, 15, 18, 0.78); color: rgba(247, 248, 248, 0.94); opacity: 1; pointer-events: auto; } /* Gradient glow behind each tag — same gradient as the header button */ .rherra-hero-tags .rherra-tag-pill::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--rherra-gradient); filter: blur(8px); opacity: 0.3; z-index: -1; pointer-events: none; transition: opacity 0.3s ease, filter 0.3s ease; } /* Entrance animation — container fades up, pills fade in staggered */ .rherra-hero-tags .rherra-tag-pill { animation: rherra-fade-in 0.5s ease both; } .rherra-hero-tags .rherra-tag-pill:nth-child(1) { animation-delay: 0.2s; } .rherra-hero-tags .rherra-tag-pill:nth-child(2) { animation-delay: 0.32s; } .rherra-hero-tags .rherra-tag-pill:nth-child(4) { animation-delay: 0.44s; } .rherra-hero-tags .rherra-tag-pill:nth-child(5) { animation-delay: 0.56s; } /* Opacity-only fade (keeps hover transform free of the animation's transform) */ @keyframes rherra-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Hover — lift and intensify the gradient glow */ .rherra-hero-tags .rherra-tag-pill:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(var(--rherra-accent-rgb), 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease; } .rherra-hero-tags .rherra-tag-pill:hover::before { opacity: 0.5; filter: blur(10px); } /* Rounded corners for plain hero visuals */ .hero-visual-img.hero-visual-rounded { border-radius: 1.25rem; } /* Why Rherra collage — real photos side by side with rounded corners */ .about-collage { display: flex; align-items: center; gap: 1.25rem; } section img[src*="hero-working-together"], section img[src*="hero-computer-working"] { width: 290px; max-width: 100%; height: auto; border-radius: var(--rherra-radius-card); } @media (min-width: 768px) { .rherra-hero-grid { flex-direction: row; align-items: center; gap: 4rem; } .rherra-hero-copy { flex: 1 1 50%; } .rherra-hero-visual { flex: 1 1 50%; } } /* 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: 3.25rem; 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-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-ring 8s ease-in-out infinite; } /* Home hero glow ring — smaller expansion range than the status dots */ @keyframes rherra-pulse-ring { 0%, 100% { opacity: 0.18; transform: scale(0.85); } 50% { opacity: 0.26; transform: scale(0.96); } } @keyframes rherra-pulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.03); } } /* Services page hero: animated glow ring (same as home hero) */ .rherra-services-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); animation: rherra-pulse 8s ease-in-out infinite; } .rherra-services-hero > * { position: relative; z-index: 1; } /* Subpage art heroes: same animated background as the home hero */ .rherra-art-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); } .rherra-art-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-art-hero > * { position: relative; z-index: 1; } .rherra-art-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); animation: rherra-pulse 8s ease-in-out infinite; } .rherra-art-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-art-hero .hero-geo { display: none; } @media (max-width: 1023px) { .rherra-hero .hero-glow-ring, .rherra-hero .hero-geo, .rherra-services-hero .hero-glow-ring, .rherra-art-hero .hero-glow-ring, .rherra-art-hero .hero-geo { display: none; } .rherra-hero h1 { max-width: none; } } /* ========== Contact sidebar (Book a call) ========== */ .contact-sidebar { display: flex; flex-direction: column; gap: 2rem; max-width: 560px; } .cs-header { display: flex; flex-direction: column; gap: 0.5rem; } .cs-title { margin: 0; color: var(--rherra-text); font-size: 1.75rem; font-weight: 700; line-height: 1.25; white-space: nowrap; } .cs-desc { margin: 0; color: var(--rherra-muted); font-size: 1.0625rem; line-height: 1.6; } .cs-highlight { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 2rem; background: var(--rherra-gradient-soft); border: 1px solid var(--rherra-border); border-radius: 14px; } .cs-icon-circle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 1.25rem; border-radius: 50%; background: var(--rherra-gradient); color: #ffffff; box-shadow: 0 10px 24px rgba(var(--rherra-accent-rgb), 0.28); } .cs-clock-icon { width: 30px; height: 30px; } .cs-card-title { margin: 0 0 0.375rem; color: var(--rherra-text); font-size: 1.5rem; font-weight: 700; } .cs-card-subtitle { margin: 0; color: var(--rherra-accent); font-size: 1.125rem; font-weight: 600; } .cs-list { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .cs-item { display: flex; align-items: flex-start; gap: 1rem; color: var(--rherra-muted); font-size: 1.25rem; line-height: 1.65; } .cs-check { flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px; color: var(--rherra-accent); } .cs-logo { display: flex; justify-content: center; margin-top: auto; padding-top: 1.5rem; } .cs-logo-img { width: 120px; height: auto; opacity: 0.6; } /* ========== Contact form + sidebar: larger layout ========== */ .contact-form-section .bb.ye.ki.xn.wq.jb.mo { max-width: 96rem; } .contact-form-section .contact-sidebar { max-width: none; } @media (min-width: 768px) { .contact-form-section .mn\/5 { width: 45%; } .contact-form-section .nn\/5 { width: 55%; } } /* ========== Project cards — overlay text always readable ========== */ .project-item .tc.sf.wf.xf.vd.yc.sg.al { background: linear-gradient( to top, rgba(8, 11, 13, 0.92) 0%, rgba(8, 11, 13, 0.6) 55%, rgba(8, 11, 13, 0.25) 100% ) !important; } .project-item .tc.sf.wf.xf.vd.yc.sg.al h4, .project-item .tc.sf.wf.xf.vd.yc.sg.al p { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* ========== Who We Help ========== */ .who-help-grid { gap: 1.5rem; } @media (min-width: 1024px) { .who-help-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .who-help-card { padding-top: 2.25rem; padding-bottom: 2.25rem; } /* ========== Footer ========== */ footer .logo-rherra { height: 64px; max-width: 300px; } @media (min-width: 768px) { footer .vd.ro.tc.sf.rn { gap: 7rem; justify-content: center; } } @media (min-width: 1024px) { footer .tc.uf.ap.gg.fp { justify-content: space-between; gap: 1rem; } footer .zd\/2.to\/4 { width: 32%; } footer .vd.ro.tc.sf.rn { width: 63%; } } /* 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; } /* ========== Services page: section rhythm ========== */ .rherra-tight { padding-top: 4.5rem; padding-bottom: 4.5rem; } @media (max-width: 767px) { .rherra-tight { padding-top: 3.25rem; padding-bottom: 3.25rem; } } /* ========== Services page: featured service cards ========== */ .rherra-services-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 768px) { .rherra-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .rherra-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rherra-service-featured { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rherra-radius-card); } @media (min-width: 1024px) { .rherra-service-featured { grid-column: span 2; } } .rherra-service-media { position: relative; } .rherra-service-media img { display: block; width: 100%; object-fit: cover; aspect-ratio: 16 / 8; } @media (min-width: 1024px) { .rherra-service-media img { aspect-ratio: 21 / 9; } } .rherra-service-body { padding: 0.75rem 1.75rem 1.75rem; } .rherra-service-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; } .rherra-service-body h4 { margin-top: 0; margin-bottom: 0; font-size: 1.375rem; } .rherra-service-body p { margin-bottom: 1rem; } .rherra-service-badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 9999px; background: var(--rherra-gradient); color: #061012; font-size: 0.875rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; } .rherra-service-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 2.25rem; padding-bottom: 2.25rem; } .rherra-service-card .rherra-service-heading { width: 100%; } .rherra-service-card .rherra-service-heading h4 { margin: 0; } .rherra-service-featured a.vc, .rherra-service-card a.vc { align-self: flex-start; width: auto; } /* ========== Services page: Our Technology ========== */ .rherra-tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 640px) { .rherra-tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .rherra-tech-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1280px) { .rherra-tech-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .rherra-tech-chip { position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 1.4rem 1.35rem; border: 1px solid var(--rherra-border); border-radius: var(--rherra-radius-card); background: radial-gradient( 130% 150% at 100% 0%, rgba(var(--rherra-accent-rgb), 0.1) 0%, rgba(32, 224, 208, 0.07) 42%, transparent 72% ), var(--rherra-surface); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .rherra-tech-chip:hover { transform: translateY(-3px); border-color: var(--rherra-border-strong); box-shadow: var(--rherra-glow); } .rherra-tech-chip svg { width: 28px; height: 28px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12)); } .rherra-tech-chip svg path { fill: var(--chip-color, var(--rherra-text)); } .rherra-tech-chip span { color: var(--rherra-text); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .tech-react { --chip-color: #61dafb; } .tech-typescript { --chip-color: #3178c6; } .tech-nextdotjs { --chip-color: #000000; } .tech-nodedotjs { --chip-color: #5fa04e; } .tech-python { --chip-color: #3776ab; } .tech-postgresql { --chip-color: #4169e1; } .tech-amazonwebservices { --chip-color: #ff9900; } .tech-docker { --chip-color: #2496ed; } .tech-kubernetes { --chip-color: #326ce5; } .tech-tailwindcss { --chip-color: #06b6d4; } .tech-openai { --chip-color: #000000; } .tech-stripe { --chip-color: #635bff; } .b .tech-nextdotjs, .b .tech-openai { --chip-color: #ffffff; } /* ========== Services page: Selected Projects ========== */ .rherra-projects-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 640px) { .rherra-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rherra-project-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rherra-radius-card); } .rherra-project-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .rherra-project-card:hover img { transform: scale(1.04); } /* ========== Case Studies list page: clickable cards ========== */ .rherra-case-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .rherra-case-card img { transition: transform 0.4s ease; aspect-ratio: 16 / 9; object-fit: cover; } .rherra-case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16); } .rherra-case-card:hover img { transform: scale(1.04); } /* ========== Case study: Services Delivered cards — internal padding ========== */ .rherra-case-services > div { padding: 1.75rem; } /* ========== Case study: Photo slider ========== */ .rherra-photo-slider__track { display: flex; align-items: center; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .rherra-photo-slider__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; } .rherra-photo-slider__slide img { display: block; width: auto; max-width: 76%; max-height: 32rem; border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); object-fit: contain; } .rherra-photo-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 9999px; background: rgba(15, 20, 28, 0.8); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .rherra-photo-slider__btn:hover { background: rgba(15, 20, 28, 0.85); } .rherra-photo-slider__btn--prev { left: 1rem; } .rherra-photo-slider__btn--next { right: 1rem; } .rherra-photo-slider__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 0.5rem; } .rherra-photo-slider__dot { width: 0.625rem; height: 0.625rem; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; } .rherra-photo-slider__dot:hover { background: rgba(255, 255, 255, 0.7); } .rherra-photo-slider__dot--active { background: #fff; transform: scale(1.25); } .rherra-photo-slider__counter { position: absolute; top: 1rem; right: 1rem; z-index: 5; padding: 0.3rem 0.8rem; border-radius: 9999px; background: rgba(15, 20, 28, 0.55); color: #fff; font-size: 0.8125rem; letter-spacing: 0.06em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .rherra-photo-slider__counter-sep { margin: 0 0.15rem; opacity: 0.6; } @media (max-width: 640px) { .rherra-photo-slider__slide { padding: 1rem 0; } .rherra-photo-slider__slide img { max-width: 100%; max-height: 22rem; border-radius: 0.5rem; } .rherra-photo-slider__btn { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; } } .rherra-project-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.25rem; padding: 1.5rem; background: linear-gradient( to top, rgba(8, 11, 13, 0.92) 0%, rgba(8, 11, 13, 0.55) 55%, rgba(8, 11, 13, 0.25) 100% ); } .rherra-project-name { color: #ffffff; font-size: 1.25rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .rherra-project-desc { color: rgba(255, 255, 255, 0.92); font-size: 1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .rherra-project-tags { margin-top: 0.25rem; color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } /* ========== Case study / project tag pills ========== */ .rherra-tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-top: 0.25rem; } .rherra-tag-pill { display: inline-flex; align-items: center; padding: 0.28rem 0.65rem; border-radius: 9999px; border: 1px solid rgba(var(--rherra-accent-rgb), 0.28); background: rgba(var(--rherra-accent-rgb), 0.08); color: var(--rherra-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; opacity: 0.9; } /* Keep the tag row on the same column width as the hero description (.fq) */ @media (min-width: 1280px) { .rherra-hero-copy .rherra-tag-list { max-width: 79%; } } /* ========== Service detail: 4-column benefit / solution grids ========== */ @media (min-width: 1024px) { .rherra-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========== Service detail: horizontal development timeline ========== */ .rherra-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; } /* Connector line from each node to the next node in the same row (desktop) */ @media (min-width: 1024px) { .rherra-timeline-step:not(:nth-child(4n)):not(:last-child)::after { content: ""; position: absolute; top: calc(2.25rem - 1px); left: calc(50% + 2.25rem); right: calc(-50% + 0.75rem); height: 2px; background: linear-gradient( 90deg, var(--rherra-accent) 0%, var(--rherra-orange) 45%, var(--rherra-turquoise) 100% ); opacity: 0.35; border-radius: 9999px; z-index: 0; pointer-events: none; } } .rherra-timeline-step { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Numbered node — accent ring with glow, sits on top of the track */ .rherra-timeline-node { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; border-radius: 9999px; background: var(--rherra-surface); border: 2px solid var(--rherra-accent); box-shadow: 0 0 0 5px var(--rherra-bg), 0 10px 24px rgba(255, 155, 80, 0.22); } .rherra-timeline-num { color: var(--rherra-accent); font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1; } /* Card under each node — title + short description */ .rherra-timeline-card { width: 100%; flex: 1; padding: 1.5rem 1.25rem; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .rherra-timeline-step:hover .rherra-timeline-card { border-color: rgba(255, 155, 80, 0.35); box-shadow: var(--rherra-glow); transform: translateY(-3px); } .rherra-timeline-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--rherra-text); } .rherra-timeline-text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--rherra-muted); } /* Mobile / tablet — vertical track on the left */ @media (max-width: 1023px) { .rherra-timeline { grid-template-columns: 1fr; gap: 1rem; padding-left: 4.5rem; } .rherra-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.25rem; width: 2px; height: auto; background: linear-gradient( 180deg, var(--rherra-accent) 0%, var(--rherra-orange) 45%, var(--rherra-turquoise) 100% ); opacity: 0.3; } .rherra-timeline-step { align-items: flex-start; text-align: left; } .rherra-timeline-node { position: absolute; left: -4.5rem; margin-bottom: 0; } } /* ========== Service detail: hero photo ========== */ .rherra-hero-photo { border-radius: var(--rherra-radius-card); box-shadow: none; border: none; outline: none; } /* Gradient frame behind hero photos */ .rherra-hero-photo-frame { position: relative; padding: 1.25rem; border-radius: 2rem; background: radial-gradient( circle at 15% 15%, rgba(32, 224, 208, 0.16), transparent 45% ), radial-gradient( circle at 85% 80%, rgba(255, 155, 80, 0.18), transparent 50% ), var(--rherra-gradient-soft); box-shadow: 0 24px 60px rgba(242, 106, 23, 0.12); } .rherra-hero-photo-frame::before { content: ""; position: absolute; top: 0.75rem; right: 0.75rem; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--rherra-surface); opacity: 0.18; } .rherra-hero-photo-frame::after { content: ""; position: absolute; bottom: 0.75rem; left: 0.75rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--rherra-mint); opacity: 0.4; } .rherra-hero-photo-frame .rherra-hero-photo { position: relative; z-index: 1; display: block; width: 100%; height: auto; box-shadow: 0 16px 40px rgba(12, 15, 18, 0.18); } .rherra-hero-copy .tc.tf.yo.zf.mb { flex-direction: row; align-items: center; gap: 30px; } /* ========== Service detail: hero art (CSS-only visual) ========== */ .rherra-hero-art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 2rem; background: radial-gradient( ellipse 70% 60% at 80% 20%, rgba(255, 155, 80, 0.22), transparent 60% ), radial-gradient( ellipse 60% 55% at 15% 85%, rgba(32, 224, 208, 0.16), transparent 60% ), var(--rherra-surface-2); border: 1px solid var(--rherra-border); border-radius: 1.5rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.12); } /* About art: brand logo displayed directly on the page */ .rherra-about-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; } .rherra-about-visual__glow { position: absolute; top: 50%; left: 50%; width: 449px; height: 449px; transform: translate(-50%, -50%); border-radius: 9999px; background: radial-gradient( circle, rgba(255, 155, 80, 0.18) 0%, rgba(34, 197, 94, 0.14) 45%, transparent 70% ); filter: blur(6px); pointer-events: none; z-index: 0; } .rherra-about-logo { position: relative; z-index: 1; display: block; width: clamp(143px, 61%, 222px); height: auto; opacity: 0.55; } /* About story: bring logo and text columns closer together */ .rherra-section:has(.rherra-about-visual) > .bb > .tc.wf.gg.qq { gap: 2rem; } @media (min-width: 1280px) { .rherra-section:has(.rherra-about-visual) > .bb > .tc.wf.gg.qq { gap: 1rem; } } /* Contact page: tighten space between the hero title and the form */ section.gj.qp.gr.hj.rp.hr.i:has(+ section.i.pg.fh.rm.ji.gp.uq) { padding-bottom: 1.5rem; } section.i.pg.fh.rm.ji.gp.uq:not(#support) { padding-top: 1.5rem; } @media (min-width: 1024px) { section.i.pg.fh.rm.ji.gp.uq:not(#support) { padding-top: 1.75rem; } } @media (min-width: 1280px) { section.gj.qp.gr.hj.rp.hr.i:has(+ section.i.pg.fh.rm.ji.gp.uq) { padding-bottom: 1.75rem; } } @media (min-width: 1536px) { section.gj.qp.gr.hj.rp.hr.i:has(+ section.i.pg.fh.rm.ji.gp.uq) { padding-bottom: 2rem; } section.i.pg.fh.rm.ji.gp.uq:not(#support) { padding-top: 2rem; } } /* Hero art: transparent container — art sits directly on the page background */ .rherra-hero-visual .rherra-hero-art { overflow: visible; background: transparent; border: none; border-radius: 0; box-shadow: none; min-height: 380px; } /* Hero art: scale up the art cards +15% so they occupy more space */ .rherra-hero-visual .rherra-hero-art > [class*="-card"], .rherra-hero-visual .rherra-hero-art > [class*="-window"], .rherra-hero-visual .rherra-hero-art > [class*="-stack"] { transform: scale(1.25); } /* Hero art: hide decorative gradient shapes (colors/blur around the art) */ .rherra-hero-visual .rherra-art-shape { display: none; } /* Hero art: remove card shadows (the blur below the art) */ .rherra-hero-visual .rherra-hero-art [class*="-card"], .rherra-hero-visual .rherra-hero-art [class*="-window"], .rherra-hero-visual .rherra-hero-art [class*="-stack"] { box-shadow: none; } /* Hero with custom art: remove the decorative blur circle (keeps animated glow ring) */ .rherra-hero:has(.rherra-hero-visual .rherra-hero-art)::after { display: none; } /* Decorative theme shapes */ .rherra-art-shape { position: absolute; border-radius: 9999px; pointer-events: none; } .rherra-art-shape-1 { top: -2.5rem; right: -2.5rem; width: 11rem; height: 11rem; background: radial-gradient( circle, rgba(32, 224, 208, 0.35), transparent 70% ); } .rherra-art-shape-2 { bottom: -1.75rem; left: -1.75rem; width: 9rem; height: 9rem; background: radial-gradient( circle, rgba(255, 155, 80, 0.32), transparent 70% ); } .rherra-art-shape-3 { top: 18%; left: 12%; width: 2.5rem; height: 2.5rem; background: var(--rherra-gradient); opacity: 0.28; filter: blur(1px); } .rherra-art-shape-4 { bottom: 22%; right: 14%; width: 1.75rem; height: 1.75rem; background: var(--rherra-mint); opacity: 0.35; } /* ========== UI/UX: browser window wireframe ========== */ .rherra-uiux-window { position: relative; width: 100%; max-width: 320px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); } .rherra-uiux-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-uiux-bar span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; } .rherra-uiux-bar span:nth-child(1) { background: var(--rherra-coral); } .rherra-uiux-bar span:nth-child(2) { background: var(--rherra-orange); } .rherra-uiux-bar span:nth-child(3) { background: var(--rherra-mint); } .rherra-uiux-body { display: flex; gap: 0.75rem; padding: 0.75rem; min-height: 180px; } .rherra-uiux-sidebar { flex: 0 0 28%; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: var(--rherra-surface-2); border-radius: 0.75rem; } .rherra-uiux-line { height: 0.5rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-uiux-line:nth-child(2) { width: 70%; background: var(--rherra-accent); opacity: 0.8; } .rherra-uiux-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; } .rherra-uiux-hero { flex: 1; border-radius: 0.75rem; background: var(--rherra-gradient); opacity: 0.75; } .rherra-uiux-cards { display: flex; gap: 0.5rem; } .rherra-uiux-card { flex: 1; height: 2.5rem; border-radius: 0.5rem; background: var(--rherra-gradient-soft); border: 1px solid var(--rherra-border); } /* ========== Portfolio: project cards stack ========== */ .rherra-projects-stack { position: relative; width: 100%; max-width: 320px; height: 300px; } .rherra-projects-stack .rherra-project-card { position: absolute; border-radius: 1.25rem; border: 1px solid var(--rherra-border); box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); } .rherra-projects-stack .rherra-project-card--back { inset: 0 0 0 1.5rem; background: var(--rherra-surface); transform: rotate(6deg); } .rherra-projects-stack .rherra-project-card--mid { inset: 0.75rem 0 0 0; background: var(--rherra-gradient-soft); transform: rotate(-4deg); } .rherra-projects-stack .rherra-project-card--front { inset: 1.25rem 1.25rem 1.25rem 0.25rem; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; background: var(--rherra-surface); } .rherra-projects-stack .rherra-project-card__thumb { flex: 1; min-height: 96px; border-radius: 0.75rem; background: radial-gradient(ellipse 80% 70% at 20% 20%, rgba(32, 224, 208, 0.35), transparent 60%), radial-gradient(ellipse 80% 70% at 85% 80%, rgba(255, 155, 80, 0.4), transparent 60%), var(--rherra-gradient-soft); } .rherra-projects-stack .rherra-project-card__meta { display: flex; flex-direction: column; gap: 0.5rem; } .rherra-projects-stack .rherra-project-card__title { height: 0.875rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-projects-stack .rherra-project-card__title--sm { width: 60%; background: var(--rherra-border); } .rherra-projects-stack .rherra-project-card__tags { display: flex; gap: 0.5rem; } .rherra-projects-stack .rherra-project-card__tags span { padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); } .rherra-projects-stack .rherra-project-card__tags span:nth-child(1) { color: var(--rherra-accent); } .rherra-projects-stack .rherra-project-card__tags span:nth-child(2) { color: var(--rherra-turquoise); } .rherra-projects-stack .rherra-project-card__progress { height: 0.5rem; border-radius: 9999px; background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); overflow: hidden; } .rherra-projects-stack .rherra-project-card__progress span { display: block; width: 70%; height: 100%; border-radius: 9999px; background: var(--rherra-gradient); } /* ========== Portfolio hero: project card deck ========== */ .rherra-project-deck { position: relative; width: 100%; max-width: 720px; height: 620px; /* Duration of one full auto-cycle across all 5 cards */ --rherra-cycle: 20s; } .rherra-project-deck img { position: absolute; bottom: 7rem; left: 50%; width: 74%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--rherra-surface-2); border-radius: 0.875rem; border: 1px solid var(--rherra-border); box-shadow: 0 18px 40px rgba(12, 15, 18, 0.18); transform: translateX(-50%) rotate(var(--rherra-rot, 0deg)); transform-origin: 50% 100%; z-index: var(--rherra-z, 1); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, z-index 0s; animation: rherra-shot-in 0.9s ease both, rherra-deck-cycle var(--rherra-cycle) linear infinite; animation-delay: calc(var(--i, 0) * 0.15s), calc((4 - var(--i, 0)) * (var(--rherra-cycle) / 5)); cursor: default; } /* Fan positions: each card's base rotation and stacking order */ .rherra-project-deck img:nth-child(1) { --i: 0; --rherra-rot: -20deg; --rherra-z: 1; } .rherra-project-deck img:nth-child(2) { --i: 1; --rherra-rot: -10deg; --rherra-z: 2; } .rherra-project-deck img:nth-child(3) { --i: 2; --rherra-rot: 0deg; --rherra-z: 3; } .rherra-project-deck img:nth-child(4) { --i: 3; --rherra-rot: 10deg; --rherra-z: 4; } .rherra-project-deck img:nth-child(5) { --i: 4; --rherra-rot: 20deg; --rherra-z: 5; } /* Auto-cycle: each card automatically takes a turn lifting to the front, then returns to its fan position. Replaces the old hover interaction. */ @keyframes rherra-deck-cycle { 0%, 16% { transform: translateX(-50%) rotate(0deg) translateY(-0.6rem) scale(1.05); z-index: 10; box-shadow: 0 30px 64px rgba(12, 15, 18, 0.28); } 20%, 96% { transform: translateX(-50%) rotate(var(--rherra-rot, 0deg)); z-index: var(--rherra-z, 1); box-shadow: 0 18px 40px rgba(12, 15, 18, 0.18); } 100% { transform: translateX(-50%) rotate(0deg) translateY(-0.6rem) scale(1.05); z-index: 10; box-shadow: 0 30px 64px rgba(12, 15, 18, 0.28); } } @keyframes rherra-shot-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 767px) { .rherra-project-deck { max-width: 420px; height: 480px; margin: 0 auto; } .rherra-project-deck img { width: 72%; } } @media (prefers-reduced-motion: reduce) { .rherra-project-deck, .rherra-project-deck img { animation: none; } .rherra-quote-slide { animation: none; } } /* Projects hero: give the screenshots more room so each image is wider */ .rherra-art-hero:has(.rherra-project-deck) .rherra-hero-art { padding: 0; } /* Projects hero: reduce the gap below the header menu */ .rherra-art-hero:has(.rherra-project-deck) { padding-top: 5rem; } /* Projects: push the intro away from the hero and closer to the grid */ .rherra-projects-intro { padding-top: 1.5rem; padding-bottom: 0.5rem; } .rherra-projects-intro + section { padding-top: 1.5rem; } @media (min-width: 1280px) { .rherra-art-hero:has(.rherra-project-deck) { padding-top: 6.5rem; } } @media (min-width: 1536px) { .rherra-art-hero:has(.rherra-project-deck) { padding-top: 7rem; } } @media (min-width: 768px) { .rherra-art-hero:has(.rherra-project-deck) .rherra-hero-grid { gap: 2.5rem; } .rherra-art-hero:has(.rherra-project-deck) .rherra-hero-copy { flex: 1 1 40%; } .rherra-art-hero:has(.rherra-project-deck) .rherra-hero-visual { flex: 1 1 60%; } } /* ========== Testimonials: quote carousel ========== */ .rherra-quotes-stack { position: relative; width: 100%; max-width: 340px; height: 340px; /* Duration of one full auto-cycle across all 4 testimonials */ --rherra-qcycle: 16s; } .rherra-quote-slide { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.5rem; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); opacity: 0; animation: rherra-quote-fade var(--rherra-qcycle) linear infinite; animation-delay: calc(var(--qi, 0) * (var(--rherra-qcycle) / 4)); } .rherra-quote-slide:nth-child(1) { --qi: 0; } .rherra-quote-slide:nth-child(2) { --qi: 1; } .rherra-quote-slide:nth-child(3) { --qi: 2; } .rherra-quote-slide:nth-child(4) { --qi: 3; } .rherra-quote-slide__stars { display: flex; gap: 0.375rem; margin-bottom: 1rem; } .rherra-quote-slide__stars span { width: 1.1rem; height: 1.1rem; background: var(--rherra-orange); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .rherra-quote-slide__text { flex: 1; margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--rherra-text); overflow: hidden; display: -webkit-box; line-clamp: 6; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .rherra-quote-slide__author { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rherra-border); } .rherra-quote-slide__name { font-size: 0.875rem; font-weight: 700; color: var(--rherra-text); } .rherra-quote-slide__role { font-size: 0.75rem; color: var(--rherra-muted); } /* Each slide fades in for its turn, holds, then fades out */ @keyframes rherra-quote-fade { 0% { opacity: 0; } 4% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } /* ========== How We Work: project roadmap card ========== */ .rherra-process-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; } .rherra-process-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-process-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rherra-border); } .rherra-process-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-process-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-process-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-process-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-process-card__body { padding: 1.25rem 1.5rem 0.75rem; } .rherra-process-card__phase { position: relative; display: flex; align-items: flex-start; gap: 0.875rem; padding-bottom: 0.875rem; } .rherra-process-card__phase:last-child { padding-bottom: 0; } .rherra-process-card__phase::before { content: ""; position: absolute; left: 0.4375rem; top: 1.25rem; bottom: 0; width: 2px; background: var(--rherra-border); } .rherra-process-card__phase:last-child::before { display: none; } .rherra-process-card__dot { position: relative; z-index: 1; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 50%; background: var(--rherra-surface); border: 2px solid var(--rherra-border-strong); } .rherra-process-card__phase.is-active .rherra-process-card__dot { background: var(--rherra-gradient); border-color: transparent; box-shadow: 0 0 0 5px rgba(255, 155, 80, 0.18); } .rherra-process-card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; width: 100%; } .rherra-process-card__label { font-size: 0.9375rem; font-weight: 700; color: var(--rherra-text); } .rherra-process-card__chip { padding: 0.15rem 0.55rem; border-radius: 9999px; background: rgba(255, 155, 80, 0.14); color: var(--rherra-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rherra-process-card__bar { display: block; height: 0.4375rem; width: 80%; border-radius: 9999px; background: var(--rherra-border); } .rherra-process-card__bar--done { width: 90%; background: var(--rherra-border-strong); } .rherra-process-card__bar--active { width: 65%; background: var(--rherra-gradient); } .rherra-process-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--rherra-border); } .rherra-process-card__foot > span:first-child { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-process-card__progress { position: relative; display: block; flex: 1; height: 0.4375rem; border-radius: 9999px; background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); overflow: hidden; } .rherra-process-card__progress i { display: block; width: 70%; height: 100%; border-radius: 9999px; background: var(--rherra-gradient); } /* Animated dot — travels across the bar signalling work in progress */ .rherra-process-card__progress::after { content: ""; position: absolute; top: 50%; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px var(--rherra-accent); transform: translate(-50%, -50%); z-index: 1; animation: rherra-progress-dot 3.2s ease-in-out infinite; } @keyframes rherra-progress-dot { 0%, 100% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } } /* ========== AI: automation pipeline card ========== */ .rherra-ai-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-ai-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-ai-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-ai-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-ai-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-ai-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-ai-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-ai-card__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1rem; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 155, 80, 0.12), transparent 65%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(32, 224, 208, 0.1), transparent 60%); } .rherra-ai-card__pipeline { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; max-width: 280px; } .rherra-ai-card__node { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-ai-card__node-ico { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); box-shadow: 0 10px 24px rgba(12, 15, 18, 0.1); animation: rherra-float 5s ease-in-out infinite; } .rherra-ai-card__node-ico img { width: 1.4rem; height: 1.4rem; object-fit: contain; } .rherra-ai-card__node:nth-child(5) .rherra-ai-card__node-ico { animation-delay: 0.8s; } .rherra-ai-card__node--model .rherra-ai-card__node-ico { width: 3.5rem; height: 3.5rem; background: var(--rherra-gradient); border: 0; color: #061012; font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; font-weight: 700; box-shadow: 0 14px 34px rgba(255, 155, 80, 0.3); animation: rherra-core-pulse 3.2s ease-in-out infinite; } .rherra-ai-card__link { flex: 1; position: relative; height: 2px; background: linear-gradient(90deg, var(--rherra-accent), var(--rherra-turquoise)); opacity: 0.55; overflow: hidden; } .rherra-ai-card__link::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: var(--rherra-surface); animation: rherra-flow 2s ease-in-out infinite; } .rherra-ai-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-ai-card__live { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-turquoise); animation: rherra-pulse 1.8s ease-in-out infinite; } @keyframes rherra-flow { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* ========== API: gateway network card ========== */ .rherra-api-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-api-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-api-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-api-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-api-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-api-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-api-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-api-card__body { flex: 1; position: relative; padding: 0.75rem; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 155, 80, 0.12), transparent 65%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(32, 224, 208, 0.1), transparent 60%); } .rherra-api-card__net { position: relative; width: 100%; height: 100%; } .rherra-api-card__wedge { position: absolute; top: 50%; left: 50%; width: 46%; height: 16px; transform-origin: left center; clip-path: polygon(0 50%, 100% 0%, 100% 100%); background: linear-gradient(90deg, var(--rherra-accent), var(--rherra-turquoise)); opacity: 0.5; } .rherra-api-card__wedge.w1 { width: 49.5%; transform: rotate(-34deg); } .rherra-api-card__wedge.w2 { width: 39%; transform: rotate(40deg); } .rherra-api-card__wedge.w3 { width: 47%; transform: rotate(147deg); } .rherra-api-card__wedge::after { content: ""; position: absolute; top: 50%; left: 0; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 14px var(--rherra-turquoise); transform: translate(-50%, -50%); animation: rherra-api-data 2.2s ease-in-out infinite; } .rherra-api-card__wedge.w2::after { animation-delay: 0.5s; } .rherra-api-card__wedge.w3::after { animation-delay: 1s; } @keyframes rherra-api-data { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 50% { left: 100%; opacity: 1; } 88% { opacity: 0; } 100% { left: 100%; opacity: 0; } } .rherra-api-card__hub { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 9999px; background: var(--rherra-gradient); color: #061012; font-family: "Space Grotesk", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px rgba(255, 155, 80, 0.12), 0 16px 40px rgba(255, 155, 80, 0.28); animation: rherra-core-pulse 3.2s ease-in-out infinite; } .rherra-api-card__node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-api-card__node i { display: block; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); box-shadow: 0 10px 22px rgba(12, 15, 18, 0.1); animation: rherra-float 5s ease-in-out infinite; } .rherra-api-card__node.n1 { top: 4%; right: 2%; } .rherra-api-card__node.n1 i { border-color: rgba(32, 224, 208, 0.5); } .rherra-api-card__node.n2 { bottom: 8%; right: 14%; animation-delay: 0s; } .rherra-api-card__node.n2 i { border-color: rgba(255, 155, 80, 0.5); animation-delay: 0.9s; } .rherra-api-card__node.n3 { bottom: 8%; left: 4%; } .rherra-api-card__node.n3 i { border-color: rgba(240, 100, 85, 0.5); animation-delay: 1.4s; } .rherra-api-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-api-card__chip { padding: 0.2rem 0.55rem; border-radius: 9999px; background: rgba(32, 224, 208, 0.14); color: var(--rherra-turquoise); } .rherra-api-card__live { margin-left: auto; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-mint); animation: rherra-pulse 1.8s ease-in-out infinite; } /* ========== Web: browser app card ========== */ .rherra-web-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-web-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-web-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-web-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-web-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-web-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-web-card__url { margin-left: auto; font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rherra-muted); padding: 0.15rem 0.6rem; border-radius: 9999px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); } .rherra-web-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem 0.9rem; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 155, 80, 0.1), transparent 65%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(32, 224, 208, 0.08), transparent 60%); } .rherra-web-card__nav { display: flex; align-items: center; gap: 0.45rem; } .rherra-web-card__brand { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--rherra-gradient); } .rherra-web-card__nav-link { display: block; width: 1.6rem; height: 0.3rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-web-card__cta { margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #061012; background: var(--rherra-accent); padding: 0.2rem 0.5rem; border-radius: 9999px; } .rherra-web-card__hero { display: flex; align-items: center; gap: 0.6rem; flex: 1; } .rherra-web-card__hero-copy { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .rherra-web-card__h1 { display: block; width: 100%; height: 0.55rem; border-radius: 9999px; background: var(--rherra-text); opacity: 0.85; } .rherra-web-card__h1--short { width: 62%; background: var(--rherra-gradient); opacity: 1; } .rherra-web-card__sub { display: block; width: 85%; height: 0.3rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-web-card__actions { display: flex; gap: 0.35rem; margin-top: 0.25rem; } .rherra-web-card__btn { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rherra-muted); border: 1px solid var(--rherra-border); border-radius: 9999px; padding: 0.25rem 0.6rem; } .rherra-web-card__btn--primary { color: #061012; background: var(--rherra-gradient); border: 0; } .rherra-web-card__hero-art { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 0.9rem; background: linear-gradient(160deg, var(--rherra-surface-2), var(--rherra-surface)); border: 1px solid var(--rherra-border); overflow: hidden; } .rherra-web-card__hero-orb { position: absolute; right: -1rem; top: -1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: radial-gradient(circle, rgba(32, 224, 208, 0.4), transparent 70%); animation: rherra-float 5s ease-in-out infinite; } .rherra-web-card__features { display: flex; gap: 0.4rem; } .rherra-web-card__feature { flex: 1; height: 2.1rem; border-radius: 0.5rem; background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); } .rherra-web-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-web-card__live { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-mint); animation: rherra-pulse 1.8s ease-in-out infinite; } .rherra-web-card__chip { margin-left: auto; padding: 0.2rem 0.55rem; border-radius: 9999px; background: rgba(32, 224, 208, 0.14); color: var(--rherra-turquoise); } /* ========== Cloud & DevOps: git flow ========== */ .rherra-git-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-git-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-git-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-git-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-git-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-git-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-git-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-git-card__body { position: relative; flex: 1; padding: 1.5rem 1rem; } .rherra-git-card__svg { width: 100%; height: 100%; display: block; } .rherra-git-card__main { fill: none; stroke: var(--rherra-border-strong); stroke-width: 2; stroke-linecap: round; } .rherra-git-card__branch { fill: none; stroke: var(--rherra-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; animation: rherra-git-dash 1.2s linear infinite; } @keyframes rherra-git-dash { to { stroke-dashoffset: -18; } } .rherra-git-card__commit { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--rherra-surface); border: 2px solid var(--rherra-turquoise); } .rherra-git-card__commit.c2 { left: 31%; border-color: var(--rherra-accent); } .rherra-git-card__commit.c3 { left: 69%; border-color: var(--rherra-accent); } .rherra-git-card__commit.c1 { left: 7%; } .rherra-git-card__commit.c4 { left: 93%; } .rherra-git-card__chip { position: absolute; right: 4%; top: 12%; padding: 0.2rem 0.55rem; border-radius: 9999px; background: rgba(32, 224, 208, 0.14); color: var(--rherra-turquoise); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; animation: rherra-pulse 1.8s ease-in-out infinite; } .rherra-git-card__foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); } .rherra-git-card__foot > span:first-child { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-git-card__bar { flex: 1; display: block; height: 0.4375rem; border-radius: 9999px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); overflow: hidden; } .rherra-git-card__bar i { display: block; width: 80%; height: 100%; border-radius: 9999px; background: var(--rherra-gradient); } /* ========== Support: ECG heartbeat ========== */ .rherra-ecg-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-ecg-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-ecg-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-ecg-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-ecg-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-ecg-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-ecg-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-ecg-card__screen { flex: 1; padding: 1rem 1.25rem; display: flex; align-items: center; background: linear-gradient(var(--rherra-border) 1px, transparent 1px), linear-gradient(90deg, var(--rherra-border) 1px, transparent 1px); background-size: 1.5rem 1.5rem; background-position: center; } .rherra-ecg-card__svg { width: 100%; height: 100%; display: block; } .rherra-ecg-card__ghost { fill: none; stroke: var(--rherra-border); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rherra-ecg-card__line { fill: none; stroke: var(--rherra-turquoise); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: rherra-ecg-draw 3.6s linear infinite; } @keyframes rherra-ecg-draw { 0% { stroke-dashoffset: 640; } 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } .rherra-ecg-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); } .rherra-ecg-card__live { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-turquoise); animation: rherra-pulse 1.6s ease-in-out infinite; } .rherra-ecg-card__uptime { font-size: 0.875rem; font-weight: 700; color: var(--rherra-text); } .rherra-ecg-card__status { margin-left: auto; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rherra-muted); } @keyframes rherra-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.3; } 50% { transform: scale(1); opacity: 0.6; } } @keyframes rherra-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes rherra-spin { to { transform: rotate(360deg); } } @media (max-width: 767px) { .rherra-hero-art { min-height: 280px; } .rherra-uiux-body { min-height: 140px; } .rherra-projects-stack { height: 260px; } .rherra-quotes-stack { height: 260px; } .rherra-process-card { height: 260px; } .rherra-git-card { height: 260px; } .rherra-ecg-card { height: 260px; } .rherra-org-card { height: 260px; } .rherra-ai-card { height: 260px; } .rherra-api-card { height: 260px; } .rherra-web-card { height: 260px; } } /* ========== About: Mission + How We're Different card ========== */ .rherra-mission-card { background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); border-radius: 1.5rem; padding: 3.5rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.08); } .rherra-mission-card__split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .rherra-mission-card__block h2 { margin-bottom: 1rem; } .rherra-mission-card__block p { max-width: 30rem; } .rherra-mission-card__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--rherra-border); } .rherra-mission-card__item { display: flex; flex-direction: column; align-items: flex-start; } .rherra-mission-card__item h4 { min-height: 4rem; display: flex; align-items: flex-start; margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; } .rherra-mission-card__item p { margin-top: 0; } .rherra-mission-card__item img { width: 2.75rem; height: 2.75rem; margin-bottom: 0 !important; } @media (max-width: 991px) { .rherra-mission-card__split { grid-template-columns: 1fr; gap: 2rem; } .rherra-mission-card__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .rherra-mission-card { padding: 2rem; } .rherra-mission-card__grid { grid-template-columns: 1fr; } } /* ========== About: compact section rhythm ========== */ .rherra-section { position: relative; padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 768px) { .rherra-section { padding-top: 4.5rem; padding-bottom: 4.5rem; } } /* ========== About: Founder ========== */ .rherra-founder-card { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 3rem; align-items: center; width: 100%; max-width: 60rem; margin-inline: auto; background: var(--rherra-surface-2); border: 1px solid var(--rherra-border); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.08); } .rherra-founder-card__media { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 320px; overflow: hidden; border-radius: 1.25rem; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 155, 80, 0.22), transparent 65%), var(--rherra-surface); border: 1px solid var(--rherra-border); } .rherra-founder-card__media img { display: block; width: 100%; height: auto; } .rherra-founder-card__eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--rherra-accent); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rherra-founder-card__body h2 { margin-bottom: 1.25rem; } .rherra-founder-card__body p { max-width: 32rem; } @media (max-width: 991px) { .rherra-founder-card { grid-template-columns: 1fr; gap: 2rem; } .rherra-founder-card__media { max-width: 340px; margin-inline: auto; } } /* ========== About: Values — clean cards in one row ========== */ .rherra-value-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.75rem 1.5rem; background-color: var(--rherra-surface) !important; border: 1px solid var(--rherra-border); border-radius: var(--rherra-radius-card); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .rherra-value-card:hover { border-color: rgba(255, 155, 80, 0.28); box-shadow: var(--rherra-glow); transform: translateY(-3px); } .rherra-value-card img { width: 2.5rem; height: 2.5rem; } .rherra-value-card h4 { min-height: 4rem; display: flex; align-items: flex-start; margin-top: 0.25rem !important; margin-bottom: 0.5rem !important; } .rherra-value-card p { margin-top: 0; } /* ========== About: Where We Work — Europe / US visual ========== */ .rherra-where-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .rherra-where-copy h2 { margin-bottom: 1.25rem; } .rherra-where-copy p { max-width: 29rem; } .rherra-where-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; } .rherra-where-list li { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; } .rherra-where-list li img { width: 1.75rem; height: 1.75rem; flex-shrink: 0; } .rherra-where-visual { display: flex; align-items: center; justify-content: center; min-height: 280px; } .rherra-clocks { display: flex; align-items: center; gap: 1.75rem; } .rherra-clock { display: flex; flex-direction: column; align-items: center; } .rherra-clock__face { position: relative; display: flex; flex-direction: column; align-items: center; width: 170px; height: 170px; } .rherra-clock__svg { width: 100%; height: 100%; display: block; } .rherra-clock__ring { fill: var(--rherra-surface); stroke-width: 2.5; } .rherra-clock__ring--eu { stroke: var(--rherra-turquoise); opacity: 0.85; } .rherra-clock__ring--us { stroke: var(--rherra-accent); opacity: 0.85; } .rherra-clock__sector { opacity: 0.35; } .rherra-clock__sector--eu { fill: var(--rherra-turquoise); } .rherra-clock__sector--us { fill: var(--rherra-accent); } .rherra-clock__halo { stroke: var(--rherra-border); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0.7; } .rherra-clock__city { margin-top: 0.875rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rherra-text); } .rherra-clocks__arrows { position: relative; flex: 1; min-width: 120px; height: 36px; } .rherra-clocks__arrow { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: var(--rherra-turquoise); animation: rherra-flow-right 2.6s ease-in-out infinite; } .rherra-clocks__arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .rherra-clocks__arrow--eu { color: var(--rherra-turquoise); } .rherra-clocks__arrow--us { color: var(--rherra-accent); animation-name: rherra-flow-left; } .rherra-clocks__arrow:nth-child(2) { animation-delay: 0.65s; } .rherra-clocks__arrow:nth-child(3) { animation-delay: 1.3s; } .rherra-clocks__arrow:nth-child(4) { animation-delay: 1.95s; } @keyframes rherra-flow-right { 0% { transform: translateX(-40px); opacity: 0; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } } @keyframes rherra-flow-left { 0% { transform: translateX(40px); opacity: 0; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateX(-40px); opacity: 0; } } @media (max-width: 480px) { .rherra-clocks { gap: 0.75rem; } .rherra-clock__face { width: 130px; height: 130px; } .rherra-clocks__arrows { min-width: 84px; } } @media (max-width: 991px) { .rherra-where-grid { grid-template-columns: 1fr; gap: 2.5rem; } .rherra-where-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .rherra-where-list { grid-template-columns: 1fr; } } /* ========== About: final CTA card ========== */ .rherra-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem 3.5rem; background-image: var(--rherra-gradient); border-radius: 1.5rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.18); } .rherra-cta-card__copy h2 { color: #061012 !important; margin-bottom: 0.75rem; } .rherra-cta-card__copy p { max-width: 34rem; margin: 0; color: rgba(6, 16, 18, 0.78); font-size: 1.0625rem; line-height: 1.6; } .rherra-cta-card__btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 1rem 2rem; border-radius: 9999px; background: #061012; color: #ffffff; font-size: 1rem; font-weight: 700; box-shadow: 0 12px 32px rgba(6, 16, 18, 0.28); transition: transform 0.25s ease, box-shadow 0.25s ease; } .rherra-cta-card__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(6, 16, 18, 0.34); } @media (max-width: 767px) { .rherra-cta-card { flex-direction: column; align-items: flex-start; padding: 2.25rem 1.75rem; } } /* ========== About: abstract CSS art (replaces photos) ========== */ .rherra-art-about { width: 100%; min-height: 340px; } /* Hero visual: engineering team org chart */ .rherra-org-card { position: relative; width: 100%; max-width: 300px; height: 300px; background: var(--rherra-surface); border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14); overflow: hidden; display: flex; flex-direction: column; } .rherra-org-card__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--rherra-surface-2); border-bottom: 1px solid var(--rherra-border); } .rherra-org-card__head span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-org-card__head span:nth-child(1) { background: var(--rherra-accent); } .rherra-org-card__head span:nth-child(2) { background: var(--rherra-orange); } .rherra-org-card__head span:nth-child(3) { background: var(--rherra-turquoise); } .rherra-org-card__head em { margin-left: auto; font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-org-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 1.25rem 1rem; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 155, 80, 0.12), transparent 65%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(32, 224, 208, 0.1), transparent 60%); } .rherra-org-card__core { display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border-radius: 9999px; background: var(--rherra-gradient); font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight: 700; color: #061012; box-shadow: 0 14px 34px rgba(255, 155, 80, 0.28); animation: rherra-core-pulse 3.2s ease-in-out infinite; } .rherra-org-card__meta { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .rherra-org-card__meta strong { font-family: "Space Grotesk", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--rherra-text); } .rherra-org-card__meta span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-org-card__stem { width: 2px; height: 1.1rem; background: var(--rherra-border-strong); } .rherra-org-card__row { display: flex; gap: 0.6rem; } .rherra-org-card__node { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rherra-border); border-radius: 0.75rem; background: var(--rherra-surface-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-text); } .rherra-org-card__node-dot { display: block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-turquoise); } .rherra-org-card__node:nth-child(2) .rherra-org-card__node-dot { background: var(--rherra-accent); } .rherra-org-card__node:nth-child(3) .rherra-org-card__node-dot { background: var(--rherra-mint); } .rherra-org-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rherra-border); background: var(--rherra-surface-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rherra-muted); } .rherra-org-card__live { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rherra-mint); animation: rherra-pulse 1.8s ease-in-out infinite; } @keyframes rherra-core-pulse { 0%, 100% { box-shadow: 0 18px 44px rgba(255, 155, 80, 0.32); } 50% { box-shadow: 0 18px 54px rgba(255, 155, 80, 0.5); } } /* About section: layered panels art */ .rherra-layers { position: relative; width: 280px; height: 300px; } .rherra-layers__panel { position: absolute; border: 1px solid var(--rherra-border); border-radius: 1.25rem; box-shadow: 0 18px 44px rgba(12, 15, 18, 0.12); } .rherra-layers__panel--back { inset: 0 1.75rem 1.75rem 0; background: var(--rherra-surface); transform: rotate(-6deg); } .rherra-layers__panel--mid { inset: 1.5rem 0 0 1.75rem; background: radial-gradient(ellipse 70% 60% at 70% 20%, rgba(32, 224, 208, 0.18), transparent 65%), var(--rherra-surface); transform: rotate(4deg); } .rherra-layers__panel--front { inset: 0.75rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: 1.75rem; background: radial-gradient(ellipse 80% 60% at 80% 15%, rgba(255, 155, 80, 0.18), transparent 60%), linear-gradient(160deg, var(--rherra-surface), var(--rherra-surface-2)); } .rherra-layers__line { display: block; height: 0.75rem; border-radius: 9999px; background: var(--rherra-border-strong); } .rherra-layers__line--sm { width: 55%; } .rherra-layers__line--gradient { width: 40%; height: 1rem; background: var(--rherra-gradient); } /* Footer padding adjustment */ footer .ji { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } @media (min-width: 1024px) { footer .ji { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } } /* ========== Service cards — uniform padding (all pages) ========== */ .service-card { padding: 1.5rem 1.75rem; } .service-card h4 { margin-top: 1.25rem; } a.service-card { text-decoration: none; color: inherit; display: block; } /* Align titles and body copy across the 4 Why cards without growing them */ .rherra-why-cards .service-card { display: flex; flex-direction: column; align-items: flex-start; } .rherra-why-cards .service-card img { display: block; height: 2.5rem; width: auto; flex-shrink: 0; } .rherra-why-cards .service-card h4 { min-height: 64px; margin-top: 1.25rem; margin-bottom: 0; line-height: 32px; } .rherra-why-cards--3 .service-card h4 { min-height: 96px; } .rherra-why-cards .service-card p { margin-top: 0.75rem; margin-bottom: 0; } /* Contact sidebar — scheduling button (opens the strategy call booking) */ .cs-book-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; padding: 1rem 1.5rem; border-radius: 9999px; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; text-decoration: none; color: #061012 !important; background-image: var(--rherra-gradient) !important; background-color: transparent !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; } .cs-book-btn: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); } .cs-book-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* ========== Case Studies detail pages: section spacing ========== */ .case-study-services { padding-top: 2rem !important; padding-bottom: 2rem !important; } .case-study-photos { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Extra breathing room between section subtitle and card grid */ .wc.qf.pn.ng { margin-top: 2.25rem; } /* Case study CTA buttons alignment */ .animate_right.bf.tc.sf.yo.zf.cg { display: flex !important; align-items: center !important; justify-content: center !important; gap: 1.5rem !important; flex-wrap: wrap !important; } /* About testimonials: equal card height, author names on one baseline. align-items:flex-start keeps the quote icon from stretching. */ .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj { display: flex; flex-direction: column; height: 100%; } .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj > .dp { display: flex; flex-direction: column; flex: 1; } .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj > .dp > div { display: flex; flex-direction: column; flex: 1; align-items: flex-start; } .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj > .dp > div > img { flex: none; width: auto; height: auto; max-width: 48px; } .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj > .dp > div > p { align-self: stretch; } .wc.qf.pn.gg.cp > .i.hh.rm.sg.vk.xm.bi.qj > .dp > div > .tc.yf.vf { margin-top: auto; align-self: stretch; } /* Service detail pages — slightly tighter section spacing */ .rherra-service-tight.ji { padding-top: calc(3.5rem - 5px); padding-bottom: calc(3.5rem - 5px); } @media (min-width: 768px) { .rherra-service-tight.gp { padding-top: calc(4.25rem - 5px); padding-bottom: calc(4.25rem - 5px); } } @media (min-width: 1024px) { .rherra-service-tight.uq { padding-top: calc(5rem - 5px); padding-bottom: calc(5rem - 5px); } } .rherra-service-tight.lj.tp.kr { padding-top: calc(3.5rem - 5px); padding-bottom: calc(3.5rem - 5px); } @media (min-width: 768px) { .rherra-service-tight.lj.tp.kr { padding-top: calc(4.25rem - 5px); padding-bottom: calc(4.25rem - 5px); } } /* ===== Language Switcher ===== */ .rherra-lang-details { list-style: none; } .rherra-lang-details::-webkit-details-marker { display: none; } .rherra-lang-summary { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(247, 248, 248, 0.15); background: transparent; color: var(--rherra-text, #f7f8f8); font-size: 0.875rem; font-weight: 500; cursor: pointer; user-select: none; transition: background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .rherra-lang-summary:hover { background: rgba(247, 248, 248, 0.08); border-color: rgba(247, 248, 248, 0.3); } .rherra-lang-chevron { opacity: 0.6; transition: transform 0.2s ease; } .rherra-lang-details[open] .rherra-lang-chevron { transform: rotate(180deg); } .rherra-lang-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 999; min-width: 9rem; padding: 0.375rem; border-radius: 0.625rem; background: #0c0f12; border: 1px solid rgba(247, 248, 248, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 0.125rem; } .rherra-lang-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; border-radius: 0.375rem; background: transparent; color: #9aa4ab; font-size: 0.9375rem; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .rherra-lang-option:hover { background: rgba(247, 248, 248, 0.07); color: #f7f8f8; } .rherra-lang-option.is-active { color: #f7f8f8; font-weight: 600; } /* Close dropdown when clicking outside */ .rherra-lang-details:not([open]) .rherra-lang-menu { display: none; } /* Sticky header adjustment */ .hh .rherra-lang-summary { border-color: rgba(0, 0, 0, 0.15); color: inherit; }