/* ================================================================= ORISON ELEVATORS — NEW DESIGN SYSTEM Palette: Navy + Gold | Typography: Instrument Serif + Work Sans Layout: Bento Grid ================================================================= */ /* Fonts are loaded via tags in with preconnect for performance. See: Instrument Serif (display) + Work Sans (body) on Google Fonts. */ :root { --primary: #0F172A; --primary-mid: #1E293B; --secondary: #1E40AF; --secondary-lt: #3B5ECC; --accent: #D4A017; --accent-lt: #F0C040; --accent-dim: rgba(212,160,23,0.15); --bg: #F8FAFC; --bg-card: #FFFFFF; --text: #1F2937; --text-mid: #4B5563; --text-lt: #9CA3AF; --line: #E2E8F0; --line-dark: #334155; --font-serif: 'Instrument Serif', Georgia, serif; --font-sans: 'Work Sans', system-ui, sans-serif; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --max: 1280px; --shadow: 0 4px 24px rgba(15,23,42,0.10); --shadow-lg: 0 16px 48px rgba(15,23,42,0.16); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } h1,h2,h3,h4,h5 { margin: 0; } /* Accessibility utility */ /* Skip to main content link */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 8px 16px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; border-radius: 0 0 6px 6px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } .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; } p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Utility ── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; } @media (max-width: 640px) { .wrap { padding: 0 20px; } } .section { padding: 100px 0; } @media (max-width: 768px) { .section { padding: 64px 0; } } .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--accent); flex-shrink: 0; } .section-title { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 400; line-height: 1.12; color: var(--primary); margin-top: 12px; } .section-title em { font-style: italic; color: var(--secondary); } .section-sub { margin-top: 16px; font-size: 16px; color: var(--text-mid); max-width: 560px; line-height: 1.7; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 28px; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: all 0.22s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--primary); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-lt); border-color: var(--accent-lt); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,0.35); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; } .btn-ghost { background: transparent; color: var(--accent); border-color: transparent; padding-left: 0; } .btn-ghost:hover { gap: 14px; } .btn svg { transition: transform 0.2s ease; } .btn:hover svg { transform: translateX(3px); } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 200; background: rgba(248,250,252,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s ease, background 0.3s ease; } .site-header.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 4px 20px rgba(15,23,42,0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { height: 46px; width: auto; } .main-nav { display: flex; align-items: center; gap: 8px; } .main-nav a { font-size: 14px; font-weight: 500; color: var(--text-mid); padding: 8px 14px; border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; } .main-nav a:hover, .main-nav a.active { color: var(--primary); background: var(--line); } .main-nav a.active { color: var(--secondary); background: rgba(30,64,175,0.08); } .header-actions { display: flex; align-items: center; gap: 12px; } .header-phone { font-size: 13.5px; font-weight: 500; color: var(--text-mid); display: flex; align-items: center; gap: 6px; } .header-phone svg { color: var(--accent); } /* Hamburger */ .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 40px; height: 40px; position: relative; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.28s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .nav-overlay { display: none; position: fixed; inset: 0; z-index: 190; flex-direction: column; background: #0F172A; padding: 0 28px 40px; overflow-y: auto; opacity: 0; transform: translateX(100%); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.77,0,0.18,1); } .nav-overlay.open { opacity: 1; transform: translateX(0); } .nav-overlay-head { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; padding-bottom: 0; } .nav-overlay-logo .logo-img { filter: brightness(0) invert(1); height: 44px; } .nav-close { background: none; border: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); padding: 0; font-size: 28px; font-weight: 300; line-height: 1; transition: color 0.2s; cursor: pointer; } .nav-close:hover { color: #fff; } .nav-close svg { width: 24px; height: 24px; } .nav-overlay-links { display: flex; flex-direction: column; padding-top: 8px; flex: 1; } .nav-overlay-links a { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); font-size: 22px; font-weight: 500; opacity: 0; transform: translateY(12px); transition: color 0.2s, opacity 0.35s ease, transform 0.4s ease; } .nav-overlay.open .nav-overlay-links a { opacity: 1; transform: none; } .nav-overlay-links a:nth-child(1) { transition-delay: 0.08s; } .nav-overlay-links a:nth-child(2) { transition-delay: 0.13s; } .nav-overlay-links a:nth-child(3) { transition-delay: 0.18s; } .nav-overlay-links a:nth-child(4) { transition-delay: 0.23s; } .nav-overlay-links a:nth-child(5) { transition-delay: 0.28s; } .nav-overlay-links a:hover { color: var(--accent); } .nav-overlay-links a svg { width: 18px; height: 18px; opacity: 0.35; } .nav-overlay-contact { padding: 24px 0 8px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: 0; transition: opacity 0.35s ease 0.36s; } .nav-overlay.open .nav-overlay-contact { opacity: 1; } .nav-overlay-contact-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.55); } .nav-overlay-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; } .nav-overlay-cta { margin-top: 20px; opacity: 0; transition: opacity 0.35s ease 0.42s; } .nav-overlay.open .nav-overlay-cta { opacity: 1; } .nav-overlay-cta .btn { font-size: 14px; padding: 14px 20px; background: var(--accent); border-color: var(--accent); color: var(--primary); font-weight: 700; letter-spacing: 0.04em; } @media (max-width: 900px) { .main-nav, .header-phone { display: none; } .nav-toggle { display: flex; } .nav-overlay { display: flex; } .nav-overlay:not(.open) { pointer-events: none; display: none; } .nav-overlay.open { display: flex; } .header-actions .btn { font-size: 12px; padding: 10px 16px; } } @media (max-width: 480px) { .header-inner { height: 64px; } .logo-img { height: 38px; } .header-actions .btn { display: none; } } /* =========================== HOME — BENTO HERO =========================== */ .hero { background: var(--primary); padding: 80px 0 100px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 600px at 90% -10%, rgba(30,64,175,0.35), transparent 60%), radial-gradient(ellipse 600px 400px at -10% 110%, rgba(212,160,23,0.12), transparent 55%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; position: relative; z-index: 1; } .hero-eyebrow { color: var(--accent); } .hero-eyebrow::before { background: var(--accent); } .hero-title { font-family: var(--font-serif); font-size: clamp(48px, 6vw, 80px); font-weight: 400; line-height: 1.06; color: #fff; margin-top: 20px; } .hero-title em { font-style: italic; color: var(--accent); } .hero-desc { margin-top: 24px; font-size: 17px; color: rgba(255,255,255,0.65); max-width: 500px; line-height: 1.75; } .hero-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); overflow: hidden; margin-top: 60px; } .hero-stat { padding: 28px 24px; background: rgba(255,255,255,0.04); } .hero-stat .num { font-family: var(--font-serif); font-size: 38px; font-weight: 400; color: var(--accent); line-height: 1; } .hero-stat .lbl { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; } /* Car indicator panel */ .hero-visual { display: flex; flex-direction: column; gap: 16px; } .car-pos-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); position: relative; animation: floatPanel 5s ease-in-out infinite; will-change: transform; } @keyframes floatPanel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .car-pos-wrap img { width: 100%; display: block; } .car-pos-wrap::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px); pointer-events: none; } .indicator { background: linear-gradient(160deg, #1e2535 0%, #141820 100%); border-radius: var(--radius-lg); padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); position: relative; } .indicator::before { content: ''; position: absolute; inset: -1px; border-radius: calc(var(--radius-lg) + 1px); background: linear-gradient(135deg, rgba(212,160,23,0.3), transparent 50%); pointer-events: none; } .indicator-screen { background: #0C0F14; border-radius: calc(var(--radius-lg) - 4px); padding: 22px 20px 18px; border: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; } .indicator-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px); pointer-events: none; } .indicator-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .indicator-label { font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.2em; color: rgba(168,175,184,0.7); text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 6px; } .indicator-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.2; } } .indicator-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--accent); filter: drop-shadow(0 0 4px var(--accent)); animation: arrowBounce 2.5s ease-in-out infinite; } @keyframes arrowBounce { 0%,100%{opacity:0.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)} } .indicator-digit { font-family: var(--font-serif); font-size: 128px; line-height: 0.9; color: var(--accent); text-shadow: 0 0 20px rgba(212,160,23,0.7), 0 0 60px rgba(212,160,23,0.2); text-align: center; padding: 12px 0 16px; transition: all 0.3s ease; } .indicator-digit.changing { opacity: 0.15; transform: scale(0.93); } .indicator-sep { height: 1px; background: linear-gradient(90deg,transparent,rgba(212,160,23,0.2),transparent); margin: 0 -2px 14px; } .indicator-floors { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 10px; font-weight: 500; color: rgba(107,116,128,0.6); gap: 2px; } .indicator-floors span { flex: 1; text-align: center; padding: 4px 2px; border-radius: 3px; transition: all 0.3s ease; position: relative; } .indicator-floors span.lit { color: var(--accent); text-shadow: 0 0 8px rgba(212,160,23,0.6); background: rgba(212,160,23,0.1); } .indicator-floors span.lit::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 4px var(--accent); } .indicator-bar { display: flex; gap: 4px; margin-top: 16px; padding: 0 2px; } .indicator-bar span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.06); } .indicator-bar span.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-visual { flex-direction: row; align-items: center; max-width: 600px; } .car-pos-wrap, .indicator { flex: 1; } } @media (max-width: 640px) { .hero { padding: 60px 0 72px; } .hero-title { font-size: clamp(40px, 11vw, 60px); } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-stats { grid-template-columns: repeat(3, 1fr); } .hero-stat { padding: 20px 14px; } .hero-stat .num { font-size: 22px; } .hero-stat .lbl { font-size: 10px; } .hero-visual { flex-direction: column; } } @media (max-width: 400px) { .hero-stats { grid-template-columns: 1fr; } } /* =========================== BENTO GRID (home sections) =========================== */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 20px; } .bento-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; } .bento-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: rgba(212,160,23,0.3); } .bento-card.dark { background: var(--primary); border-color: var(--line-dark); color: #fff; } .bento-card.dark:hover { border-color: var(--accent); } .bento-card.accent-bg { background: var(--accent); border-color: var(--accent); color: var(--primary); } .bento-card.span-2 { grid-column: span 2; } .bento-card.span-3 { grid-column: span 3; } .bento-card.tall { grid-row: span 2; } .bento-icon { width: 52px; height: 52px; background: var(--accent-dim); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent); } .bento-card.dark .bento-icon { background: rgba(255,255,255,0.08); color: var(--accent); } .bento-card.accent-bg .bento-icon { background: rgba(15,23,42,0.1); color: var(--primary); } .bento-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .bento-card.dark .bento-tag { color: var(--accent); } .bento-card.accent-bg .bento-tag { color: rgba(15,23,42,0.6); } .bento-title { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; line-height: 1.2; color: var(--primary); } .bento-card.dark .bento-title { color: #fff; } .bento-card.accent-bg .bento-title { color: var(--primary); } .bento-body { margin-top: 12px; font-size: 14.5px; color: var(--text-mid); line-height: 1.7; } .bento-card.dark .bento-body { color: rgba(255,255,255,0.6); } .bento-card.accent-bg .bento-body { color: rgba(15,23,42,0.65); } .bento-img { width: calc(100% + 64px); margin: 24px -32px -36px -32px; height: 220px; object-fit: cover; display: block; } .bento-card.tall .bento-img { height: 300px; } .bento-card .bento-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--secondary); margin-top: 20px; letter-spacing: 0.02em; transition: gap 0.2s; } .bento-card .bento-link:hover { gap: 14px; } .bento-card.dark .bento-link { color: var(--accent); } .bento-number { font-family: var(--font-serif); font-size: 72px; font-weight: 400; color: var(--accent); line-height: 1; margin-bottom: 8px; } .bento-card.dark .bento-number { color: var(--accent); } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-card.span-2 { grid-column: span 2; } .bento-card.span-3 { grid-column: span 2; } } @media (max-width: 580px) { .bento { grid-template-columns: 1fr; } .bento-card.span-2, .bento-card.span-3, .bento-card.tall { grid-column: span 1; grid-row: span 1; } } /* =========================== PRODUCT GRID =========================== */ /* =========================== HOMEPAGE PRODUCT BENTO (Image 2) =========================== */ .hp-products-bento { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; margin-top: 40px; } .hp-prod-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--primary); display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; } .hp-prod-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.25); } .hp-prod-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hp-prod-card:hover img { transform: scale(1.05); } .hp-prod-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,40,0.88) 0%, rgba(10,18,40,0.2) 55%, transparent 100%); } .hp-prod-body { position: relative; padding: 20px 22px; } .hp-prod-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); background: rgba(212,160,23,0.18); border: 1px solid rgba(212,160,23,0.35); border-radius: 3px; padding: 3px 8px; display: inline-block; margin-bottom: 8px; } .hp-prod-name { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: #fff; line-height: 1.2; margin-bottom: 4px; } .hp-prod-spec { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 10px; } .hp-prod-link { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; } .hp-prod-link:hover { color: var(--accent); } /* Featured card — spans 2 columns and 2 rows */ .hp-prod-featured { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 420px; } .hp-prod-featured .hp-prod-body { padding: 32px 36px; } .hp-prod-featured .hp-prod-name { font-size: 32px; margin-bottom: 8px; } .hp-prod-featured .hp-prod-spec { font-size: 14px; margin-bottom: 16px; } .hp-prod-featured .hp-prod-tag { font-size: 11px; padding: 4px 10px; } /* Small cards — right 2 columns */ .hp-prod-sm { min-height: 200px; } .hp-prod-sm .hp-prod-name { font-size: 18px; } .hp-prod-sm .hp-prod-body { padding: 16px 18px; } @media (max-width: 860px) { .hp-products-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .hp-prod-featured { grid-column: 1 / 3; grid-row: auto; min-height: 300px; } .hp-prod-sm { min-height: 180px; } } @media (max-width: 560px) { .hp-products-bento { grid-template-columns: 1fr; gap: 10px; } .hp-prod-featured { grid-column: 1; min-height: 260px; } .hp-prod-featured .hp-prod-body { padding: 24px 20px; } .hp-prod-featured .hp-prod-name { font-size: 26px; } } .hp-products-row-4 { margin-top: 12px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } @media (max-width: 860px) { .hp-products-row-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hp-products-row-4 { grid-template-columns: 1fr; gap: 10px; } } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .products-grid { grid-template-columns: 1fr; } } .product-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(212,160,23,0.35); } .product-img { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--line); } .product-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .product-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); } .product-title { font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin-top: 8px; line-height: 1.2; color: var(--primary); } .product-desc { margin-top: 10px; font-size: 14px; color: var(--text-mid); flex: 1; line-height: 1.65; } .product-spec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--secondary); } .product-footer { padding: 0 24px 24px; } .product-btn { display: block; width: 100%; text-align: center; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 13px 20px; border-radius: var(--radius-sm); border: 1.5px solid var(--primary); transition: background 0.2s, border-color 0.2s, color 0.2s; cursor: pointer; } .product-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--primary); } /* =========================== SERVICES =========================== */ /* =========================== SERVICES — Image 3 Layout =========================== */ .services-list { display: flex; flex-direction: column; } .service-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; padding: 80px 0; border-top: 1px solid var(--line); } .service-block:first-child { border-top: none; padding-top: 0; } .service-block-left {} .service-block-num { font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .service-block-num::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; } .service-block-title { font-family: var(--font-serif); font-size: clamp(36px, 4.5vw, 52px); font-weight: 400; color: var(--primary); line-height: 1.08; margin-bottom: 20px; } .service-block-desc { font-size: 15px; color: var(--text-mid); line-height: 1.75; margin-bottom: 32px; } .service-block-btn { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--primary); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 28px; border-radius: var(--radius-sm); transition: background 0.2s, color 0.2s; } .service-block-btn:hover { background: var(--primary); color: #fff; } .service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .service-feature { padding: 28px 0 28px 0; border-bottom: 1px solid var(--line); padding-right: 32px; } .service-feature:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--line); } .service-feature:nth-child(even) { padding-left: 32px; padding-right: 0; } .service-feature:nth-last-child(1), .service-feature:nth-last-child(2) { border-bottom: none; padding-bottom: 0; } .service-feature-icon { width: 36px; height: 36px; border: 1.5px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 14px; } .service-feature h5, .service-feature h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 400; color: var(--primary); margin-bottom: 8px; line-height: 1.3; } .service-feature p { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; } @media (max-width: 860px) { .service-block { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; } .service-features { gap: 0; } } @media (max-width: 560px) { .service-features { grid-template-columns: 1fr; } .service-feature:nth-child(odd) { border-right: none; padding-right: 0; } .service-feature:nth-child(even) { padding-left: 0; } .service-feature:nth-last-child(1) { border-bottom: none; } .service-feature:nth-last-child(2) { border-bottom: 1px solid var(--line); } } /* Legacy classes kept for compatibility */ .services-grid { display: flex; flex-direction: column; gap: 0; } .service-card { display: none; } /* =========================== WHY US — 2-col split =========================== */ /* =========================== WHY ORISON — Image 1 Checklist Grid =========================== */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 48px; } .why-item-new { display: flex; gap: 18px; align-items: flex-start; padding: 36px 40px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: background 0.2s; } .why-item-new:hover { background: rgba(212,160,23,0.03); } .why-item-new:nth-child(even) { border-right: none; } .why-item-new:nth-last-child(1), .why-item-new:nth-last-child(2) { border-bottom: none; } .why-check-new { width: 32px; height: 32px; border: 1.5px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); margin-top: 2px; } .why-check-new svg { width: 15px; height: 15px; } .why-item-new h4, .why-item-new h3 { font-size: 17px; font-weight: 600; color: var(--primary); margin-bottom: 8px; line-height: 1.3; } .why-item-new p { font-size: 14px; color: var(--text-mid); line-height: 1.68; } @media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } .why-item-new { border-right: none !important; } .why-item-new:nth-last-child(2) { border-bottom: 1px solid var(--line) !important; } .why-item-new { padding: 28px 24px; } } /* =========================== FAQ SECTION =========================== */ .faq-section { margin-top: 80px; padding-top: 60px; border-top: 1px solid var(--line); } .faq-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .faq-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--accent); border-radius: 2px; } .faq-title { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 400; color: var(--primary); text-transform: uppercase; line-height: 1.1; margin-bottom: 40px; } .faq-list { display: flex; flex-direction: column; } .faq-item { border-top: 1px solid var(--line); padding: 24px 0; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-question { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 17px; font-weight: 500; color: var(--primary); line-height: 1.4; background: none; border: none; width: 100%; text-align: left; padding: 0; } .faq-icon { flex-shrink: 0; width: 28px; height: 28px; border: 1.5px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 18px; font-weight: 300; transition: background 0.2s, border-color 0.2s; margin-top: 2px; } .faq-item.open .faq-icon { background: var(--accent); border-color: var(--accent); color: #fff; } .faq-answer { display: none; font-size: 15px; color: var(--text-mid); line-height: 1.72; margin-top: 14px; padding-right: 44px; } .faq-item.open .faq-answer { display: block; } /* =========================== CTA BAND =========================== */ .cta-band { background: var(--primary); position: relative; overflow: hidden; padding: 90px 0; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 500px at 70% 50%, rgba(30,64,175,0.4), transparent 60%); pointer-events: none; } .cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1; } .cta-title { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 50px); font-weight: 400; color: #fff; line-height: 1.1; max-width: 560px; } .cta-title em { font-style: italic; color: var(--accent); } .cta-sub { margin-top: 12px; font-size: 16px; color: rgba(255,255,255,0.55); } .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* =========================== ABOUT PAGE =========================== */ .page-hero { background: var(--primary); padding: 80px 0 72px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 400px at 80% 50%, rgba(30,64,175,0.35), transparent 60%); pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 56px; } .page-hero-left { flex: 1; min-width: 0; } .page-hero-right { flex-shrink: 0; width: 300px; } @media (max-width: 900px) { .page-hero-right { display: none; } } .page-hero .eyebrow { color: var(--accent); } .page-hero .eyebrow::before { background: var(--accent); } .page-hero-title { font-family: var(--font-serif); font-size: clamp(40px, 5.5vw, 68px); font-weight: 400; line-height: 1.06; color: #fff; margin-top: 16px; } .page-hero-title em { font-style: italic; color: var(--accent); } .page-hero-desc { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,0.6); max-width: 540px; line-height: 1.75; } .breadcrumb { margin-top: 28px; font-size: 12.5px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 8px; } .breadcrumb a { color: rgba(255,255,255,0.4); } .breadcrumb a:hover { color: var(--accent); } .values-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 600px) { .values-bento { grid-template-columns: 1fr; } } .value-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; transition: box-shadow 0.25s, border-color 0.25s; } .value-card:hover { box-shadow: var(--shadow); border-color: var(--accent); } .value-num { font-family: var(--font-serif); font-size: 52px; font-weight: 400; color: var(--line); line-height: 1; -webkit-text-stroke: 1px var(--text-lt); margin-bottom: 12px; } .value-card h4, .value-card h3 { font-size: 18px; font-weight: 600; color: var(--primary); } .value-card p { margin-top: 10px; font-size: 14.5px; color: var(--text-mid); line-height: 1.65; } /* =========================== CONTACT =========================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } } /* =========================== GENERIC RESPONSIVE TWO-COLUMN (about + product detail intro grids) =========================== */ .split-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; } .split-grid.split-grid-reverse { grid-template-columns: 1fr 1.1fr; } @media (max-width: 900px) { .split-grid, .split-grid.split-grid-reverse { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 600px) { .split-grid, .split-grid.split-grid-reverse { gap: 32px; } } .stat-row { display: flex; flex-direction: column; gap: 28px; } .stat-row-item { display: flex; align-items: center; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .stat-row-item:last-child { padding-bottom: 0; border-bottom: none; } .stat-row-num { font-family: var(--font-serif); font-size: 56px; color: var(--accent); line-height: 1; flex-shrink: 0; } @media (max-width: 480px) { .stat-row-item { gap: 14px; } .stat-row-num { font-size: 42px; } .stat-card { padding: 32px 24px !important; } } .contact-info h2 { font-family: var(--font-serif); font-size: clamp(28px,3.5vw,42px); font-weight: 400; color: var(--primary); line-height: 1.15; } .contact-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; font-size: 15px; color: var(--text-mid); } .contact-detail-icon { width: 42px; height: 42px; background: var(--accent-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .contact-detail strong { display: block; color: var(--primary); font-weight: 600; font-size: 14px; margin-bottom: 3px; } .contact-form-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 48px; } @media (max-width: 600px) { .contact-form-wrap { padding: 28px 20px; } } .form-title { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--primary); } .form-divider { width: 36px; height: 3px; background: var(--accent); border-radius: 2px; margin: 14px 0 28px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-mid); } .form-field label .req { color: #c0392b; } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,64,175,0.1); background: #fff; } .form-field textarea { resize: vertical; min-height: 120px; } .form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; display: none; } .form-status.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; display: block; } .form-status.error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; display: block; } .form-status.error a { color: #991b1b; font-weight: 600; text-decoration: underline; } /* =========================== PRODUCT DETAIL PAGE =========================== */ .product-hero-img-wrap { position: relative; height: 440px; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } @media (max-width: 768px) { .product-hero-img-wrap { height: 320px; } } @media (max-width: 480px) { .product-hero-img-wrap { height: 260px; } } .product-hero-img { width: 100%; height: 100%; object-fit: cover; } .product-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,0.45), rgba(15,23,42,0.75)); } .product-hero-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .product-hero-text .wrap {} .spec-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 24px; } .spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; } @media (max-width: 480px) { .spec-row { flex-direction: column; gap: 4px; } .spec-row .spec-val { text-align: left; } } .spec-row:last-child { border-bottom: none; } .spec-row:nth-child(even) { background: var(--bg); } .spec-row .spec-key { color: var(--text-mid); font-weight: 500; } .spec-row .spec-val { color: var(--primary); font-weight: 600; text-align: right; } /* =========================== FOOTER =========================== */ .site-footer { content-visibility:auto; contain-intrinsic-size:0 300px; background: var(--primary); color: rgba(255,255,255,0.65); padding: 80px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--line-dark); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand .logo-img { height: 44px; filter: brightness(0) invert(1) opacity(0.9); } .footer-brand p { margin-top: 16px; font-size: 14.5px; line-height: 1.7; max-width: 280px; } .footer-social { display: flex; gap: 10px; margin-top: 22px; } .footer-social a { width: 36px; height: 36px; border: 1px solid var(--line-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: border-color 0.2s, color 0.2s, background 0.2s; } .footer-social a:hover { border-color: var(--accent); color: var(--accent); background: rgba(212,160,23,0.08); } .footer-social a svg { width: 15px; height: 15px; } .footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 20px; } .footer-col ul li { margin-bottom: 12px; } .footer-col ul a { font-size: 14.5px; color: rgba(255,255,255,0.55); transition: color 0.2s; } .footer-col ul a:hover { color: var(--accent); } .footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; margin-bottom: 16px; } .footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); width: 16px; height: 16px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 12.5px; color: rgba(255,255,255,0.35); flex-wrap: wrap; gap: 10px; } /* =========================== WHATSAPP + SCROLL REVEAL =========================== */ .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform 0.2s, box-shadow 0.2s; } .wa-float:hover { transform: scale(1.1); box-shadow: 0 10px 28px rgba(0,0,0,0.3); } @media (max-width: 480px) { .wa-float { width: 48px; height: 48px; bottom: 18px; right: 18px; } .wa-float svg { width: 24px; height: 24px; } } .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* =========================== SECTION HEADER ROW =========================== */ .section-head { margin-bottom: 52px; } .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; } .section-head-row .section-sub { margin-top: 0; } /* Map */ .map-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: 360px; margin-top: 40px; } .map-wrap iframe { width: 100%; height: 100%; border: 0; } /* ===================================================== HOMEPAGE — Animated Shaft Monitor Panel ===================================================== */ .shaft-panel { background: linear-gradient(160deg,#1a2033 0%,#0e1118 100%); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(212,160,23,0.08); overflow: hidden; animation: floatPanel 5s ease-in-out infinite; will-change: transform; } .shaft-header { display:flex;align-items:center;justify-content:space-between; padding:14px 20px 12px; border-bottom:1px solid rgba(255,255,255,0.05); background:rgba(0,0,0,0.2); } .shaft-label { font-family:var(--font-sans);font-size:9px;letter-spacing:0.22em; color:rgba(168,175,184,0.6);text-transform:uppercase;font-weight:600; } .shaft-status-dot { width:7px;height:7px;border-radius:50%; background:#22c55e;box-shadow:0 0 8px #22c55e; animation:blink 2s ease-in-out infinite; } .shaft-body { display:flex;padding:20px 16px 16px;gap:0; } .shaft-track { display:flex;gap:8px;flex:0 0 auto; } .shaft-floor-labels { display:flex;flex-direction:column;justify-content:space-between; font-family:var(--font-sans);font-size:9px;font-weight:600; color:rgba(107,116,128,0.5);padding:4px 0;width:20px;text-align:right; } .shaft-rail { width:52px;height:340px; background:linear-gradient(180deg,#0a0d12 0%,#0c1018 100%); border:1px solid rgba(255,255,255,0.06); border-radius:6px;position:relative;overflow:hidden; } .shaft-floor-lines { position:absolute;inset:0; display:flex;flex-direction:column;justify-content:space-between;padding:0; } .sfl { height:1px;background:rgba(255,255,255,0.04);width:100%; } .shaft-car { position:absolute;left:4px;right:4px;height:38px; border-radius:4px; transition:transform 1.5s cubic-bezier(0.65,0,0.35,1); will-change: transform; will-change:transform; z-index:2; } .shaft-car-inner { position:absolute;inset:0; background:linear-gradient(135deg,#1e2a3a,#111822); border:1px solid rgba(212,160,23,0.4); border-radius:4px;display:flex;align-items:stretch;overflow:hidden; } .shaft-car-door-l,.shaft-car-door-r { flex:1; background:linear-gradient(180deg,rgba(212,160,23,0.08),rgba(212,160,23,0.02)); } .shaft-car-door-l { border-right:1px solid rgba(212,160,23,0.25); } .shaft-car-glow { position:absolute;inset:-4px;border-radius:6px; background:radial-gradient(ellipse at center,rgba(212,160,23,0.25) 0%,transparent 70%); pointer-events:none; } .shaft-info-col { flex:1;display:flex;flex-direction:column;padding:0 0 0 16px; } .shaft-digit-wrap { display:flex;flex-direction:column;align-items:center; } .shaft-digit-display { font-family:var(--font-serif);font-size:88px;line-height:0.9; color:var(--accent); text-shadow:0 0 24px rgba(212,160,23,0.7),0 0 60px rgba(212,160,23,0.2); text-align:center;padding:8px 0 8px; transition:all 0.3s ease; } .shaft-digit-display.changing { opacity:0.1;transform:scale(0.9); } .shaft-direction { text-align:center;font-size:14px;color:var(--accent);opacity:0.7; animation:arrowBounce 2.5s ease-in-out infinite;margin-bottom:10px; } .shaft-info-sep { height:1px;background:linear-gradient(90deg,transparent,rgba(212,160,23,0.15),transparent);margin:10px 0; } .shaft-meta { display:flex;flex-direction:column;gap:7px; } .shaft-meta-row { display:flex;justify-content:space-between;align-items:center; } .sm-lbl { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600; } .sm-val { font-family:var(--font-sans);font-size:11px;font-weight:600;color:rgba(212,220,230,0.85); } .sm-ok { color:#22c55e;text-shadow:0 0 6px rgba(34,197,94,0.4); } .shaft-floors-mini { display:flex;flex-wrap:wrap;gap:4px;margin-top:10px; } .shaft-floors-mini span { font-family:var(--font-sans);font-size:10px;font-weight:500; color:rgba(107,116,128,0.5);padding:3px 6px;border-radius:3px;transition:all 0.3s ease; } .shaft-floors-mini span.lit { color:var(--accent);background:rgba(212,160,23,0.1);text-shadow:0 0 6px rgba(212,160,23,0.5); } .shaft-footer { border-top:1px solid rgba(255,255,255,0.04);padding:10px 20px;position:relative;overflow:hidden; } .shaft-footer-txt { font-family:var(--font-sans);font-size:9px;letter-spacing:0.1em; color:rgba(107,116,128,0.4);text-transform:uppercase; } .shaft-scan-line { position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(212,160,23,0.3),transparent); animation:scanLine 3s linear infinite; } @keyframes scanLine { 0%{transform:translateY(-1px)} 100%{top:40px} } /* ===================================================== ABOUT — Enhanced indicator with stats ===================================================== */ .indicator-digit-lg { font-size:120px !important; } .indicator-about-stats { display:flex;flex-direction:column;gap:8px; } .ias-row { display:flex;justify-content:space-between;align-items:center; } .ias-k { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600; } .ias-v { font-family:var(--font-sans);font-size:12px;font-weight:600;color:rgba(212,220,230,0.85); } /* ===================================================== SERVICES — Maintenance dashboard ===================================================== */ .svc-dashboard { background:linear-gradient(160deg,#1a2033 0%,#0e1118 100%); border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,0.07); box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(34,197,94,0.06); overflow:hidden; } .svc-dash-header { display:flex;align-items:center;justify-content:space-between; padding:14px 20px 12px; border-bottom:1px solid rgba(255,255,255,0.05); background:rgba(0,0,0,0.15); } .svc-dash-label { font-family:var(--font-sans);font-size:9px;letter-spacing:0.22em;color:rgba(168,175,184,0.6);text-transform:uppercase;font-weight:600; } .svc-dot { width:7px;height:7px;border-radius:50%; } .svc-dot-gold { background:var(--accent);box-shadow:0 0 8px rgba(212,160,23,0.7);animation:blink 2s ease-in-out infinite; } .svc-dot-green { background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.4); } .svc-dot-grey { background:rgba(107,116,128,0.35); } .svc-dash-body { padding:20px 20px 0; } .svc-uptime-block { display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px; } .svc-uptime-ring { position:relative;width:80px;height:80px; } .svc-uptime-val { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-sans);font-size:15px;font-weight:700;color:var(--accent); } .svc-uptime-lbl { font-family:var(--font-sans);font-size:10px;letter-spacing:0.1em;color:rgba(168,175,184,0.6);text-transform:uppercase;font-weight:600; } .svc-dash-sep { height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);margin:14px 0; } .svc-schedule { display:flex;flex-direction:column;gap:10px;margin-bottom:4px; } .svc-sched-row { display:flex;align-items:center;gap:10px; } .svc-sched-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; } .svc-sched-txt { display:flex;flex-direction:column;gap:1px; } .svc-sched-txt span { font-family:var(--font-sans);font-size:12px;font-weight:500;color:rgba(212,220,230,0.85); } .svc-sched-txt em { font-family:var(--font-sans);font-size:10px;color:rgba(107,116,128,0.6);font-style:normal; } .svc-sched-active .svc-sched-txt span { color:var(--accent); } .svc-dash-footer { display:flex;align-items:center;justify-content:space-between; padding:14px 20px;border-top:1px solid rgba(255,255,255,0.05);margin-top:16px; } .svc-metric { display:flex;flex-direction:column;align-items:center;gap:3px;flex:1; } .svc-m-val { font-family:var(--font-sans);font-size:16px;font-weight:700;color:var(--accent); } .svc-m-lbl { font-family:var(--font-sans);font-size:9px;letter-spacing:0.08em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600;text-align:center; } .svc-metric-sep { width:1px;height:32px;background:rgba(255,255,255,0.06); } /* ===================================================== PRODUCTS — Engineering spec configurator ===================================================== */ .spec-panel { background:linear-gradient(160deg,#1a2033 0%,#0e1118 100%); border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,0.07); box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(212,160,23,0.06); overflow:hidden; } .spec-header { display:flex;align-items:center;justify-content:space-between; padding:14px 20px 12px;border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.15); } .spec-label { font-family:var(--font-sans);font-size:9px;letter-spacing:0.22em;color:rgba(168,175,184,0.6);text-transform:uppercase;font-weight:600; } .spec-blink-dot { width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(212,160,23,0.7);animation:blink 1.5s ease-in-out infinite; } .spec-body { padding:20px; } .spec-load-meter { margin-bottom:4px; } .spec-load-label { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600;margin-bottom:8px; } .spec-load-bar-wrap { position:relative;background:rgba(255,255,255,0.04);border-radius:4px;height:28px;overflow:hidden; } .spec-load-bar { height:100%;background:linear-gradient(90deg,rgba(212,160,23,0.6),var(--accent));border-radius:4px;transform-origin:left center;transition:transform 1s cubic-bezier(0.65,0,0.35,1);box-shadow:4px 0 12px rgba(212,160,23,0.4);will-change:transform; } .spec-load-val { position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--font-sans);font-size:13px;font-weight:700;color:rgba(212,220,230,0.9); } .spec-load-range { display:flex;justify-content:space-between;font-family:var(--font-sans);font-size:9px;color:rgba(107,116,128,0.4);margin-top:4px; } .spec-sep { height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);margin:14px 0; } .spec-types { display:flex;flex-wrap:wrap;gap:5px; } .spec-type-item { font-family:var(--font-sans);font-size:10px;font-weight:500; color:rgba(107,116,128,0.6);padding:4px 8px;border-radius:4px; border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02); transition:all 0.3s ease; } .spec-type-item.lit { color:var(--accent);border-color:rgba(212,160,23,0.3);background:rgba(212,160,23,0.08);text-shadow:0 0 6px rgba(212,160,23,0.4); } .spec-attrs { display:flex;flex-direction:column;gap:8px; } .spec-attr-row { display:flex;justify-content:space-between;align-items:center; } .sa-k { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600; } .sa-v { font-family:var(--font-sans);font-size:12px;font-weight:600;color:rgba(212,220,230,0.85); } .spec-footer { padding:10px 20px;border-top:1px solid rgba(255,255,255,0.04);font-family:var(--font-sans);font-size:9px;letter-spacing:0.08em;color:rgba(107,116,128,0.4);text-transform:uppercase;text-align:center; } /* ===================================================== CONTACT — Signal / response panel ===================================================== */ .contact-signal-panel { background:linear-gradient(160deg,#1a2033 0%,#0e1118 100%); border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,0.07); box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(34,197,94,0.06); overflow:hidden; } .csp-header { display:flex;align-items:center;justify-content:space-between; padding:14px 20px 12px;border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.15); } .csp-label { font-family:var(--font-sans);font-size:9px;letter-spacing:0.22em;color:rgba(168,175,184,0.6);text-transform:uppercase;font-weight:600; } .csp-live { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:#22c55e;background:rgba(34,197,94,0.1);padding:3px 8px;border-radius:3px;font-weight:700;animation:blink 2s ease-in-out infinite; } .csp-body { padding:28px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:24px; } .csp-signal-rings { position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center; } .csp-ring { position:absolute;border-radius:50%;border:1.5px solid rgba(34,197,94,0.3);animation:signalExpand 2.4s ease-out infinite; } .csp-ring-1 { width:40px;height:40px;animation-delay:0s; } .csp-ring-2 { width:70px;height:70px;animation-delay:0.6s; } .csp-ring-3 { width:100px;height:100px;animation-delay:1.2s; } @keyframes signalExpand { 0%{opacity:0.9;transform:scale(0.7)} 100%{opacity:0;transform:scale(1.2)} } .csp-core { width:44px;height:44px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2; } .csp-info { width:100%;display:flex;flex-direction:column;gap:9px; } .csp-info-row { display:flex;justify-content:space-between;align-items:center; } .csp-ik { font-family:var(--font-sans);font-size:9px;letter-spacing:0.15em;color:rgba(107,116,128,0.6);text-transform:uppercase;font-weight:600; } .csp-iv { font-family:var(--font-sans);font-size:12px;font-weight:600;color:rgba(212,220,230,0.85); } .csp-iv-gold { color:var(--accent); } .csp-iv-green { color:#22c55e; } .csp-sep { height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);margin:4px 20px; } .csp-contacts { padding:14px 20px;display:flex;flex-direction:column;gap:9px; } .csp-contact-row { display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:11px;color:rgba(168,175,184,0.7); } .csp-contact-row svg { color:var(--accent);flex-shrink:0; } .csp-footer { padding:10px 20px;border-top:1px solid rgba(255,255,255,0.04);font-family:var(--font-sans);font-size:9px;letter-spacing:0.08em;color:rgba(107,116,128,0.4);text-transform:uppercase;text-align:center; }