/* DMW Driving School: shared header, page title band and footer (Dale, 2026-09-11). Linked last in on every page, so the header sits in exactly the same place on every page whatever that page's own older styles say. Desktop: logo on the left, menu centred on the page, twice the old gap between logo and Home. Narrower screens: logo centred above the centred menu. */ .master-sticky-header { position: sticky !important; top: 0 !important; z-index: 10000 !important; width: 100% !important; font-family: Arial, Helvetica, sans-serif !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; background: radial-gradient(ellipse 42% 170% at 100% 0%, rgba(214,46,46,0.42), transparent 70%), radial-gradient(ellipse 42% 170% at 0% 100%, rgba(46,158,79,0.38), transparent 70%), linear-gradient(135deg, #111111 0%, #1c1c1c 55%, #232323 100%) !important; } .master-sticky-header, .master-sticky-header * { box-sizing: border-box !important; } .top-info-banner { background: transparent !important; color: #ffffff !important; text-align: center !important; padding: 14px 20px 6px 20px !important; margin: 0 !important; width: 100% !important; border: 0 !important; font-size: 1.25rem !important; font-weight: 900 !important; letter-spacing: 1px !important; line-height: 1.2 !important; animation: bookingPulse 1.5s infinite ease-in-out !important; } .top-info-sub { background: transparent !important; color: #f1c40f !important; text-align: center !important; padding: 0 20px 12px 20px !important; margin: 0 !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.3px !important; line-height: 1.6 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } @keyframes bookingPulse { 0% { color: #ffffff; text-shadow: none; } 50% { color: #f1c40f; text-shadow: 0 0 15px #f1c40f; } 100% { color: #ffffff; text-shadow: none; } } .master-sticky-header header { background: transparent !important; margin: 0 !important; width: 100% !important; display: block !important; position: relative !important; z-index: 10010 !important; } .navbar-shell { max-width: 1190px !important; margin: 0 auto !important; padding: 12px 20px !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 15px !important; } .navbar-shell .brand-logo { grid-column: 1 !important; justify-self: start !important; margin: 0 !important; } .navbar-shell .brand-logo a { display: block !important; } .navbar-shell .brand-logo img { height: 60px !important; width: auto !important; display: block !important; margin: 0 !important; } .navbar-shell nav { grid-column: 2 !important; justify-self: center !important; margin: 0 !important; } .nav-links-list { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; list-style: none !important; gap: 16px 24px !important; margin: 0 !important; padding: 0 !important; } .nav-links-list li { margin: 0 !important; padding: 0 !important; } .nav-links-list li a { text-decoration: none !important; color: #f3f4f6 !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: normal !important; display: inline-flex !important; align-items: center !important; height: 30px !important; padding: 0 !important; transition: color 0.2s ease; } .nav-links-list li a:hover { color: #3498db !important; } .nav-links-list li a.active-page { color: #3498db !important; font-weight: bold !important; border-bottom: 2px solid #3498db !important; } /* Not enough room for logo and menu side by side: logo centred above the menu */ @media (max-width: 1150px) { .navbar-shell { grid-template-columns: 1fr !important; justify-items: center !important; gap: 8px !important; } .navbar-shell .brand-logo, .navbar-shell nav { grid-column: 1 !important; justify-self: center !important; } } @media (max-width: 750px) { .master-sticky-header { position: relative !important; box-shadow: none !important; } .top-info-banner { padding: 10px 15px 4px 15px !important; font-size: 1.05rem !important; } .top-info-sub { font-size: 0.85rem !important; padding: 0 15px 10px 15px !important; } .navbar-shell { padding: 8px 10px !important; } .navbar-shell .brand-logo img { height: 45px !important; } .nav-links-list { gap: 10px 14px !important; width: 100% !important; } .nav-links-list li a { font-size: 0.85rem !important; height: auto !important; } } /* Page title band, the same dark red and green look as the App Features page */ .page-hero { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, #111111 0%, #1c1c1c 55%, #232323 100%); color: #ffffff; text-align: center; padding: 46px 20px 42px; font-family: Arial, Helvetica, sans-serif; } .page-hero::before { content: ""; position: absolute; top: -60%; right: -10%; width: 55%; padding-bottom: 55%; border-radius: 50%; background: radial-gradient(circle, rgba(214,46,46,0.28), transparent 70%); } .page-hero::after { content: ""; position: absolute; bottom: -55%; left: -12%; width: 50%; padding-bottom: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(46,158,79,0.25), transparent 70%); } .page-hero > div { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } .page-hero h1 { margin: 0 0 10px 0; font-size: 2.1rem; font-weight: 800; line-height: 1.2; color: #ffffff; } .page-hero p { margin: 0 auto; max-width: 660px; font-size: 1.08rem; line-height: 1.55; color: #ffffff; opacity: 0.95; } .page-hero p.page-hero-updated { margin-top: 12px; font-size: 0.85rem; opacity: 0.7; } @media (max-width: 750px) { .page-hero { padding: 32px 16px 30px; } .page-hero h1 { font-size: 1.55rem; } .page-hero p { font-size: 1rem; } } /* Footer, the same on every page */ footer { background: #111827 !important; color: #9ca3af !important; text-align: center !important; padding: 30px 20px !important; margin-top: 50px !important; width: 100% !important; box-sizing: border-box !important; font-size: 0.9rem !important; font-family: Arial, Helvetica, sans-serif !important; clear: both; } footer p { margin: 0; } footer .footer-links { margin-top: 12px; font-size: 0.85rem; } footer a { color: #93c5fd !important; text-decoration: none !important; margin: 0 6px; } footer a:hover { text-decoration: underline !important; }