/* * styles.css — Snap Analytx shared styles * * Change colours, fonts, and shared components here. * Each page overrides only what is unique to that page. */ /* Fonts — loaded via in each HTML for performance */ /* Variables -------------------------------------------------------- */ :root { --max-width: 1200px; --black: #0b0b0b; --white: #ffffff; --blue-dark: #155f7f; --blue: #1a6f93; --orange: #f06a1a; --orange-dark: #db5f16; --border: rgba(0,0,0,.25); --soft-border: rgba(0,0,0,.12); --star: #ffcc00; } /* Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Base ------------------------------------------------------------- */ body { margin: 0; font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 400; color: var(--black); background: var(--white); } /* Header / Navigation ---------------------------------------------- */ header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 2px solid var(--blue); } .nav { max-width: var(--max-width); margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand img { height: 44px; display: block; } nav { display: flex; gap: 26px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--black); white-space: nowrap; transition: color .15s ease; } nav a:hover, nav a.active { color: var(--blue); } /* Hamburger toggle button (hidden on desktop) */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 26px; height: 3px; background: var(--black); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Hero ------------------------------------------------------------- */ .hero { background: linear-gradient(135deg, #0e4f6b 0%, var(--blue-dark) 40%, #1a7a9e 100%); color: #fff; } .hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 56px 18px 64px; display: flex; align-items: center; gap: 44px; } .hero-img { width: 190px; height: 190px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .hero-text { flex: 1; text-align: center; } .hero-text h1 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 48px; line-height: 1.15; margin: 0 0 18px; } .hero-sub { font-size: 21px; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; opacity: 0.9; } .hero-sub .star { color: var(--star); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; } .hero-text .hero-actions { justify-content: center; } /* Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 8px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: #f29b38; color: #16384a; } .btn-primary:hover { background: #f6ab54; transform: translateY(-1px); } .btn-secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.45); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); } /* Content wrapper -------------------------------------------------- */ .wrap { max-width: var(--max-width); margin: 0 auto; padding: 40px 18px 80px; } /* Panel ------------------------------------------------------------ */ .panel { border: 1px solid var(--border); padding: 24px; margin-bottom: 32px; background: #fff; } .panel h2 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 28px; text-align: center; margin: 0 0 16px; } .panel p { font-size: 18px; line-height: 1.55; margin: 0; } /* Bullet list ------------------------------------------------------ */ .bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .bullets li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 18px; line-height: 1.45; align-items: start; } .bullets strong { font-weight: 600; } /* Callout sidebar ------------------------------------------------- */ .callout { position: sticky; top: 88px; background: #e5732f; color: #fff; border-radius: 60px; padding: 24px; align-self: start; text-align: center; } .callout h3 { font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 600; text-align: center; margin: 0 0 10px; } .callout p { font-size: 18px; line-height: 1.35; margin: 0 0 14px; } .callout ul { font-size: 18px; line-height: 1.35; margin: 10px 0 12px 22px; } .callout p, .callout ul { text-align: left; } .callout a { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; text-align: center; color: #fff; background: #e5732f; border: 2px solid #fff; padding: 12px 24px; border-radius: 10px; text-decoration: none; transition: background 0.2s, color 0.2s; } .callout a:hover { background: #fff; color: #e5732f; } @media (max-width: 980px) { .callout { position: static; border-radius: 36px; } } /* Responsive ------------------------------------------------------- */ @media (max-width: 980px) { .hero-inner { flex-direction: column; text-align: center; } } @media (max-width: 768px) { .nav-toggle { display: flex; } header nav { display: none; flex-direction: column; width: 100%; gap: 0; order: 3; } header nav.open { display: flex; } header nav a { padding: 12px 18px; border-top: 1px solid var(--soft-border); font-size: 16px; } .nav { flex-wrap: wrap; } } @media (max-width: 980px) { .hero-img { width: 160px; height: 160px; } .hero-text h1 { font-size: 38px; } } @media (max-width: 520px) { .hero-inner { padding: 40px 18px 52px; } .hero-text h1 { font-size: 30px; } .hero-sub { font-size: 17px; } .hero-img { width: 130px; height: 130px; } } /* ===== FOOTER ===== */ footer { background: #155f7f; color: #ffffff; margin-top: 64px; } .footer-inner { max-width: 1180px; margin: 0 auto; padding: 28px 32px 24px; } .footer-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .footer-tagline { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.9; max-width: 720px; } .footer-copy { margin: 0; font-size: 13px; line-height: 1.4; opacity: 0.78; white-space: nowrap; flex-shrink: 0; } .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 28px; } .footer-links a { color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; opacity: 0.92; transition: opacity 0.15s ease; } .footer-links a:hover { opacity: 1; } /* ===== CATALOG PAGES ===== */ .about-grid { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: flex-start; } .about-img { width: 180px; border: 1px solid var(--soft-border); border-radius: 6px; overflow: hidden; } .about-img img { width: 100%; height: auto; display: block; } .global-grid, .catalog-grid, .main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .global-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: center; padding-top: 16px; } .global-lead { text-align: center; font-size: 18px; margin-bottom: 12px; } .global-lead a { color: var(--blue); font-weight: 600; text-decoration: none; } .map-wrap { display: flex; justify-content: center; } .map-wrap img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--soft-border); } .map { filter: grayscale(100%) opacity(0.5); transition: filter .2s ease; } .map:hover { filter: grayscale(0%) opacity(0.8); } .about { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 18px; padding: 26px 28px; margin-bottom: 28px; background: #fff; } .about h2, .catalog-title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.2; margin: 0 0 16px; color: #103a63; } .about h2 { text-align: left; margin-bottom: 10px; } .about p { font-size: 18px; line-height: 1.6; margin: 0; color: #354f63; } .controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .controls select, .controls input { padding: 10px 12px; font-size: 14px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: #fff; } .controls input { flex: 1; min-width: 220px; } .report, .class-card { border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 20px; margin-bottom: 20px; background: #fff; overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .class-card { border-radius: 24px; } .report:hover, .class-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.28); } .report-header, .class-header { padding: 18px; cursor: pointer; } .report-top, .class-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .icon { width: 44px; height: 44px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #f8fbfd; } .icon img { width: 36px; height: 36px; } .pill, .duration-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; } .pill { border: 1px solid rgba(0, 0, 0, 0.1); color: #465f74; background: #fff; } .duration-badge { background: var(--blue-dark); color: #fff; font-weight: 600; } .toggle { font-size: 28px; font-weight: 600; color: var(--blue); margin-left: auto; } .title, .class-title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; margin: 0 0 6px; color: #103a63; } .desc, .class-desc { font-size: 18px; line-height: 1.55; margin: 0; color: #445f74; } .report-body, .class-body { display: none; padding: 0 18px 18px; } .report.open .report-body, .class-card.open .class-body { display: block; } .details { margin-top: 10px; } .details-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; } .details-table td { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.08); font-size: 15px; line-height: 1.55; vertical-align: top; } .details-table td:first-child { font-weight: 600; white-space: nowrap; width: 1%; color: #16384a; } .cta { display: inline-block; background: var(--orange); color: #16384a; padding: 12px 24px; border-radius: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; margin-top: 16px; transition: background 0.2s ease, transform 0.2s ease; } .cta:hover { background: var(--orange-dark); color: #ffffff; transform: translateY(-1px); } .cta-wrap { text-align: center; } /* ===== ABOUT PAGE ===== */ .about-page { color: #183847; background: #ffffff; } .about-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .about-hero { background: linear-gradient(135deg, #145b78 0%, #1b6f91 100%); color: #ffffff; padding: 84px 0 80px; position: relative; overflow: hidden; } .about-hero::after, .contact-hero::after, .services-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 100%); mask-image: radial-gradient(circle at center, black 35%, transparent 100%); pointer-events: none; } .about-section-label { margin: 0 0 14px 0; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1b6f91; } .about-hero-eyebrow, .contact-hero-eyebrow, .services-eyebrow, .classes-eyebrow, .reports-eyebrow { margin: 0 0 14px 0; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } .about-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; margin: 0 0 18px 0; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.03em; max-width: 1100px; } .about-hero-copy { margin: 0 0 14px 0; font-size: 1.16rem; line-height: 1.72; color: rgba(255, 255, 255, 0.94); max-width: 1000px; } .about-hero-copy-secondary { margin-bottom: 0; } .about-section { padding: 80px 0; } .about-section-light { background: #ffffff; } .about-section-muted { background: #f5f8fb; } .about-section-heading { margin-bottom: 32px; max-width: 1000px; } .about-section-heading h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -0.025em; color: #16384a; } .about-prose p, .about-card p, .team-item p, .about-closing-line, .about-cta-text p { margin: 0 0 16px 0; font-size: 1.03rem; line-height: 1.7; color: #4a6573; } .about-closing-line { margin-top: 20px; color: #16384a; max-width: 760px; } .about-key-list { margin: 24px 0 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 760px; } .about-key-list li { position: relative; padding-left: 22px; font-size: 1.02rem; line-height: 1.7; color: #4a6573; } .about-key-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: #f29b38; } .about-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .about-card, .team-item { background: #ffffff; border: 1px solid #dde7ee; border-radius: 16px; padding: 26px 24px; box-shadow: 0 6px 18px rgba(17, 52, 72, 0.04); } .about-card h3, .team-item h3 { margin: 0 0 10px 0; font-size: 1.22rem; line-height: 1.3; color: #16384a; } .about-team-list { display: grid; gap: 18px; } .about-cta-box { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 30px 26px; border-radius: 14px; background: #f5f8fb; border: 1px solid #dde7ee; } .about-cta-text h3 { margin: 0; font-size: 1.35rem; color: #16384a; } .about-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 6px; background: #f29b38; color: #16384a; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .about-btn-primary:hover { background: #f6ab54; transform: translateY(-1px); } /* ===== CONTACT PAGE ===== */ .contact-page { color: #183847; background: #ffffff; } .contact-page label { font-family: "Montserrat", sans-serif; } .contact-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .contact-hero { background: linear-gradient(135deg, #145b78 0%, #1b6f91 100%); color: #ffffff; padding: 84px 0 80px; position: relative; overflow: hidden; } .contact-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; margin: 0 0 18px 0; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.03em; max-width: 1100px; } .contact-hero-copy { margin: 0; max-width: 1000px; font-size: 1.16rem; line-height: 1.72; color: rgba(255, 255, 255, 0.94); } .contact-section { padding: 80px 0 88px; background: #ffffff; } .contact-form-wrap { max-width: 760px; } .contact-intro { margin: 0 0 28px 0; font-size: 1.03rem; line-height: 1.7; color: #4a6573; } .contact-form { display: grid; gap: 20px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .form-row { display: grid; gap: 8px; } .form-row label { font-size: 0.92rem; font-weight: 600; color: #16384a; } .form-row input, .form-row select { width: 100%; border: 1px solid #cddbe4; border-radius: 10px; padding: 14px 14px; font-size: 1rem; line-height: 1.5; color: #16384a; background: #ffffff; box-sizing: border-box; appearance: none; } .form-row textarea { width: 100%; border: 1px solid #cddbe4; border-radius: 10px; padding: 14px 14px; font-size: 1rem; line-height: 1.5; color: #16384a; background: #ffffff; box-sizing: border-box; resize: vertical; min-height: 150px; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: #1b6f91; box-shadow: 0 0 0 3px rgba(27, 111, 145, 0.12); } .contact-actions { padding-top: 6px; } .contact-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 8px; border: 1px solid transparent; background: #f29b38; color: #16384a; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .contact-btn-primary:disabled { background: #c8d7e0; color: #6f8794; cursor: not-allowed; transform: none; } .contact-btn-primary:hover { background: #f6ab54; transform: translateY(-1px); } .contact-btn-primary:disabled:hover { background: #c8d7e0; transform: none; } .contact-status { margin: 18px 0 0 0; padding: 14px 16px; border-radius: 12px; background: #edf8f2; border: 1px solid #cfe7d8; color: #1d5c3b; font-size: 0.98rem; line-height: 1.6; } .contact-meta { margin: 22px 0 0 0; font-size: 0.95rem; color: #698390; } /* ===== SERVICES PAGE ===== */ .services-page { color: #183847; background: #ffffff; } .services-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .services-hero { background: linear-gradient(135deg, #145b78 0%, #1b6f91 100%); color: #ffffff; padding: 56px 0 64px; position: relative; overflow: hidden; } .about-container, .contact-container, .services-container { position: relative; z-index: 1; } .services-section-label { margin: 0 0 14px 0; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .services-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; margin: 0 0 18px 0; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.03em; max-width: 1100px; } .services-hero-copy { margin: 0; max-width: 1000px; font-size: 1.16rem; line-height: 1.75; color: rgba(255, 255, 255, 0.94); } .services-hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; max-width: 1000px; } .services-hero-points span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.94rem; font-weight: 600; opacity: 0.95; } .services-section { padding: 84px 0; } .services-section-light { background: #ffffff; } .services-section-muted { background: #f5f8fb; } .services-cta-section { background: #ffffff; padding-top: 92px; padding-bottom: 104px; } .services-heading { max-width: 1000px; margin-bottom: 42px; } .services-section-label { color: #1b6f91; } .services-heading h2 { margin: 0 0 16px 0; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; color: #16384a; } .services-heading p, .capability-body p, .services-side-note p, .deliverable-card p, .services-intro-card p, .services-cta-copy p { margin: 0 0 16px 0; font-size: 1.02rem; line-height: 1.72; color: #4a6573; } .services-intro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .services-intro-card, .services-fit-card, .services-side-note, .capability-card, .deliverable-card { background: #ffffff; border: 1px solid #dde7ee; border-radius: 18px; box-shadow: 0 8px 24px rgba(17, 52, 72, 0.04); } .services-intro-card, .services-fit-card, .services-side-note, .deliverable-card { padding: 28px 26px; } .services-fit-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 24px; align-items: start; } .services-side-note { background: #16384a; border-color: #16384a; } .services-side-note h3, .services-side-note p { color: #ffffff; } .services-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .services-list li { position: relative; padding-left: 24px; font-size: 1.02rem; line-height: 1.7; color: #4a6573; } .services-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: #f29b38; } .services-capability-stack { display: grid; gap: 24px; } .capability-card { padding: 30px 28px; } .capability-header { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } .capability-number { width: 46px; height: 46px; border-radius: 12px; background: #e9f3f8; color: #1b6f91; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; } .capability-summary { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #16384a; } .services-list-tight { margin-top: 16px; } .deliverables-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .services-cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px 32px; border: 1px solid #dde7ee; border-radius: 22px; background: #f5f8fb; } .services-cta-copy h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em; } .services-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; } .services-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 8px; text-decoration: none; font-size: 1rem; font-weight: 600; transition: all 0.2s ease; border: 1px solid transparent; } .services-btn-primary { background: #f29b38; color: #16384a; } .services-btn-primary:hover { background: #f6ab54; transform: translateY(-1px); } .services-btn-secondary { background: #ffffff; color: #16384a; border-color: #cddbe4; } .services-btn-secondary:hover { background: #f8fbfd; border-color: #aebfca; } /* ===== MERGED RESPONSIVE ===== */ @media (max-width: 980px) { .about-grid, .catalog-grid, .main-grid, .global-grid, .about-card-grid, .form-grid, .services-intro-grid, .services-fit-grid, .deliverables-grid, .services-cta-box { grid-template-columns: 1fr; } .about-img, .callout { margin: auto; } .about-section, .services-section, .services-cta-section { padding: 72px 0; } .about-container, .contact-container, .services-container { padding: 0 20px; } .footer-inner { padding: 24px 20px 22px; } .footer-top { flex-direction: column; align-items: flex-start; gap: 8px; } .footer-copy { white-space: normal; } .footer-links { gap: 18px; } .services-cta-actions { justify-content: flex-start; } } @media (max-width: 768px) { .about-cta-box { flex-direction: column; align-items: flex-start; } .about-btn-primary, .contact-btn-primary { width: 100%; justify-content: center; } } @media (max-width: 640px) { .about-hero, .contact-hero, .services-hero { padding: 72px 0 68px; } .about-hero h1, .contact-hero h1, .services-hero h1 { font-size: 2.3rem; } .about-hero-copy, .contact-hero-copy, .services-hero-copy { font-size: 1.04rem; line-height: 1.66; } .about-card, .team-item, .services-intro-card, .services-fit-card, .services-side-note, .capability-card, .deliverable-card, .services-cta-box { padding: 24px 20px; } .capability-header { grid-template-columns: 1fr; gap: 14px; } .services-btn { width: 100%; } .services-cta-actions { width: 100%; flex-direction: column; align-items: stretch; } } @media (max-width: 520px) { .bullets li, .global-lead, .desc, .class-desc { font-size: 16px; } .catalog-title, .about h2 { font-size: 24px; } .controls { flex-direction: column; } } /* ===== CLASSES HERO ===== */ .classes-hero { background: radial-gradient(circle at top right, rgba(255,255,255,0.10), transparent 30%), linear-gradient(135deg, #0e4f6b 0%, var(--blue-dark) 40%, #1a7a9e 100%); color: #fff; position: relative; } .classes-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 100%); mask-image: radial-gradient(circle at center, black 35%, transparent 100%); pointer-events: none; } .classes-hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 64px 18px 72px; position: relative; z-index: 1; } .classes-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.03em; margin: 0 0 18px; max-width: 1100px; text-align: left; } .classes-hero-copy { font-size: 1.16rem; font-weight: 400; line-height: 1.72; max-width: 1000px; margin: 0; color: rgba(255,255,255,0.94); text-align: left; } .classes-hero-actions { margin-top: 22px; } .classes-btn-primary { display: inline-block; background: var(--orange); color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .2s ease; } .classes-btn-primary:hover { background: var(--orange-dark); } .classes-intro { max-width: 980px; margin: 0 0 24px 0; font-size: 1.03rem; line-height: 1.7; color: #4a6573; } .classes-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .classes-info-card { background: #ffffff; border: 1px solid #dde7ee; border-radius: 18px; box-shadow: 0 8px 24px rgba(17, 52, 72, 0.04); padding: 28px 26px; } .classes-info-card h3 { margin: 0 0 12px 0; font-size: 1.18rem; color: #113448; } .classes-info-card p { margin: 0; font-size: 1.01rem; line-height: 1.72; color: #4a6573; } .classes-delivery-card { position: sticky; top: 88px; align-self: start; width: 300px; max-width: 100%; background: #ffffff; border: 1px solid #d9e5ec; border-radius: 18px; padding: 28px 26px; transition: border-color .18s ease, background-color .18s ease; } .classes-delivery-card h3 { font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 600; text-align: left; margin: 0 0 10px; color: #16384a; } .classes-delivery-card p { font-size: 18px; line-height: 1.45; margin: 0 0 14px; color: #4a6573; } .classes-delivery-card a { display: flex; align-items: center; justify-content: center; width: 164px; min-height: 60px; margin: 16px auto 0; text-align: center; padding: 0 24px; color: #ffffff; } .classes-delivery-card a:hover { color: #ffffff; } .classes-delivery-card:hover { border-color: #b8cfdd; background: #fcfeff; } .classes-training-card { position: sticky; top: 88px; align-self: start; width: 300px; max-width: 100%; background: #ffffff; border: 1px solid #d9e5ec; border-radius: 18px; padding: 28px 26px; transition: border-color .18s ease, background-color .18s ease; } .classes-training-card h3 { font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 600; text-align: center; margin: 0 0 10px; color: #16384a; } .classes-training-card p { font-size: 18px; line-height: 1.45; margin: 0 0 14px; color: #4a6573; } .classes-training-card ul { font-size: 18px; line-height: 1.45; margin: 10px 0 18px 22px; color: #4a6573; } .classes-training-card a { display: flex; align-items: center; justify-content: center; width: 164px; min-height: 60px; margin: 16px auto 0; padding: 0 24px; text-align: center; color: #ffffff; } .classes-training-card a:hover { color: #ffffff; } .classes-training-card:hover { border-color: #b8cfdd; background: #fcfeff; } @media (max-width: 980px) { .classes-delivery-card { position: static; } .classes-training-card { position: static; } } /* ===== REPORTS PAGE ===== */ .reports-hero { background: radial-gradient(circle at top right, rgba(255,255,255,0.10), transparent 30%), linear-gradient(135deg, #0e4f6b 0%, var(--blue-dark) 40%, #1a7a9e 100%); color: #fff; position: relative; } .reports-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 100%); mask-image: radial-gradient(circle at center, black 35%, transparent 100%); pointer-events: none; } .reports-hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 56px 18px 64px; position: relative; z-index: 1; } .reports-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.03em; margin: 0 0 18px; max-width: 1100px; } .reports-hero-copy { font-size: 1.16rem; font-weight: 400; line-height: 1.72; max-width: 1000px; margin: 0; color: rgba(255,255,255,0.94); } .reports-hero-actions { margin-top: 22px; } .reports-btn-primary { display: inline-block; background: var(--orange); color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .2s ease; } .reports-btn-primary:hover { background: var(--orange-dark); } .reports-wrap { max-width: var(--max-width); margin: 0 auto; padding: 40px 18px 80px; } .reports-about { border: 1px solid rgba(0,0,0,.12); border-radius: 18px; padding: 26px 28px; margin-bottom: 28px; background: #fff; } .reports-about > * { max-width: 1000px; } .reports-about h2 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 28px; text-align: left; margin: 0 0 10px; line-height: 1.2; color: #103a63; } .reports-about p { font-size: 1.03rem; line-height: 1.7; margin: 0; color: #4a6573; } .reports-main-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; scroll-margin-top: calc(var(--sticky-header-h) + 24px); } .reports-catalog-section { scroll-margin-top: calc(var(--sticky-header-h) + 24px); } .reports-catalog-title { font-family: "Montserrat", sans-serif; font-size: 28px; font-weight: 600; line-height: 1.2; margin: 0 0 16px; color: var(--black); text-align: left; } .reports-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .reports-controls select, .reports-controls input { padding: 10px 12px; font-size: 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; background: #fff; } .reports-controls input { flex: 1; min-width: 220px; } .reports-main-grid .icon { width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #f8fbfd; } .reports-main-grid .icon img { width: 36px; height: 36px; } .reports-main-grid .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.10); font-size: 13px; color: #465f74; background: #fff; } .reports-main-grid .toggle { font-size: 26px; font-weight: 600; color: var(--blue); margin-left: auto; } .reports-main-grid .title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 1.45rem; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 8px; color: #103a63; } .reports-main-grid .desc { font-size: 1.03rem; line-height: 1.7; margin: 0; color: #4a6573; } .details { margin-top: 10px; } .details-table { width: 100%; border-collapse: collapse; background: #fff; } .details-table td { padding: 8px 12px; border: 1px solid rgba(0,0,0,.08); font-size: 15px; line-height: 1.55; vertical-align: top; } .details-table td:first-child { font-weight: 600; white-space: nowrap; width: 1%; color: #16384a; } .cta { display: inline-block; background: var(--orange); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; margin-top: 16px; transition: background .2s ease; } .cta:hover { background: var(--orange-dark); } .cta-wrap { text-align: center; } .custom-report-card { position: sticky; top: 88px; width: 300px; max-width: 100%; background: #ffffff; border: 1px solid #d9e5ec; border-radius: 18px; padding: 28px 26px; align-self: start; transition: border-color .18s ease, background-color .18s ease; } .custom-report-card h3 { font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 600; text-align: center; margin: 0 0 10px; color: #16384a; } .custom-report-card p { font-size: 18px; line-height: 1.45; margin: 0 0 14px; color: #4a6573; } .custom-report-card ul { font-size: 18px; line-height: 1.45; margin: 10px 0 18px 22px; color: #4a6573; } .custom-report-card a { display: block; width: fit-content; margin: 8px auto 0; } .custom-report-card:hover { border-color: #b8cfdd; background: #fcfeff; } @media (max-width: 980px) { .reports-main-grid { grid-template-columns: 1fr; } .custom-report-card { position: static; } } @media (max-width: 520px) { .reports-hero-inner { padding: 48px 18px 56px; } .reports-hero h1 { font-size: 30px; } .reports-hero-copy { font-size: 17px; } .reports-about { padding: 20px; } .reports-catalog-title, .reports-about h2 { font-size: 24px; } .reports-controls { flex-direction: column; } .custom-report-card { padding: 20px; } }