/* ============================================================ Fortress Real Property — brand styles on top of Bootstrap 5.3 Bootstrap covers: grid, navbar collapse, modal mechanics, responsive utilities. This file holds palette, typography, hero/why backgrounds, cards, footer, reveal animations. ============================================================ */ :root { --bg: #0b3e50; --bg-deep: #002c42; --bg-band: #0b3e50; --ink: #e6eef3; --ink-mute: #ecf1f4; --accent: #c9b88a; --accent-soft: rgba(201, 184, 138, 0.55); --rule: rgba(201, 184, 138, 0.6); --display: 'Copperplate Gothic', 'Copperplate Gothic Light', 'Copperplate', 'Cinzel', Georgia, serif; --body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* ---------- base ---------- */ html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; } /* keep body still when Bootstrap modal opens — scrollbar-gutter on already reserves the scrollbar's space, so Bootstrap's compensating padding-right just creates an unwanted gap */ body.modal-open { padding-right: 0 !important; } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } /* ============================================================ HERO ============================================================ */ .site-header { background: var(--bg); } .hero { position: relative; background: #061826 url('images/hero.jpg') center top / cover no-repeat; min-height: clamp(440px, 37vw, 711px); color: #fff; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #002c42 0%, rgba(0,44,66,0.92) 6%, rgba(0,44,66,0.55) 18%, transparent 32%, transparent 62%, rgba(0,44,66,0.6) 78%, rgba(0,44,66,0.95) 90%, var(--bg) 100%); pointer-events: none; } .hero__inner { position: relative; display: flex; flex-direction: column; min-height: clamp(440px, 37vw, 711px); padding-block: 28px 16px; } .brand { display: inline-flex; align-items: center; } .brand__logo { display: block; width: auto; height: 180px; } @media (max-width: 991.98px) { .brand__logo { height: clamp(72px, 8vw, 130px); } } /* narrow container holding the logo + nav */ .nav-bar { width: 100%; } .nav-inner { max-width: 1100px; margin-inline: auto; gap: 16px; } /* navbar links — override Bootstrap defaults to brand styling */ .navbar-dark .navbar-nav .nav-link { color: var(--accent); font-family: var(--display); font-weight: 300; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 14px; position: relative; transition: color .2s; white-space: nowrap; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #fff; } /* pipe separators between desktop nav items */ @media (min-width: 992px) { .navbar-nav .nav-item { display: flex; align-items: center; } .navbar-nav .nav-item + .nav-item::before { content: '|'; color: var(--accent-soft); font-weight: 300; line-height: 1; } } /* mobile toggler tint */ .navbar-toggler { border-color: var(--accent-soft); padding: 8px 12px; } .navbar-toggler:focus { box-shadow: 0 0 0 .15rem var(--accent-soft); } /* desktop: keep offcanvas behaving as inline navbar */ @media (min-width: 992px) { .mobile-menu .offcanvas-header { display: none; } } /* mobile: full-screen offcanvas menu */ @media (max-width: 991.98px) { /* full-screen offcanvas */ .mobile-menu.offcanvas { width: 100% !important; max-width: 100%; background: linear-gradient(180deg, #061826 0%, #002c42 100%); color: var(--ink); border: 0; } .mobile-menu .offcanvas-header { padding: 16px 20px; border-bottom: 1px solid rgba(201, 184, 138, 0.2); } .mobile-menu .offcanvas-header .brand__logo { height: 56px; } .mobile-menu .btn-close { background: none; width: 36px; height: 36px; opacity: 1; position: relative; } .mobile-menu .btn-close::before, .mobile-menu .btn-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 1.5px; background: var(--accent); transform-origin: center; } .mobile-menu .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); } .mobile-menu .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-menu .btn-close:focus { box-shadow: 0 0 0 .15rem var(--accent-soft); } .mobile-menu .offcanvas-body { padding: 0; } .mobile-menu .nav__menu { flex-direction: column; gap: 0; margin: 0; padding: 0; } .mobile-menu .nav-item { text-align: center; } .mobile-menu .nav-link { padding: 12px 16px !important; font-size: 15px !important; letter-spacing: 0.28em !important; } } /* hero heading */ .hero__heading { margin-top: auto; text-align: center; padding-top: 32px; padding-bottom: 8px; } .hero__heading h1 { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 3.4vw, 48px); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; margin: 0; white-space: nowrap; text-shadow: 0 2px 24px rgba(0,0,0,0.5); } @media (max-width: 520px) { .hero__heading h1 { white-space: normal; font-size: 24px; } } /* ============================================================ SECTIONS — shared ============================================================ */ .section { padding-block: clamp(56px, 8vw, 96px); } #about { padding-top: 30px; } /* mobile: extra horizontal breathing room for all sections below the header */ @media (max-width: 767.98px) { main .container { padding-left: 24px; padding-right: 24px; } } .section__head { margin-bottom: clamp(20px, 2.5vw, 32px); } .eyebrow { font-family: var(--body); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 20px; color: var(--accent); margin: 0 0 14px; } .rule { display: block; width: 90px; height: 1px; background: var(--rule); } .section__head.text-center .rule { margin-inline: auto; } /* ============================================================ ABOUT (split layout) ============================================================ */ .section--split { background: var(--bg); } .section--split p { margin: 0 0 1em; color: var(--ink-mute); font-size: 17px; line-height: 1.85; font-weight: 300; } .section--split p:last-child { margin-bottom: 0; } .split__media-img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); } /* ============================================================ WHO WE ARE — full-width with bg image + overlay ============================================================ */ .section--why { position: relative; background: #061826 url('images/why-photo.jpg') center / cover no-repeat; isolation: isolate; } .section--why::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,12,0.82), rgba(4,8,12,0.75)); z-index: -1; } .why__copy { max-width: 680px; margin-inline: auto; text-align: left; } .why__copy p { margin: 0 0 1.2em; color: var(--ink-mute); font-size: 17px; line-height: 1.85; font-weight: 300; } .why__copy p:last-child { margin-bottom: 0; } /* ============================================================ TEAM ============================================================ */ .section--team { background: var(--bg-band); padding-block: clamp(64px, 9vw, 110px); } .section--team .container { max-width: 980px; } .team-card { display: block; width: 100%; text-align: center; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .team-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .team-card__photo { display: block; aspect-ratio: 298 / 312; overflow: hidden; margin-bottom: 18px; background: #0d2a3c; position: relative; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s ease; } .team-card:hover .team-card__photo img, .team-card:focus-visible .team-card__photo img { transform: scale(1.05); filter: brightness(1.05); } .team-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,36,52,0) 60%, rgba(201,184,138,0.18)); opacity: 0; transition: opacity .3s ease; } .team-card:hover .team-card__photo::after, .team-card:focus-visible .team-card__photo::after { opacity: 1; } .team-card__name { display: block; font-family: var(--body); font-weight: 700; letter-spacing: 0.04em; font-size: 16px; color: var(--accent); margin: 0 0 6px; } .team-card__role { display: block; font-family: var(--body); font-weight: 300; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); margin: 0; } /* ============================================================ PORTFOLIO ============================================================ */ .section--portfolio { background: #000; } .portfolio__subhead { font-family: var(--body); font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; text-align: center; font-size: clamp(13px, 1.2vw, 16px); color: var(--ink); margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 2.5vw, 32px); } .property-card { display: block; width: 100%; text-align: center; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .property-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .property-card__photo { display: block; aspect-ratio: 347 / 231; overflow: hidden; background: #0d2a3c; margin-bottom: 14px; position: relative; } .property-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .4s ease; } .property-card:hover .property-card__photo img, .property-card:focus-visible .property-card__photo img { transform: scale(1.06); filter: brightness(1.05); } .property-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,24,38,0) 50%, rgba(6,24,38,0.55) 100%), radial-gradient(circle at 50% 60%, rgba(201,184,138,0.18), transparent 65%); opacity: 0; transition: opacity .3s ease; } .property-card:hover .property-card__photo::after, .property-card:focus-visible .property-card__photo::after { opacity: 1; } .property-card__name { display: block; font-family: var(--body); font-weight: 600; letter-spacing: 0.16em; font-size: 13px; margin: 0 0 6px; text-transform: uppercase; color: var(--ink); } .property-card__type { display: block; font-family: var(--body); font-weight: 300; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin: 0; } /* ============================================================ CONTACT + MAP ============================================================ */ .section--contact { background: var(--bg-band); padding-bottom: 0; } .contact-address { text-align: center; font-style: normal; color: var(--accent); letter-spacing: 0.05em; line-height: 1.9; margin: 0 0 clamp(28px, 4vw, 48px); font-weight: 300; } .contact-map { position: relative; width: 100%; height: clamp(280px, 38vw, 440px); background: #061826; margin-top: clamp(8px, 2vw, 16px); } .contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.2) brightness(0.92); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: linear-gradient(180deg, #093b4e 0%, #002c42 100%); color: var(--ink-mute); padding-block: clamp(40px, 6vw, 72px); } .site-footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .brand--footer .brand__logo { height: clamp(72px, 8vw, 130px); } .site-footer__right { display: flex; flex-direction: column; align-items: center; gap: 14px; } .site-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 4vw, 48px); font-size: 14px; letter-spacing: 0.06em; color: #b1a383; } .site-footer__contact li { display: inline-flex; align-items: center; gap: 5px; } .site-footer__contact a { font-weight: 700; color: var(--accent); } .site-footer__contact a:hover { color: #fff; } .icon { width: 20px; height: 20px; display: inline-flex; color: var(--accent); } .icon svg { width: 100%; height: 100%; } .site-footer__copy { font-size: 12px; letter-spacing: 0.05em; color: #b1a383; margin: 0; } @media (min-width: 760px) { .site-footer__inner { flex-direction: row; justify-content: center; align-items: center; text-align: left; gap: clamp(40px, 7vw, 110px); } .site-footer__right { align-items: flex-start; gap: 14px; } } /* ============================================================ SCROLL-TO-TOP BUTTON ============================================================ */ .scroll-top { position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 1030; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #061826; border: 1px solid #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.45); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, background-color .2s, color .2s, visibility 0s linear .25s; } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s, transform .25s, background-color .2s, color .2s; } .scroll-top svg { width: 20px; height: 20px; display: block; } .scroll-top:hover, .scroll-top:focus-visible { background: var(--accent); color: #061826; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.55); outline: none; } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0s), transform .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0s); will-change: opacity, transform; } .reveal-left { transform: translate3d(-40px, 0, 0); } .reveal-right { transform: translate3d(40px, 0, 0); } .reveal-up { transform: translate3d(0, 32px, 0); } .reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ============================================================ BOOTSTRAP MODAL — brand skin ============================================================ */ .details-modal .modal-content { background: #0d2a3c; color: var(--ink); border: 1px solid rgba(201, 184, 138, 0.35); border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,0.55); overflow: hidden; } .details-modal .btn-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 22px; height: 22px; background: var(--accent); background-image: none; border: 1px solid #fff; border-radius: 999px; opacity: 1; box-shadow: 0 1px 6px rgba(0,0,0,0.4); transition: background-color .2s, transform .2s, box-shadow .2s; } .details-modal .btn-close::before, .details-modal .btn-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: #061826; border-radius: 2px; } .details-modal .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); } .details-modal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .details-modal .btn-close:hover, .details-modal .btn-close:focus { background: #fff; transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,0.6); } .details-modal .btn-close:hover::before, .details-modal .btn-close:hover::after, .details-modal .btn-close:focus::before, .details-modal .btn-close:focus::after { background: var(--accent); } .details-modal__media { background: #061a26; min-height: 240px; } .details-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .details-modal__media { min-height: 420px; } } .details-modal__body { padding: clamp(24px, 4vw, 44px); } .details-modal__title { font-family: var(--body); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: 0.04em; margin: 0 0 6px; color: #fff; } .details-modal__subtitle { font-family: var(--body); font-weight: 400; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; } .details-modal__subtitle::after { content: ''; display: block; width: 56px; height: 1px; background: var(--rule); margin-top: 14px; } .details-modal__text p { margin: 0 0 1em; color: var(--ink-mute); font-size: 15px; line-height: 1.85; font-weight: 300; } .details-modal__text p:last-child { margin-bottom: 0; }