/* ========================================================================== Maintenance Page — Shared Stylesheet 6 Brand Variants: Homebox, Homecentre, Centrepoint, Babyshop, Splash, Max ========================================================================== */ /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- Brand Variables Set on -------------------------------------------------------------------------- */ .brand-homebox { --brand-bg: #fbf2f2; --brand-font: 'Lato', sans-serif; } .brand-homecentre { --brand-bg: #EEF5F6; --brand-font: 'Inter', sans-serif; } .brand-centrepoint { --brand-bg: #f2f4fb; /* TODO: confirm from Figma brand mode */ --brand-font: 'Nunito Sans', sans-serif; } .brand-babyshop { --brand-bg: #fdf2fb; /* TODO: confirm from Figma brand mode */ --brand-font: 'Nunito Sans', sans-serif; } .brand-splash { --brand-bg: #E8EAEF; --brand-font: 'Inter', sans-serif; } .brand-max { --brand-bg: #FCF9F6; --brand-font: 'Figtree', sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html, body { height: 100%; } body { background-color: var(--brand-bg, #f5f5f5); font-family: var(--brand-font, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------------------------------------------------- Page Layout -------------------------------------------------------------------------- */ .page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } /* -------------------------------------------------------------------------- Logo -------------------------------------------------------------------------- */ .logo-wrap { padding-top: 64px; flex-shrink: 0; } .logo { max-width: 300px; width: auto; height: auto; display: block; } /* -------------------------------------------------------------------------- Content -------------------------------------------------------------------------- */ .content { margin-top: 48px; flex-shrink: 0; text-align: center; max-width: 472px; padding: 0 32px; } .content h1 { font-size: 40px; font-weight: 700; line-height: 1.2; color: #000000; margin-bottom: 6px; } .content p { font-size: 16px; font-weight: 400; line-height: 1.5; color: #000000; } /* -------------------------------------------------------------------------- Mobile line break — hidden on desktop, shown on mobile Usage:
in subtitle text -------------------------------------------------------------------------- */ .mobile-break { display: none; } /* -------------------------------------------------------------------------- Hero Image -------------------------------------------------------------------------- */ .hero { margin-top: auto; flex-shrink: 0; padding-top: 32px; display: flex; justify-content: center; width: 100%; } .hero img { width: clamp(500px, 42vw, 700px); display: block; } /* -------------------------------------------------------------------------- Below 1920px -------------------------------------------------------------------------- */ @media (max-width: 1919px) { .logo-wrap { padding-top: 40px; } .content { margin-top: 24px; } } /* -------------------------------------------------------------------------- Arabic / RTL Override font for all RTL pages (Arabic script needs Cairo) -------------------------------------------------------------------------- */ [dir="rtl"] body { font-family: 'Cairo', sans-serif; } /* -------------------------------------------------------------------------- Responsive — Mobile / Tablet (< 768px) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .logo-wrap { padding-top: 32px; } .logo { max-width: 240px; } .content { margin-top: 20px; max-width: 335px; padding: 0 20px; } .content h1 { font-size: 28px; } .content p { font-size: 16px; } .mobile-break { display: inline; } .hero img { width: 512px; /* intentional: slightly overflows narrow screens, clipped by overflow-x: hidden on .page */ } }