/* * ╔══════════════════════════════════════════════════════════════╗ * ║ MIDsource — slider.css ║ * ║ Save to: css/slider.css ║ * ║ Load in AFTER style-v2.css: ║ * ║ ║ * ╚══════════════════════════════════════════════════════════════╝ * * All visual configuration is marked with ★ EDIT ★ comments. * Particle brightness is controlled in slider.js. */ /* ───────────────────────────────────────────────────────────── SCOPED RESET — box-sizing only on slider children. Does NOT zero margin/padding (that broke button padding). Only headings/paragraphs get margin:0 to avoid collapse. ───────────────────────────────────────────────────────────── */ #ms-hero-slider *, #ms-hero-slider *::before, #ms-hero-slider *::after { box-sizing: border-box; } #ms-hero-slider h1, #ms-hero-slider h2, #ms-hero-slider h3, #ms-hero-slider p { margin: 0; padding: 0; } /* ───────────────────────────────────────────────────────────── SECTION WRAPPER ★ EDIT ★ height — slider height on desktop ★ EDIT ★ min-height — minimum height (e.g. tall content) ★ EDIT ★ background — dark blue base colour ───────────────────────────────────────────────────────────── */ #ms-hero-slider { position: relative; width: 100%; height: 75vh; /* ★ EDIT height ★ */ min-height: 640px; /* ★ EDIT min-height ★ */ background: #020d1f; /* ★ EDIT background colour ★ */ overflow: hidden; font-family: 'Roboto', sans-serif; } /* ───────────────────────────────────────────────────────────── PARTICLE CANVAS — sits behind everything ───────────────────────────────────────────────────────────── */ #ms-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* ───────────────────────────────────────────────────────────── SLIDES CONTAINER ───────────────────────────────────────────────────────────── */ .ms-slides { position: relative; width: 100%; height: 100%; z-index: 2; } /* ───────────────────────────────────────────────────────────── INDIVIDUAL SLIDE — fade transition ★ EDIT ★ transition duration — slide fade speed ───────────────────────────────────────────────────────────── */ .ms-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1); /* ★ EDIT transition ★ */ } .ms-slide.ms-active { opacity: 1; pointer-events: all; } /* ───────────────────────────────────────────────────────────── RADIAL GLOW behind text (subtle ambient light) ★ EDIT ★ rgba color — glow tint (default: blue) ★ EDIT ★ width/height — glow spread Set to display:none to remove entirely ───────────────────────────────────────────────────────────── */ .ms-slide-glow { position: absolute; bottom: -160px; left: 50%; transform: translateX(-50%); width: 700px; /* ★ EDIT glow width ★ */ height: 340px; /* ★ EDIT glow height ★ */ background: radial-gradient(ellipse at center, rgba(26, 127, 212, 0.18) 0%, /* ★ EDIT glow colour/opacity ★ */ transparent 70%); pointer-events: none; } /* ───────────────────────────────────────────────────────────── SLIDE INNER — content block, centred ★ EDIT ★ max-width — constrains content column width ★ EDIT ★ padding — left/right breathing room ───────────────────────────────────────────────────────────── */ .ms-slide-inner { text-align: center; max-width: 920px; /* ★ EDIT max content width ★ */ width: 100%; padding: 0 3rem; /* ★ EDIT side padding ★ */ transform: translateY(32px); opacity: 0; transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1); } .ms-slide.ms-active .ms-slide-inner { transform: translateY(0); opacity: 1; transition-delay: 0.18s; } /* ───────────────────────────────────────────────────────────── EYEBROW / BADGE (sub-heading ABOVE main headline) ★ EDIT ★ font-size — badge text size ★ EDIT ★ color — text colour ★ EDIT ★ border-color — pill border (rgba) ★ EDIT ★ margin-bottom — space below badge ───────────────────────────────────────────────────────────── */ .ms-eyebrow { display: inline-block; font-family: 'Roboto', sans-serif !important; font-size: 1.25rem; /* ★ EDIT eyebrow font size ★ */ font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #4eb3f8; /* ★ EDIT eyebrow text colour ★ */ border: 1px solid rgba(78, 179, 248, 0.40); /* ★ EDIT border ★ */ border-radius: 100px; padding: 0.5rem 1.4rem; margin-bottom: 1.6rem; /* ★ EDIT space below eyebrow ★ */ line-height: 1.5; } /* ───────────────────────────────────────────────────────────── MAIN HEADLINE ★ EDIT ★ font-size — clamp(min, fluid, max) ★ EDIT ★ font-weight ★ EDIT ★ color — white text ───────────────────────────────────────────────────────────── */ .ms-headline { font-family: 'Nunito Sans', sans-serif !important; font-size: clamp(4.75rem, 7.8vw, 6.75rem); /* ★ EDIT headline size ★ */ font-weight: 900; /* ★ EDIT headline weight ★ */ line-height: 1.08; color: #ffffff; /* ★ EDIT headline colour ★ */ margin-bottom: 0; letter-spacing: -0.01em; } /* Gradient highlight span inside headline */ .ms-headline .ms-hl { background: linear-gradient(90deg, #4eb3f8, /* ★ EDIT gradient start ★ */ #5bc4ff); /* ★ EDIT gradient end ★ */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ───────────────────────────────────────────────────────────── ACCENT DIVIDER BAR (between headline and sub-headline) ★ EDIT ★ width — bar length ★ EDIT ★ height — bar thickness Set display:none to hide it ───────────────────────────────────────────────────────────── */ .ms-divider { width: 52px; /* ★ EDIT divider width ★ */ height: 3px; /* ★ EDIT divider thickness ★ */ border-radius: 2px; background: linear-gradient(90deg, #1a7fd4, /* ★ EDIT divider colour start ★ */ #5bc4ff); /* ★ EDIT divider colour end ★ */ margin: 1.2rem auto 1.4rem !important; display: block !important; } /* ───────────────────────────────────────────────────────────── SUB-HEADLINE (below main headline) ★ EDIT ★ font-size — clamp(min, fluid, max) ★ EDIT ★ color — slightly muted white ───────────────────────────────────────────────────────────── */ .ms-subhead { font-family: 'Nunito Sans', sans-serif !important; font-size: clamp(3rem, 3.25vw, 2.50rem); /* ★ EDIT subhead size ★ */ font-weight: 700; color: #1a7fd4; /* ★ EDIT subhead colour ★ */ margin-bottom: 1.4rem; line-height: 1.5; } /* ───────────────────────────────────────────────────────────── BODY PARAGRAPH ★ EDIT ★ font-size — clamp(min, fluid, max) ★ EDIT ★ color — full white (high legibility) ★ EDIT ★ max-width — constrains line length ───────────────────────────────────────────────────────────── */ .ms-body, .ms-body1 { font-family: 'Roboto', sans-serif !important; font-size: clamp(1.75rem, 1.55vw, 1.75rem) !important; /* ★ EDIT body size ★ */ font-weight: 300 !important; line-height: 1.8 !important; color: #ffffff !important; /* ★ EDIT body colour ★ */ max-width: 740px; /* ★ EDIT body max-width ★ */ margin: 0 auto 2rem !important; display: block !important; text-align: center !important; padding: 0 0.5rem; } /* High-specificity override — beats Bootstrap p { color:#666 } */ #ms-hero-slider p.ms-body, #ms-hero-slider p.ms-body1 { color: #ffffff !important; font-size: clamp(2.25rem, 2.50vw, 1.95rem) !important; font-weight: 300 !important; text-align: center !important; margin: 0 auto 2rem !important; } /* ───────────────────────────────────────────────────────────── BUTTON GROUP ───────────────────────────────────────────────────────────── */ .ms-btn-group { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; font-size: 20px; } /* ───────────────────────────────────────────────────────────── BUTTONS ★ EDIT ★ padding — button size ★ EDIT ★ font-size — button label size ★ EDIT ★ border-radius ───────────────────────────────────────────────────────────── */ .ms-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45rem; padding: 1rem 2.4rem !important; /* ★ EDIT button padding ★ */ border-radius: 7px !important; /* ★ EDIT button radius ★ */ font-family: 'Roboto', sans-serif !important; font-size: 1.5rem !important; /* ★ EDIT button font size ★ */ font-weight: 500 !important; cursor: pointer !important; text-decoration: none !important; border: none !important; line-height: 1.2 !important; min-height: 48px !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; letter-spacing: 0.03em; white-space: nowrap; } .ms-btn:active { transform: scale(0.97) !important; } /* Light blue button */ #ms-hero-slider .ms-btn-blue { background: #1a7fd4 !important; /* ★ EDIT blue btn colour ★ */ color: #ffffff !important; font-size: 18px !important; /* ★ EDIT blue btn font size ★ */ box-shadow: 0 0 26px rgba(26, 127, 212, 0.4); } #ms-hero-slider .ms-btn-blue:hover { background: #4eb3f8 !important; color: #ffffff !important; box-shadow: 0 0 38px rgba(78, 179, 248, 0.55); transform: translateY(-2px); } /* White button */ #ms-hero-slider .ms-btn-white { background: #ffffff !important; /* ★ EDIT white btn colour ★ */ color: #071733 !important; box-shadow: 0 4px 18px rgba(255, 255, 255, 0.14); } #ms-hero-slider .ms-btn-white:hover { background: #e4f2ff !important; color: #071733 !important; box-shadow: 0 6px 26px rgba(255, 255, 255, 0.22); transform: translateY(-2px); } /* ───────────────────────────────────────────────────────────── ARROW NAV BUTTONS ★ EDIT ★ width/height — arrow circle size Set display:none if not needed (hidden automatically on 1 slide) ───────────────────────────────────────────────────────────── */ .ms-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 48px; /* ★ EDIT arrow size ★ */ height: 48px; /* ★ EDIT arrow size ★ */ display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 1.1rem; transition: background 0.2s, transform 0.2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); line-height: 1; outline: none; } .ms-arrow:hover { background: #1a7fd4; /* ★ EDIT arrow hover colour ★ */ transform: translateY(-50%) scale(1.08); } .ms-arrow-prev { left: 1.5rem; } .ms-arrow-next { right: 1.5rem; } /* ───────────────────────────────────────────────────────────── DOT INDICATORS ★ EDIT ★ width/height — dot size ★ EDIT ★ ms-dot-active width — active dot pill width ★ EDIT ★ bottom — vertical position ───────────────────────────────────────────────────────────── */ .ms-dots { position: absolute; bottom: 1.8rem; /* ★ EDIT dots vertical position ★ */ left: 50%; transform: translateX(-50%); display: flex; gap: 0.65rem; z-index: 10; } .ms-dot { width: 9px; /* ★ EDIT dot size ★ */ height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 0.3s, width 0.3s, border-radius 0.3s; border: none; padding: 0; outline: none; } .ms-dot.ms-dot-active { width: 28px; /* ★ EDIT active dot width ★ */ border-radius: 5px; background: #4eb3f8; /* ★ EDIT active dot colour ★ */ } /* ───────────────────────────────────────────────────────────── PROGRESS BAR (bottom edge) ★ EDIT ★ height — bar thickness ★ EDIT ★ background — gradient colours Set display:none to hide ───────────────────────────────────────────────────────────── */ .ms-progress { position: absolute; bottom: 0; left: 0; height: 3px; /* ★ EDIT progress bar height ★ */ background: linear-gradient(90deg, #1a7fd4, /* ★ EDIT progress colour start ★ */ #5bc4ff); /* ★ EDIT progress colour end ★ */ transition: width 0.85s cubic-bezier(0.77, 0, 0.175, 1); z-index: 10; } /* ───────────────────────────────────────────────────────────── SLIDE COUNTER (top right — "01 / 03") ★ EDIT ★ Set display:none to hide the counter ───────────────────────────────────────────────────────────── */ .ms-counter { position: absolute; top: 1.4rem; right: 2rem; font-family: 'Nunito Sans', sans-serif !important; font-size: 0.82rem; color: rgba(255, 255, 255, 0.40); letter-spacing: 0.12em; z-index: 10; } .ms-counter strong { color: #4eb3f8; font-weight: 700; } /* ───────────────────────────────────────────────────────────── SINGLE-SLIDE MODE When only 1 slide exists, JS adds .ms-single-slide to the section — this hides all navigation chrome. ───────────────────────────────────────────────────────────── */ #ms-hero-slider.ms-single-slide .ms-arrow, #ms-hero-slider.ms-single-slide .ms-dots, #ms-hero-slider.ms-single-slide .ms-progress, #ms-hero-slider.ms-single-slide .ms-counter { display: none !important; } /* ───────────────────────────────────────────────────────────── MOBILE TWEAKS ★ EDIT ★ height on mobile ★ EDIT ★ headline size on mobile ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { #ms-hero-slider { height: 88vh; /* ★ EDIT mobile height ★ */ min-height: 580px; } .ms-arrow { display: none; } .ms-headline { font-size: clamp(2.8rem, 9vw, 4rem); /* ★ EDIT mobile headline ★ */ } .ms-slide-inner { padding: 0 1.5rem; } .ms-body, .ms-body1 { font-size: 1rem !important; } } /* ───────────────────────────────────────────────────────────── COUNTER SECTION PARTICLES The .counter-section-particles class is added to the existing .counter-section element. The background-image and all original counter styles are preserved — particles sit on top of the image via a canvas absolutely positioned inside. ★ EDIT ★ Particle colour/brightness for this section is controlled in slider.js under COUNTER_PARTICLES. ───────────────────────────────────────────────────────────── */ .counter-section-particles { position: relative; overflow: hidden; } #cs-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }