/* ============================================================ Waritoma Nigeria — shared stylesheet Themes are switched per-page by adding a class to : .theme-health / .theme-realestate (master pages use both) ============================================================ */ :root { /* Brand neutrals */ --navy: #0f2a43; --navy-700: #14375a; --ink: #16202c; --slate: #50627a; --muted: #6b7c93; --line: #e3e9f0; --bg: #ffffff; --bg-soft: #f5f8fb; --bg-tint: #eef4f9; --white: #ffffff; /* Division accents */ --health: #0e7c86; --health-600: #0b6770; --health-tint: #e8f6f7; --green: #10b981; --estate: #1b4332; --estate-600: #143527; --estate-tint: #eef3ef; --gold: #b8893b; --gold-600: #9c7330; --gold-tint: #f8f1e3; /* Active accent — overridden per theme */ --accent: var(--navy); --accent-600: var(--navy-700); --accent-tint: var(--bg-tint); --on-accent: #ffffff; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px -12px rgba(15, 42, 67, 0.18); --shadow-lg: 0 30px 60px -24px rgba(15, 42, 67, 0.28); --container: 1140px; --header-h: 76px; --font-head: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } body.theme-health { --accent: var(--health); --accent-600: var(--health-600); --accent-tint: var(--health-tint); } body.theme-realestate { --accent: var(--estate); --accent-600: var(--estate-600); --accent-tint: var(--estate-tint); --gold-active: var(--gold); } /* -------- reset -------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 17px; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: 1.25rem; } p { color: var(--slate); } ul { padding-left: 0; } /* -------- layout -------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(56px, 8vw, 104px) 0; } .section--soft { background: var(--bg-soft); } .section--tint { background: var(--accent-tint); } .center { text-align: center; } .eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: inline-block; } .lead { font-size: 1.15rem; color: var(--slate); max-width: 60ch; } .section-head { max-width: 64ch; margin-bottom: 48px; } .section-head.center { margin-inline: auto; } /* -------- buttons -------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn svg { width: 19px; height: 19px; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); } .btn--primary:hover { background: var(--accent-600); } .btn--wa { background: #25d366; color: #06351b; box-shadow: 0 10px 24px -10px rgba(37,211,102,.7); } .btn--wa:hover { background: #1fc35d; } .btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); } .btn--light:hover { background: rgba(255,255,255,.24); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* -------- header -------- */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 38px; height: 38px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.18rem; color: var(--navy); letter-spacing: -.01em; } .brand__sub { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 3px; } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-family: var(--font-head); font-weight: 500; font-size: .98rem; color: var(--navy); transition: color .15s; } .nav a:hover, .nav a.is-active { color: var(--accent); } .nav__cta { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: .25s; } .nav-toggle span + span { margin-top: 6px; } /* -------- hero -------- */ .hero { position: relative; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--accent-600) 100%); } .hero--master { background: linear-gradient(140deg, #0b2238 0%, #0e7c86 55%, #1b4332 100%); } .hero__inner { position: relative; z-index: 2; padding: clamp(64px, 10vw, 128px) 0; max-width: 760px; } .hero h1 { color: #fff; } .hero p { color: rgba(255,255,255,.86); font-size: 1.18rem; margin-top: 20px; max-width: 56ch; } .hero .btn-row { margin-top: 36px; } .hero__deco { position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none; } .hero__deco::before, .hero__deco::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 70%); } .hero__deco::before { width: 520px; height: 520px; right: -120px; top: -160px; } .hero__deco::after { width: 380px; height: 380px; left: -120px; bottom: -180px; } .hero__stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 44px; } .hero__stat .num { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: #fff; } .hero__stat .lbl { font-size: .9rem; color: rgba(255,255,255,.75); } /* -------- division split (master) -------- */ .divisions { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .division-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 44px; min-height: 380px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; } .division-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .division-card--health { background: linear-gradient(160deg, #0e7c86 0%, #0b3a4a 100%); } .division-card--estate { background: linear-gradient(160deg, #2c6347 0%, #14271c 100%); } .division-card__tag { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .division-card h3 { color: #fff; font-size: 1.9rem; margin: 10px 0 12px; } .division-card p { color: rgba(255,255,255,.85); margin-bottom: 22px; } .division-card .arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; } .division-card .arrow svg { width: 18px; height: 18px; transition: transform .2s; } .division-card:hover .arrow svg { transform: translateX(5px); } .division-card__icon { position: absolute; top: 36px; right: 36px; width: 56px; height: 56px; opacity: .9; } /* -------- feature grid -------- */ .grid { display: grid; gap: 24px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .card__icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 18px; } .card__icon svg { width: 26px; height: 26px; } .card h3 { margin-bottom: 8px; } .card p { font-size: .98rem; } /* checklist */ .checks { display: grid; gap: 14px; } .checks li { list-style: none; display: flex; gap: 12px; align-items: flex-start; color: var(--slate); } .checks li svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; } /* split feature */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split__media { border-radius: var(--radius); min-height: 360px; box-shadow: var(--shadow); background: linear-gradient(150deg, var(--accent) 0%, var(--accent-600) 100%); position: relative; overflow: hidden; display: grid; place-items: center; } .split__media svg { width: 40%; opacity: .9; color: rgba(255,255,255,.9); } /* stat band */ .statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; } .statband .num { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; color: var(--accent); } .statband .lbl { color: var(--muted); font-size: .95rem; } /* listing cards (real estate) */ .listing { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .2s, box-shadow .2s; } .listing:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .listing__img { height: 200px; background: linear-gradient(150deg, #2c6347, #14271c); position: relative; display: grid; place-items: center; } .listing__img svg { width: 70px; color: rgba(255,255,255,.55); } .listing__badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: #2a1e08; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .listing__body { padding: 22px; } .listing__price { font-family: var(--font-head); font-weight: 800; color: var(--estate); font-size: 1.3rem; } .listing__meta { display: flex; gap: 18px; color: var(--muted); font-size: .9rem; margin-top: 12px; } /* cta band */ .cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--accent-600) 100%); color: #fff; border-radius: var(--radius); padding: clamp(40px, 6vw, 64px); text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.85); margin: 14px auto 28px; max-width: 52ch; } .cta-band .btn-row { justify-content: center; } /* contact */ .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .contact-list { display: grid; gap: 22px; margin-top: 8px; } .contact-item { display: flex; gap: 16px; align-items: flex-start; } .contact-item__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; flex: none; } .contact-item__ic svg { width: 22px; height: 22px; } .contact-item .k { font-family: var(--font-head); font-weight: 700; color: var(--navy); } .contact-item .v { color: var(--slate); } .form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .field { margin-bottom: 18px; } .field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .field textarea { min-height: 120px; resize: vertical; } .form__note { font-size: .85rem; color: var(--muted); margin-top: 12px; text-align: center; } /* -------- footer -------- */ .site-footer { background: var(--navy); color: rgba(255,255,255,.72); padding: 64px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; } .site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; } .site-footer a { color: rgba(255,255,255,.72); transition: color .15s; } .site-footer a:hover { color: #fff; } .footer-links { display: grid; gap: 11px; list-style: none; } .footer-brand .brand__name { color: #fff; } .footer-brand p { color: rgba(255,255,255,.6); margin-top: 16px; font-size: .95rem; max-width: 34ch; } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; } .footer-social a:hover { background: var(--health); } .footer-social svg { width: 18px; height: 18px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .88rem; color: rgba(255,255,255,.5); } /* -------- floating whatsapp -------- */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .2s; animation: wa-pop .4s ease both; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 32px; height: 32px; color: #fff; } @keyframes wa-pop { from { transform: scale(0); } to { transform: scale(1); } } /* -------- scroll reveal -------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } /* -------- responsive -------- */ @media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 860px) { .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 18px 24px 26px; gap: 4px; transform: translateY(-130%); transition: transform .3s ease; box-shadow: var(--shadow); } .nav.is-open { transform: none; } .nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); } .nav__cta { margin-top: 14px; flex-direction: column; align-items: stretch; } .nav__cta .btn { justify-content: center; } .nav-toggle { display: block; } .divisions { grid-template-columns: 1fr; } .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr; gap: 32px; } .split__media { min-height: 240px; order: -1; } .statband { grid-template-columns: 1fr 1fr; gap: 32px 16px; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 560px) { body { font-size: 16px; } .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .division-card { padding: 32px; min-height: 320px; } .hero__stats { gap: 24px; } }