it landed on — on a blog post that is the 1180px article column, which is why the texture stopped mid-page with white gutters either side. Painting it once on gives every template, including the course pages that never loaded main.css at all, the same edge-to-edge canvas. Section surfaces below are translucent tints so the grid stays continuous through them. */ html { background-color: var(--ds-surface); background-image: var(--ds-grid); } body { background-color: transparent; } /* ---------------------------------------------------------------- primitives */ .ds-container { max-width: var(--ds-container); margin: 0 auto; padding: 0 16px; } .ds-section { padding: var(--ds-section-y) 0; } .ds-eyebrow { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: var(--ds-radius-pill); background: var(--ds-orange-soft); color: var(--ds-orange-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.2px; } .ds-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 0; border-radius: var(--ds-radius-sm); background: linear-gradient(180deg, var(--ds-cta), var(--ds-cta-end)); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; padding: 13px 22px; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(18, 35, 61, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .ds-btn:hover { background: linear-gradient(180deg, var(--ds-cta-hover), var(--ds-cta-hover-end)); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px var(--ds-cta-ring), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Pressing the button should feel like pressing something: it sinks and loses its shadow. */ .ds-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28); } .ds-btn--ghost { background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-navy); box-shadow: var(--ds-shadow-sm); } .ds-btn--ghost:hover { background: var(--ds-surface-alt); border-color: var(--ds-cta); color: var(--ds-navy); } .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); padding: 20px; } /* ------------------------------------------------------------------- header */ /* One wordmark size for every header. header.css, main.min.css and site-typography.css each used to set this to a different value, so the logo changed size between the marketing pages and the course pages. This is now the only rule that decides it. */ .header .ds-logo, .header .logo-container img, .rbt-header .logo img { height: 58px !important; max-height: 58px !important; width: auto !important; object-fit: contain; } .header .logo-link { display: inline-flex; align-items: center; text-decoration: none; } .header .ds-logo--dark { display: none; } /* Flat courses menu: the whole catalogue on one surface, in columns, instead of a nested hover. Anchored to the left edge of the trigger so a wide panel cannot run off screen. */ .ds-nav-courses { left: 0 !important; transform: none !important; min-width: 660px !important; padding: 10px !important; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-lg) !important; } .ds-nav-courses__grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 2px 6px; } .ds-nav-courses__item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 7px; color: #1e293b !important; font-size: 14px; line-height: 1.3; text-decoration: none !important; transition: background 0.14s ease, color 0.14s ease; } .ds-nav-courses__item:hover { background: var(--ds-orange-soft); color: var(--ds-orange-dark) !important; } .ds-nav-courses__item i { width: 16px; font-size: 14px; color: var(--ds-muted); text-align: center; } .ds-nav-courses__item:hover i { color: var(--ds-cta); } /* Placement Courses and Coding for Kids close the menu, separated so they read as their own group rather than as two more individual courses. */ .ds-nav-courses__foot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ds-line); } .ds-nav-courses__foot .ds-nav-courses__item { font-weight: 600; } .ds-nav-courses-mobile { max-height: 60vh; overflow-y: auto; } .ds-nav-courses-mobile__last { margin-top: 6px; border-top: 1px solid var(--ds-line); padding-top: 10px !important; } @media (max-width: 1199px) { .ds-nav-courses { min-width: 460px !important; } .ds-nav-courses__grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (max-width: 768px) { .header .ds-logo, .header .logo-container img, .rbt-header .logo img { height: 42px !important; max-height: 42px !important; } } /* ------------------------------------------------- headings across templates */ .section-title, #section-title, .feature-title, .awards-section h2, .placement-section h2, .recognition-section h2, .trust-section h2, .teams-section h2, .national-recognition-section h2, .courses-roadmap-section h2, .modern-faq-section h2, .carousel-container h2, .contact-section h1, .rbt-title-style-3, .rbt-course-banner-area h2 { color: var(--ds-navy) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.2px; } .section-title, #section-title, .awards-section h2, .placement-section h2, .recognition-section h2, .trust-section h2, .teams-section h2, .national-recognition-section h2, .courses-roadmap-section h2, .modern-faq-section h2, .carousel-container h2 { font-size: 30px !important; margin-bottom: 10px !important; } .hero-section h1, .rbt-breadcrumb-default h1, .contact-section h1 { font-size: 38px !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--ds-navy) !important; letter-spacing: -0.4px; } /* Supporting line under a headline: says what the visitor gets before they scroll. The centring is declared here rather than inherited. These two used to be centred only because a stray `body { text-align: center }` rule was in play; once that went, an `auto` margin on a max-width box left the text ragged against the left edge of a centred column. */ .hero-subtitle { max-width: 780px; margin: 14px auto 0 !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--ds-body) !important; text-align: center; } .section-lead { max-width: 720px; margin: 0 auto 26px !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--ds-body) !important; text-align: center; } .recognition-section .section-lead, .teams-section .section-lead, .carousel-container .section-lead, .placement-section .section-lead { text-align: center; } .enquiry-form__sub { margin: -6px 0 12px !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--ds-muted) !important; } /* The whole enquiry form has to be readable in one screen. The legacy hero spent ~110px on padding and a 48px gap under the headline, which pushed the submit button below the fold. */ .ds-hero { padding-top: 18px !important; } .ds-hero .hero-title { margin-bottom: 0 !important; font-size: 32px !important; } .ds-hero .hero-subtitle { margin: 10px auto 18px !important; } .enquiry-form { padding: 20px !important; } .enquiry-form h2 { margin-bottom: 8px !important; font-size: 21px !important; } .enquiry-form .form-group { margin-bottom: 12px !important; } /* Proof bar sits above the fields, so it stays tight here even though it is roomier elsewhere. Only the rating, the offline campus and the placement link are kept: the other facts are repeated further down the page and each extra item wrapped onto a new line. */ .enquiry-form .ds-proof { margin: 0 0 14px !important; padding: 10px 12px !important; gap: 6px 14px !important; } .enquiry-form .ds-proof__item--courses, .enquiry-form .ds-proof__item--years { display: none !important; } @media (max-width: 900px) { .ds-hero .hero-title { font-size: 28px !important; } .ds-hero .hero-subtitle { margin: 10px auto 18px !important; font-size: 16px !important; } /* Form first on phones. Stacked under the three cards it started ~1,600px down the page, so a phone visitor had to scroll past the whole catalogue before anything asked for a name. */ .hero-content { flex-direction: column !important; } .hero-form-section { order: -1 !important; margin-top: 0 !important; } .hero-cards-section { order: 1 !important; margin-top: 24px !important; } } /* On a phone every 50px decides whether the submit button is reachable, so the in-form proof strip drops to the rating alone. The full strip still appears further down the page. */ @media (max-width: 767px) { .ds-hero .hero-title { font-size: 25px !important; } .ds-hero .hero-subtitle { font-size: 15px !important; } .enquiry-form .ds-proof__item--offline, .enquiry-form .ds-proof__item--placements { display: none !important; } } /* Consistent vertical rhythm between the differently-built sections. */ .placement-section, .recognition-section, #companies-section, .courses-roadmap-section, .awards-section, .national-recognition-section, .teams-section, .trust-section, .modern-faq-section { padding-top: var(--ds-section-y) !important; padding-bottom: var(--ds-section-y) !important; } /* Alternating surfaces so section boundaries read without heavy borders. Translucent rather than solid so the page grid runs through them unbroken. */ .recognition-section, .courses-roadmap-section, .teams-section, .modern-faq-section { background: rgba(10, 38, 71, 0.028) !important; } .placement-section, #companies-section, .awards-section, .national-recognition-section, .trust-section { background: transparent !important; } /* ------------------------------------------------------------ hero card banner */ /* Replaces the three flat JPG banners that had the logo, the tagline and the photo baked in. The brand half is navy rather than white: on white it read as a strip of small print next to a thumbnail, and the photo was too small to carry any of the three audiences. */ .hero-card-banner { display: flex; align-items: stretch; height: 112px; margin-bottom: 16px; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 24px -16px rgba(10, 38, 71, 0.55); } .hero-card-banner__brand { display: flex; position: relative; flex: 1 1 55%; flex-direction: column; gap: 9px; justify-content: center; min-width: 0; padding: 0 16px; background-color: var(--ds-navy); background-image: linear-gradient(135deg, #0a2647 0%, #144272 100%); } /* Same faint grid as the page canvas, so the panel belongs to the rest of the site. */ .hero-card-banner__brand::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } .hero-card-banner__brand img { position: relative; width: 136px; height: auto; max-width: 100%; } .hero-card-banner__line { position: relative; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.88); } .hero-card-banner__photo { flex: 0 0 45%; width: 45%; height: 100%; object-fit: cover; object-position: 50% 50%; } @media (max-width: 480px) { .hero-card-banner { height: 96px; } .hero-card-banner__brand img { width: 116px; } .hero-card-banner__line { font-size: 12.5px; } } /* ------------------------------------------------ "why a classroom" icon tiles */ /* These three cards used to show stock clip-art PNGs at whatever size the file happened to be. They are inline icons now, so the tile is drawn in CSS: a lit gradient, an inner highlight along the top edge and a cast shadow underneath, to give the flat single-colour glyphs some depth. */ .recognition-card .recognition-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 0; margin-bottom: 22px; border-radius: 24px; background: linear-gradient(155deg, #fff 0%, #eaf2fe 52%, #d7e5fb 100%); box-shadow: 0 16px 28px -14px rgba(10, 38, 71, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -4px 10px rgba(10, 38, 71, 0.07); transition: transform 0.35s ease, box-shadow 0.35s ease; } .recognition-card .recognition-icon svg { width: 54px; height: 54px; filter: drop-shadow(0 3px 5px rgba(10, 38, 71, 0.22)); } .recognition-card:hover .recognition-icon { transform: translateY(-4px); box-shadow: 0 22px 34px -14px rgba(10, 38, 71, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -4px 10px rgba(10, 38, 71, 0.07); } /* --------------------------------------------------- courses section (light) */ /* This section used to sit on a navy gradient, so its cards, tabs, tags and stats were all drawn in white or translucent white. Moving it onto the light alternating surface above left every one of those on near-white — the titles, descriptions, tags, durations and module counts were all present but unreadable. They are re-themed for a light card here. */ .courses-roadmap-section .course-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); backdrop-filter: none; } .courses-roadmap-section .course-card:hover { border-color: #cbd8ea; box-shadow: var(--ds-shadow); } /* The sheen that swept across the card was built from translucent white for the dark original. */ .courses-roadmap-section .course-card::before { display: none; } .courses-roadmap-section .course-icon { background: #eef3fb; color: var(--ds-navy); } .courses-roadmap-section .course-title { color: var(--ds-navy); } .courses-roadmap-section .course-description { color: var(--ds-body); } .courses-roadmap-section .stat-item, .courses-roadmap-section .course-status { color: var(--ds-muted); } .courses-roadmap-section .course-tag { background: #eef3fb; color: var(--ds-navy); border: 1px solid var(--ds-line); } .courses-roadmap-section .course-progress { background: var(--ds-line); } .courses-roadmap-section .explore-course { color: var(--ds-cta); font-weight: 600; } .courses-roadmap-section .explore-course:hover { color: var(--ds-cta-hover); } /* Only the selected tab was legible: the other two were white text on a white pill. */ .courses-roadmap-section .tab-btn { background: var(--ds-surface); color: var(--ds-body); border: 1px solid var(--ds-line); } .courses-roadmap-section .tab-btn:hover { background: #eef3fb; color: var(--ds-navy); } .courses-roadmap-section .tab-btn.active, .courses-roadmap-section .tab-btn.active:hover { background: var(--ds-navy); color: #fff; border-color: var(--ds-navy); } /* ------------------------------------------------------------------- buttons */ /* Every action button on the site, whichever template it came from, gets the same fill, the same lift on hover and the same sink on press. */ .form-submit-btn, .explore-btn, .cta-banner a, .cta-banner .btn, .rbt-btn, .rbt-btn.btn-gradient, .course-sidebar .rbt-btn, .enquiry-form button[type="submit"], .ds-inline-lead__form button, .ds-lead-form__submit, .ds-area__btn, .ds-areas__btn { position: relative; overflow: hidden; border-radius: var(--ds-radius-sm) !important; background: linear-gradient(180deg, var(--ds-cta), var(--ds-cta-end)) !important; border: 0 !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 1px 2px rgba(18, 35, 61, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease; } .form-submit-btn:hover, .explore-btn:hover, .cta-banner a:hover, .rbt-btn:hover, .enquiry-form button[type="submit"]:hover, .ds-inline-lead__form button:hover, .ds-area__btn:hover, .ds-areas__btn:hover { background: linear-gradient(180deg, var(--ds-cta-hover), var(--ds-cta-hover-end)) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 22px var(--ds-cta-ring), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .form-submit-btn:active, .explore-btn:active, .cta-banner a:active, .rbt-btn:active, .enquiry-form button[type="submit"]:active, .ds-inline-lead__form button:active, .ds-area__btn:active, .ds-areas__btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28) !important; } /* A light sweep crosses the button on hover. Purely a "this is clickable" cue, and it is pointer-events:none so it can never swallow the click. */ .ds-btn::after, .form-submit-btn::after, .cta-banner a::after, .enquiry-form button[type="submit"]::after, .ds-inline-lead__form button::after, .ds-area__btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transition: left 0.55s ease; } .ds-btn:hover::after, .form-submit-btn:hover::after, .cta-banner a:hover::after, .enquiry-form button[type="submit"]:hover::after, .ds-inline-lead__form button:hover::after, .ds-area__btn:hover::after { left: 130%; } /* Keyboard users previously got no visible focus at all on any CTA. */ .ds-btn:focus-visible, .form-submit-btn:focus-visible, .explore-btn:focus-visible, .cta-banner a:focus-visible, .rbt-btn:focus-visible, .enquiry-form button[type="submit"]:focus-visible, .ds-inline-lead__form button:focus-visible, .ds-area__btn:focus-visible, .ds-areas__btn:focus-visible { outline: 3px solid var(--ds-orange) !important; outline-offset: 3px; } .form-submit-btn, .enquiry-form button[type="submit"] { width: 100%; padding: 14px !important; } .rbt-btn.btn-border, .rbt-btn-link { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; color: var(--ds-navy) !important; } @media (prefers-reduced-motion: reduce) { .ds-btn, .form-submit-btn, .explore-btn, .cta-banner a, .rbt-btn, .enquiry-form button[type="submit"], .ds-inline-lead__form button, .ds-area__btn, .ds-areas__btn { transition: background 0.14s ease; } .ds-btn:hover, .form-submit-btn:hover, .cta-banner a:hover, .enquiry-form button[type="submit"]:hover, .ds-inline-lead__form button:hover, .ds-area__btn:hover { transform: none; } .ds-btn::after, .form-submit-btn::after, .cta-banner a::after, .enquiry-form button[type="submit"]::after, .ds-inline-lead__form button::after, .ds-area__btn::after { display: none; } } /* ---------------------------------------------------------------- CTA banners */ .cta-banner { max-width: var(--ds-container); margin: 0 auto 8px !important; padding: 26px 28px !important; border-radius: var(--ds-radius-lg) !important; background: linear-gradient(140deg, var(--ds-navy), var(--ds-navy-mid)) !important; box-shadow: var(--ds-shadow) !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .cta-banner h3 { margin: 0 !important; color: #fff !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; } .cta-banner p { margin: 6px 0 0 !important; color: rgba(255, 255, 255, 0.82) !important; font-size: 14px !important; } /* The tile was a 10%-white wash on a navy banner, i.e. a slightly lighter navy, and the mark inside it is the dark-on-light version of the icon — so the logo was invisible. A white tile gives the mark the light background it was drawn for. The mark was also 64px tall inside a 60px box, which cropped it. */ .cta-banner .cta-logo-container { flex: 0 0 auto; width: 60px !important; min-width: 60px !important; height: 60px !important; padding: 10px !important; background: #fff !important; border-radius: var(--ds-radius) !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .cta-banner .cta-logo { width: 100% !important; height: 100% !important; object-fit: contain !important; } .cta-banner a, .cta-banner .btn { flex: 0 0 auto; padding: 13px 24px !important; text-decoration: none !important; } /* --------------------------------------------------------------- form fields */ .enquiry-form, .contact-section form { border-radius: var(--ds-radius-lg); } .enquiry-form h2 { font-size: 21px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ds-navy) !important; margin-bottom: 16px !important; } .form-group { margin-bottom: 12px; } .form-group label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #52627a; } .enquiry-form input, .enquiry-form select, .contact-section input, .contact-section select, .contact-section textarea { width: 100%; border: 1px solid #d8e0ec !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important; color: var(--ds-navy) !important; background: #fbfcfe !important; box-shadow: none !important; } .enquiry-form input:focus, .enquiry-form select:focus, .contact-section input:focus, .contact-section select:focus { outline: none !important; border-color: var(--ds-cta) !important; background: #fff !important; box-shadow: 0 0 0 3px var(--ds-cta-ring) !important; } /* ------------------------------------------------------------- cards & grids */ .rbt-card, .course-card, .roadmap-card, .feature-card, .mentor-card, .info-block { border-radius: var(--ds-radius) !important; border: 1px solid var(--ds-line) !important; box-shadow: var(--ds-shadow-sm) !important; background: var(--ds-surface) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .rbt-card:hover, .course-card:hover, .roadmap-card:hover, .feature-card:hover, .mentor-card:hover { border-color: var(--ds-orange) !important; box-shadow: var(--ds-shadow) !important; transform: translateY(-2px); } /* The contact page keeps its address and phone numbers on a dark navy panel. The generic card and heading colours above turned that block into white text on white cards, so the panel opts out and keeps light type on its dark background. */ .mcontact-info h1, .mcontact-info h2, .mcontact-info h3 { color: #fff !important; } .mcontact-info .info-block { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: none !important; } .mcontact-info .info-block p, .mcontact-info .info-block a { color: rgba(255, 255, 255, 0.88) !important; } .mcontact-info .info-block i { color: #feb47b !important; } /* --------------------------------------------------------------------- FAQ */ .modern-faq-section .faq-item, .modern-faq-section details { border: 1px solid var(--ds-line) !important; border-radius: var(--ds-radius) !important; background: var(--ds-surface) !important; margin-bottom: 8px !important; box-shadow: none !important; } .modern-faq-section .faq-question, .modern-faq-section summary { font-size: 15px !important; font-weight: 600 !important; color: var(--ds-navy) !important; } .modern-faq-section .faq-answer p, .modern-faq-section details p { font-size: 14px !important; line-height: 1.7 !important; color: var(--ds-body) !important; } /* ------------------------------------------------------- footer area tidy-up */ .footer-bottom .locations-list { line-height: 2 !important; font-size: 13px !important; } .footer-bottom .locations-list a { color: rgba(255, 255, 255, 0.78) !important; text-decoration: none; white-space: nowrap; } .footer-bottom .locations-list a:hover { color: #fff !important; text-decoration: underline; } /* ------------------------------------------------------------------ mobile */ @media (max-width: 991px) { :root { --ds-section-y: 44px; } .hero-section h1, .rbt-breadcrumb-default h1, .contact-section h1 { font-size: 27px !important; } .section-title, #section-title, .awards-section h2, .placement-section h2, .recognition-section h2, .trust-section h2, .teams-section h2, .national-recognition-section h2, .courses-roadmap-section h2, .modern-faq-section h2, .carousel-container h2 { font-size: 23px !important; } .cta-banner { padding: 22px 20px !important; } .cta-banner h3 { font-size: 19px !important; } .cta-banner a, .cta-banner .btn { width: 100%; text-align: center; } .hero-subtitle { font-size: 15px !important; } .section-lead { font-size: 14px !important; margin-bottom: 20px !important; } } @media (max-width: 767px) { .ds-btn { width: 100%; } .footer-bottom .locations-list a { white-space: normal; } } /* ------------------------------------------------- course & kids page theme */ /* The 15 course pages and 3 kids pages run on a bought Bootstrap theme. The rules below pull the parts a visitor compares against the rest of the site back into line; they do not try to restyle the theme itself. */ /* A `max-height` with no matching `width: auto` squashes an image as soon as the SEO middleware stamps real width/height attributes on it: `height: auto` resolves from the 500px width attribute, `max-height` then clamps the height to 105px, and the width stays at 500 — so a 500x500 icon rendered as a 264x105 smear, and the 128x128 bestseller star as a 128x30 one. */ .rbt-badge-2 img, .about-author .thumbnail a img { width: auto; } /* The "Why Debugshala" block reuses the theme's instructor card, whose avatar rule is `min-width: 250px` + `border-radius: 100%` + `object-fit: cover` — written for a photo of a person. All 18 of these pages put the Debugshala mark there instead and try to cap it with an inline `max-width: 70px`, which a min-width always beats, so the logo rendered as a 250px circle. The mark is an SVG with a 16px viewBox, so it needs an explicit width rather than a cap. */ .rbt-instructor .about-author .thumbnail a img { width: 70px; min-width: 0; height: auto; max-height: none; border-radius: 0; object-fit: contain; } /* The hero band ran 80px of padding on a 490px min-height, but its content — title, one paragraph, a badge row and a meta row — is about 245px tall, and the theme centres it vertically. That left roughly 60px of empty band above and below the copy, which reads as a gap now that the band is transparent over the page canvas. Sizing the band to its content removes it. */ .rbt-breadcrumb-default.rbt-breadcrumb-style-3 { min-height: 0; padding-top: 56px; padding-bottom: 56px; } /* The theme pulls the price/enrol card up 500px so it overlaps the hero band. With a shorter band and the shared announcement strip above it, that put the card on top of the strip. */ @media (min-width: 992px) { .course-sidebar-top { margin-top: -320px; } } /* ---------------------------------------------------------------- dark mode */ /* The course and kids pages carry the theme's light/dark switcher, which sets `body.active-dark-mode`. The shared header and the lead-capture UI were built light-only, so switching to dark left navy text on a navy page. These rules give the shared shell a dark counterpart using the theme's own palette (#192335 surface, #ffffff1a borders). */ /* The page grid is painted on , which the theme's dark class (on ) cannot reach, so the canvas is restated here in the dark palette. */ html:has(body.active-dark-mode) { background-color: #131824; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E"); } body.active-dark-mode .header { background: #192335; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); } body.active-dark-mode .header .ds-logo--light { display: none; } body.active-dark-mode .header .ds-logo--dark { display: block; } body.active-dark-mode .header .nav-link { color: #e7ebf2; } body.active-dark-mode .header .nav-link:hover, body.active-dark-mode .header .nav-link.active { color: #63d6f0; } body.active-dark-mode .header .mobile-menu-button { color: #e7ebf2; } body.active-dark-mode .header .dropdown-content, body.active-dark-mode .header .dropdown-menu-mobile { background: #212c40; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } body.active-dark-mode .header .dropdown-menu-mobile a, body.active-dark-mode .header .dropdown-menu-mobile button.submenu-toggle, body.active-dark-mode .header .mobile-submenu a { color: #e7ebf2; border-bottom-color: rgba(255, 255, 255, 0.1); } body.active-dark-mode .ds-nav-courses { border-color: rgba(255, 255, 255, 0.12); } body.active-dark-mode .ds-nav-courses__item { color: #e7ebf2 !important; } body.active-dark-mode .ds-nav-courses__item:hover { background: rgba(255, 255, 255, 0.08); color: #ffb37a !important; } body.active-dark-mode .ds-nav-courses__item i { color: #9fb0c6; } body.active-dark-mode .ds-nav-courses__foot { border-top-color: rgba(255, 255, 255, 0.12); } body.active-dark-mode .ds-nav-courses-mobile__last { border-top-color: rgba(255, 255, 255, 0.12); } /* Lead capture: only the white halves need changing — the navy aside already suits both themes. */ body.active-dark-mode .ds-lead-bar, body.active-dark-mode .ds-lead-modal__form { background: #192335; } body.active-dark-mode .ds-lead-bar__item { color: #e7ebf2; border-color: rgba(255, 255, 255, 0.12); } body.active-dark-mode .ds-lead-step__label, body.active-dark-mode .ds-lead-field span, body.active-dark-mode .ds-lead-privacy { color: #e7ebf2; } body.active-dark-mode .ds-lead-field input, body.active-dark-mode .ds-lead-modal__form select { background: #212c40; border-color: rgba(255, 255, 255, 0.16); color: #f2f5f9; } body.active-dark-mode .ds-lead-field input::placeholder { color: #8d9cb1; } body.active-dark-mode .ds-lead-chip { background: #212c40; border-color: rgba(255, 255, 255, 0.16); color: #e7ebf2; } body.active-dark-mode .ds-lead-modal__close { color: #e7ebf2; } /* The footer is navy in both themes; only its hairlines need to stop showing as light grey. */ body.active-dark-mode .modern-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); } /* On phones the theme switcher sat on top of the Call / WhatsApp action bar. */ @media (max-width: 767px) { .my_switcher { bottom: 74px !important; } }