/* ===================================================================== P3 Global Realty Advisors - site.css (human readable) --------------------------------------------------------------------- * One file, organized by sections so non-developers can edit easily. * Design tokens first; then Base/Helpers; then Layout; then Components. * No !important unless absolutely necessary. * Mobile-first with a single breakpoint at 860px (matches original). ===================================================================== */ /* ----------------------------- 0) Design tokens (colors, spacing, fonts) ----------------------------- */ :root{ --bg: #1A1A1A; /* page background */ --surface: #151515; /* cards, panels */ --ink: #E5E5E5; /* body text on dark */ --muted: #C9C9C9; /* muted text */ --brand: #C7A774; /* gold accent */ --border: #2a2a2a; --shadow: 0 6px 24px rgba(0,0,0,.12); --radius: 14px; --container: 1200px; --logo-height: clamp(68px, 9vw, 88px); --header-height: calc(var(--logo-height) + 32px); --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ff-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif; } /* ----------------------------- 1) Base & resets ----------------------------- */ *{ box-sizing: border-box; } html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); } img,svg,video{ display:block; max-width:100%; height:auto; } body{ font-family: var(--ff-sans); line-height: 1.6; } h1,h2{ font-family: var(--ff-serif); letter-spacing:.01em; line-height:1.2; margin:0 0 .5em; } h3,h4,h5,h6{ margin:0 0 .5em; } p{ margin:0 0 1em; color:var(--ink); } a{ color: var(--brand); text-decoration: none; } a:hover{ text-decoration: underline; } /* Accessibile focus */ :focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* ----------------------------- 2) Helpers ----------------------------- */ .container{ width:min(var(--container), 92vw); margin-inline:auto; padding: 24px; } .rule{ height:2px; background: var(--brand); border-radius: 2px; margin: 10px 0; } .rule.align-end{ margin-left:auto; } .eyebrow{ text-transform: uppercase; letter-spacing:.12em; font-weight:700; color:var(--brand); font-size:.9rem; } .brand-filter-label{ display:block; margin:12px 0 6px; } .brand-filter-select{ width:100%; max-width:420px; padding:10px; border:1px solid var(--brand); border-radius:10px; background:#111; color:#fff; margin:0 0 16px; } .mt-16{ margin-top:16px; } .btn{ display:inline-block; border: 1px solid var(--brand); background: transparent; color: var(--ink); border-radius: 999px; padding: 10px 14px; font-weight: 700; transition: transform .06s ease, background .15s ease, border-color .15s ease; } .btn:hover{ background: rgba(199,167,116,.1); } .btn.primary{ background: var(--brand); color: #111; border-color: var(--brand); } .btn.ghost{ background: transparent; color: var(--brand); } .muted{ color: var(--muted); } /* ----------------------------- 3) Layout - Header & Nav ----------------------------- */ header.navbar{ position: sticky; top:0; z-index: 100; background: transparent; background-color: transparent !important; border-bottom: 0; box-shadow: none; } /* On pages that should have the header overlay the hero (e.g., homepage), add class `header-overlay` on to absolutely position the header */ .header-overlay header.navbar{ position: fixed; top:0; left:0; right:0; width:100%; z-index:100; background: transparent; background-color: transparent !important; border:0; box-shadow:none; pointer-events:auto; } .header-overlay .bar.container{ margin-inline:auto; } .header-overlay main{ position:relative; z-index:1; padding-top: var(--header-height); } .header-overlay .hero, .header-overlay .portal-hero{ margin-top: calc(-1 * var(--header-height)); } .bar{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: transparent; background-color: transparent !important; box-shadow: none; } .bar.container{ position:relative; } .logo-link img{ height: var(--logo-height); width: auto; } /* Primary nav (always-drawer) */ #site-nav{ position:absolute; left:12px; right:12px; top:100%; display:flex; flex-direction:column; gap:0; background:transparent; border:1px solid transparent; box-shadow:none; border-radius:12px; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .25s ease, opacity .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; z-index:60; } #site-nav.active{ max-height:70vh; opacity:1; pointer-events:auto; background:#141414; border-color: var(--border); box-shadow: var(--shadow); } #site-nav a{ display:block; width:100%; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); font-weight:600; color: var(--ink); } #site-nav a:last-child{ border-bottom:0; } #site-nav .has-sub{ position:relative; } #site-nav .menu-parent{ cursor:pointer; display:block; } #site-nav .submenu{ position:static; display:none; background:transparent; border:0; padding:0; box-shadow:none; } #site-nav .submenu a{ display:block; padding:10px 14px; border-radius:8px; white-space:nowrap; } #site-nav .submenu a:hover{ background:#1f1f1f; } #site-nav .has-sub.open .submenu{ display:flex; } /* Hero "Partner With Us" dropdown */ .menu-portal.hero-portal{ position: relative; display: inline-block; margin: 12px 0 6px; } .menu-portal .submenu{ display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #141414; /* panel background */ border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; min-width: 260px; max-width: 92vw; z-index: 60; } .menu-portal.open .submenu{ display: block; } .menu-portal .submenu a{ display: block; color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; white-space: nowrap; } .menu-portal .submenu a:hover{ background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } /* Mobile nav */ .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ink); padding:6px; line-height:0; border-radius:999px; } /* Body scroll lock and overlay when nav is open */ body.nav-open{ overflow:hidden; } .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:59; } body.nav-open .nav-overlay{ display:block; } /* ----------------------------- 4) Hero ----------------------------- */ .hero{ position:relative; overflow:hidden; min-height: 70vh; display:grid; place-items:center; text-align:center; background:#0b0b0b; } .hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.0375), rgba(0,0,0,.3) 55%), linear-gradient(180deg, rgba(0,0,0,.285), rgba(0,0,0,.4125)); z-index:1; pointer-events:none; } .hero .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.82); z-index:0; } .hero .container{ position:relative; z-index:2; padding: 10vh 0 14vh; } .hero h1, .hero h2{ color:#fff; text-shadow:0 4px 12px rgba(0,0,0,.65), 0 0 20px rgba(0,0,0,.45); margin:0 0 8px; } .hero p{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); margin:0; } .hero.hero-fallback{ background: center/cover no-repeat var(--hero-fallback, url('/assets/img/Hero_Backup_image.png')); } .hero.hero-fallback .hero-bg{ display:none; } .about-hero .hero-media, .services-hero .hero-media, .brands-hero .hero-media, .transactions-hero .hero-media{ aspect-ratio:16/9; min-height:320px; } @media (max-width: 600px){ .about-hero .hero-media, .services-hero .hero-media, .brands-hero .hero-media, .transactions-hero .hero-media{ min-height:220px; } } @media (prefers-reduced-motion: reduce){ /* Respect motion preference: keep poster visible, do not hide element */ .hero .hero-bg{ display:block; } } /* ----------------------------- 5) Sections & grids ----------------------------- */ section{ padding: 40px 0; } @media (min-width: 860px){ section{ padding: 60px 0; } } .split{ display:grid; grid-template-columns: 1fr; gap: 32px; align-items:start; } @media (min-width: 960px){ .split{ grid-template-columns: 1.1fr .9fr; } } .stack-images{ position:relative; } .stack-images img:first-child{ border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .stack-images img.stack{ position:absolute; right:-18px; bottom:-18px; width:44%; border:6px solid #fff; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); } .stack-images img.stack.stack-bottom-right{ right:-18px; left:auto; bottom:-120px; top:auto; width:52%; } .stack-images img.stack.stack-bottom-left{ right:auto; left:-18px; bottom:-180px; top:auto; width:52%; } @media (max-width: 600px){ .stack-images img.stack.stack-bottom-right{ bottom:-60px; } .stack-images img.stack.stack-bottom-left{ bottom:-60px; } } .value-list{ list-style: disc; margin: 16px 0 0; padding-left: 22px; display:flex; flex-direction:column; gap:12px; font-weight:600; } .value-list .value-title{ font-weight:700; display:block; } .value-list .value-subtext{ display:block; font-size:.95rem; color:var(--muted); margin-top:4px; } .value-list li{ margin:0; line-height:1.4; } .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; } .card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } .services-grid .card img{ display:block; width:100%; height:220px; object-fit:cover; } .services-grid .card img[src*="Copa_Cabana_2"]{ object-position: 25% center; } .card .pad{ padding:18px; } .card h3{ margin:8px 0 6px; } @media (max-width: 960px){ .services-grid{ grid-template-columns: 1fr; } } /* Partners */ .partners{ background:#121212; } /* ----------------------------- Legacy Overrides Guard (ensure drawer works on all pages) These rules override any older inline page styles that hid the nav. ----------------------------- */ header.navbar #site-nav{ display:flex !important; flex-direction:column; } header.navbar #site-nav:not(.active){ max-height:0; opacity:0; pointer-events:none; } .menu-toggle{ display:inline-flex !important; } /* ----------------------------- 6) Portal Pages (Contact forms) ----------------------------- */ .portal-hero{ position:relative; min-height: 28vh; background: #111 center/cover no-repeat; } .portal-hero .hero-inner{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.0)); } .portal-hero.portal-hero--franchisee{ background-image:url('/assets/img/franchise%20contact%20page%20photo.webp'); } .portal-hero.portal-hero--landlord{ background-image:url('/assets/img/edmonton_air_port_Outlet.webp'); background-position:center 85%; } .portal-card{ max-width: 860px; margin: 0 auto; } .portal-card .form-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 22px; } form.spacious{ display:grid; gap:14px; } form.spacious .grid-2{ display:grid; gap:14px; grid-template-columns: 1fr; } @media (min-width: 760px){ form.spacious .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .landlord-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-bottom: 14px; } .landlord-grid .field{ display:flex; flex-direction:column; gap:6px; font-weight:600; } .landlord-grid .field small{ display:block; font-weight:400; color:var(--muted); font-size:0.8rem; } label{ font-weight:600; } label.required::after{ content:' *'; color: var(--brand); font-weight:700; } input, select, textarea{ width:100%; background:#0f0f0f; color:var(--ink); border:1px solid var(--border); border-radius:10px; padding:10px 12px; } textarea{ min-height:120px; resize:vertical; } input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(199,167,116,.18); } .help{ color: var(--muted); font-size: .9rem; margin-top:-6px; } .upload-error{ color:#ff9c9c; font-size:.9rem; margin-top:4px; display:none; } .client-portal-hero{ background: var(--brand, #156fbd) center/cover no-repeat; } .client-portal-hero .hero-inner{ background: linear-gradient(180deg, rgba(4,29,54,0.4), rgba(4,29,54,0.8)); } /* File input */ input[type=file]{ background:#0f0f0f; cursor:pointer; } .partners .grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items:center; justify-items:center; } .partners .grid img{ height:90px; width:auto; max-height:none; object-fit:contain; } .partners .grid img.logo-jimmy{ height:110px; } .partners .grid img.partner-logo-tall{ height:144px; } @media (max-width: 960px){ .partners .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .partners .grid img{ height:72px; } .partners .grid img.logo-jimmy{ height:98px; } } @media (max-width: 600px){ .partners .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .partners .grid img{ height:60px; } .partners .grid img.logo-jimmy{ height:80px; } } .brand-rail{ max-height:360px; overflow-y:auto; border:0; border-radius:12px; background:transparent; backdrop-filter:none; } .brand-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .brand-item{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); } .brand-item:last-child{ border-bottom:0; } .brand-item .logo-tag{ width:44px; height:44px; border-radius:12px; font-weight:700; background:#111; border:1px solid var(--border); } .brand-meta{ display:flex; flex-direction:column; gap:4px; } .brand-name{ font-weight:600; } .brand-category{ font-size:.9rem; color:var(--muted); } .brand-item.hero{ border-left:3px solid var(--brand); background:rgba(199,167,116,.08); } .franchise-list-scroll{ max-height:520px; overflow-y:auto; padding:16px; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .franchise-list-scroll::-webkit-scrollbar{ display:none; /* Chrome/Safari */ } .franchise-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style:none; margin:0; padding:0; } @media (max-width: 992px){ .franchise-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px){ .franchise-grid{ grid-template-columns: 1fr; } } .franchise-card{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:12px; padding:20px 24px; height:100%; border:0; border-radius:12px; background:transparent; box-shadow:none; } .franchise-card .logo-tag{ width:120px; height:120px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.3rem; background:transparent; border:0; margin-bottom:8px; } .franchise-card .logo-tag img{ width:100%; height:100%; object-fit:contain; padding:8px; border-radius:inherit; display:block; } .franchise-card .brand-name{ font-size:1rem; font-weight:600; letter-spacing:0.01em; } .franchise-card .brand-category{ display:none; } .brand-catalog{ margin-top:40px; } .catalog-grid{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; } .catalog-card{ display:flex; gap:16px; align-items:center; background:rgba(15,15,15,0.95); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:18px; box-shadow:0 18px 36px rgba(0,0,0,0.25); } .catalog-card .logo-tag{ width:54px; height:54px; font-size:1.05rem; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background:#111; } .catalog-card .brand-name{ margin:0; font-weight:700; } .catalog-card .brand-category{ margin:2px 0 0; color:var(--muted); font-size:.9rem; } @media (max-width:600px){ .catalog-card{ flex-direction:column; align-items:flex-start; } .catalog-card .logo-tag{ width:48px; height:48px; } } .partners img{ object-fit:contain; filter:none; opacity:1; } .logo-tag{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#1b1b1b; border:1px solid var(--border); font-weight:600; font-size:.85rem; color:var(--ink); } /* CTA band */ .band{ background:#0f0f0f; text-align:left; min-height:200px; } .band.solutions .eyebrow{ color: var(--brand); letter-spacing:.2em; } /* Portals CTA */ .portals-cta .portals-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; } .portals-cta .mini{ background: linear-gradient(180deg, #141414, #0d0d0d); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: 0 6px 20px rgba(0,0,0,.06); } .portals-cta .mini svg{ width:28px; height:28px; display:block; margin-bottom: 8px; } .portals-cta .mini h3{ margin:6px 0; font-size:1.05rem; } .portals-cta .mini p{ margin:0 0 10px; color: var(--muted); } /* ----------------------------- 6) Footer ----------------------------- */ footer.footer{ background:#0d0d0d; color:#fff; border-top:1px solid rgba(255,255,255,.06); } footer .cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: 24px; } footer a{ color:#fff; } @media (max-width: 960px){ footer .cols{ grid-template-columns: 1fr; } } /* ----------------------------- 7) Utilities ----------------------------- */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:12px; top:12px; width:auto; height:auto; background:#111; padding:8px 10px; border:1px solid var(--border); border-radius:10px; z-index:1000; } .anim-delay-0{ --anim-delay: 0ms; } .anim-delay-80{ --anim-delay: 80ms; } .anim-delay-140{ --anim-delay: 140ms; } .anim-delay-160{ --anim-delay: 160ms; } .anim-delay-220{ --anim-delay: 220ms; } .anim-delay-260{ --anim-delay: 260ms; } .anim-delay-280{ --anim-delay: 280ms; } .anim-delay-320{ --anim-delay: 320ms; } .anim-delay-420{ --anim-delay: 420ms; } .brands-grid .card img{display:block;width:100%;height:200px;object-fit:cover;} .brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;} .brands-grid .card img{display:block;width:100%;height:200px;object-fit:cover;} @media (max-width:720px){.brands-grid{grid-template-columns:1fr;}} .categories-grid--wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;} @media (max-width:720px){.categories-grid--wide{grid-template-columns:1fr;}} .clients-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:24px; } .clients-grid .card img{ width:100%; height:200px; object-fit:cover; display:block; } .clients-grid .card img.logo-contained{ object-fit:contain; padding:12px; background:#111; } .clients-grid .card .logo-caption{ margin:8px 0 6px; color:var(--brand); font-weight:700; display:block; } .transactions-grid{ display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:20px; } .transactions-grid .card img{ width:100%; height:200px; object-fit:cover; display:block; } @media (max-width: 960px){ .transactions-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .transactions-grid{ grid-template-columns: 1fr; } } .clients-grid .card{ background:rgba(20,20,20,0.96); box-shadow:0 20px 40px rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.06); transition:transform .18s ease, box-shadow .18s ease; } .clients-grid .card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(0,0,0,0.35); } @media (max-width:720px){ .clients-grid{grid-template-columns:1fr;} } .categories-grid--wide .card{ background:rgba(20,20,20,0.95); box-shadow:0 18px 38px rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.06); transition:transform .18s ease, box-shadow .18s ease; } .categories-grid--wide .card:hover{ transform:translateY(-4px); box-shadow:0 24px 46px rgba(0,0,0,0.3); } .team-headshots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; justify-items:center; } .team-headshots .card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; background:rgba(18,18,18,0.95); border:1px solid rgba(255,255,255,0.08); box-shadow:0 18px 38px rgba(0,0,0,0.24); border-radius:18px; transition:transform .18s ease, box-shadow .18s ease; } .team-headshots .card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px rgba(0,0,0,0.32); } .team-headshots .card p{ color:#d9d9d9; margin-bottom:0; } @media (max-width:600px){ .team-headshots{grid-template-columns:1fr;} } .contact-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; } .contact-item{ display:flex; flex-wrap:wrap; gap:12px 28px; padding:18px; border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:rgba(17,17,17,0.92); box-shadow:0 14px 30px rgba(0,0,0,0.2); } .contact-text h3{ margin:0; font-size:1.15rem; } .contact-title{ margin:4px 0 0; color:var(--muted); } .contact-links{ display:flex; flex-direction:column; gap:4px; min-width:220px; } .contact-links a{ color:var(--ink); font-weight:600; text-decoration:none; } .contact-links a:hover{ text-decoration:underline; } .contact-directory{ text-align:center; } .contact-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:28px; } .contact-logo{ width:140px; max-width:60vw; } .contact-directory .contact-list{ text-align:left; } .contacts-section{ margin-top:48px; } .contacts-header .eyebrow{ letter-spacing:0.12em; text-transform:uppercase; font-size:0.75rem; color:var(--brand); margin-bottom:4px; } .contacts-header h2{ font-size:1.75rem; margin-bottom:24px; } .contacts-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:24px; } .contact-card{ position:relative; display:flex; justify-content:space-between; gap:16px; padding:20px 24px; border-radius:18px; background:#151515; border:1px solid #2a2a2a; } .contact-card::before{ content:""; position:absolute; inset-block:12px; left:12px; width:3px; border-radius:999px; background:linear-gradient(180deg, #58a6ff, #d9b865); } .contact-main{ padding-left:14px; } .contact-name{ margin:0 0 6px; font-size:1.1rem; font-weight:600; } .contact-title{ margin:0; font-size:0.9rem; color:#b3b3b3; } .contact-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; text-align:right; } .contact-chip{ font-size:0.85rem; padding:6px 12px; border-radius:999px; background:#202020; color:#f5f5f5; text-decoration:none; border:1px solid #333; white-space:nowrap; } .contact-chip:hover{ background:#2a2a2a; border-color:var(--brand); } .outlets-grid{ display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:20px; } .outlets-grid .card img{ width:100%; height:200px; object-fit:cover; display:block; } @media (max-width: 960px){ .outlets-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px){ .outlets-grid{ grid-template-columns: 1fr !important; } } @media (max-width: 768px){ .contacts-grid{ grid-template-columns:1fr; } .contact-card{ flex-direction:column; align-items:flex-start; } .contact-actions{ align-items:flex-start; text-align:left; } } .office-figure{ position:relative; overflow:hidden; } .office-figure img{ display:block; width:100%; } .office-label{ position:absolute; left:14px; bottom:14px; background:rgba(0,0,0,0.65); color:#fff; padding:6px 10px; font-size:.9rem; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; } /* ----------------------------- 8) Animations ----------------------------- */ .js [data-animate]{ opacity:0; transform: translateY(28px); transition-property: opacity, transform; transition-duration: var(--anim-duration, 640ms); transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--anim-delay, 0ms); will-change: opacity, transform; } .js [data-animate].is-visible{ opacity:1; transform: none; } .js [data-animate="fade-in"]{ transform: none; } .js [data-animate="fade-in-scale"]{ transform: scale(0.92); } .js [data-animate="fade-left"]{ transform: translateX(-36px); } .js [data-animate="fade-right"]{ transform: translateX(36px); } .js [data-animate="pop-up"]{ transform: translateY(34px) scale(0.94); } .js [data-animate="fade-in-scale"].is-visible, .js [data-animate="pop-up"].is-visible{ transform: none; } @media (prefers-reduced-motion: reduce){ [data-animate], .js [data-animate]{ opacity:1 !important; transform: none !important; transition: none !important; } }