/* =================================================================== eLearnTesting.in — Design System Display: Space Grotesk / Body: IBM Plex Sans / Data: IBM Plex Mono =================================================================== */ :root{ --ink:#10151A; --ink-soft:#1A212B; --paper:#EEF0F3; --paper-raised:#FFFFFF; --blue:#2E5EFF; --blue-deep:#152F8F; --blue-glow:rgba(46,94,255,.14); --amber:#FF7A29; --amber-glow:rgba(255,122,41,.14); --green:#1FAE6E; --green-glow:rgba(31,174,110,.14); --slate:#4B5567; --slate-light:#828C9C; --line:#DADFE6; --line-dark:#2A3340; --radius:14px; --maxw:1180px; --shadow-card: 0 1px 2px rgba(16,21,26,.04), 0 8px 24px -12px rgba(16,21,26,.12); --shadow-raised: 0 4px 10px rgba(16,21,26,.06), 0 20px 40px -20px rgba(16,21,26,.22); /* Course accent — overridden per page (inline on ) for a vibrant, colour-coded identity per program. Defaults to brand blue on shared pages. */ --accent:#2E5EFF; --accent-deep:#152F8F; --accent-glow:rgba(46,94,255,.16); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em;} p{margin:0;} .mono{font-family:'IBM Plex Mono',monospace;} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .section{padding:88px 0;} .section--tight{padding:56px 0;} .section--ink{background:var(--ink);color:#EDEFF4;} .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; font-weight:600; } .eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);display:inline-block;} .section--ink .eyebrow{color:#8FB0FF;} .section--ink .eyebrow::before{background:#8FB0FF;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; padding:13px 24px;border-radius:9px; font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14.5px; border:1px solid transparent;cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, filter .16s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px);} .btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-deep));color:#fff;box-shadow:0 12px 26px -10px var(--accent-glow), 0 4px 10px -4px rgba(16,21,26,.25);} .btn-primary:hover{filter:brightness(1.08);box-shadow:0 16px 32px -10px var(--accent-glow), 0 6px 14px -4px rgba(16,21,26,.3);} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);} .btn-ghost:hover{border-color:var(--ink);} .section--ink .btn-ghost{border-color:#3A4454;color:#EDEFF4;} .section--ink .btn-ghost:hover{border-color:#7FA0FF;} .btn-sm{padding:9px 16px;font-size:13px;} .btn svg{width:16px;height:16px;flex:none;} /* ---------- Nav ---------- */ .nav{ position:sticky;top:0;z-index:50; background:rgba(238,240,243,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;flex-wrap:nowrap;gap:18px;} .brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;flex:none;white-space:nowrap;} .brand .mark{width:34px;height:34px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;} .brand .mark svg{width:18px;height:18px;stroke:var(--blue);} .brand small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--slate-light);text-transform:uppercase;margin-top:1px;} .nav-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);flex-wrap:nowrap;white-space:nowrap;flex:1;justify-content:center;min-width:0;padding-right:clamp(16px,2.4vw,32px);} .nav-cta{display:flex;align-items:center;gap:16px;flex:none;white-space:nowrap;padding-left:clamp(16px,2.4vw,28px);border-left:1px solid var(--line);} .nav-links a{font-size:clamp(12.5px,1vw,14.5px);font-weight:500;color:var(--slate);position:relative;padding:6px 0;} .nav-links a:hover, .nav-links a.active{color:var(--ink);} .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);border-radius:2px;} .nav-tel{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--ink);} .nav-tel svg{width:15px;height:15px;stroke:var(--blue);flex:none;} .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;flex:none;} .nav-toggle svg{width:20px;height:20px;} @media (max-width:1180px){ .brand small{display:none;} .nav-tel{display:none;} } /* Menu stays a single line at every width: on narrow screens it scrolls horizontally instead of wrapping or collapsing into a dropdown. */ @media (max-width:860px){ .nav .wrap{gap:12px;} .nav-links{ justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch; gap:18px;padding-bottom:2px;scrollbar-width:none; } .nav-links::-webkit-scrollbar{display:none;} .nav-links a{flex:none;} .nav-cta .nav-tel{display:none;} .nav-toggle{display:none;} } /* ---------- Hero ---------- */ .hero{padding:76px 0 40px;position:relative;overflow:hidden;} .hero::before{ content:"";position:absolute;top:-160px;right:-140px;width:560px;height:560px;border-radius:50%; background:radial-gradient(circle, var(--accent-glow), transparent 70%);pointer-events:none;z-index:0; } .hero .wrap{position:relative;z-index:1;} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} .hero h1{font-size:clamp(34px,4.4vw,56px);} .hero .lede{font-size:18px;color:var(--slate);max-width:46ch;margin-top:20px;} .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;} .hero-stats{display:flex;gap:0;margin-top:44px;border-top:1px solid var(--line);padding-top:22px;} .hero-stats div{flex:1;padding-right:18px;} .hero-stats .num{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--ink);} .hero-stats .lbl{font-size:12.5px;color:var(--slate-light);margin-top:3px;} @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} .hero-stats{flex-wrap:wrap;row-gap:20px;} .hero-stats div{flex:1 1 45%;} } /* ---------- Course grid (home) ---------- */ .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} @media (max-width:980px){.course-grid{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.course-grid{grid-template-columns:1fr;}} .course-card{ background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius); padding:26px 24px 24px;box-shadow:var(--shadow-card); display:flex;flex-direction:column;gap:16px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised);border-color:#C4CCD9;} .course-card .icn{width:46px;height:46px;border-radius:10px;background:var(--accent-glow, var(--blue-glow));display:flex;align-items:center;justify-content:center;} .course-card .icn svg{width:24px;height:24px;stroke:var(--accent, var(--blue));} .course-card h3{font-size:19px;} .course-card .desc{font-size:14px;color:var(--slate);} .course-card .meta{display:flex;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate-light);border-top:1px solid var(--line);padding-top:14px;margin-top:auto;} .course-card .meta span{display:flex;align-items:center;gap:5px;} .course-card .meta svg{width:13px;height:13px;stroke:var(--slate-light);} .course-card .arrow{margin-top:2px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--accent, var(--blue));} .course-card .arrow svg{width:14px;height:14px;stroke:var(--accent, var(--blue));transition:transform .16s ease;} .course-card:hover .arrow svg{transform:translate(3px,-3px);} /* ---------- Outlook / Gauge Panel (signature element) ---------- */ .outlook{ background:var(--ink);border-radius:18px;padding:36px 32px 32px;color:#EDEFF4; position:relative;overflow:hidden;border-top:3px solid var(--accent); } .outlook::before{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, var(--accent-glow), transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 64px); pointer-events:none; } .outlook::after{ content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle, var(--accent-glow), transparent 70%);pointer-events:none; } .outlook-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative;flex-wrap:wrap;} .outlook-head h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;color:#9AAAC4;font-weight:500;} .outlook-body{display:grid;grid-template-columns:180px 1fr;gap:36px;margin-top:26px;position:relative;align-items:center;} @media (max-width:760px){.outlook-body{grid-template-columns:1fr;}} .gauge{position:relative;width:180px;height:110px;} .gauge svg{width:180px;height:110px;overflow:visible;} .gauge .track{fill:none;stroke:#2A3340;stroke-width:14;stroke-linecap:round;} .gauge .fill{fill:none;stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset 1s ease;} .gauge-label{position:absolute;bottom:0;left:0;right:0;text-align:center;} .gauge-label .risk{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;} .gauge-label .sub{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8592A8;margin-top:2px;} .risk-high .fill{stroke:var(--amber);} .risk-high .risk{color:var(--amber);} .risk-medium .fill{stroke:#E8C547;} .risk-medium .risk{color:#E8C547;} .risk-low .fill{stroke:var(--green);} .risk-low .risk{color:var(--green);} .outlook-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media (max-width:640px){.outlook-stats{grid-template-columns:1fr;}} .outlook-stat .k{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8592A8;margin-bottom:8px;display:flex;align-items:center;gap:6px;} .outlook-stat .k svg{width:13px;height:13px;stroke:#8592A8;} .outlook-stat .v{font-size:14.5px;color:#DCE2EE;line-height:1.55;} .outlook-stat .v b{color:#fff;font-weight:600;} .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative;} .chip{ font-family:'IBM Plex Mono',monospace;font-size:12px;padding:6px 12px;border-radius:20px; border:1px solid #303B4C;color:#C7D0E0;background:rgba(255,255,255,.03); } /* ---------- Outlook Carousel (homepage, cycles through all 5 programs) ---------- */ .outlook-carousel{position:relative;} .outlook-track{position:relative;overflow:hidden;border-radius:18px;} .outlook-track .outlook{ display:none;border-radius:18px;margin:0; } .outlook-track .outlook.active{display:block;animation:outlookIn .5s ease;} @keyframes outlookIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;} .car-btn{ width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper-raised); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .16s ease, transform .16s ease, color .16s ease;color:var(--slate); } .car-btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px);} .car-btn svg{width:17px;height:17px;} .car-dots{display:flex;align-items:center;gap:9px;} .car-dot{ width:9px;height:9px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0; transition:background .2s ease, transform .2s ease, width .2s ease; } .car-dot.active{background:var(--accent);width:24px;border-radius:5px;} /* ---------- Course hero (course pages) ---------- */ .course-hero{padding:56px 0 0;position:relative;overflow:hidden;} .course-hero::before{ content:"";position:absolute;top:-140px;right:-120px;width:480px;height:480px;border-radius:50%; background:radial-gradient(circle, var(--accent-glow), transparent 70%);pointer-events:none;z-index:0; } .course-hero .wrap{position:relative;z-index:1;} .course-hero-top{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;justify-content:space-between;} .course-hero .badge-icn{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg, var(--ink), var(--accent-deep));box-shadow:0 10px 24px -10px var(--accent-glow);display:flex;align-items:center;justify-content:center;flex:none;} .course-hero .badge-icn svg{width:32px;height:32px;stroke:#fff;} .course-hero h1{font-size:clamp(30px,4vw,46px);margin-top:22px;} .course-hero .tagline{font-size:17px;color:var(--slate);margin-top:14px;max-width:62ch;} .course-hero .meta-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);} .course-hero .meta-item{display:flex;align-items:center;gap:9px;} .course-hero .meta-item svg{width:17px;height:17px;stroke:var(--accent);} .course-hero .meta-item .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);} .course-hero .meta-item .v{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;} .course-hero-actions{display:flex;gap:12px;flex-wrap:wrap;} /* breadcrumb */ .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate-light);} .crumb a:hover{color:var(--blue);} .crumb svg{width:12px;height:12px;} /* ---------- Section headers ---------- */ .sec-head{max-width:640px;margin-bottom:40px;} .sec-head h2{font-size:clamp(26px,3vw,36px);} .sec-head p{color:var(--slate);margin-top:14px;font-size:16px;} .section--ink .sec-head p{color:#AEB7C6;} /* ---------- Curriculum accordion ---------- */ .curriculum{display:flex;flex-direction:column;gap:12px;} .week{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;overflow:hidden;} .week-head{display:flex;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;} .week-head .idx{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-glow);border-radius:7px;padding:5px 9px;flex:none;} .week-head .titles{flex:1;display:flex;flex-direction:column;gap:3px;} .week-head .wk-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;display:block;} .week-head .wk-sub{font-size:12.5px;color:var(--slate-light);font-family:'IBM Plex Mono',monospace;display:block;} .week-head .chev{width:18px;height:18px;stroke:var(--slate);flex:none;transition:transform .22s ease;} .week.open .chev{transform:rotate(180deg);} .week-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;} .week.open .week-panel{max-height:600px;} .week-panel-inner{padding:0 22px 22px 66px;} .week-panel ul{display:flex;flex-direction:column;gap:9px;} .week-panel li{display:flex;gap:10px;font-size:14.5px;color:var(--slate);} .week-panel li svg{width:15px;height:15px;stroke:var(--green);flex:none;margin-top:3px;} /* ---------- Tools strip ---------- */ .tools-strip{display:flex;flex-wrap:wrap;gap:10px;} .tool-tag{display:flex;align-items:center;gap:8px;background:var(--paper-raised);border:1px solid var(--line);padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:500;} .tool-tag svg{width:15px;height:15px;stroke:var(--accent);} /* ---------- Two column info blocks ---------- */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;} @media (max-width:760px){.two-col{grid-template-columns:1fr;}} .info-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:26px;} .info-card h4{font-size:16px;display:flex;align-items:center;gap:10px;} .info-card h4 svg{width:18px;height:18px;stroke:var(--blue);} .info-card ul{margin-top:16px;display:flex;flex-direction:column;gap:10px;} .info-card li{display:flex;gap:10px;font-size:14.5px;color:var(--slate);} .info-card li svg{width:15px;height:15px;stroke:var(--green);flex:none;margin-top:3px;} /* ---------- Outcome cards ---------- */ .outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} @media (max-width:900px){.outcome-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.outcome-grid{grid-template-columns:1fr;}} .outcome-card{border:1px solid var(--line-dark);border-radius:12px;padding:22px;background:var(--ink-soft);} .outcome-card .n{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:12.5px;letter-spacing:.08em;font-weight:600;} .outcome-card h4{font-size:16.5px;margin-top:10px;color:#fff;} .outcome-card p{font-size:13.5px;color:#A8B2C4;margin-top:8px;} /* ---------- CTA band ---------- */ .cta-band{ background:var(--ink);border-radius:20px;padding:48px 44px;color:#fff; display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap; } .cta-band h3{font-size:26px;max-width:420px;} .cta-band p{color:#AEB7C6;margin-top:10px;font-size:14.5px;} .cta-contacts{display:flex;gap:16px;flex-wrap:wrap;} .contact-pill{ display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.06); border:1px solid #303B4C;padding:14px 20px;border-radius:12px; } .contact-pill svg{width:19px;height:19px;stroke:#7FA0FF;flex:none;} .contact-pill .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8592A8;} .contact-pill .v{font-family:'IBM Plex Mono',monospace;font-size:15px;color:#fff;font-weight:500;} /* ---------- Marquee / logos strip ---------- */ .risk-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;} .risk-legend span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);} .risk-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;} /* ---------- Footer ---------- */ footer{background:var(--ink);color:#8F99AC;padding:56px 0 30px;} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;} @media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}} .footer-brand .brand{color:#fff;} .footer-brand .mark{background:#1A212B;} .footer-brand p{margin-top:14px;font-size:13.5px;line-height:1.7;max-width:32ch;} .footer-col h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#5B6478;margin-bottom:16px;font-weight:600;} .footer-col ul{display:flex;flex-direction:column;gap:11px;} .footer-col a{font-size:14px;} .footer-col a:hover{color:#fff;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid #232B38;font-size:12.5px;} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease;} .reveal.in{opacity:1;transform:translateY(0);} /* ---------- Misc ---------- */ .divider{height:1px;background:var(--line);border:none;margin:0;} .pill-label{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);color:var(--slate);}