/* ================================================================ Reehor IP — Silicon-Inspired Design System Version: 1.0 Inspired by: Silicon Template (Createx Studio) ================================================================ */ /* === Google Fonts Import (in instead for perf) === */ /* === CSS Custom Properties === */ :root { /* Brand Colors — Gerben Law Inspired */ --rh-primary: #001A3D; --rh-primary-dark: #000d1f; --rh-primary-light: #eaf2fa; --rh-blue: #0071e4; --rh-blue-dark: #004199; --rh-blue-light: #eaf2fa; --rh-amber: #004199; --rh-amber-dark: #003370; --rh-amber-light: #eaf2fa; --rh-green: #27AE60; --rh-green-light: #e8f8e8; --rh-purple: #8E44AD; --rh-red: #dc3545; /* Neutral */ --white: #ffffff; --gray-50: #f8f9fa; --gray-100: #f0f2f5; --gray-200: #e2e5ea; --gray-300: #c8cdd5; --gray-400: #a8aeb8; --gray-500: #8a9099; --gray-600: #6c727a; --gray-700: #4a4f56; --gray-800: #2d3238; --gray-900: #1a1d22; --dark: #0f1217; /* Semantic */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --bg-light: var(--rh-primary-light); --border-color: var(--gray-200); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: 3.75rem; /* 60px */ --lh-tight: 1.15; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* Border Radius */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.10); --shadow-xl: 0 16px 48px rgba(0,0,0,0.12); --shadow-hover: 0 12px 40px rgba(0,0,0,0.14); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* Container */ --container-max: 1200px; } /* === Reset & Base === */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rh-blue); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--rh-blue-dark); } /* === Typography === */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; font-weight: 600; line-height: var(--lh-tight); color: var(--rh-primary); } h1 { font-size: var(--fs-5xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-base); } p { margin-top: 0; margin-bottom: 1rem; } small, .text-small { font-size: var(--fs-sm); } .text-muted { color: var(--text-secondary) !important; } /* === Container === */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); } .container-narrow { max-width: 900px; } .container-wide { max-width: 1400px; } /* === Section === */ .section { padding: var(--space-4xl) 0; } .section-sm { padding: var(--space-2xl) 0; } .section-lg { padding: 6rem 0; } .section-title { text-align: center; margin-bottom: var(--space-3xl); } .section-title__label { display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rh-blue); margin-bottom: var(--space-sm); } .section-title h2 { font-size: var(--fs-4xl); margin-bottom: var(--space-md); color: var(--rh-primary); } .section-title p { font-size: var(--fs-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto; } .section-title__divider { width: 48px; height: 3px; background: var(--rh-blue); margin: var(--space-lg) auto 0; border-radius: 2px; } .section-title--left { text-align: left; } .section-title--left .section-title__divider { margin-left: 0; } /* === Top Bar === */ .top-bar { background: var(--rh-primary); color: rgba(255,255,255,0.85); font-size: var(--fs-xs); padding: 6px 0; position: relative; z-index: 1030; } .top-bar .container { display: flex; justify-content: space-between; align-items: center; } .top-bar a { color: rgba(255,255,255,0.85); transition: color var(--transition-fast); } .top-bar a:hover { color: var(--white); } .top-bar__left { display: flex; align-items: center; gap: var(--space-lg); } .top-bar__left i { margin-right: 4px; } /* Language Switcher */ .lang-switcher { display: flex; align-items: center; gap: 2px; } .lang-switcher__item { padding: 2px 6px; border-radius: 3px; cursor: pointer; font-size: var(--fs-xs); color: rgba(255,255,255,0.6); transition: all var(--transition-fast); background: none; border: none; font-family: inherit; } .lang-switcher__item:hover { color: var(--white); background: rgba(255,255,255,0.1); } .lang-switcher__item--active { background: rgba(255,255,255,0.2); color: var(--white); font-weight: 600; } /* === Header / Navigation === */ .header { position: sticky; top: 0; z-index: 1020; background: var(--white); border-bottom: 1px solid var(--border-color); transition: all var(--transition-base); } .header--scrolled { box-shadow: var(--shadow-md); } .header .container { display: flex; align-items: center; height: 68px; } .header__logo { flex-shrink: 0; margin-right: var(--space-xl); display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: 700; color: var(--rh-primary); text-decoration: none; } .header__logo img { height: 38px; width: auto; } .header__logo span { color: var(--rh-blue); } /* Desktop Nav */ .header__nav { display: flex; align-items: center; gap: 0; flex: 1; list-style: none; margin: 0; padding: 0; } .header__nav-item { position: relative; } .header__nav-link { display: flex; align-items: center; gap: 4px; padding: 0 var(--space-md); height: 68px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); white-space: nowrap; } .header__nav-link:hover, .header__nav-link--active, .header__nav-link.active { color: var(--rh-blue); } .header__nav-link--active, .header__nav-link.active { position: relative; } .header__nav-link--active::after, .header__nav-link.active::after { content: ''; position: absolute; bottom: 0; left: var(--space-md); right: var(--space-md); height: 2px; background: var(--rh-blue); } /* Dropdown */ .header__dropdown { position: absolute; top: 100%; left: 0; z-index: 1050; display: none; min-width: 260px; padding: var(--space-sm) 0; margin: 0; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; } .header__nav-item:hover .header__dropdown { display: block; animation: fadeIn 0.2s ease; } .header__dropdown-link { display: block; padding: var(--space-sm) var(--space-lg); font-size: var(--fs-sm); color: var(--text-primary); text-decoration: none; white-space: nowrap; transition: all var(--transition-fast); } .header__dropdown-link:hover { background: var(--rh-blue-light); color: var(--rh-blue); } /* Nav CTA */ .header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); } .header__cta .btn { padding: 0.5rem 1.25rem; font-size: var(--fs-sm); } /* Mobile Toggle */ .mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: none; cursor: pointer; margin-left: auto; } .mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--rh-primary); border-radius: 2px; transition: all var(--transition-base); } .mobile-toggle--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle--active span:nth-child(2) { opacity: 0; } .mobile-toggle--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* === Mobile Nav === */ .mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--white); padding: var(--space-xl); overflow-y: auto; } .mobile-nav--open { display: block; animation: fadeIn 0.25s ease; } .mobile-nav__close { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-primary); } .mobile-nav__list { list-style: none; padding: 0; margin: var(--space-3xl) 0 0; } .mobile-nav__link { display: block; padding: var(--space-md) 0; font-size: var(--fs-lg); font-weight: 500; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-color); } .mobile-nav__link--active, .mobile-nav__link.active { color: var(--rh-blue); } .mobile-nav__sub { list-style: none; padding: 0 0 0 var(--space-lg); margin: 0; } .mobile-nav__sub-link { display: block; padding: var(--space-sm) 0; font-size: var(--fs-base); color: var(--text-secondary); text-decoration: none; } .mobile-nav__cta { margin-top: var(--space-2xl); } /* === Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.625rem 1.5rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); font-family: inherit; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--rh-blue); color: var(--white); border-color: var(--rh-blue); } .btn-primary:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); box-shadow: 0 4px 16px rgba(0,113,228,0.3); color: var(--white); } .btn-amber { background: var(--rh-amber); color: var(--white); border-color: var(--rh-amber); } .btn-amber:hover { background: var(--rh-amber-dark); border-color: var(--rh-amber-dark); box-shadow: 0 4px 16px rgba(0,65,153,0.3); color: var(--white); } .btn-outline-primary { background: transparent; color: var(--rh-blue); border-color: var(--rh-blue); } .btn-outline-primary:hover { background: var(--rh-blue); color: var(--white); } .btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); } .btn-outline-white:hover { background: var(--white); color: var(--rh-primary); border-color: var(--white); } .btn-link { background: none; border: none; color: var(--rh-blue); padding: 0; } .btn-link:hover { color: var(--rh-blue-dark); box-shadow: none; transform: none; } .btn-sm { padding: 0.375rem 1rem; font-size: var(--fs-xs); } .btn-lg { padding: 0.875rem 2rem; font-size: var(--fs-base); } .btn-block { display: flex; width: 100%; } /* === Hero === */ .hero { position: relative; background: linear-gradient(135deg, rgba(0,20,60,0.85) 0%, rgba(0,10,40,0.75) 100%), url('../images/hero-banner.jpg') center center / cover no-repeat; overflow: hidden; padding: var(--space-4xl) 0; min-height: 600px; display: flex; align-items: center; justify-content: center; } .hero--short { min-height: 300px; padding: var(--space-3xl) 0 var(--space-2xl); } .hero--page { min-height: 200px; padding: var(--space-2xl) 0 var(--space-xl); } .hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.15); pointer-events: none; } .hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .hero--center .container { grid-template-columns: 1fr; text-align: center; } .hero__content { color: var(--white); } .hero__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 500; margin-bottom: var(--space-lg); color: rgba(255,255,255,0.9); } .hero__title { font-size: var(--fs-6xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-lg); line-height: 1.1; letter-spacing: -0.02em; } .hero__subtitle { font-size: var(--fs-lg); color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .hero--center .hero__subtitle { margin-left: auto; margin-right: auto; } .hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; } /* Page Hero (inner pages) */ .page-hero { background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%); padding: var(--space-3xl) 0 var(--space-2xl); text-align: center; } .page-hero h1 { font-size: var(--fs-4xl); color: var(--white); margin-bottom: var(--space-sm); } .page-hero > .container > p { font-size: var(--fs-lg); color: rgba(255,255,255,0.85); max-width: 700px; margin: 0 auto; } .page-hero .btn-amber { color: var(--white); } .page-hero__title { font-size: var(--fs-4xl); color: var(--white); margin-bottom: var(--space-sm); } .page-hero__breadcrumb { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--space-md); } .page-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; } .page-hero__breadcrumb a:hover { color: var(--white); } .page-hero__breadcrumb .separator { margin: 0 8px; } .page-hero__breadcrumb .breadcrumb-list { list-style: none; margin: 0; padding: 0; display: inline; } .page-hero__breadcrumb .breadcrumb-list li { display: inline; } .page-hero__breadcrumb .breadcrumb-list li + li::before { content: ' / '; margin: 0 8px; color: rgba(255,255,255,0.6); } .page-hero__breadcrumb .breadcrumb-list li.active { color: rgba(255,255,255,0.9); } .page-hero__desc { font-size: var(--fs-lg); color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto; } /* === Trust Bar === */ .trust-bar { background: var(--white); border-bottom: 1px solid var(--border-color); padding: var(--space-2xl) 0; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } .trust-item { text-align: center; } .trust-item__icon { font-size: 2rem; color: var(--rh-blue); margin-bottom: var(--space-sm); opacity: 0.8; } .trust-item__number { font-size: var(--fs-4xl); font-weight: 700; color: var(--rh-primary); line-height: 1; margin-bottom: 4px; } .trust-item__label { font-size: var(--fs-sm); color: var(--text-secondary); } /* === Cards === */ .card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); } .card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); } .card__image { width: 100%; height: 200px; object-fit: cover; } .card__body { padding: var(--space-lg); } .card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--rh-blue-light); border-radius: var(--radius-md); margin-bottom: var(--space-md); font-size: 1.5rem; color: var(--rh-blue); } .card__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-sm); color: var(--rh-primary); } .card__text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-md); } /* Service Card (Silicon-style) */ .service-card { text-align: center; padding: var(--space-2xl) var(--space-xl); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--white); transition: all var(--transition-base); } .service-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-6px); } .service-card__icon { width: 72px; height: 72px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--rh-blue-light); border-radius: var(--radius-lg); font-size: 2rem; color: var(--rh-blue); transition: all var(--transition-base); } .service-card:hover .service-card__icon { background: var(--rh-blue); color: var(--white); transform: scale(1.05); } .service-card__icon img, .service-card__icon svg { width: 36px; height: 36px; } .service-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); } .service-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-lg); } /* === Sector Card (industries page) === */ .sector-card { display: flex; gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--white); transition: all var(--transition-base); align-items: flex-start; } .sector-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-4px); } .sector-card__icon { flex-shrink: 0; width: 200px; height: 250px; border-radius: var(--radius-md); overflow: hidden; } .sector-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .sector-card__body { flex: 1; min-width: 0; } .sector-card__body h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--rh-primary); margin: 0 0 6px; line-height: 1.3; } .sector-card__body p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-md); } .sector-card__link { font-size: var(--fs-xs); font-weight: 500; color: var(--rh-blue); text-decoration: none; } .sector-card__link i { margin-left: var(--space-xs); transition: margin-left var(--transition-fast); } .sector-card__link:hover i { margin-left: var(--space-sm); } @media (max-width: 768px) { .sector-card { flex-direction: column; align-items: stretch; padding: var(--space-md); } .sector-card__icon { width: 100%; height: auto; aspect-ratio: 16/9; max-height: 280px; } .sector-card__body h3 { font-size: var(--fs-base); } } .service-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .service-card__features li { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-xs); } .service-card__features li i { color: var(--rh-blue); font-size: var(--fs-sm); } .service-card__features li i.fa-circle { font-size: 6px; } /* PCT Card */ .pct-card { margin-top: var(--space-xl); padding: var(--space-2xl); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--white); } .pct-card__label { font-size: var(--fs-xs); font-weight: 600; color: var(--rh-blue); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); } .pct-card__hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; margin-bottom: var(--space-xl); } .pct-card__hero-left { min-width: 0; } .pct-card__hero-right { display: flex; justify-content: flex-end; } .pct-card__map { width: 100%; max-width: 520px; height: auto; display: block; } .pct-card h3 { font-size: var(--fs-2xl); font-weight: 600; color: var(--rh-primary); margin-bottom: var(--space-sm); } .pct-card__desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; } .pct-card__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .pct-card__step { display: flex; gap: var(--space-sm); } .pct-card__step--deadline { flex-direction: column; gap: var(--space-md); padding: var(--space-md); background: var(--rh-blue-light); border-radius: var(--radius-md); } .pct-card__step--deadline .pct-card__deadline-label { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 2px; } .pct-card__step--deadline .pct-card__deadline-value { font-size: var(--fs-xl); font-weight: 700; color: var(--rh-blue); } .pct-card__step--deadline .pct-card__deadline-note { font-size: var(--fs-xs); color: var(--text-secondary); } .pct-card__step-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--rh-blue-light); color: var(--rh-blue); font-size: var(--fs-lg); } .pct-card__step-content h5 { font-size: var(--fs-sm); font-weight: 600; color: var(--rh-primary); margin-bottom: 4px; } .pct-card__step-content p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .pct-card__hero { grid-template-columns: 1fr; } .pct-card__hero-right { justify-content: center; } .pct-card__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .pct-card__steps { grid-template-columns: 1fr; } } /* OA Cards (4-column icon cards) */ .oa-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .oa-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid var(--border-color); } .oa-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--rh-blue-light); color: var(--rh-blue); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); margin-bottom: var(--space-md); } .oa-card h4 { font-size: var(--fs-lg); font-weight: 600; color: var(--rh-primary); margin-bottom: var(--space-sm); } .oa-card__divider { width: 32px; height: 2px; background: var(--rh-blue); margin-bottom: var(--space-sm); } .oa-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; } /* Horizontal card layout (icon left, content right) */ .oa-card--horizontal { display: flex; align-items: flex-start; gap: var(--space-md); } .oa-card--horizontal .oa-card__icon { flex-shrink: 0; margin-bottom: 0; } .oa-card--horizontal .oa-card__body { flex: 1; } .oa-card--horizontal .oa-card__body h4 { margin-bottom: var(--space-xs); } .oa-card--horizontal .oa-card__divider { margin-bottom: var(--space-sm); } /* 2x2 grid modifier */ .oa-cards--2x2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 767.98px) { .oa-cards { grid-template-columns: 1fr; } .oa-cards--2x2 { grid-template-columns: 1fr; } } /* Strategy CTA Card */ .strategy-cta { position: relative; display: flex; align-items: center; background: linear-gradient(135deg, #0047ab 0%, #0066cc 100%); border-radius: var(--radius-lg); padding: var(--space-2xl); gap: var(--space-xl); overflow: hidden; } .strategy-cta__pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .strategy-cta__content { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-xl); width: 100%; } .strategy-cta__left { flex: 1; } .strategy-cta__left h2 { color: var(--white); font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--space-sm); } .strategy-cta__left p { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-base); line-height: 1.6; margin-bottom: var(--space-lg); } .strategy-cta__badges { display: flex; gap: var(--space-md); flex-wrap: wrap; } .strategy-cta__badge { display: flex; align-items: center; gap: 8px; } .strategy-cta__badge-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; } .strategy-cta__badge span { color: var(--white); font-size: var(--fs-sm); font-weight: 500; } .strategy-cta__divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.2); } .strategy-cta__right { flex-shrink: 0; text-align: center; min-width: 240px; } .strategy-cta__btn { display: inline-block; background: var(--white); color: var(--rh-blue); font-size: var(--fs-base); font-weight: 600; padding: var(--space-sm) var(--space-xl); border-radius: var(--radius-md); text-decoration: none; transition: all 0.2s ease; margin-bottom: var(--space-sm); } .strategy-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .strategy-cta__note { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-xs); margin: 0; } .strategy-cta__note i { margin-right: 4px; } @media (max-width: 767.98px) { .strategy-cta { text-align: center; } .strategy-cta__content { flex-direction: column; } .strategy-cta__divider { width: 100%; height: 1px; } .strategy-cta__badges { justify-content: center; } } /* Remedy Cards (Reexamination & Invalidation) */ .remedy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .remedy-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-2xl); } .remedy-card h3 { font-size: var(--fs-xl); font-weight: 600; color: var(--rh-primary); margin-bottom: var(--space-sm); } .remedy-card__desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-lg); } .remedy-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); } .remedy-card__list li { display: flex; gap: var(--space-sm); } .remedy-card__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--rh-blue-light); color: var(--rh-blue); display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); } .remedy-card__list h5 { font-size: var(--fs-sm); font-weight: 600; color: var(--rh-primary); margin-bottom: 4px; } .remedy-card__list p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .remedy-grid { grid-template-columns: 1fr; } } /* Service Card V2 (Two-column layout) */ .service-card-v2 { padding: var(--space-2xl); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--white); transition: all var(--transition-base); } .service-card-v2:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); } .service-card-v2__header { text-align: center; margin-bottom: var(--space-lg); } .service-card-v2__icon { width: 64px; height: 64px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; background: var(--rh-blue-light); border-radius: 50%; font-size: 1.75rem; color: var(--rh-blue); } .service-card-v2__icon--text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .service-card-v2__header h3 { font-size: var(--fs-xl); color: var(--text-primary); margin: 0; } .service-card-v2__list { list-style: disc; padding-left: var(--space-lg); margin: 0 0 var(--space-lg); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.8; } .service-card-v2__list li { margin-bottom: var(--space-xs); } .service-card-v2__list li.service-card-v2__subitem { list-style: none; position: relative; } .service-card-v2__list li.service-card-v2__subitem::before { content: "—"; position: absolute; left: -1.1em; color: var(--text-secondary); } .service-card-v2__link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); font-weight: 500; color: var(--rh-blue); text-decoration: underline; transition: all var(--transition-base); } .service-card-v2__link:hover { color: var(--rh-blue-dark); gap: var(--space-sm); } /* === Feature Grid === */ .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); align-items: stretch; } .features-grid--3 { grid-template-columns: repeat(3, 1fr); } .feature-card { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); background: var(--gray-50); border-radius: var(--radius-lg); transition: all var(--transition-base); height: 100%; } .feature-card:hover { background: var(--white); box-shadow: var(--shadow-md); } .feature-card__icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-md); font-size: 1.5rem; color: var(--rh-blue); background: var(--rh-blue-light); } .feature-card__icon img { width: 100%; height: 100%; object-fit: cover; } /* Feature card with photo (industries sub-category pages) */ .feature-card--photo { flex-direction: column; } .feature-card--photo .feature-card__icon { width: 100%; height: 250px; border-radius: var(--radius-md); } .feature-card--photo .feature-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .feature-card__icon i { color: var(--rh-blue); } .feature-card h4 { font-size: var(--fs-base); margin-bottom: 4px; } .feature-card p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: 1.6; } /* === Process Steps === */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); counter-reset: step-counter; } .process-step { text-align: center; position: relative; } .process-step:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px; background: linear-gradient(to right, var(--rh-blue), var(--border-color)); } .process-step__number { width: 56px; height: 56px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); font-weight: 700; color: var(--rh-blue); background: var(--rh-blue-light); border-radius: 50%; transition: all var(--transition-base); } .process-step:hover .process-step__number { background: var(--rh-blue); color: var(--white); transform: scale(1.1); box-shadow: 0 8px 24px rgba(46,134,222,0.25); } .process-step h4 { font-size: var(--fs-base); margin-bottom: var(--space-sm); } .process-step p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } /* === Testimonials === */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .testimonial-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-xl); transition: all var(--transition-base); } .testimonial-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); } .testimonial-card__quote { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-lg); font-style: italic; } .testimonial-card__quote::before { content: '"'; font-size: 2.5rem; color: var(--rh-blue); line-height: 0; vertical-align: -0.4em; margin-right: 4px; font-style: normal; font-family: var(--font-serif); } .testimonial-card__author { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-color); } .testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--gray-200); } .testimonial-card__name { font-size: var(--fs-sm); font-weight: 600; color: var(--rh-primary); margin-bottom: 2px; } .testimonial-card__role { font-size: var(--fs-xs); color: var(--text-secondary); } /* === Team === */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } .team-card { text-align: center; transition: all var(--transition-base); } .team-card:hover { transform: translateY(-4px); } .team-card__photo { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-md); background: var(--gray-100); } .team-card__photo img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); } .team-card:hover .team-card__photo img { transform: scale(1.05); } .team-card__name { font-size: var(--fs-base); font-weight: 600; margin-bottom: 2px; color: var(--rh-primary); } .team-card__title { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-sm); } .team-card__social { display: flex; justify-content: center; gap: var(--space-sm); } /* Team Card V2 */ .team-card-v2 { text-align: center; transition: all var(--transition-base); } .team-card-v2:hover { transform: translateY(-4px); } .team-card-v2__photo { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-md); background: var(--gray-100); } .team-card-v2__photo img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); } .team-card-v2:hover .team-card-v2__photo img { transform: scale(1.05); } .team-card-v2__name { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 2px; color: var(--rh-primary); } .team-card-v2__role { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-sm); } .team-card-v2__expertise { margin-bottom: var(--space-sm); } .team-card-v2__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); } .team-card-v2__expertise p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } .team-card-v2__email { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--rh-blue); margin-bottom: var(--space-sm); transition: color var(--transition-base); } .team-card-v2__email:hover { color: var(--rh-blue-dark); } .team-card-v2__profile { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--rh-blue); text-decoration: underline; transition: all var(--transition-base); } .team-card-v2__profile:hover { color: var(--rh-blue-dark); } .team-card__social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); border-radius: 50%; transition: all var(--transition-fast); font-size: var(--fs-sm); } .team-card__social a:hover { background: var(--rh-blue-light); color: var(--rh-blue); } /* === CTA Section === */ .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: url('../images/cta-city-bg.jpg'); background-size: cover; background-position: center right; z-index: 0; } .cta-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,30,60,0.95) 0%, rgba(10,30,60,0.7) 50%, rgba(10,30,60,0.4) 100%); pointer-events: none; z-index: 1; } .cta-section .container { position: relative; z-index: 2; } .cta-content { text-align: center; color: var(--white); max-width: 640px; margin: 0 auto; } .cta-content h2 { color: var(--white); font-size: var(--fs-4xl); margin-bottom: var(--space-md); } .cta-content p { color: rgba(255,255,255,0.75); font-size: var(--fs-lg); margin-bottom: var(--space-xl); } .cta-form { max-width: 480px; margin: 0 auto; } .cta-form .form-row { display: flex; gap: var(--space-sm); } .cta-form input { flex: 1; padding: 0.75rem 1.25rem; border: 2px solid rgba(255,255,255,0.2); } /* CTA Split Layout */ .cta-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2xl); align-items: center; color: var(--white); } .cta-split__left h2 { color: var(--white); font-size: var(--fs-3xl); margin-bottom: var(--space-md); white-space: nowrap; } .cta-split__left > p { color: rgba(255,255,255,0.75); font-size: var(--fs-base); margin-bottom: var(--space-xl); max-width: 480px; } .cta-features { display: flex; gap: var(--space-lg); flex-wrap: nowrap; } .cta-feature { display: flex; align-items: flex-start; gap: var(--space-sm); flex: 1; min-width: 0; } .cta-feature__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-md); font-size: 1.25rem; color: rgba(255,255,255,0.8); } .cta-feature__title { font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,0.9); } .cta-split__divider { width: 1px; height: 100%; min-height: 200px; background: rgba(255,255,255,0.2); } .cta-split__right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); } .cta-split__right .btn-amber { padding: 0.875rem 2rem; font-size: var(--fs-base); background: var(--rh-blue); border-color: var(--rh-blue); color: var(--white); } .cta-split__right .btn-amber:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); } .cta-split__note { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); margin: 0; } .cta-split__confidential { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--fs-sm); color: rgba(255,255,255,0.7); } .cta-split__confidential i { color: rgba(255,255,255,0.9); font-size: 1rem; margin-top: 2px; } .cta-form input::placeholder { color: rgba(255,255,255,0.5); } .cta-form input:focus { outline: none; border-color: var(--rh-blue); background: rgba(255,255,255,0.15); } .cta-form .btn { flex-shrink: 0; } /* === CTA Mini Bar === */ .cta-bar { background: var(--rh-primary); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-2xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); color: var(--white); } .cta-bar__text h3 { color: var(--white); margin-bottom: 4px; } .cta-bar__text p { color: rgba(255,255,255,0.7); margin: 0; font-size: var(--fs-sm); } .cta-bar__action { flex-shrink: 0; } /* === Footer === */ .footer { background: var(--rh-primary); color: rgba(255,255,255,0.7); padding: var(--space-3xl) 0 0; } .footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: var(--space-2xl); } .footer__brand { margin-bottom: var(--space-md); display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: 700; color: var(--white); text-decoration: none; } .footer__brand img { height: 36px; width: auto; } .footer__brand span { color: var(--rh-blue); } .footer__desc { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--space-lg); } .footer__title { font-size: var(--fs-base); font-weight: 600; color: var(--white); margin-bottom: var(--space-lg); position: relative; padding-bottom: var(--space-sm); } .footer__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--rh-blue); } .footer__links { list-style: none; padding: 0; margin: 0; } .footer__links li { margin-bottom: var(--space-sm); } .footer__links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: var(--fs-sm); transition: all var(--transition-fast); } .footer__links a:hover { color: var(--white); padding-left: 4px; } .footer__contact { list-style: none; padding: 0; margin: 0; } .footer__contact li { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--fs-sm); } .footer__contact i { margin-top: 4px; color: var(--rh-blue); flex-shrink: 0; width: 16px; text-align: center; } .footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); } .footer__social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 50%; color: rgba(255,255,255,0.6); transition: all var(--transition-base); text-decoration: none; } .footer__social a:hover { background: var(--rh-blue); color: var(--white); transform: translateY(-2px); } .footer__bottom { margin-top: var(--space-2xl); padding: var(--space-lg) 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); } .footer__bottom a { color: rgba(255,255,255,0.6); text-decoration: none; } .footer__bottom a:hover { color: var(--white); } /* === Float Tools === */ .float-tools { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 1000; display: flex; flex-direction: column; gap: var(--space-sm); } .float-tools a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: var(--shadow-md); transition: all var(--transition-base); text-decoration: none; font-size: 1.125rem; } .float-tools__phone { background: var(--rh-green); color: var(--white); } .float-tools__phone:hover { background: #219a52; transform: translateY(-2px); color: var(--white); } .float-tools__whatsapp { background: #25D366; color: var(--white); } .float-tools__whatsapp:hover { background: #1da955; transform: translateY(-2px); color: var(--white); } .float-tools__top { background: var(--rh-blue); color: var(--white); } .float-tools__top:hover { background: var(--rh-blue-dark); transform: translateY(-2px); color: var(--white); } /* === Grid Layouts === */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); } /* === Tech Card (numbered) === */ .tech-card { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-lg); transition: all var(--transition-base); } .tech-card:hover { background: var(--white); box-shadow: var(--shadow-md); } .tech-card__number { font-size: 1.5rem; font-weight: 700; color: var(--rh-primary); margin-bottom: var(--space-sm); line-height: 1; } .tech-card h4 { font-size: var(--fs-base); margin-bottom: var(--space-sm); } .tech-card p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: 1.6; } /* === Case Cards === */ .case-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); display: flex; flex-direction: column; padding: var(--space-lg); height: 100%; } .case-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); } .case-card__body { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-md); flex: 1; margin-top: auto; } .case-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .case-card__image { flex-shrink: 0; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--gray-50); border-radius: var(--radius-md); overflow: hidden; } .case-card__image img { width: 100%; height: 100%; object-fit: contain; } .case-card__tags { display: flex; gap: 6px; margin-bottom: var(--space-sm); flex-wrap: wrap; } .case-card__tag { display: inline-block; font-size: 0.625rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; background: var(--rh-blue-light); color: var(--rh-blue); } .case-card__tag--patent { background: var(--rh-green-light); color: var(--rh-green); } .case-card__tag--trademark { background: var(--rh-amber-light); color: var(--rh-amber); } .case-card__tag--industry { background: var(--rh-blue-light); color: var(--rh-blue); } .case-card__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-sm); color: var(--rh-primary); line-height: 1.4; } .case-card__result { font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--space-sm); display: inline-flex; align-items: center; gap: 6px; width: fit-content; } .case-card__result:has(.fa-check-circle), .case-card__result:contains("Granted"), .case-card__result:contains("Maintained") { color: var(--rh-green); } .case-card__result:has(.fa-times-circle), .case-card__result:contains("Invalidated") { color: var(--rh-red); } .case-card__result:has(.fa-dot-circle-o), .case-card__result:contains("Partial") { color: var(--rh-amber); } .case-card__desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); flex-grow: 1; } .case-card__link { font-size: var(--fs-sm); font-weight: 600; color: var(--rh-blue); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-fast); margin-top: auto; } .case-card__link:hover { gap: 10px; } /* === Filter Tabs === */ .filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-2xl); } .filter-tab { padding: 0.5rem 1.25rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); background: var(--gray-50); border: 1px solid var(--border-color); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); font-family: inherit; } .filter-tab:hover { color: var(--rh-blue); border-color: var(--rh-blue); } .filter-tab--active { background: var(--rh-blue); color: var(--white); border-color: var(--rh-blue); } /* === Steps (horizontal) === */ .steps-horizontal { display: flex; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); } .steps-horizontal__item { flex: 1; padding: var(--space-lg); text-align: center; background: var(--white); border-right: 1px solid var(--border-color); font-size: var(--fs-sm); color: var(--text-secondary); transition: all var(--transition-fast); } .steps-horizontal__item:last-child { border-right: none; } .steps-horizontal__item--active { background: var(--rh-blue); color: var(--white); font-weight: 600; } .steps-horizontal__item--active .steps-horizontal__label { color: rgba(255,255,255,0.8); } .steps-horizontal__num { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 4px; } .steps-horizontal__label { font-size: var(--fs-xs); color: var(--text-muted); } /* === Tags === */ .tags { display: flex; gap: 6px; flex-wrap: wrap; } .tag { display: inline-block; padding: 4px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-primary); background: var(--gray-50); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .tag:hover { background: var(--rh-blue-light); color: var(--rh-blue); } /* === FAQ === */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: var(--space-sm); overflow: hidden; transition: all var(--transition-fast); } .faq-item:hover { border-color: var(--rh-blue-light); } .faq-item__question { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); cursor: pointer; font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); background: var(--white); transition: all var(--transition-fast); user-select: none; } .faq-item__question:hover { background: var(--gray-50); } .faq-item__icon { font-size: var(--fs-sm); color: var(--text-secondary); transition: transform var(--transition-fast); } .faq-item--open .faq-item__icon { transform: rotate(180deg); } .faq-item__answer { display: none; padding: 0 var(--space-lg) var(--space-lg); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; } .faq-item--open .faq-item__answer { display: block; } /* === Material List === */ .material-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .material-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text-primary); transition: all var(--transition-fast); } .material-item:hover { background: var(--rh-blue-light); color: var(--rh-blue); } .material-item__icon { font-size: 1.25rem; flex-shrink: 0; } /* === Contact Form & Info === */ .contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-2xl); align-items: start; } .contact-form { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-2xl); } .contact-form__title { font-size: var(--fs-2xl); margin-bottom: var(--space-lg); } .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 6px; } .form-group label .required { color: var(--rh-red); } .form-control { width: 100%; padding: 0.625rem 1rem; font-size: var(--fs-base); font-family: inherit; color: var(--text-primary); background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: all var(--transition-fast); } .form-control:focus { outline: none; border-color: var(--rh-blue); box-shadow: 0 0 0 3px rgba(46,134,222,0.12); } .form-control::placeholder { color: var(--text-muted); } textarea.form-control { min-height: 120px; resize: vertical; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c727a' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } /* Contact Info */ .contact-info { display: flex; flex-direction: column; gap: var(--space-md); } .contact-info__card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-lg); transition: all var(--transition-base); } .contact-info__card:hover { border-color: var(--rh-blue-light); box-shadow: var(--shadow-sm); } .contact-info__icon { font-size: 1.25rem; color: var(--rh-blue); margin-bottom: var(--space-sm); } .contact-info__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; } .contact-info__value { font-size: var(--fs-base); color: var(--text-primary); font-weight: 500; } .contact-map { border-radius: var(--radius-md); overflow: hidden; height: 250px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--fs-sm); } .contact-map iframe { width: 100%; height: 100%; border: 0; display: block; } .contact-map__loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-sm); } .contact-map__link { text-align: center; margin-top: 8px; font-size: var(--fs-xs); } .contact-map__link a { color: var(--rh-blue); text-decoration: none; } .contact-map__link a:hover { text-decoration: underline; } /* CTA Trust Badges */ .cta-trust { display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); } .cta-trust__item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: var(--fs-sm); font-weight: 500; } .cta-trust__item i { font-size: 1.1rem; color: var(--rh-amber); } /* === Article / Blog === */ .article-list { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-2xl); align-items: start; } .article-items { display: flex; flex-direction: column; gap: var(--space-lg); } .article-item { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); transition: all var(--transition-base); cursor: pointer; } .article-item:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateX(4px); } .article-item__content { flex: 1; } .article-item__meta { display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-sm); font-size: var(--fs-xs); color: var(--text-muted); } .article-item__title { font-size: var(--fs-base); font-weight: 600; color: var(--rh-primary); margin-bottom: var(--space-sm); transition: color var(--transition-fast); } .article-item:hover .article-item__title { color: var(--rh-blue); } .article-item__excerpt { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: var(--space-lg); } .sidebar__widget { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-lg); } .sidebar__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-md); color: var(--rh-primary); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--rh-blue-light); } .sidebar__list { list-style: none; padding: 0; margin: 0; } .sidebar__list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); font-size: var(--fs-sm); } .sidebar__list li:last-child { border-bottom: none; } .sidebar__list a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .sidebar__list a:hover { color: var(--rh-blue); } /* === Article Detail === */ .article-detail__header { margin-bottom: var(--space-2xl); } .article-detail__meta { display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-md); font-size: var(--fs-sm); color: var(--text-muted); } .article-detail__title { font-size: var(--fs-3xl); margin-bottom: var(--space-md); } .article-detail__content { font-size: var(--fs-base); line-height: 1.8; color: var(--text-primary); } .article-detail__content p { margin-bottom: 1.25rem; } .article-detail__content h3 { font-size: var(--fs-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); } .article-detail__share { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: var(--space-md); font-size: var(--fs-sm); } .article-detail__share a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-full); transition: all var(--transition-fast); } .article-detail__share a:hover { color: var(--rh-blue); border-color: var(--rh-blue); } /* === Article Page === */ /* Article Hero */ .article-hero { padding: var(--space-3xl) 0 var(--space-2xl); background: var(--bg-light); } .article-hero .container { max-width: 800px; margin: 0 auto; } .article-hero__breadcrumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-md); } .article-hero__breadcrumb a { color: var(--text-muted); text-decoration: none; } .article-hero__breadcrumb a:hover { color: var(--rh-blue); } .article-hero__breadcrumb .breadcrumb-list { list-style: none; margin: 0; padding: 0; display: inline; } .article-hero__breadcrumb .breadcrumb-list li { display: inline; } .article-hero__breadcrumb .breadcrumb-list li + li::before { content: ' / '; margin: 0 6px; color: var(--text-muted); } .article-hero__breadcrumb .breadcrumb-list li.active { color: var(--text-primary); } .article-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--fs-sm); color: var(--text-muted); } .article-hero__category { display: inline-block; padding: 3px 10px; background: var(--rh-blue-light); color: var(--rh-blue); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } .article-hero__meta-sep { color: var(--gray-300); } .article-hero__date, .article-hero__read-time { display: inline-flex; align-items: center; gap: 4px; } .article-hero__read-time i { font-size: 12px; } .article-hero__title { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-md); color: var(--text-primary); letter-spacing: -0.02em; } .article-hero__excerpt { font-size: var(--fs-lg); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-md); } .article-hero__source { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-xl); display: flex; align-items: center; gap: 6px; } .article-hero__source i { color: var(--rh-blue); } .article-hero__author { display: flex; align-items: center; gap: var(--space-md); } .article-hero__author-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--gray-100); } .article-hero__author-avatar img { width: 100%; height: 100%; object-fit: cover; } .article-hero__author-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--rh-primary); color: var(--white); font-weight: 600; font-size: var(--fs-sm); } .article-hero__author-name { font-weight: 600; font-size: var(--fs-base); color: var(--text-primary); } .article-hero__author-title { font-size: var(--fs-sm); color: var(--text-secondary); } /* Article Layout (main + sidebar) */ .article-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3xl); align-items: start; } /* Article Content */ .article-content { font-size: var(--fs-base); line-height: 1.8; color: var(--text-primary); min-width: 0; } .article-content h2 { font-size: var(--fs-2xl); font-weight: 700; margin-top: var(--space-3xl); margin-bottom: var(--space-lg); color: var(--text-primary); line-height: 1.3; } .article-content h2:first-child { margin-top: 0; } .article-content h3 { font-size: var(--fs-xl); font-weight: 600; margin-top: var(--space-2xl); margin-bottom: var(--space-md); color: var(--text-primary); } .article-content p { margin-bottom: 1.25rem; } .article-content ul, .article-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .article-content li { margin-bottom: 0.5rem; line-height: 1.7; } .article-content strong { font-weight: 600; } /* Blockquote */ .article-content blockquote { margin: var(--space-2xl) 0; padding: var(--space-lg) var(--space-xl); background: var(--bg-light); border-left: 4px solid var(--rh-blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .article-content blockquote p { font-size: var(--fs-lg); font-style: italic; color: var(--text-primary); line-height: 1.7; margin-bottom: var(--space-sm); } .article-content blockquote cite { font-size: var(--fs-sm); color: var(--text-secondary); font-style: normal; } /* CTA Box */ .article-content__cta { margin: var(--space-3xl) 0; padding: var(--space-xl) var(--space-2xl); background: var(--rh-primary); border-radius: var(--radius-lg); text-align: center; color: var(--white); } .article-content__cta h3 { color: var(--white); margin: 0 0 var(--space-sm); font-size: var(--fs-xl); } .article-content__cta p { color: rgba(255,255,255,0.8); margin-bottom: var(--space-lg); font-size: var(--fs-sm); } .article-content__cta .btn-amber { background: var(--white); color: var(--rh-primary); border: none; } .article-content__cta .btn-amber:hover { background: rgba(255,255,255,0.9); } /* Share Links */ .article-content__share { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--fs-sm); color: var(--text-secondary); } .article-content__share-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); } .article-content__share-link:hover { color: var(--rh-blue); border-color: var(--rh-blue); background: var(--rh-blue-light); } /* Author Bio */ .article-content__bio { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: var(--bg-light); border-radius: var(--radius-md); margin-top: var(--space-lg); } .article-content__bio-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--gray-100); } .article-content__bio-avatar img { width: 100%; height: 100%; object-fit: cover; } .article-content__bio h4 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 600; } .article-content__bio p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; } /* Article Navigation */ .article-content__back { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-color); } .article-content__nav { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); } .article-content__nav .btn { width: 100%; text-align: left; font-size: 0.9rem; } .article-content__nav .btn:last-child { text-align: right; } /* Sidebar Widgets */ .article-sidebar { min-width: 0; } .sidebar-widget { padding: var(--space-lg); background: var(--bg-light); border-radius: var(--radius-md); margin-bottom: var(--space-lg); } .sidebar-widget__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--rh-blue); color: var(--text-primary); } .sidebar-widget ul { list-style: none; padding: 0; margin: 0; } .sidebar-widget li { margin-bottom: var(--space-sm); } .sidebar-widget a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); transition: color var(--transition-fast); line-height: 1.5; } .sidebar-widget a:hover { color: var(--rh-blue); } /* TOC Widget */ .sidebar-widget__toc li { padding: 6px 0; border-bottom: 1px solid var(--border-color); } .sidebar-widget__toc li:last-child { border-bottom: none; } .sidebar-widget__toc a { display: block; font-weight: 500; } /* Categories Widget */ .sidebar-widget__cat li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-color); } .sidebar-widget__cat li:last-child { border-bottom: none; } .sidebar-widget__cat a { font-weight: 500; } /* CTA Widget */ .sidebar-widget--cta { background: var(--rh-primary); color: var(--white); text-align: center; } .sidebar-widget--cta .sidebar-widget__title { color: var(--white); border-bottom-color: rgba(255,255,255,0.2); } .sidebar-widget--cta p { color: rgba(255,255,255,0.8); font-size: var(--fs-sm); margin-bottom: var(--space-md); line-height: 1.6; } .sidebar-widget--cta .btn-amber { background: var(--white); color: var(--rh-primary); border: none; } .sidebar-widget--cta .btn-amber:hover { background: rgba(255,255,255,0.9); } /* Related Articles in Sidebar */ .sidebar-widget__related li { padding: 8px 0; border-bottom: 1px solid var(--border-color); } .sidebar-widget__related li:last-child { border-bottom: none; } .sidebar-widget__related a { display: block; font-weight: 500; } /* Related Articles Grid Section */ .section__title { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--space-2xl); text-align: center; color: var(--text-primary); } .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .article-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition-base); } .article-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .article-card__image { height: 180px; background: var(--bg-light); display: flex; align-items: center; justify-content: center; overflow: hidden; } .article-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-card__placeholder { font-size: 3rem; color: var(--gray-300); } .article-card__body { padding: var(--space-lg); } .article-card__cat { display: inline-block; padding: 2px 8px; background: var(--rh-blue-light); color: var(--rh-blue); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); } .article-card__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-sm); line-height: 1.4; } .article-card__title a { color: var(--text-primary); text-decoration: none; } .article-card__title a:hover { color: var(--rh-blue); } .article-card__excerpt { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card__link { font-size: var(--fs-sm); font-weight: 500; color: var(--rh-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap var(--transition-fast); } .article-card__link:hover { gap: 8px; } /* Article Page Responsive */ @media (max-width: 992px) { .article-layout { grid-template-columns: 1fr; } .article-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .article-hero__title { font-size: var(--fs-3xl); } .article-hero__excerpt { font-size: var(--fs-base); } .article-grid { grid-template-columns: 1fr; } .article-content__bio { flex-direction: column; text-align: center; } .article-content__bio-avatar { margin: 0 auto; } } /* === Pagination === */ .pagination { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-2xl); } .pagination__item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text-primary); text-decoration: none; transition: all var(--transition-fast); } .pagination__item:hover { border-color: var(--rh-blue); color: var(--rh-blue); } .pagination__item--active { background: var(--rh-blue); color: var(--white); border-color: var(--rh-blue); } .pagination__item--disabled { opacity: 0.4; cursor: default; pointer-events: none; } /* === Timeline === */ .timeline { position: relative; padding-left: var(--space-2xl); } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border-color); } .timeline__item { position: relative; padding-bottom: var(--space-xl); } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-2xl) + 4px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--rh-blue); border: 3px solid var(--rh-blue-light); } .timeline__year { font-size: var(--fs-sm); font-weight: 700; color: var(--rh-blue); margin-bottom: 4px; } .timeline__text { font-size: var(--fs-sm); color: var(--text-secondary); } /* === Industries Hero (dark) === */ .industry-hero { background: var(--rh-primary); color: var(--white); padding: var(--space-3xl) 0; text-align: center; } .industry-hero h1 { color: var(--white); font-size: var(--fs-4xl); margin-bottom: var(--space-sm); } .industry-hero p { color: rgba(255,255,255,0.75); font-size: var(--fs-lg); max-width: 640px; margin: 0 auto var(--space-lg); } /* === Argument Section (4-part industry detail) === */ .argument-section { padding: var(--space-2xl) 0; } .argument-section__header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .argument-section__badge { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--fs-sm); font-weight: 700; color: var(--white); background: var(--rh-blue); flex-shrink: 0; } .argument-section__title { font-size: var(--fs-xl); font-weight: 600; margin: 0; } .argument-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .argument-card { padding: var(--space-lg); border-radius: var(--radius-md); border-left: 3px solid; transition: all var(--transition-base); } .argument-card:hover { box-shadow: var(--shadow-md); } .argument-card h4 { font-size: var(--fs-base); margin-bottom: var(--space-sm); } .argument-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } /* === Tech Item === */ .tech-item { padding: var(--space-md); border-radius: var(--radius-md); background: var(--gray-50); text-align: center; } .tech-item p { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); margin: 0; line-height: 1.4; } .tech-item__icon { font-size: 1.75rem; color: var(--rh-primary); margin-bottom: var(--space-sm); } /* === Stats Grid === */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .stat-card { text-align: center; padding: var(--space-lg); background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .stat-card__number { font-size: var(--fs-4xl); font-weight: 700; color: var(--rh-blue); line-height: 1; margin-bottom: 4px; } .stat-card__suffix { font-size: var(--fs-lg); font-weight: 400; color: var(--rh-blue); } .stat-card__label { font-size: var(--fs-sm); color: var(--text-secondary); } /* === Newsletter Subscribe === */ .subscribe-widget { background: linear-gradient(135deg, var(--rh-blue-light), var(--white)); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; } .subscribe-widget h4 { font-size: var(--fs-base); margin-bottom: var(--space-sm); } .subscribe-widget p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-md); } .subscribe-form { display: flex; flex-direction: column; gap: var(--space-sm); } .subscribe-form input { padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--fs-sm); font-family: inherit; } .subscribe-form input:focus { outline: none; border-color: var(--rh-blue); box-shadow: 0 0 0 3px rgba(46,134,222,0.12); } /* === Page Hero (simple) === */ .page-hero--simple { background: linear-gradient(135deg, var(--rh-primary), var(--rh-primary-dark)); padding: var(--space-3xl) 0; text-align: center; } .page-hero--simple .page-hero__title { color: var(--white); font-size: var(--fs-4xl); margin-bottom: var(--space-md); } .page-hero--simple .page-hero__subtitle { color: rgba(255,255,255,0.75); font-size: var(--fs-lg); max-width: 600px; margin: 0 auto; } /* === Utility Classes === */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-16 { margin-top: var(--space-md); } .mt-24 { margin-top: var(--space-lg); } .mt-32 { margin-top: var(--space-xl); } .mt-40 { margin-top: var(--space-2xl); } .mt-48 { margin-top: var(--space-3xl); } .mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: var(--space-md); } .mb-24 { margin-bottom: var(--space-lg); } .mb-32 { margin-bottom: var(--space-xl); } .mb-40 { margin-bottom: var(--space-2xl); } .mb-48 { margin-bottom: var(--space-3xl); } .bg-white { background: var(--white); } .bg-light { background: var(--bg-light); } .bg-primary { background: var(--rh-primary); } .bg-blue-light { background: var(--rh-blue-light); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* === Animations === */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Default: visible when JS is disabled */ .fade-in { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } /* When JS loads: hide initially for animation */ .js .fade-in { opacity: 0; transform: translateY(30px); } /* When in view: show */ .js .fade-in.visible { opacity: 1; transform: translateY(0); } /* === Responsive === */ @media (max-width: 1199.98px) { :root { --fs-6xl: 3rem; } } @media (max-width: 991.98px) { .header__nav, .header__cta { display: none; } .mobile-toggle { display: flex; } .hero--short { min-height: 250px; } .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .grid-3, .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .grid-4, .team-grid { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .process-step:not(:last-child)::after { display: none; } .footer__grid { grid-template-columns: repeat(2, 1fr); } .contact-layout { grid-template-columns: 1fr; } .article-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .features-grid, .features-grid--3 { grid-template-columns: 1fr; } .cta-bar { flex-direction: column; text-align: center; } .form-row { grid-template-columns: 1fr; } .cta-form .form-row { flex-direction: column; } .page-hero__title { font-size: var(--fs-3xl); } .steps-horizontal { flex-direction: column; border: none; gap: var(--space-sm); } .steps-horizontal__item { border-right: none; border: 1px solid var(--border-color); border-radius: var(--radius-md); } .argument-grid { grid-template-columns: 1fr; } .material-grid { grid-template-columns: 1fr; } } /* ============================ Case Detail Page ============================ */ /* Hero */ .case-hero { position: relative; background: var(--rh-primary); padding: var(--space-3xl) 0 var(--space-2xl); text-align: center; color: var(--white); } .case-hero__breadcrumb { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); margin-bottom: var(--space-lg); } .case-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; } .case-hero__breadcrumb a:hover { color: var(--white); } .case-hero__breadcrumb .breadcrumb-list { list-style: none; margin: 0; padding: 0; display: inline; } .case-hero__breadcrumb .breadcrumb-list li { display: inline; } .case-hero__breadcrumb .breadcrumb-list li + li::before { content: ' / '; margin: 0 8px; color: rgba(255,255,255,0.5); } .case-hero__breadcrumb .breadcrumb-list li.active { color: rgba(255,255,255,0.9); } .case-hero__tags { display: flex; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; } .case-hero__tag { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .case-hero__tag--industry { background: rgba(255,255,255,0.15); color: var(--white); } .case-hero__tag--patent { background: var(--rh-amber); color: var(--rh-primary); } .case-hero__tag--trademark { background: #27AE60; color: var(--white); } .case-hero__title { font-size: var(--fs-4xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-md); line-height: 1.25; max-width: 800px; margin-left: auto; margin-right: auto; } .case-hero__subtitle { font-size: var(--fs-lg); color: rgba(255,255,255,0.7); max-width: 640px; margin: 0 auto; line-height: 1.6; } /* Layout */ .case-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3xl); align-items: start; } /* Main Content */ .case-content { min-width: 0; } /* Section Block */ .case-section { display: flex; gap: var(--space-lg); margin-bottom: var(--space-3xl); padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--border-color); } .case-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .case-section__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--rh-blue); } .case-section__body { flex: 1; min-width: 0; } .case-section__title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); line-height: 1.3; } .case-section__body p { margin-bottom: 1rem; line-height: 1.7; color: var(--text-secondary); } .case-section__body ul { margin-bottom: 1rem; padding-left: 1.25rem; } .case-section__body li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--text-secondary); } /* Workflow Steps */ .case-workflow { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); } .case-workflow__step { display: flex; gap: var(--space-md); align-items: flex-start; position: relative; } .case-workflow__step:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 40px; bottom: -16px; border-left: 2px dashed var(--border-color); } .case-workflow__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--rh-blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; } .case-workflow__step h4 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 4px; color: var(--text-primary); } .case-workflow__step p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 0; } /* Key Patent Issues Grid */ .case-issues-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); } .case-issues-grid .case-issue-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px var(--space-md) var(--space-md); text-align: center; position: relative; transition: all var(--transition-base); } .case-issues-grid .case-issue-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .case-issues-grid .case-issue-card__icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--rh-blue-light); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--rh-blue); margin: 0 auto var(--space-sm); } .case-issues-grid .case-issue-card__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; } .case-issues-grid .case-issue-card__desc { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; margin-bottom: 0; } /* Outcome Highlight */ .case-outcome-highlight { display: flex; gap: var(--space-md); align-items: flex-start; background: linear-gradient(135deg, #FFF5F5 0%, #FFF0F0 100%); border: 1px solid #FADADA; border-left: 4px solid var(--rh-red); border-radius: var(--radius-md); padding: var(--space-lg); margin-top: var(--space-md); } .case-outcome-highlight__badge { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--rh-red); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .case-outcome-highlight__body { flex: 1; } .case-outcome-highlight__body p { font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.7; margin-bottom: 0.5rem; } .case-outcome-highlight__body p:last-child { margin-bottom: 0; } .case-outcome-highlight__body strong { color: var(--rh-red); font-weight: 700; } /* Practical Takeaways Grid */ .case-takeaways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); } .case-takeaways-grid .case-takeaway-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; transition: all var(--transition-base); } .case-takeaways-grid .case-takeaway-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .case-takeaways-grid .case-takeaway-card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--rh-amber-light); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--rh-amber); margin: 0 auto var(--space-sm); } .case-takeaways-grid .case-takeaway-card__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; } .case-takeaways-grid .case-takeaway-card__desc { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; margin-bottom: 0; } /* Sidebar value highlight */ .case-sidebar__value--highlight { color: var(--rh-red); font-weight: 700; } /* Sidebar related services list */ .case-sidebar .case-sidebar__links { list-style: none; padding: 0; margin: 0; } .case-sidebar .case-sidebar__links li { margin-bottom: 4px; } .case-sidebar .case-sidebar__links a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--rh-blue); text-decoration: none; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-color); transition: color 0.2s; } .case-sidebar .case-sidebar__links a:hover { color: var(--rh-primary); } .case-sidebar .case-sidebar__links li:last-child a { border-bottom: none; } .case-sidebar .case-sidebar__links i { font-size: var(--fs-xs); opacity: 0.6; } /* CTA Box */ .case-content__cta { margin: var(--space-3xl) 0; padding: var(--space-xl) var(--space-2xl); background: var(--rh-primary); border-radius: var(--radius-lg); text-align: center; color: var(--white); } .case-content__cta h3 { color: var(--white); margin: 0 0 var(--space-sm); font-size: var(--fs-xl); } .case-content__cta p { color: rgba(255,255,255,0.8); margin-bottom: var(--space-lg); font-size: var(--fs-sm); } .case-content__cta .btn-amber { background: var(--white); color: var(--rh-primary); border: none; } .case-content__cta .btn-amber:hover { background: rgba(255,255,255,0.9); } /* Navigation */ .case-content__nav { margin-top: var(--space-xl); } /* Sidebar */ .case-sidebar { position: sticky; top: 100px; } .case-sidebar__card { background: var(--bg-light); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-md); border: 1px solid var(--border-color); } .case-sidebar__card-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-md); color: var(--text-primary); } .case-sidebar__list { list-style: none; padding: 0; margin: 0; } .case-sidebar__list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: var(--fs-sm); } .case-sidebar__list li:last-child { border-bottom: none; } .case-sidebar__label { color: var(--text-muted); font-size: var(--fs-xs); } .case-sidebar__value { font-weight: 600; color: var(--text-primary); text-align: right; } .case-sidebar__links { list-style: none; padding: 0; margin: 0; } .case-sidebar__links li { margin-bottom: 4px; } .case-sidebar__links a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--rh-blue); text-decoration: none; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-color); transition: color 0.2s; } .case-sidebar__links a:hover { color: var(--rh-primary); } .case-sidebar__links li:last-child a { border-bottom: none; } .case-sidebar__links i { font-size: var(--fs-xs); opacity: 0.6; } .case-sidebar__card--cta { background: var(--rh-primary); border-color: transparent; } .case-sidebar__card--cta .case-sidebar__card-title { color: var(--white); } /* Responsive */ @media (max-width: 991.98px) { .case-layout { grid-template-columns: 1fr; } .case-sidebar { position: static; } .case-issues-grid { grid-template-columns: repeat(2, 1fr); } .case-takeaways-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .case-hero__title { font-size: var(--fs-2xl); } .case-section { flex-direction: column; gap: var(--space-md); } .case-issues-grid { grid-template-columns: 1fr; } .case-takeaways-grid { grid-template-columns: 1fr; } .case-outcome-highlight { flex-direction: column; gap: var(--space-sm); } .case-outcome-highlight__badge { margin: 0 auto; } .cta-split { grid-template-columns: 1fr; gap: var(--space-xl); } .cta-split__divider { display: none; } .cta-split__right { align-items: center; text-align: center; } .cta-features { justify-content: center; flex-wrap: wrap; } .cta-split__left h2 { white-space: normal; font-size: var(--fs-2xl); } } @media (max-width: 1199.98px) { :root { --fs-4xl: 1.75rem; --fs-5xl: 2.25rem; --fs-6xl: 2.5rem; --fs-3xl: 1.5rem; } .top-bar { font-size: 0.7rem; } .top-bar__left { gap: 12px; } .section { padding: var(--space-3xl) 0; } .hero { min-height: 450px; padding: var(--space-3xl) 0; } .grid-3, .testimonials-grid { grid-template-columns: 1fr; } .grid-4, .team-grid { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; } .trust-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .contact-form { padding: var(--space-lg); } .cta-form input { text-align: center; } .hero__title { font-size: var(--fs-5xl); } .page-hero--simple { padding: var(--space-2xl) 0; } .article-item { flex-direction: column; } .cta-trust { gap: var(--space-md); } .cta-trust__item { font-size: var(--fs-xs); } } @media (max-width: 575.98px) { .top-bar__left { gap: var(--space-sm); } .top-bar__left span { display: none; } .lang-switcher { gap: 1px; } .lang-switcher__item { padding: 2px 4px; font-size: 0.65rem; } .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .filter-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-sm); } .filter-tab { white-space: nowrap; } } /* ================================================================ Service Overview Component (services.html) ================================================================ */ .service-overview { display: flex; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0; border-bottom: 1px solid var(--border-color); } .service-overview__icon { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--rh-blue-light); border-radius: var(--radius-lg); font-size: 2.5rem; color: var(--rh-blue); } .service-overview__content .section-title__label { margin-bottom: var(--space-sm); } .service-overview__content h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); } .service-overview__desc { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin: 0; } /* Grid-4 responsiveness */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } /* Responsive adjustments */ @media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; gap: var(--space-md); } .service-card-v2 { padding: var(--space-lg); } .service-card-v2__header { margin-bottom: var(--space-md); } .service-card-v2__icon { width: 48px; height: 48px; margin-bottom: var(--space-sm); } .service-card-v2__header h3 { font-size: var(--fs-lg); } .service-card-v2__list { font-size: var(--fs-xs); padding-left: var(--space-md); } .service-overview { flex-direction: column; text-align: center; gap: var(--space-md); } .service-overview__content h2 { font-size: var(--fs-2xl); } } /* ================================================================ Service Tab Navigation (patent.html, strategy.html, disputes.html) ================================================================ */ .service-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); justify-content: center; flex-wrap: wrap; } .service-nav__link { display: inline-block; padding: var(--space-md) var(--space-xl); font-size: var(--fs-base); font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition-fast); } .service-nav__link:hover { color: var(--rh-blue); } .service-nav__link--active { color: var(--rh-blue); border-bottom-color: var(--rh-blue); font-weight: 600; } /* ================================================================ mt-40 utility class ================================================================ */ .mt-40 { margin-top: 40px; } /* ================================================================ Lawyer Detail Page (lawyer-detail.html) ================================================================ */ /* Hero */ .lawyer-hero { background: linear-gradient(135deg, #f8f9fb 0%, #eef1f6 100%); padding: 48px 0 56px; } .lawyer-hero__breadcrumb { margin-bottom: 32px; } .lawyer-hero__breadcrumb .breadcrumb-list { list-style: none; margin: 0; padding: 0; display: inline; } .lawyer-hero__breadcrumb .breadcrumb-list li { display: inline; } .lawyer-hero__breadcrumb .breadcrumb-list li + li::before { content: ' / '; margin: 0 8px; color: rgba(0,0,0,0.3); } .lawyer-hero__breadcrumb .breadcrumb-list li.active { color: rgba(0,0,0,0.7); } .lawyer-hero__breadcrumb .breadcrumb-list a { color: var(--rh-blue); text-decoration: none; } .lawyer-hero__breadcrumb .breadcrumb-list a:hover { text-decoration: underline; } .lawyer-hero__inner { display: flex; gap: 48px; align-items: flex-start; } .lawyer-hero__photo { flex-shrink: 0; width: 240px; height: 300px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .lawyer-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .lawyer-hero__info { flex: 1; padding-top: 8px; } .lawyer-hero__name { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--rh-primary); margin: 0 0 8px; line-height: 1.2; } .lawyer-hero__role { font-size: var(--fs-lg); color: var(--rh-blue); font-weight: 500; margin-bottom: 20px; } .lawyer-hero__summary { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; max-width: 600px; } .lawyer-hero__contact { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); } .lawyer-hero__contact-item { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .lawyer-hero__contact-item i { color: var(--rh-primary); } .lawyer-hero__contact-item a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .lawyer-hero__contact-item a:hover { color: var(--rh-primary); } /* Layout */ .lawyer-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: flex-start; } /* Sections */ .lawyer-section { display: flex; gap: 20px; margin-bottom: 40px; } .lawyer-section__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--rh-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .lawyer-section__body { flex: 1; } .lawyer-section__title { font-size: var(--fs-xl); font-weight: 600; color: var(--rh-blue); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); } .lawyer-section__body p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; } .lawyer-section__body ul { list-style: disc; padding-left: 20px; color: var(--text-secondary); line-height: 1.8; } /* Services Grid */ .lawyer-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; } .lawyer-service-card { display: flex; gap: 16px; padding: 20px; background: var(--bg-light); border-radius: 10px; transition: box-shadow 0.3s, transform 0.3s; } .lawyer-service-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); } .lawyer-service-card__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--rh-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .lawyer-service-card__body h4 { font-size: var(--fs-base); font-weight: 600; color: var(--rh-blue); margin: 0 0 6px; } .lawyer-service-card__body p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } /* CTA */ .lawyer-content__cta { background: var(--bg-light); border-radius: 12px; padding: 32px; text-align: center; margin-top: 40px; } .lawyer-content__cta h3 { font-size: var(--fs-xl); color: var(--rh-blue); margin: 0 0 12px; } .lawyer-content__cta p { color: var(--text-secondary); margin-bottom: 20px; } /* Navigation */ .lawyer-content__nav { margin-top: 32px; text-align: center; } /* Sidebar */ .lawyer-sidebar__card { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 24px; margin-bottom: 24px; } .lawyer-sidebar__card-title { font-size: var(--fs-base); font-weight: 600; color: var(--rh-blue); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border-color); } .lawyer-sidebar__list { list-style: none; padding: 0; margin: 0; } .lawyer-sidebar__list li { padding: 8px 0; color: var(--text-secondary); font-size: var(--fs-sm); display: block; } .lawyer-sidebar__list li i { color: var(--rh-primary); margin-top: 3px; } .lawyer-sidebar__list li a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .lawyer-sidebar__list li a:hover { color: var(--rh-primary); } .lawyer-sidebar__card--contact { background: var(--rh-blue); border-color: var(--rh-blue); } .lawyer-sidebar__card--contact .lawyer-sidebar__card-title { color: #fff; border-bottom-color: rgba(255,255,255,0.2); } .lawyer-sidebar__card--contact .lawyer-sidebar__list li, .lawyer-sidebar__card--contact .lawyer-sidebar__list li a { color: rgba(255,255,255,0.9); } .lawyer-sidebar__card--contact .lawyer-sidebar__list li i { color: var(--rh-amber); } /* ================================================================ Responsive ================================================================ */ @media (max-width: 992px) { .lawyer-hero__inner { flex-direction: column; text-align: center; align-items: center; } .lawyer-hero__photo { width: 180px; height: 220px; } .lawyer-hero__contact { justify-content: center; } .lawyer-layout { grid-template-columns: 1fr; } .lawyer-services-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .lawyer-hero { padding: 32px 0 40px; } .lawyer-hero__photo { width: 140px; height: 170px; } .lawyer-hero__contact { flex-direction: column; gap: 12px; align-items: center; } .lawyer-section { flex-direction: column; gap: 12px; } }