/* ========================================================================== Robo Lab — global stylesheet ========================================================================== Brand tokens come from the Robo Design System (assets/css/rds-tokens.css), which every page links BEFORE this file with . Do not hardcode brand colours here — update the design system and re-vendor. Latin + Japanese loaded together. Noto Sans JP was previously named in font-family but never loaded, so Japanese fell back to a system face. The webfonts are linked from each page's , not @import-ed here. An @import cannot be discovered until this file has downloaded and parsed, so it serialises two round-trips before any text can paint in the brand face. ========================================================================== */ :root { /* --- legacy aliases ------------------------------------------------------- The site was authored against these names before the design system existed, and most were off-spec: midnight was 001F3F against the brand's 20305B, navy 003D66 against 183169, teal 00D9A5 against 1EB2A9, orange FF6B35 against F75326, ice-blue E6F5FF against D0E8FA. Repointing these aliases at the real tokens corrects the whole stylesheet at once and keeps every existing rule working. Prefer --rds-* directly in new code. Note the three primary roles are NOT interchangeable: --rds-color-primary #007DD1 brand fill, decorative --rds-color-primary-strong #0079CB button fill (4.57:1 with white) --rds-color-primary-text #006FBA text/links on light (5.29:1) ------------------------------------------------------------------------ */ --primary: var(--rds-color-primary); /* #007DD1 */ --cyan: var(--rds-color-accent); /* #00C3FF Electric Cyan */ --sky-blue: #65B2F5; --ice-blue: #D0E8FA; --midnight: #20305B; /* Midnight Blue */ --navy: #183169; /* Deep Navy */ --orange: var(--rds-color-danger); /* #F75326 Tech Orange */ --teal: var(--rds-color-success); /* #1EB2A9 */ --yellow: var(--rds-color-warning); /* #FFD166 */ --bg-color: var(--rds-color-surface); /* #F8FCFE */ --bg-alt: var(--rds-color-surface-sunken); /* #EAF5FD */ --text-main: var(--rds-color-text); /* #20305B */ --text-muted: var(--rds-color-text-muted); /* #636E8C */ --border-color: var(--rds-color-border); /* #E0E2E8 */ --font-family: var(--rds-font-latin); --transition: all var(--rds-duration-slow) var(--rds-ease-standard); --shadow-sm: var(--rds-elevation-2); --shadow-md: var(--rds-elevation-3); --shadow-lg: var(--rds-elevation-4); /* --- shorthands used by components in this file ------------------------- */ --rds-ease: var(--rds-ease-standard); --rds-dur-fast: var(--rds-duration-fast); --rds-dur-base: var(--rds-duration-base); --rds-dur-slow: var(--rds-duration-slow); } /* Japanese sets without word spaces and with full-height glyphs, so Latin leading reads cramped and negative tracking closes the counters. The leading below stays Japanese; the typeface does not. ONE TYPEFACE, BOTH LANGUAGES Roboto leads here, not Noto Sans JP. Roboto carries no kana or kanji, so Japanese characters still fall through to Noto and render exactly as before. What changes is everything Roboto DOES have a glyph for: the Latin running through Japanese copy on these pages, which is a lot of it, since Robo Claw, OpenClaw, AI, KPI, PoC, dates and every figure are Latin. That text was being set in Noto's Latin, so a Japanese page and an English page showed the same product name in two different faces. The fallback is per-glyph, which is what makes this safe: the browser takes each character from the first family in the list that actually has it. Roboto for Latin, Noto for Japanese, in one stack. Written out rather than composed from var(--rds-font-latin) plus var(--rds-font-japanese): that would splice system-ui, Segoe UI and a bare sans-serif into the middle of the list, and a generic mid-stack can swallow the kana before Noto is ever reached. */ :lang(ja) { font-family: 'Roboto', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif; line-height: var(--rds-leading-ja); } :lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4 { letter-spacing: var(--rds-tracking-normal); line-height: var(--rds-leading-ja-tight); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 150px; } body { font-family: 'Roboto', 'Noto Sans JP', sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Global SVG Legibility & Crisp Rendering */ svg { shape-rendering: geometricPrecision; text-rendering: optimizeLegibility; } svg text { font-family: 'Roboto', 'Noto Sans JP', -apple-system, sans-serif; user-select: none; } /* ========================================================================== UTILITIES ========================================================================== */ .container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 2rem; } .text-gradient { background: linear-gradient(135deg, var(--primary), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-center { text-align: center; } /* --- badges --------------------------------------------------------------- Pages use badge.primary / .midnight / .red / .cyan / .blue / .purple, but only .orange and .teal were ever defined — every other variant fell back to the base style, so eight different labels rendered identically at 3.42:1, below WCAG AA for 14px text. Each variant pairs a darkened brand tone with its own tint. Fills are OPAQUE on purpose: badges sit on white, sunken and tinted sections, and a translucent fill would take its contrast from whatever happens to be behind it — measured between 1.88:1 and 4.67:1 for the same rule. Opaque fills make every pairing deterministic. Ratios noted are against the fill itself. "purple" has no equivalent in the Robo Lab palette, so it maps to Electric Cyan rather than inventing an off-brand colour. ------------------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: var(--rds-radius-pill); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--rds-tracking-wide); background: #E8F3FB; color: #00568F; /* 6.8:1 */ margin-bottom: 1rem; border: 1px solid rgba(0, 125, 209, 0.22); } .badge.orange, .badge.red { background: #FDECE7; color: #B03A16; /* 5.3:1 — Tech Orange, darkened */ border-color: rgba(247, 83, 38, 0.24); } .badge.teal { background: #E4F5F3; color: #10645F; /* 6.2:1 */ border-color: rgba(30, 178, 169, 0.26); } .badge.cyan, .badge.blue, .badge.purple { background: #E2F6FD; color: #00647F; /* 6.0:1 */ border-color: rgba(0, 195, 255, 0.34); } .badge.midnight { background: #EAF5FD; color: var(--rds-color-text); /* 11.6:1 */ border-color: var(--rds-color-border-strong); } .badge.yellow { background: #FFF4DC; color: #6B5320; /* 6.7:1 */ border-color: rgba(255, 209, 102, 0.5); } /* Shared badge-primary — used across all pages */ .badge-primary { display: inline-block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--rds-tracking-widest); font-weight: 700; color: var(--rds-color-primary-text); border: 1px solid rgba(0, 125, 209, 0.22); background: var(--rds-color-primary-subtle); padding: 8px 16px; border-radius: var(--rds-radius-pill); margin-bottom: 1.5rem; } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-block; padding: 1rem 2rem; border-radius: 50px; font-weight: 700; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-size: 1rem; } .btn-primary { background-color: var(--primary); color: white; box-shadow: 0 4px 15px rgba(0, 125, 209, 0.3); } .btn-primary:hover { background-color: var(--midnight); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(32, 48, 91, 0.3); } .btn-outline { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background-color: var(--ice-blue); transform: translateY(-2px); } /* ========================================================================== SCROLL REVEAL ANIMATION — shared across all pages ========================================================================== */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Legacy reveal class */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* ========================================================================== NAVIGATION ========================================================================== */ .robo-nav { position: fixed; top: 0; left: 0; width: 100%; height: 80px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1000; transition: var(--transition); border-bottom: 1px solid var(--border-color); } .robo-nav.scrolled { height: 70px; border-bottom: 1px solid var(--border-color); background: rgba(248, 252, 254, 0.98); } .robo-nav .container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .logo-container { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .logo-svg { width: 40px; height: 40px; } .logo-text { font-size: 1.5rem; font-weight: 900; color: var(--primary); letter-spacing: 1px; line-height: 1; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: #334155; font-weight: 500; font-size: 1rem; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: var(--cyan); transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--primary); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; gap: 1rem; align-items: center; } /* ========================================================================== SUBNAV & AUDIENCE NAVIGATION BARS ========================================================================== */ .audience-nav-bar { position: relative; margin-top: 80px; background: #00152b; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 0; z-index: 900; } .audience-nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .audience-pills { display: flex; align-items: center; gap: 8px; } .audience-pill { padding: 5px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: var(--transition); } .audience-pill.active { background: var(--primary); color: #ffffff; } .audience-pill.inactive { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; } .audience-pill.inactive:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; } .subnav { position: sticky; top: 80px; z-index: 890; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(32, 48, 91, 0.04); overflow-x: auto; } .subnav-inner { display: flex; align-items: center; gap: 8px; padding: 10px 0; white-space: nowrap; } .subnav a { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); background: #ffffff; border: 1px solid var(--border-color); transition: var(--transition); text-decoration: none; } .subnav a.active, .subnav a:hover { color: #ffffff; background: var(--primary); border-color: var(--primary); } .subnav a.subnav-cta { color: var(--teal); border-color: rgba(30, 178, 169, 0.4); background: rgba(30, 178, 169, 0.05); } /* ========================================================================== DROPDOWN NAVIGATION ========================================================================== */ .dropdown { position: relative; } .dropdown > a { display: flex; align-items: center; gap: 4px; } .dropdown-icon { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; transition: var(--transition); } .dropdown:hover .dropdown-icon { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 220px; background: white; box-shadow: var(--shadow-md); border-radius: 12px; border: 1px solid var(--border-color); list-style: none; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 1001; } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu li { margin: 0; } .dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-size: 0.95rem; color: var(--text-muted) !important; text-decoration: none; } .dropdown-menu a::after { display: none; } .dropdown-menu a:hover { background: var(--ice-blue); color: var(--primary) !important; padding-left: 1.8rem; } /* ========================================================================== HAMBURGER / MOBILE MENU ========================================================================== */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; z-index: 1100; } .hamburger span { display: block; width: 24px; height: 2px; background: #334155; border-radius: 2px; transition: var(--transition); } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== HERO SECTION ========================================================================== */ .robo-hero { padding: 12rem 0 6rem; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at center, rgba(230, 245, 255, 0.4) 0%, #ffffff 80%); } .robo-hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 70vw; height: 70vw; background: radial-gradient(circle, var(--ice-blue) 0%, rgba(230, 245, 255, 0) 70%); border-radius: 50%; z-index: -1; animation: pulseBg 10s infinite alternate; } @keyframes pulseBg { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.1); opacity: 0.8; } } /* Canvas Hero (index.html) */ #heroCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: auto; } .hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 125, 209, 0.05) 0%, transparent 60%); z-index: 0; pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero-content h1 { font-size: 4.5rem; /* Was 900. The RDS weight scale is 300/400/500/700 — 900 is loaded but has no token, so this was the one h1 on the site rendering Roboto Black while every other rendered Bold. This selector is 0,1,1 and beat rds-system's plain `h1`, so the inconsistency was invisible in the token layer. */ font-weight: var(--rds-text-h1-weight); line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1.5px; } .hero-content p { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 2.5rem; max-width: 90%; } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-illustration { position: relative; width: 100%; height: 500px; perspective: 1000px; } .floating-node { animation: float 6s ease-in-out infinite; } .floating-node:nth-child(2) { animation-delay: -2s; } .floating-node:nth-child(3) { animation-delay: -4s; } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } } /* ========================================================================== SECTIONS ========================================================================== */ .robo-section { padding: 8rem 0; } .bg-alt { background-color: var(--bg-alt); } .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -1px; } .section-header p { font-size: 1.2rem; color: var(--text-muted); } /* Section Divider */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent); margin: 0; padding: 0; width: 100%; } /* ========================================================================== SERVICES GRID ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .service-card { background: white; border-radius: 20px; padding: 3rem 2rem; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--border-color); position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); border-color: var(--cyan); } .service-icon { width: 60px; height: 60px; margin-bottom: 1.5rem; } .service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--midnight); } .service-card p { color: var(--text-muted); } /* ========================================================================== GLOW CARDS ========================================================================== */ .glow-card { position: relative; background: white; border-radius: 15px; padding: 2.5rem; overflow: hidden; transition: transform 0.2s ease-out, box-shadow 0.3s ease; border: 1px solid var(--border-color); z-index: 1; color: #1e293b; } .glow-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 163, 224, 0.08), transparent 40%); z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .glow-card:hover::before { opacity: 1; } .glow-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: rgba(0, 163, 224, 0.3); transform: translateY(-4px); } .glow-card h3 { color: #0f172a; font-size: 1.5rem; margin-bottom: 1rem; } .glow-card p { color: #475569; line-height: 1.6; } .service-icon-pro { width: 60px; height: 60px; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 6px rgba(0, 163, 224, 0.2)); transition: transform 0.3s ease; } .glow-card:hover .service-icon-pro { transform: scale(1.1); } /* ========================================================================== WHY CHOOSE US SPLIT ========================================================================== */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .why-feature { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; } .feature-icon-wrapper { flex-shrink: 0; width: 60px; height: 60px; border-radius: 15px; background: var(--ice-blue); display: flex; align-items: center; justify-content: center; color: var(--primary); } .why-feature h4 { font-size: 1.3rem; margin-bottom: 0.5rem; } /* ========================================================================== AWARD / MARQUEE ========================================================================== */ .award-logo { height: 56px; width: auto; max-width: 260px; object-fit: contain; transition: all 0.3s ease; } .award-logo:hover { transform: scale(1.05); } @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-container { overflow: hidden; white-space: nowrap; width: 100%; position: relative; padding: 1rem 0; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .marquee-track { display: inline-block; animation: scrollMarquee 25s linear infinite; } /* scrollMarquee travels by the track's own width, so scroll SPEED depends on how wide the logos are. Resizing them widened both tracks — clients 2586 -> 3682px, partnerships 5818 -> 7178 — which at a shared 25s would have sped the rows up from 52 to 74 px/s and from 116 to 143 px/s. These durations restore each row's original speed: (track width / 2) / px per second. */ .marquee-track.track-clients { animation-duration: 36s; } .marquee-track.track-partners { animation-duration: 31s; } .marquee-track img { margin: 0 3rem; vertical-align: middle; transition: all 0.3s ease; } .marquee-container:hover .marquee-track { animation-play-state: paused; } /* ========================================================================== FOOTER ========================================================================== */ .robo-footer { background: #111827; color: white; padding: 4rem 0 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Five columns of markup — brand + Company, Offerings, Industries, Resources — were being laid out in four tracks, so Resources wrapped onto a second row and the footer grew a whole row taller than it needed to be. Five tracks puts every list on one line. minmax(0, 1fr) rather than 1fr so a long link cannot push its track wider than its share (a grid track's default minimum is min-content, which nowrap Japanese labels exceed). */ .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2.5rem; align-items: start; margin-bottom: 2.5rem; } .footer-col h5 { font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--cyan); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 0.75rem; } .footer-col ul a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: var(--transition); } .footer-col ul a:hover { color: white; padding-left: 5px; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } /* ========================================================================== BENTO BOX LAYOUT (Enterprise Page) ========================================================================== */ .bento-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 1.5rem; max-width: 1200px; margin: 0 auto; } .bento-item { background: var(--midnight); border: 1px solid rgba(0, 163, 224, 0.2); border-radius: 20px; padding: 2.5rem; color: white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; } .bento-item h3 { color: white !important; font-size: 1.5rem; margin-bottom: 1rem; } .bento-item p { color: rgba(255, 255, 255, 0.8) !important; line-height: 1.6; } .bento-item:hover { transform: translateY(-5px); border-color: var(--cyan); } .bento-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(0, 163, 224, 0.05) 0%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .bento-item:hover::before { opacity: 1; } .bento-large { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 2; grid-row: span 1; } .bento-wide-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; } .bento-standard { grid-column: span 1; grid-row: span 1; } /* ========================================================================== RESPONSIVE — TABLET (max-width: 1024px) ========================================================================== */ @media (max-width: 1024px) { .hero-content h1 { font-size: 3.5rem; } /* Brand block moves above the lists; the four lists stay side by side. */ .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .footer-grid > .footer-col:first-child { grid-column: 1 / -1; } .why-grid { grid-template-columns: 1fr; gap: 3rem; } .why-visual { order: -1; } .bento-container { grid-template-columns: repeat(2, 1fr); } .bento-large, .bento-wide, .bento-standard { grid-column: span 2; } } /* ========================================================================== RESPONSIVE — MOBILE (max-width: 768px) ========================================================================== */ @media (max-width: 768px) { /* Show hamburger, hide nav links */ .hamburger { display: flex; } .nav-links { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; z-index: 1050; font-size: 1.2rem; } .nav-links.open { display: flex; } /* Close dropdowns in mobile menu */ .nav-links .dropdown-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: var(--ice-blue); border-radius: 10px; margin-top: 0.5rem; display: none; } .nav-links .dropdown.open > .dropdown-menu { display: block; } .nav-actions { display: none; } /* Hero */ .robo-hero { padding: 8rem 0 4rem; min-height: auto; text-align: center; } .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-illustration { height: 300px; } .hero-content h1, .robo-hero h1 { font-size: 2.8rem !important; letter-spacing: -0.03em; } .hero-content p, .robo-hero p { font-size: 1.1rem !important; } .hero-ctas { justify-content: center; } /* Sections */ .robo-section { padding: 4rem 0; } .section-header h2 { font-size: 2rem; } .services-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; gap: 2rem; } /* Footer — two columns rather than one stacked list per row, which turned the footer into five full-width blocks and a very long scroll on phones. */ .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } /* Bento */ .bento-container { grid-template-columns: 1fr; } .bento-large, .bento-wide, .bento-standard { grid-column: span 1; } .bento-wide-cta { flex-direction: column; text-align: center; align-items: center; gap: 1.5rem; } /* Container padding */ .container { padding: 0 1.25rem; } /* Timeline */ .timeline-row { flex-direction: column !important; margin-bottom: 3rem !important; } .timeline-panel { width: 100% !important; text-align: left !important; } .timeline-node { display: none; } } /* ========================================================================== RESPONSIVE — SMALL MOBILE (max-width: 480px) ========================================================================== */ @media (max-width: 480px) { .hero-content h1, .robo-hero h1 { font-size: 2.2rem !important; } .btn { padding: 0.85rem 1.5rem; font-size: 0.95rem; } .glow-card { padding: 1.75rem; } } /* Language Switcher */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #64748b; text-decoration: none; padding: 5px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50px; transition: var(--transition); } .lang-switch:hover { border-color: var(--primary); color: var(--primary); } .robo-nav[style*="background:rgba(17,24,39"] .lang-switch, .robo-nav[style*="background:#111827"] .lang-switch, body.dark-theme .lang-switch, .robo-nav[style*="color:#fff"] .lang-switch { color: #9ca3af; border-color: rgba(255, 255, 255, 0.1); } /* ========================================================================== JAPANESE LANGUAGE NAV & FOOTER POLISH (Single line & font size optimization) ========================================================================== */ html[lang="ja"] .nav-links { gap: 1.2rem; } html[lang="ja"] .nav-links a { font-size: 0.9rem; white-space: nowrap; } html[lang="ja"] .dropdown-menu { min-width: 240px; } html[lang="ja"] .dropdown-menu a { font-size: var(--rds-text-body-sm); white-space: nowrap; padding: 0.6rem 1.2rem; } /* h3 added: these footer headings are

in the markup, so the h5/h4 selectors matched nothing and 業界別ソリューション was breaking across two lines. */ html[lang="ja"] .footer-col h3, html[lang="ja"] .footer-col h5, html[lang="ja"] .footer-col h4 { font-size: 1rem; white-space: nowrap; } html[lang="ja"] .footer-col ul li a { font-size: var(--rds-text-body-sm); white-space: nowrap; } html[lang="ja"] .footer-bottom p { white-space: nowrap; } /* Phone width: the footer is two columns, so a track is ~132-152px while the longest Japanese labels (ホワイトペーパー・記事, 業界別ソリューション) need 155px and 160px unbroken. Rather than let them break — or spill into the gutter — they step down to the next size on the scale, where they fit. */ @media (max-width: 480px) { html[lang="ja"] .footer-col h3, html[lang="ja"] .footer-col h5, html[lang="ja"] .footer-col h4 { font-size: var(--rds-text-body-sm); } html[lang="ja"] .footer-col ul li a { font-size: var(--rds-text-caption); } } /* ========================================================================== WHITE PAPERS & ARTICLES — industry -> audience -> 5-step library Injected on every industry page between . ========================================================================== */ .rl-wp { background: var(--rds-color-surface-raised); padding: 6rem 0; position: relative; z-index: 2; } .rl-wp-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rds-color-primary-strong); margin-bottom: 0.75rem; } .rl-wp-h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--rds-color-text); margin-bottom: 0.9rem; } .rl-wp-sub { max-width: 62ch; color: var(--rds-color-text-muted); font-size: 1.06rem; line-height: 1.7; margin-bottom: 3.25rem; } .rl-wp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; } .rl-wp-card { display: flex; flex-direction: column; background: var(--rds-color-surface-raised); border: 1px solid var(--rds-color-border); border-radius: var(--rds-radius-lg); overflow: hidden; transition: transform var(--rds-dur-base) var(--rds-ease), box-shadow var(--rds-dur-base) var(--rds-ease), border-color var(--rds-dur-base) var(--rds-ease); } .rl-wp-card:hover { transform: translateY(-4px); border-color: rgba(0, 125, 209, 0.32); box-shadow: var(--shadow-md); } /* --- card head (links to the audience hub) -------------------------------- */ .rl-wp-card-hub { display: block; padding: 1.75rem 1.75rem 1.5rem; border-bottom: 1px solid var(--rds-color-border); background: linear-gradient(160deg, rgba(0, 125, 209, 0.05), rgba(0, 195, 255, 0.02)); text-decoration: none; color: inherit; } .rl-wp-aud { display: inline-block; /* was 0.72rem = 11.52px: off the RDS scale and under its 12px caption floor */ font-size: var(--rds-text-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rds-color-primary-strong); background: rgba(0, 125, 209, 0.09); border-radius: var(--rds-radius-pill); padding: 0.32rem 0.75rem; margin-bottom: 0.9rem; } .rl-wp-title { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--rds-color-text); margin-bottom: 0.85rem; } .rl-wp-more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; color: var(--rds-color-primary-strong); } .rl-wp-more span { transition: transform var(--rds-dur-fast) var(--rds-ease); } .rl-wp-card-hub:hover .rl-wp-more span { transform: translateX(4px); } /* --- the five steps ------------------------------------------------------- */ .rl-wp-steps { list-style: none; margin: 0; padding: 0.5rem 0.75rem 1rem; flex: 1; } .rl-wp-step > a, .rl-wp-step > span { display: flex; align-items: center; gap: 0.85rem; min-height: 44px; /* WCAG 2.5.8 target size */ padding: 0.7rem 0.9rem; border-radius: var(--rds-radius-md); text-decoration: none; color: var(--rds-color-text); font-size: 0.94rem; line-height: 1.4; transition: background var(--rds-dur-fast) var(--rds-ease), color var(--rds-dur-fast) var(--rds-ease); } .rl-wp-step > a:hover { background: rgba(0, 125, 209, 0.07); color: var(--rds-color-primary); } .rl-wp-num { flex: none; /* was 0.72rem = 11.52px — see .rl-wp-aud */ font-size: var(--rds-text-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--rds-color-primary-strong); font-variant-numeric: tabular-nums; min-width: 1.6em; } .rl-wp-step-label { font-weight: 500; } /* a document that exists in Japanese but not yet in English */ .rl-wp-step.is-soon > span, .rl-wp-card-hub.is-soon { color: var(--rds-color-text-muted); cursor: default; } .rl-wp-step.is-soon .rl-wp-num, .rl-wp-card-hub.is-soon .rl-wp-aud, .rl-wp-card-hub.is-soon .rl-wp-more { color: var(--rds-color-text-muted); background: transparent; } .rl-wp-card-hub.is-soon .rl-wp-aud { background: rgba(24, 49, 105, 0.07); } .rl-wp-step.is-soon .rl-wp-step-label { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: var(--rds-color-border-strong); } .rl-wp-foot { margin-top: 2.5rem; } .rl-wp-foot a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--rds-color-primary); text-decoration: none; border-bottom: 1px solid rgba(0, 125, 209, 0.3); padding-bottom: 2px; transition: border-color var(--rds-dur-fast) var(--rds-ease); } .rl-wp-foot a:hover { border-color: var(--rds-color-primary); } /* inline links elsewhere whose English edition is not published yet */ .rl-unpublished { color: var(--rds-color-text-muted); cursor: default; text-decoration: underline dotted var(--rds-color-border-strong); text-underline-offset: 3px; } @media (max-width: 980px) { .rl-wp-grid { grid-template-columns: 1fr; gap: 1.25rem; } .rl-wp { padding: 4.5rem 0; } } @media (prefers-reduced-motion: reduce) { .rl-wp-card, .rl-wp-more span, .rl-wp-step > a { transition: none; } .rl-wp-card:hover { transform: none; } } /* ========================================================================== LANGUAGE SWITCH on white-paper / article pages ========================================================================== */ .rl-langbar { display: flex; justify-content: flex-start; margin: 0.9rem 0 0.25rem; } .rl-lang { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--rds-color-primary); background: rgba(0, 125, 209, 0.07); border: 1px solid rgba(0, 125, 209, 0.22); border-radius: var(--rds-radius-pill); padding: 0.5rem 0.95rem; text-decoration: none; transition: background var(--rds-dur-fast) var(--rds-ease), border-color var(--rds-dur-fast) var(--rds-ease), color var(--rds-dur-fast) var(--rds-ease); } .rl-lang:hover { background: var(--rds-color-primary); border-color: var(--rds-color-primary); color: var(--rds-color-primary-text); } /* target page is the closest available equivalent, not a direct translation */ .rl-lang.is-approx { color: var(--rds-color-text-muted); background: rgba(24, 49, 105, 0.05); border-color: var(--rds-color-border-strong); border-style: dashed; } .rl-lang.is-approx:hover { background: rgba(24, 49, 105, 0.1); color: var(--rds-color-text); }