/* ========================================================= Skyline Property Productions — site styles BRAND COLORS: taken from the Skyline logo. Change the values in :root below and the whole site updates. ========================================================= */ /* DM Sans, hosted in this folder so it always loads (no Google Fonts needed). */ @font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* brand (from the logo) */ --accent: #3d98d1; /* brand blue: buttons, big text, accents */ --accent-strong: #1a70a6; /* darker brand blue for small text (easier to read on white) */ --brand-gray: #a7a8ac; /* brand gray */ /* DAY MODE (default) */ --page: #ffffff; /* main background */ --band: #f3f4f6; /* alternate section background */ --card: #ffffff; /* cards sitting on a band */ --ink: #111318; /* main text */ --muted: #555b64; /* secondary text */ --line: rgba(17, 19, 24, 0.28); --line-soft: rgba(17, 19, 24, 0.10); --header-bg: rgba(255, 255, 255, 0.88); --solid-bg: #111318; /* filled buttons */ --solid-fg: #ffffff; --solid-hover-fg: #ffffff; color-scheme: light; /* ---- TYPE SIZES, copied from skyviewms.com (measured on a 1440px-wide window) ---- Big text scales down smoothly on smaller screens (--u shrinks from 1px at 1440px wide). Small text keeps its exact Skyview size. */ --u: clamp(0.66px, calc(100vw / 1440), 1px); --fs-hero: calc(67 * var(--u)); /* main headline */ --fs-h2: calc(43 * var(--u)); /* section headings */ --fs-h2-lg: calc(50.7 * var(--u)); /* "Get started" and sign-up headings */ --fs-stat: calc(66 * var(--u)); /* the big stat numbers */ --fs-title: calc(28.6 * var(--u)); /* "Trusted By", stat titles */ --fs-footer-word: calc(104 * var(--u)); /* giant company name in the footer */ --fs-nav: 15.3px; /* menu links and buttons */ --fs-btn: 15.4px; --fs-lead: 19.3px; /* sub-headings under section titles */ --fs-hero-p: 18px; --fs-small: 15.6px; /* stat descriptions, testimonial text */ --fs-eyebrow: 17.2px; --fs-card: 21px; --fs-h2-sm: calc(42 * var(--u)); /* Services: Videography / Branding headings */ --fs-h3: calc(27.9 * var(--u)); /* Services: photography sub-heading */ --fs-h3-lg: calc(42 * var(--u)); /* Services: drone sub-heading */ --fs-banner-sub: 21px; --fs-list: 16px; --fs-label: 17.8px; --fs-svc-stat: calc(68 * var(--u)); /* Services: outlined stat numbers */ --fs-footer-h: 17.1px; --fs-footer-link: 13.4px; --fs-footer-small: 13.8px; --fs-footer-bottom: 12px; --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --gutter: clamp(20px, 4vw, 48px); --inner: clamp(20px, 6.6vw, 80px); --radius: 12px; } /* NIGHT MODE (not the default). To use it, add data-theme="dark" to the tag of a page. */ html[data-theme="dark"] { --page: #0a0a0a; --band: #121212; --card: #151515; --ink: #f4f4f4; --muted: #b4b4b4; --accent-strong: #3d98d1; --line: rgba(255, 255, 255, 0.28); --line-soft: rgba(255, 255, 255, 0.10); --header-bg: rgba(10, 10, 10, 0.82); --solid-bg: #ffffff; --solid-fg: #000000; --solid-hover-fg: #000000; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-optical-sizing: none; /* keep DM Sans at its regular (open) letter shapes at every size, like Skyview */ font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; } .skip-link:focus { left: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 8px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 400 var(--fs-btn)/1 var(--font); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:hover { background: var(--solid-bg); color: var(--solid-fg); } .btn-solid { background: var(--solid-bg); border-color: var(--solid-bg); color: var(--solid-fg); } .btn-solid:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--solid-hover-fg); } .btn-dark { border-color: var(--ink); color: var(--ink); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .nav { display: flex; align-items: center; gap: 44px; height: 92px; padding: 0 var(--gutter); } .brand img { height: 52px; width: auto; } .nav-links { display: flex; gap: clamp(20px, 2.3vw, 34px); font-size: var(--fs-nav); white-space: nowrap; } .nav-links a { transition: color .2s; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent-strong); } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 22px; } .nav-phone { font-size: 15.9px; font-weight: 300; color: var(--muted); } .nav-phone:hover { color: var(--ink); } .theme-toggle { width: 44px; height: 44px; margin-left: 22px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer; background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; transition: background-color .2s, color .2s; } .theme-toggle:hover { background: var(--solid-bg); color: var(--solid-fg); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; } .menu-toggle { display: none; margin-left: 12px; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { padding: 8px var(--gutter) 28px; display: grid; gap: 4px; border-top: 1px solid var(--line-soft); } .mobile-menu[hidden] { display: none; } .mobile-menu a:not(.btn) { padding: 12px 0; font-size: 1.125rem; border-bottom: 1px solid var(--line-soft); } .mobile-menu a[aria-current="page"] { color: var(--accent-strong); } .mobile-menu .btn { margin-top: 16px; } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: clamp(64px, 11vh, 120px) var(--gutter) clamp(56px, 9vh, 96px); min-height: 52vh; } .hero h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.08; letter-spacing: 0; font-variation-settings: "opsz" 30; } .hero h1 .accent { color: var(--accent); } /* Desktop: the headline is ONE line, like Skyview. The size scales with the window so it always fits. */ @media (min-width: 1041px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); } .hero h1 { white-space: nowrap; font-size: min(var(--fs-hero), calc((100vw - 470px) / 12.9)); } } .hero-side p { font-size: var(--fs-hero-p); line-height: 1.39; font-weight: 300; color: var(--muted); max-width: 30ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .hero h1, .hero-side { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; } .hero-side { animation-delay: .12s; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ---------- Rolling marquees ---------- */ .marquee { overflow: hidden; } .marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 60s) linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } .marquee-set { display: flex; flex-shrink: 0; gap: var(--gap); padding-right: var(--gap); align-items: center; } @keyframes marquee { to { transform: translateX(var(--shift, -50%)); } } .photo-strip { --gap: 16px; padding-bottom: clamp(56px, 9vh, 96px); } .photo-strip img { width: 320px; height: 214px; object-fit: cover; border-radius: var(--radius); } .trusted { background: var(--band); padding: 56px 0 64px; text-align: center; } .trusted h2 { font-size: var(--fs-title); font-weight: 500; font-variation-settings: "opsz" 28; margin-bottom: 40px; } .logo-row { --gap: 80px; } .logo-row img { height: var(--h, 40px); width: auto; max-width: none; opacity: .82; } @media (max-width: 700px) { .logo-row { --gap: 56px; } .logo-row img { height: calc(var(--h, 40px) * .8); } } html[data-theme="dark"] .logo-row img { filter: brightness(0) invert(1); } /* logos turn white in night mode */ /* ---------- Headline + stats section ---------- */ .intro { background: var(--page); color: var(--ink); padding: clamp(64px, 9vw, 110px) var(--inner); } .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 32px; } .section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; } .intro h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.07; letter-spacing: 0; max-width: 21em; font-variation-settings: "opsz" 20; } .showcase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 72px); margin-top: clamp(48px, 7vw, 88px); } .phone { width: clamp(170px, 18vw, 224px); aspect-ratio: 9 / 17.6; border: 7px solid #111; border-radius: 38px; background: #111; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #2a2a2a; } .phone::before { content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 34%; height: 15px; background: #000; border-radius: 99px; z-index: 2; } .phone { background: radial-gradient(120% 80% at 50% 0%, #1b2530, #0b0d10); } .phone .mark { position: absolute; inset: 0; margin: auto; width: 46%; height: auto; opacity: .3; } .phone video, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .phone video { border-radius: 30px; } .stats { display: grid; gap: clamp(28px, 4vw, 52px); } .stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(16px, 3vw, 48px); } .stat-num { font-size: var(--fs-stat); font-weight: 650; letter-spacing: -0.01em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 16; } .stat-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.1; font-variation-settings: "opsz" 28; } .stat-text { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); font-weight: 300; line-height: 1.38; } /* ---------- Services ---------- */ .solutions { background: var(--band); padding: clamp(64px, 9vw, 110px) var(--inner); } .solutions h1, .solutions h2, .projects h2, .reviews h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.1; font-variation-settings: "opsz" 20; } .solutions .sub { margin-top: 18px; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); margin-top: clamp(40px, 6vw, 72px); } .card { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; } .card .photo { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .card-video { background: radial-gradient(120% 90% at 30% 0%, #1b2530, #0b0d10); } .card .mark { position: absolute; inset: 0; margin: auto; width: 22%; height: auto; opacity: .22; } .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.28)); } .card:hover .photo { transform: scale(1.04); } .card span { position: absolute; left: 20px; bottom: 18px; z-index: 1; font-size: var(--fs-card); color: #fff; } /* ---------- Featured projects carousel ---------- */ .projects { background: var(--page); padding: clamp(64px, 9vw, 110px) 0; } .projects h2 { padding: 0 var(--inner); } .track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--inner); margin-top: clamp(36px, 5vw, 64px); scroll-padding: 0 var(--inner); scrollbar-width: none; } .track::-webkit-scrollbar { display: none; } .project { position: relative; flex: 0 0 clamp(200px, 22vw, 268px); aspect-ratio: 3 / 4; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; display: block; } .project img { width: 100%; height: 100%; object-fit: cover; } .project span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 56px 18px 16px; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); font-size: 17px; line-height: 1.25; text-transform: uppercase; color: #fff; } .project span:empty { display: none; } .arrows { display: flex; justify-content: center; gap: 12px; margin-top: 40px; } .arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, color .2s; } .arrow:hover { background: var(--solid-bg); color: var(--solid-fg); } .arrow svg { width: 20px; height: 20px; } .center { display: flex; justify-content: center; margin-top: 48px; } /* ---------- Testimonials ---------- */ .reviews { background: var(--band); padding: clamp(64px, 9vw, 110px) var(--inner); text-align: center; } .reviews .sub { margin-top: 16px; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); } .review-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: clamp(36px, 5vw, 64px); scrollbar-width: none; text-align: left; } .review-track::-webkit-scrollbar { display: none; } .review { flex: 0 0 calc(50% - 12px); scroll-snap-align: start; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px; } .review blockquote { margin: 0; font-size: var(--fs-small); font-weight: 300; line-height: 1.42; color: var(--muted); } .reviewer { display: flex; align-items: center; gap: 18px; } .reviewer img { height: 52px; width: 52px; object-fit: contain; } .reviewer strong { display: block; font-weight: 400; font-size: 17.4px; text-transform: uppercase; } .reviewer small { color: var(--muted); font-size: var(--fs-small); font-weight: 300; } /* ---------- Get started ---------- */ .cta { background: var(--page); padding: clamp(64px, 9vw, 110px) var(--inner); } .cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 88px); } .eyebrow { color: var(--accent-strong); font-size: var(--fs-eyebrow); text-transform: uppercase; margin-bottom: 20px; } .cta h2 { font-size: var(--fs-h2-lg); font-weight: 600; line-height: 1.07; letter-spacing: 0; font-variation-settings: "opsz" 30; } .cta p { margin-top: 26px; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); max-width: 30ch; line-height: 1.52; } .cta .eyebrow { color: var(--accent-strong); font-size: var(--fs-eyebrow); margin: 0 0 20px; max-width: none; } .cta .btn { margin-top: 40px; padding: 20px 32px; } .cta img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); } /* ---------- Footer ---------- */ .site-footer { background: var(--page); border-top: 1px solid var(--line-soft); color: var(--ink); padding: clamp(56px, 8vw, 96px) var(--gutter) 40px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, .5fr) minmax(0, 1.3fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .footer-brand img { height: 72px; width: auto; } .footer-word { margin-top: 28px; font-size: var(--fs-footer-word); font-weight: 700; line-height: 0.98; letter-spacing: -0.01em; font-variation-settings: "opsz" 32; } .site-footer h3 { font-size: var(--fs-footer-h); font-weight: 500; margin-bottom: 30px; } .footer-col { display: grid; gap: 18px; color: var(--muted); font-size: var(--fs-footer-link); } .footer-col a:hover { color: var(--accent-strong); } .footer-col a { overflow-wrap: break-word; } .footer-col a[href^="tel"], .footer-col a[href^="mailto"] { font-size: var(--fs-footer-small); } .footer-col p { font-size: 13.7px; font-weight: 300; line-height: 1.6; } .socials { display: flex; gap: 8px; margin-top: 8px; } .socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; } .socials a:hover { background: var(--solid-bg); color: var(--solid-fg); } .socials svg { width: 20px; height: 20px; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(24px, 6vw, 96px); margin-top: 56px; color: var(--muted); font-size: var(--fs-footer-bottom); } .footer-bottom a:hover { color: var(--accent-strong); } /* ---------- Services page ---------- */ .page-banner.page-banner--tall { min-height: calc(538 * var(--u)); } .banner-sub { margin-top: 22px; font-size: var(--fs-banner-sub); font-weight: 400; color: #fff; } .svc { background: var(--page); padding: clamp(64px, 9vw, 130px) var(--inner); } .svc--band { background: var(--band); } .svc-head { text-align: center; margin-bottom: clamp(40px, 6vw, 88px); } .svc-head--left { text-align: left; margin-bottom: clamp(32px, 5vw, 64px); } .svc-head .eyebrow { margin: 0 0 16px; } .svc h2 { font-size: var(--fs-h2-lg); font-weight: 500; line-height: 1.1; letter-spacing: 0; font-variation-settings: "opsz" 26; } .svc h2.h2-sm { font-size: var(--fs-h2-sm); } .svc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; } .svc-text .eyebrow { margin-bottom: 16px; } .svc-text h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.17; max-width: 22em; font-variation-settings: "opsz" 22; } .svc-text h3.h3-lg { font-size: var(--fs-h3-lg); line-height: 1.18; max-width: none; font-variation-settings: "opsz" 24; } .svc-list-title { margin-top: clamp(32px, 5vw, 72px); font-size: var(--fs-label); font-weight: 400; color: var(--accent-strong); } .svc-list-title--plain { color: var(--ink); margin-top: clamp(32px, 4vw, 48px); } .checklist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; } .checklist li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-list); font-weight: 300; line-height: 1.4; } .checklist .li-name { font-weight: 400; } .checklist .li-desc { color: var(--muted); } .checklist svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink); } .svc-lead { margin-top: 26px; max-width: 46em; font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--muted); } .svc-lead--dark { margin-top: 0; max-width: 34em; color: var(--ink); font-size: 18.8px; } .svc-small { margin-top: 26px; max-width: 34em; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--muted); } /* photo slider */ .svc-slider { position: relative; } .svc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); } .svc-track::-webkit-scrollbar { display: none; } .svc-track img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: start; } .slide-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: background-color .2s, color .2s; } .slide-arrow:hover { background: var(--accent); color: #fff; } .slide-arrow svg { width: 20px; height: 20px; } .slide-arrow--prev { left: 20px; } .slide-arrow--next { right: 20px; } /* videography: vertical video cards + tall photos */ .svc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: clamp(40px, 6vw, 80px); } .vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 32px); } .vgrid > * { aspect-ratio: 9 / 16; width: 100%; } .vphoto { height: auto; object-fit: cover; border-radius: var(--radius); } .vcard { position: relative; min-height: 180px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 90% at 30% 0%, #1b2530, #0b0d10); } .vcard .mark { position: absolute; inset: 0; margin: auto; width: 22%; height: auto; opacity: .2; } .vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .05) 45%); } .vcard span { position: absolute; left: clamp(16px, 1.8vw, 26px); right: 16px; bottom: clamp(16px, 2vw, 28px); z-index: 1; color: #fff; font-size: var(--fs-card); line-height: 1.2; } /* drone */ .svc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(56px, 8vw, 120px); text-align: center; align-items: start; } .svc-stat { will-change: transform; } .svc-stat-num { font-size: var(--fs-svc-stat); font-weight: 400; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.6px var(--accent); } @supports not (-webkit-text-stroke: 1px transparent) { .svc-stat-num { color: var(--accent); } } .svc-stat-title { margin-top: 26px; font-size: var(--fs-title); font-weight: 400; line-height: 1.1; } .svc-stat-text { margin: 18px auto 0; max-width: 26ch; font-size: var(--fs-small); font-weight: 300; line-height: 1.38; color: var(--muted); } /* ---------- Services: drone mosaic (same layout as the videography mosaic on Skyview) ---------- */ .dgrid { display: grid; grid-template-columns: 1fr 2.17fr 1fr 2.17fr; gap: clamp(14px, 2.2vw, 32px); } .dcard-a { grid-column: 1 / 3; grid-row: 1; } .dcard-b { grid-column: 3; grid-row: 1; aspect-ratio: 2 / 3; } .dcard-c { grid-column: 4; grid-row: 1 / 3; } .dcard-d { grid-column: 1; grid-row: 2; aspect-ratio: 2 / 3; } .dcard-e { grid-column: 2 / 4; grid-row: 2; } .vfill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Services: Branding video (plain portrait video, rounded corners) ---------- */ .tall-video { position: relative; width: min(100%, calc(345 * var(--u))); aspect-ratio: 9 / 16; justify-self: center; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 30% 0%, #1b2530, #0b0d10); } .tall-video .mark { position: absolute; inset: 0; margin: auto; width: 34%; height: auto; opacity: .3; } .tall-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 3D tour */ .tour-frame { position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 0%, #1b2530, #0b0d10); } .tour-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tour-frame.is-live::after { display: none; } .tour-frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } .tour-cta { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; text-align: center; padding: 0 20px; } .tour-badge { color: #fff; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em; } .tour-cta .btn-solid { background: #fff; border-color: #fff; color: #111; padding: 18px 30px; } .tour-cta .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .tour-open { margin-top: 14px; font-size: var(--fs-small); font-weight: 300; } .tour-open a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .tour-open a:hover { color: var(--accent-strong); } .cta--band { background: var(--band); } .trusted--page { background: var(--page); } /* ---------- Client Center Training page ---------- */ .page-banner { min-height: clamp(220px, 26vw, 380px); display: grid; place-items: center; text-align: center; padding: 60px var(--inner); color: #fff; background-color: #14181d; background-position: center; background-size: cover; background-repeat: no-repeat; } .page-banner h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.08; letter-spacing: 0; font-variation-settings: "opsz" 30; } .training-intro { padding: clamp(56px, 8vw, 96px) var(--inner) 0; text-align: center; } .training-intro h2 { text-wrap: balance; max-width: 24em; margin: 0 auto; font-size: var(--fs-h2); font-weight: 600; line-height: 1.14; letter-spacing: 0; font-variation-settings: "opsz" 24; } .training-intro h2 .accent { color: var(--accent); } .training-intro p { overflow-wrap: anywhere; margin-top: 24px; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); } .training-intro p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .training-intro p a:hover { color: var(--accent-strong); } .training-list { display: grid; gap: clamp(28px, 4vw, 56px); width: min(100% - 2 * var(--inner), 880px); margin: clamp(40px, 6vw, 72px) auto; } .tcard-media { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 2.4vw, 26px); background: radial-gradient(120% 90% at 30% 0%, #1b2530, #0b0d10); color: #fff; font: inherit; cursor: pointer; text-align: center; } .tcard-media[hidden] { display: none; } .tcard-media .mark { position: absolute; inset: 0; margin: auto; width: 15%; height: auto; opacity: .16; } .tcard-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tcard-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); } .tcard-title, .tcard-play { position: relative; z-index: 1; } .tcard-title { text-wrap: balance; padding: 0 8%; font-size: calc(46 * var(--u)); font-weight: 700; line-height: 1.08; letter-spacing: 0; font-variation-settings: "opsz" 30; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .tcard-play { width: clamp(56px, 6vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; transition: background-color .2s, color .2s, transform .2s; } .tcard-play svg { width: 42%; height: 42%; margin-left: 6%; } .tcard-media:hover .tcard-play { background: var(--accent); color: #fff; transform: scale(1.06); } .tcard-player { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; } .tcard-player video { width: 100%; height: 100%; display: block; } .tcard-status { margin-top: 12px; text-align: center; color: var(--muted); font-size: var(--fs-small); } .training-cta { text-align: center; padding: 0 var(--inner) clamp(64px, 9vw, 110px); } .training-cta h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: 0; font-variation-settings: "opsz" 20; margin-bottom: 28px; } /* ---------- Placeholder inner pages ---------- */ .page-hero { min-height: 62vh; display: grid; align-content: center; gap: 22px; padding: 80px var(--inner); } .page-hero h1 { font-size: var(--fs-hero); font-weight: 700; letter-spacing: 0; line-height: 1.08; font-variation-settings: "opsz" 30; } .page-hero p { overflow-wrap: anywhere; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); max-width: 44ch; } .page-hero .hero-actions { margin-top: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 1279px) { .nav-phone { display: none; } /* the number is still in the footer and on the Book Now page */ } @media (max-width: 1040px) { .nav-links, .nav-cta { display: none; } .menu-toggle { display: flex; } .nav { gap: 0; } .theme-toggle { margin-left: auto; } .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-brand { grid-column: 1 / -1; } .footer-bottom { justify-content: flex-start; } } @media (max-width: 860px) { .svc-split, .svc-split--phone, .svc-split--drone, .svc-split--tour { grid-template-columns: minmax(0, 1fr); } .svc-row { flex-direction: column; } .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid { grid-template-columns: 1fr 1fr; } .dcard-a, .dcard-e { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } .dcard-a { order: 1; } .dcard-b { grid-column: 1; grid-row: auto; order: 2; } .dcard-d { grid-column: 2; grid-row: auto; order: 3; } .dcard-c { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; order: 4; } .dcard-e { order: 5; } .svc-stats { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero { grid-template-columns: 1fr; gap: 32px; } .section-head { flex-direction: column; } .section-actions { justify-content: flex-start; } .showcase { grid-template-columns: 1fr 1fr; } .stats { grid-column: 1 / -1; grid-row: 1; } .phone { width: 100%; max-width: 224px; } .phone:last-child { justify-self: end; } .cards { grid-template-columns: 1fr; } .review { flex-basis: 88%; } .cta-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .brand img { height: 44px; } .photo-strip img { width: 250px; height: 168px; } .stat { grid-template-columns: 1fr; text-align: left; gap: 8px; } .stat-num { text-align: left; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-word { font-size: min(var(--fs-footer-word), 14.5vw); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero h1, .hero-side { animation: none; } .marquee { overflow-x: auto; } .marquee-track { animation: none; } .card .photo { transition: none; } } /* ---------- Home page order (sections alternate white / light gray) ---------- */ .photo-strip { padding-top: clamp(48px, 7vw, 96px); } .projects { background: var(--band); } .reviews { background: var(--page); } .reviews .review { background: var(--band); border-color: transparent; } .cta { background: var(--band); } /* ---------- Top menu: hides when you scroll down, comes back when you scroll up ---------- */ .site-header { transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; } .site-header.is-hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* ---------- Pricing page ---------- */ .svc-lead--center { margin: 22px auto 0; max-width: 40em; text-align: center; } .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .pgrid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pgrid--3 .pcard { grid-column: span 2; } .pgrid--3 .pcard:nth-child(4) { grid-column: 2 / span 2; } .pgrid--3 .pcard:nth-child(5) { grid-column: 4 / span 2; } .pcard { --pad: clamp(22px, 2.2vw, 30px); position: relative; display: flex; flex-direction: column; padding: var(--pad); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); } .pcard--popular { border: 2px solid var(--accent); padding: calc(var(--pad) - 1px); } .pbadge { position: absolute; top: -14px; left: var(--pad); padding: 5px 12px; border-radius: 99px; background: var(--solid-bg); color: var(--solid-fg); font-size: 13px; font-weight: 500; letter-spacing: .02em; } .pcard h3 { margin: 0 0 12px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; font-variation-settings: "opsz" 22; } .pdesc { margin: 0 0 20px; font-size: var(--fs-small); font-weight: 300; line-height: 1.45; color: var(--muted); } .pcheck { margin: 0 0 18px; gap: 9px; } .pcheck li { align-items: flex-start; font-size: 15.5px; } .pcheck svg { margin-top: 3px; } .pnote { margin: 0 0 18px; font-size: 14.5px; font-weight: 300; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } .pnote a { text-decoration: underline; text-underline-offset: 3px; } .pfoot { margin-top: auto; padding-top: 22px; display: grid; gap: 14px; border-top: 1px solid var(--line-soft); } .plabel { font-size: 14.5px; color: var(--muted); } .pselect { position: relative; } .pselect select { appearance: none; -webkit-appearance: none; width: 100%; padding: 14px 44px 14px 16px; cursor: pointer; font: 400 15.5px/1.3 var(--font); color: var(--ink); background: var(--band); border: 1px solid var(--line); border-radius: 10px; text-overflow: ellipsis; } .pselect select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pselect::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; pointer-events: none; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); } .pprice strong { font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: 0; font-variation-settings: "opsz" 30; } .pprice { display: grid; gap: 6px; } .pprice span { font-size: 13.5px; font-weight: 300; line-height: 1.35; color: var(--muted); } .pfoot .btn { width: 100%; text-align: center; justify-content: center; } /* calculator */ .calc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .calc-form { display: grid; gap: 34px; } .csize label, .cgroup h3 { display: block; margin: 0 0 12px; font-size: var(--fs-label); font-weight: 400; color: var(--accent-strong); } .csize input { width: 100%; padding: 16px 18px; font: 400 22px var(--font); color: var(--ink); background: var(--band); border: 1px solid var(--line-soft); border-radius: var(--radius); } .csize input:focus { outline: 2px solid var(--accent); border-color: transparent; } .csize p { margin: 10px 0 0; font-size: 14.5px; font-weight: 300; color: var(--muted); } .cgroup-items { display: grid; gap: 10px; } .citem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; background: var(--band); border: 1px solid var(--line-soft); border-radius: 10px; transition: border-color .2s, background-color .2s; } .citem:hover { border-color: var(--line); } .citem:has(input:checked) { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 1px var(--accent) inset; } .citem.is-disabled { opacity: .5; cursor: not-allowed; } .citem input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-strong); } .ctext b { display: block; font-size: 16px; font-weight: 400; line-height: 1.3; } .ctext small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 300; color: var(--muted); } .ctext small:empty { display: none; } .cprice { font-size: 16px; font-weight: 500; white-space: nowrap; } .cprice.is-note { font-size: 14px; font-weight: 300; color: var(--muted); } .csum { position: sticky; top: 110px; padding: clamp(22px, 2.4vw, 32px); background: var(--band); border-radius: var(--radius); } .csum h3 { margin: 0 0 18px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; } .cempty { margin: 0 0 20px; font-size: 15.5px; font-weight: 300; color: var(--muted); } .clines { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; } .clines li { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; font-weight: 300; line-height: 1.35; } .clines b { font-weight: 400; } .clines small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); } .clines li > span:last-child { font-weight: 500; white-space: nowrap; } .ctotal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-label); } .ctotal strong { font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: 0; font-variation-settings: "opsz" 30; } .cnote { margin: 14px 0 0; font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--muted); } .cactions { display: grid; gap: 12px; margin-top: 22px; } .cactions .btn { width: 100%; text-align: center; justify-content: center; } @media (max-width: 1199px) { .pgrid, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid--3 .pcard, .pgrid--3 .pcard:nth-child(4), .pgrid--3 .pcard:nth-child(5) { grid-column: auto; } } @media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } .csum { position: static; } } @media (max-width: 700px) { .pgrid, .pgrid--3 { grid-template-columns: minmax(0, 1fr); } } /* Add-ons section + calculator sitting on the gray band */ .paddon-cta { margin: 40px 0 0; text-align: center; } .svc--band .citem { background: var(--card); } .svc--band .csum { background: var(--card); } .svc--band .csize input { background: var(--card); } .pdesc { overflow-wrap: anywhere; } .pdesc a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- Pricing: sample photo/video at the top of a card ---------- */ .pmedia { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 22px; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; background: var(--line-soft); } .pmedia img, .pmedia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pmedia [hidden] { display: none; } .pmedia--contain:not(.is-empty) { background: #fff; } .pmedia--contain img { object-fit: contain; padding: 10px; } .pmedia-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 14px; font-weight: 300; color: var(--muted); } .pmedia.is-empty > :not(.pmedia-empty) { display: none; } /* before / after slider */ .ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.45); pointer-events: none; } .ba.is-empty::after { display: none; } .ba-tag { position: absolute; bottom: 10px; padding: 3px 9px; border-radius: 99px; pointer-events: none; background: rgba(10,12,16,.62); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .03em; } .ba-tag--l { left: 10px; } .ba-tag--r { right: 10px; } .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .ba:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; } /* calculator item that needs something else picked first */ .citem.is-disabled { opacity: .45; cursor: not-allowed; } /* gallery (arrows) inside a card picture */ .gal-slide { position: absolute; inset: 0; } .gal-slide[hidden] { display: none; } .gal-slide > a { position: absolute; inset: 0; display: block; } .gal-slide video { object-fit: contain; background: #0b0d11; } .gal-btn { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(10,12,16,.55); color: #fff; transition: background .2s; } .gal-btn:hover { background: rgba(10,12,16,.8); } .gal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gal-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .gal-prev { left: 8px; } .gal-next { right: 8px; } .gal-count, .gal-cap { position: absolute; z-index: 2; bottom: 10px; padding: 3px 9px; border-radius: 99px; pointer-events: none; background: rgba(10,12,16,.62); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .03em; } .gal-count { right: 10px; } .gal-cap { left: 10px; } /* day / twilight toggle */ .flip img { transition: opacity .6s ease; } .flip .flip-b { opacity: 0; } .flip.is-b .flip-b { opacity: 1; } .flip-tabs { position: absolute; z-index: 2; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; padding: 3px; border-radius: 99px; background: rgba(10,12,16,.62); } .flip-tabs button { border: 0; border-radius: 99px; padding: 4px 12px; cursor: pointer; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .03em; } .flip-tabs button[aria-pressed="true"] { background: #fff; color: #111318; } .flip-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Zillow 3D tour tile */ .tour3d { background: linear-gradient(135deg, #1a70a6, #3d98d1); } .tour-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; border: 0; cursor: pointer; background: transparent; color: #fff; font: inherit; text-align: center; } .tour-start svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; margin-bottom: 4px; } .tour-start span { font-size: 16px; font-weight: 500; } .tour-start small { font-size: 13px; font-weight: 300; opacity: .85; } .tour-start:focus-visible { outline: 2px solid #fff; outline-offset: -6px; } .tour3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .tour-open { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(10,12,16,.62); color: #fff; font-size: 12px; font-weight: 500; text-decoration: none; } /* ---------- Legal pages (Privacy Policy, Terms) ---------- */ .legal-head { padding: clamp(64px, 9vw, 110px) var(--inner) 24px; max-width: 860px; margin: 0 auto; } .legal-head h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.08; font-variation-settings: "opsz" 30; } .legal-head p { margin-top: 14px; color: var(--muted); font-weight: 300; } .legal { max-width: 860px; margin: 0 auto; padding: 8px var(--inner) clamp(64px, 9vw, 110px); } .legal h2 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; margin: 44px 0 12px; } .legal p, .legal li { font-size: 16.5px; font-weight: 300; line-height: 1.65; color: var(--ink); } .legal p + p { margin-top: 12px; } .legal ul { margin: 12px 0 0; padding-left: 22px; list-style: disc; } .legal li + li { margin-top: 6px; } .legal a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .legal strong { font-weight: 500; } .legal .legal-intro { font-size: var(--fs-lead); color: var(--muted); } .legal ul + p { margin-top: 16px; } /* ========================================================= PORTFOLIO page + project pages ========================================================= */ /* project tiles */ .pf-projects { padding: clamp(56px, 8vw, 100px) var(--inner); } .ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); } .ptiles > [hidden] { display: none; } .ptile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; color: #fff; } .ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .ptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.08) 100%); transition: background .3s; } .ptile:hover img { transform: scale(1.04); } .ptile:hover::after { background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.2) 100%); } .ptile-name { position: absolute; z-index: 1; left: 22px; right: 76px; bottom: 22px; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25; text-transform: uppercase; } .ptile-go { position: absolute; z-index: 1; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; background: #fff; color: #111318; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .ptile-go svg { width: 20px; height: 20px; } .ptile:hover .ptile-go, .ptile:focus-visible .ptile-go { opacity: 1; transform: none; } @media (hover: none) { .ptile-go { opacity: 1; transform: none; } } @media (max-width: 1000px) { .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ptiles { grid-template-columns: 1fr; } } /* photography tabs */ .pf-photos { background: var(--band); padding: clamp(64px, 9vw, 110px) var(--inner); text-align: center; } .pf-photos h2, .pf-reels h2, .pj-show h2, .pj-summary h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.14; letter-spacing: 0; } .pf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(32px, 4vw, 52px) 0 clamp(28px, 3.5vw, 44px); } .pf-tabs button { border: 1px solid var(--line-soft); background: var(--card); color: var(--ink); border-radius: 8px; padding: 13px 26px; font: inherit; font-size: var(--fs-btn); font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .pf-tabs button:hover { border-color: var(--line); } .pf-tabs button[aria-selected="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } .shots[hidden] { display: none; } .shot { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .shot:hover img { transform: scale(1.04); } .shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 1000px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* reels */ .pf-reels { padding: clamp(64px, 9vw, 110px) var(--inner); } .pf-reels .sub { margin-top: 18px; max-width: 46ch; font-size: var(--fs-lead); font-weight: 300; color: var(--muted); } /* reels show the WHOLE vertical video (9:16), nothing cropped */ .reels { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: clamp(16px, 3vw, 48px); margin-top: clamp(36px, 5vw, 64px); } .reel { aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #14181d; } .reel video { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 800px) { .reels { grid-template-columns: minmax(0, 320px); } } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,13,.94); display: grid; place-items: center; padding: 56px 72px; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; } .lb-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; } .lb-nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; } .lb-nav:hover { background: rgba(255,255,255,.26); } .lb-nav svg { width: 22px; height: 22px; } .lb-prev { left: 14px; } .lb-next { right: 14px; } @media (max-width: 600px) { .lightbox { padding: 56px 8px; } .lb-nav { top: auto; bottom: 14px; margin: 0; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } } /* project page: summary */ .pj-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 40px clamp(40px, 8vw, 140px); align-items: start; padding: clamp(64px, 9vw, 110px) var(--inner); } .pj-summary p { margin-top: 22px; font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; color: var(--muted); max-width: 40ch; } .pj-facts { border-top: 1px solid var(--line-soft); } .pj-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .pj-facts dt { font-size: var(--fs-small); color: var(--muted); } .pj-facts dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; } .pj-facts ul { margin: 0; padding: 0; list-style: none; } @media (max-width: 800px) { .pj-summary { grid-template-columns: 1fr; } } /* project page: showcase sections */ .pj-show { padding: clamp(64px, 9vw, 110px) 0; text-align: center; } .pj-show > .eyebrow, .pj-show > h2 { padding: 0 var(--inner); } .pj-band { background: var(--band); } /* photo slider: big centered photo, neighbours peeking in */ .pslider { position: relative; margin-top: clamp(36px, 5vw, 60px); } .ps-viewport { overflow: hidden; } .ps-track { display: flex; gap: 14px; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; } .ps-slide { flex: 0 0 min(1100px, 50vw); aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--line-soft); } .ps-slide img { width: 100%; height: 100%; object-fit: cover; } .ps-nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: #111318; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.18); } .ps-nav svg { width: 22px; height: 22px; } .ps-prev { left: clamp(10px, 2.2vw, 44px); } .ps-next { right: clamp(10px, 2.2vw, 44px); } .ps-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 800px) { .ps-slide { flex-basis: 84vw; } .ps-nav { width: 40px; height: 40px; margin-top: -20px; } } .ps-thumbs { display: flex; gap: 12px; overflow-x: auto; padding: 18px var(--inner) 6px; scrollbar-width: thin; } .ps-thumb { flex: 0 0 clamp(96px, 11vw, 150px); aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .45; transition: opacity .25s; background: none; } .ps-thumb img { width: 100%; height: 100%; object-fit: cover; } .ps-thumb:hover { opacity: .8; } .ps-thumb[aria-current="true"] { opacity: 1; } .ps-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* video */ .pj-video { width: min(380px, 86vw); margin: clamp(36px, 5vw, 60px) auto 0; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #14181d; } .pj-video video { width: 100%; height: 100%; object-fit: cover; } /* 3D tour + floor plans */ .pj-tour { width: min(1200px, calc(100% - 2 * var(--inner))); margin: clamp(36px, 5vw, 60px) auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #14181d; } .pj-tour iframe { width: 100%; height: 100%; border: 0; } .pj-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding: 0 var(--inner); margin-top: clamp(36px, 5vw, 60px); } .pj-plan { display: block; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); color: #111318; } .pj-plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 14px; } .pj-plan span { display: block; padding: 12px 16px 16px; font-size: var(--fs-small); font-weight: 500; border-top: 1px solid rgba(17,19,24,.1); } .pj-plan:hover { border-color: var(--line); } .pj-featured .eyebrow, .pj-featured h2 { padding: 0 var(--inner); } /* project page banner: shorter than other pages, full address as the title */ .page-banner.pj-hero { min-height: clamp(240px, 29vw, 440px); } .pj-hero h1 { font-size: calc(46 * var(--u)); max-width: 22ch; text-wrap: balance; } @media (max-width: 600px) { .pj-hero h1 { font-size: 30px; } } /* 2D floor plans: one white card, arrows to flip between floors */ .fp-card { position: relative; margin: clamp(36px, 5vw, 60px) auto 0; background: #fff; border-radius: var(--radius); color: #111318; width: min(max(43vw, 340px), 640px, calc(100% - 2 * var(--inner))); aspect-ratio: 4 / 3; /* same size as Skyview's card */ } .fp-card { overflow: hidden; } .fp-track { position: absolute; inset: 0; display: flex; transition: transform .6s cubic-bezier(.25,.8,.25,1); will-change: transform; } .fp-slide { position: relative; flex: 0 0 100%; margin: 0; } .fp-slide a { position: absolute; inset: 0; display: block; } .fp-slide img { width: 100%; height: 100%; object-fit: contain; padding: 14px 40px 30px; } .fp-slide figcaption { position: absolute; left: 0; right: 0; bottom: 10px; font-size: 13px; font-weight: 500; color: #555b64; pointer-events: none; } .fp-nav { position: absolute; z-index: 1; top: 50%; margin-top: -22px; width: 36px; height: 44px; border: 0; background: none; color: #111318; display: grid; place-items: center; cursor: pointer; } .fp-nav svg { width: 22px; height: 22px; } .fp-prev { left: 2px; } .fp-next { right: 2px; } .fp-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 6px; } .pj-tour { width: min(1000px, calc(100% - 2 * var(--inner))); } /* Featured Projects on project pages: always a different background from the section above */ .pj-band + .pj-featured { background: var(--page); } .pj-show:not(.pj-band) + .pj-featured { background: var(--band); } /* looping carousel (Home "Our Featured Projects") */ .projects[data-loop] { overflow: hidden; } .track.is-loop { position: relative; overflow: visible; scroll-snap-type: none; padding-inline: 0; transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; backface-visibility: hidden; touch-action: pan-y; } /* Home + project-page cards: white arrow box on hover (like Skyview), gentle zoom */ .project { isolation: isolate; } .project img { transition: transform .6s ease; } .project:hover img { transform: scale(1.04); } .project span.ptile-go { position: absolute; z-index: 1; left: auto; right: 18px; bottom: 18px; top: auto; width: 44px; height: 44px; padding: 0; border-radius: 6px; background: #fff; color: #111318; display: grid; place-items: center; font-size: 0; opacity: 0; transform: translateY(8px) scale(.92); transition: opacity .3s ease, transform .3s ease; } .project span.ptile-go svg { width: 20px; height: 20px; } .project:hover span.ptile-go, .project:focus-visible span.ptile-go { opacity: 1; transform: none; } .project:has(.ptile-go) span:not(.ptile-go) { padding-right: 76px; } @media (hover: none) { .project span.ptile-go { opacity: 1; transform: none; } } .photo-strip img.strip-plan { outline: 1px solid var(--line-soft); outline-offset: -1px; } .pj-tour.tour3d { position: relative; background: linear-gradient(135deg, #1a70a6, #3d98d1); } /* ========================================================= PHONES ONLY (700px and narrower). Nothing below touches the desktop layout. ========================================================= */ @media (max-width: 700px) { /* one consistent alignment: section titles, intros and buttons centred */ .section-head, .section-head > div { text-align: center; align-items: center; justify-content: center; } .section-head .sub, .pf-reels .sub { margin-inline: auto; } .section-actions { justify-content: center; } .intro h2 { margin-inline: auto; } .projects h2, .pj-featured .eyebrow, .pj-featured h2 { text-align: center; } .stat { grid-template-columns: 1fr; text-align: center; gap: 6px; justify-items: center; } .stat-num { justify-content: center; text-align: center; } .cta, .cta--band { text-align: center; } .cta p { margin-inline: auto; } .svc-head, .svc-text, .svc-row > div:first-child { text-align: center; } .svc-lead { margin-inline: auto; } .svc-row { align-items: center; } .svc-row > .btn { align-self: center; } .svc-text .checklist, .svc-row .checklist { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; } .pj-summary > div:first-child { text-align: center; } .pj-summary p { margin-inline: auto; } .training-intro a[href^="mailto"] { overflow-wrap: normal; word-break: normal; white-space: nowrap; font-size: .92em; } /* footer: centred, smaller company name, bigger tap targets */ .site-footer { text-align: center; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-brand img { margin-inline: auto; height: 60px; } .footer-word { font-size: 40px; margin-top: 18px; } .site-footer h3 { margin-bottom: 16px; } .footer-col { justify-items: center; gap: 6px; font-size: 15px; } .footer-col a { padding: 6px 4px; } .footer-col p { max-width: 34ch; margin-inline: auto; } .socials { justify-content: center; } .footer-bottom { justify-content: center; text-align: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 40px; } /* Home + project-page cards: address fits, arrow smaller */ .project span { font-size: 14px; padding: 44px 12px 12px; } .project:has(.ptile-go) span:not(.ptile-go) { padding-right: 52px; } .project span.ptile-go { width: 34px; height: 34px; right: 10px; bottom: 10px; } .project span.ptile-go svg { width: 16px; height: 16px; } /* Portfolio: two project tiles per row instead of one tall column */ .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ptile-name { left: 12px; right: 48px; bottom: 12px; font-size: 13px; } .ptile-go { width: 32px; height: 32px; right: 10px; bottom: 10px; border-radius: 5px; } .ptile-go svg { width: 15px; height: 15px; } /* photo category tabs: one swipeable row instead of three wrapped rows */ .pf-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--inner)); padding: 2px var(--inner); scroll-padding-inline: var(--inner); } .pf-tabs::-webkit-scrollbar { display: none; } .pf-tabs button { flex: 0 0 auto; padding: 11px 20px; } /* reels: swipe sideways instead of three full-height videos stacked */ .reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; margin-inline: calc(-1 * var(--inner)); padding-inline: var(--inner); scroll-padding-inline: var(--inner); } .reels::-webkit-scrollbar { display: none; } .reel { scroll-snap-align: start; } /* pricing: running total pinned to the bottom of the screen while picking */ .calc-bar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: #111318; color: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.28); transform: translateY(140%); transition: transform .3s ease; } .calc-bar.is-on { transform: none; } .calc-bar b { font-size: 20px; font-weight: 600; } .calc-bar small { display: block; font-size: 12px; opacity: .7; } .calc-bar button { border: 0; border-radius: 8px; padding: 11px 16px; background: #fff; color: #111318; font: inherit; font-size: 14px; font-weight: 500; } } @media (min-width: 701px) { .calc-bar { display: none; } } /* small label on virtually staged photos and concept renderings */ .ps-slide, .shot, .strip-item { position: relative; } .strip-item { display: block; flex: 0 0 auto; } .ph-tag { position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 99px; background: rgba(10,12,16,.68); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.3; pointer-events: none; } .ps-slide .ph-tag { left: 14px; bottom: 14px; font-size: 13px; } .lightbox .lb-tag { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 13px; } .lightbox .lb-tag[hidden] { display: none; } .tcard-cover { filter: brightness(.42) saturate(.9); }