/*================================================== BOOKING CTA: 1. Section foundation ==================================================*/ .booking-cta { position: relative; padding-block: clamp(4rem, 8vw, 8rem); } .booking-cta .section-body { width: 100%; } /*================================================== CTA STAGE: 2. The immersive stage This is the actual canvas. ==================================================*/ .booking-cta__stage { position: relative; min-height: clamp(620px, 75vh, 820px); overflow: hidden; border-radius: clamp(24px, 3vw, 40px); isolation: isolate; background: var(--ms-green); } /*================================================== BACKGROUND IMAGE: 3. Photography layer ==================================================*/ .booking-cta__media { position: absolute; inset: 0; z-index: -3; overflow: hidden /*position: absolute; inset: 0; z-index: 0; overflow: hidden;*/ } .booking-cta__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transform: scale(1.01); transition: transform 12s ease; } /*The tiny scale(1.01) prevents any microscopic edge exposure while keeping the photograph natural.*/ /*4. Cinematic movement. Very slow. Not a typical website zoom.*/ .booking-cta__stage:hover .booking-cta__media img { transform: scale(1.045); } /*================================================== ATMOSPHERE: 5. Atmospheric overlay. This is one of the most important pieces. We don't want a simple black overlay. We want directional light. ==================================================*/ .booking-cta__overlay::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(15, 25, 13, .55) 0%, rgba(15, 25, 13, .18) 42%, transparent 70% ); pointer-events: none; } .booking-cta__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient( 90deg, rgba(19, 31, 17, .78) 0%, rgba(19, 31, 17, .52) 42%, rgba(19, 31, 17, .18) 75%, rgba(19, 31, 17, .08) 100% ); } /*This means the photograph remains visible while the left side becomes naturally darker for the typography.*/ /*6. Add a subtle vertical atmosphere. I would layer another gradient over it.*/ .booking-cta__overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, .12) 0%, transparent 35%, rgba(0, 0, 0, .28) 100% ); } /*This gives the bottom of the photograph slightly more depth.*/ /*================================================== CONTENT: 7. Content positioning. This is where the luxury feeling starts. ==================================================*/ .booking-cta__stage > .booking-cta__content { position: relative; z-index: 2; min-height: clamp(620px, 75vh, 820px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 720px; padding: clamp(3rem, 7vw, 7rem); } /*Notice: not centered. I deliberately want it slightly left. It gives the photograph room to breathe.*/ /*8. Eyebrow*/ .booking-cta__content > .booking-cta__eyebrow { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ms-white); } /*Now add a tiny line.*/ .booking-cta__content > .booking-cta__eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--ms-orange); } /*================================================== TITLE: 9. Main title. This is the emotional centre. ==================================================*/ .booking-cta__content > .booking-cta__title { margin: 0; max-width: 9ch; font-family: var(--font-heading); font-size: clamp(3.2rem, 6vw, 6.2rem); line-height: .98; font-weight: 400; letter-spacing: -.035em; color: var(--ms-white); } /*The title should feel large enough to stop the scroll. But not like a giant advertising banner.*/ /*10. Supporting text*/ .booking-cta__text { max-width: 500px; margin: 1.8rem 0 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.85; color: rgba(255, 255, 255, .88); } /*================================================== ACTIONS: 11. Actions ==================================================*/ .booking-cta__actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; } /*12. Primary CTA: This is the one actual button on the section.*/ .booking-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 56px; padding: 0 1.7rem; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 700; letter-spacing: .02em; transition: background-color .35s ease, color .35s ease, transform .35s ease, border-color .35s ease; } .booking-cta__button--primary { background: var(--ms-white); color: var(--ms-green); border: 1px solid var(--ms-white); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } /*Hover:*/ .booking-cta__button--primary:hover { background: var(--ms-orange); color: var(--ms-white); transform: translateY(-3px); border-color: var(--ms-orange); } /*13. Arrow movement: The arrow should actually respond.*/ .booking-cta__button span { display: inline-block; transition: transform .35s ease; } .booking-cta__button:hover span { transform: translateX(5px); } /*Small detail. Big difference. 14. Secondary action This should not look like another button.*/ .booking-cta__link { position: relative; display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--ms-white); text-shadow: 0 1px 8px rgba(0, 0, 0, .25); } /*Animated underline:*/ .booking-cta__link::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; transform-origin: right; transform: scaleX(.45); transition: transform .4s ease; background: var(--ms-white);/* background: rgba(255,255,255,.65);*/ opacity: .75; } .booking-cta__link:hover::after { transform-origin: left; transform: scaleX(1); } /*15. Subtle stage frame I would add a very quiet inner frame.*/ .booking-cta__stage::after { content: ""; position: absolute; inset: 18px; z-index: 3; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; pointer-events: none; } /*This is optional, but I think it works beautifully with the luxury safari aesthetic. It's almost invisible.*/ /*16. Desktop composition On larger screens, I want the content to sit around 10–12% from the left.*/ @media (min-width: 1200px) { .booking-cta__content { padding-left: clamp(4rem, 9vw, 9rem); } } /*This gives the photograph enough negative space.*/ /*17. Tablet*/ @media (max-width: 1024px) { .booking-cta__stage { min-height: 620px; } .booking-cta__content { max-width: 650px; padding: 4rem; } .booking-cta__title { font-size: clamp(3rem, 7vw, 4.8rem); } } /*18. Mobile This is important. We do not simply shrink the desktop composition. Mobile gets its own composition.*/ @media (max-width: 768px) { .booking-cta { padding-block: 3.5rem; } .booking-cta__stage { min-height: 680px; border-radius: 22px; } .booking-cta__content { min-height: 680px; justify-content: flex-end; padding: 2.5rem 1.5rem 3rem; } .booking-cta__title { max-width: 8ch; font-size: clamp(2.8rem, 13vw, 4rem); line-height: 1; } .booking-cta__text { max-width: 36ch; font-size: .95rem; line-height: 1.75; } .booking-cta__actions { width: 100%; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 2rem; } .booking-cta__button { width: 100%; } .booking-cta__link { margin-left: .25rem; } .booking-cta__stage::after { inset: 10px; border-radius: 16px; } }