/* ========================================================================== VICTORY RENTALS — victoryrentalscincy.com Design system: ink navy + brass, Fraunces display + Inter text. ========================================================================== */ :root { /* Palette */ --ink: #101d2e; --ink-2: #17263b; --navy: #132238; --navy-soft: #21344d; --brass: #c69a4c; --brass-lt: #d9b978; --brass-dk: #8a6820; /* darkened for WCAG AA on cream/white small text */ --paper: #faf7f1; --paper-2: #f2ece1; --cream-line: #e7ddcb; --text: #20293a; --text-soft: #566172; --text-mute: #5f6979; /* darkened for WCAG AA on light backgrounds */ --white: #ffffff; --line: #e6e2d9; /* Type */ --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Rhythm */ --wrap: 1180px; --gap: clamp(1rem, 3vw, 2rem); --sec-y: clamp(4rem, 9vw, 8rem); --radius: 16px; --radius-lg: 26px; --shadow-sm: 0 2px 10px rgba(16,29,46,.06); --shadow: 0 18px 50px -22px rgba(16,29,46,.35); --shadow-lg: 0 40px 80px -30px rgba(16,29,46,.45); --ease: cubic-bezier(.2,.7,.2,1); } /* -------------------------------------------------------------------------- */ /* Reset / base */ /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip on the root clips the off-screen (position:fixed) mobile nav drawer so its closed, translated-off-screen state can't create horizontal page scroll. clip (vs hidden) keeps the sticky header working and doesn't make a scroll container. body's overflow-x:hidden can't reach a fixed descendant, so the clip has to live here. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--paper); line-height: 1.65; font-size: 1.02rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--navy); } h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 600; } h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); } h3 { font-size: 1.28rem; } p { margin: 0 0 1rem; } ul { margin: 0; padding: 0; } .wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; } .ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.16em; fill: none; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; } .eyebrow { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-dk); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brass); display: inline-block; } .eyebrow-light { color: var(--brass-lt); } .lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text-soft); max-width: 42ch; } /* -------------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------------- */ .btn { --btn-fg: #fff; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-weight: 600; font-size: .98rem; padding: .8rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .ic { width: 1.1em; height: 1.1em; } .btn-lg { padding: 1rem 1.7rem; font-size: 1.03rem; } .btn-block { width: 100%; justify-content: center; } .btn-primary { background: var(--brass); color: #23180a; border-color: var(--brass); box-shadow: 0 12px 26px -12px rgba(198,154,76,.8); } .btn-primary:hover { background: var(--brass-lt); box-shadow: 0 18px 34px -12px rgba(198,154,76,.9); } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } .btn-call { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); } .btn-call:hover { background: rgba(255,255,255,.16); } .btn-outline { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-outline:hover { border-color: var(--brass); color: var(--brass-dk); } /* -------------------------------------------------------------------------- */ /* Header */ /* -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; } /* Blur/background lives on a pseudo-element so the header itself never becomes the containing block for the fixed mobile nav panel (which would collapse it to the header's height). */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(16,29,46,0); transition: background .3s var(--ease), box-shadow .3s, backdrop-filter .3s; } .site-header.scrolled::before { background: rgba(16,29,46,.9); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,0,0,.6); } .header-inner { display: flex; align-items: center; gap: 1.2rem; padding: 1.05rem 0; } .site-header.scrolled .header-inner { padding: .7rem 0; } .header-inner { transition: padding .3s var(--ease); } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; } .brand-mark { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: #23180a; background: linear-gradient(145deg, var(--brass-lt), var(--brass-dk)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -8px rgba(198,154,76,.9); letter-spacing: .02em; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.24rem; color: #fff; } .brand-sub { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-lt); } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; padding: .3rem 0; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--brass); transition: width .25s var(--ease); } .nav a:hover, .nav a:focus-visible { color: #fff; } .nav a:hover::after { width: 100%; } .header-cta { margin-left: .4rem; } .nav-toggle { display: none; } /* Mobile-only sticky call/message bar (enabled in the <=780px media query) */ .mobile-cta { display: none; } /* -------------------------------------------------------------------------- */ /* Hero */ /* -------------------------------------------------------------------------- */ .hero { position: relative; color: #fff; isolation: isolate; margin-top: -84px; padding-top: 84px; } .hero-bg { position: absolute; inset: 0; z-index: -2; background: #0c1626; } .hero-bg::before { content: ""; position: absolute; inset: 0; background-image: url("../images/hero.jpg"); background-size: cover; background-position: center 32%; /* Parallax: main.js drives --para on scroll. Oversized so the drift never shows an edge; without JS it's simply a static photo. */ transform: translate3d(0, calc(var(--para, 0) * 1px), 0) scale(1.12); will-change: transform; } /* Scrim: darker on the left where the copy sits, so the building still reads on the right while white text stays legible. */ .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,16,27,.92) 0%, rgba(9,16,27,.66) 42%, rgba(9,16,27,.25) 100%), linear-gradient(180deg, rgba(9,16,27,.25) 0%, rgba(9,16,27,.55) 100%); } .hero-inner { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem); max-width: 60ch; /* Counter-drift against the photo for a little depth. */ transform: translate3d(0, calc(var(--para, 0) * -0.35px), 0); } .hero-title { color: #fff; margin-bottom: 1.3rem; } .hero-title .accent { color: var(--brass-lt); } .hero-sub { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: rgba(255,255,255,.86); max-width: 54ch; margin-bottom: 2rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.4rem; } .hero-trust { display: flex; flex-wrap: wrap; gap: .7rem .8rem; list-style: none; } /* Frosted-glass pills over the hero photo. */ .hero-trust li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: rgba(255,255,255,.88); padding: .48rem .95rem; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -18px rgba(0,0,0,.55); } .hero-trust .ic { color: var(--brass-lt); width: 1.05em; height: 1.05em; } /* -------------------------------------------------------------------------- */ /* Stats band */ /* -------------------------------------------------------------------------- */ .stats { background: var(--navy); color: #fff; border-top: 1px solid rgba(255,255,255,.06); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: rgba(255,255,255,.08); } .stat { background: var(--navy); padding: 1.8rem 1.4rem; text-align: center; } .stat-v { font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 600; color: var(--brass-lt); line-height: 1; font-variant-numeric: tabular-nums; } .stat-l { font-size: .9rem; color: rgba(255,255,255,.72); margin-top: .5rem; } /* -------------------------------------------------------------------------- */ /* Sections */ /* -------------------------------------------------------------------------- */ .section { padding: var(--sec-y) 0; } .section-tint { background: linear-gradient(180deg, var(--paper), var(--paper-2)); } .section-dark { background: linear-gradient(165deg, #16283f, #101d2e); color: #fff; } .section-dark h2 { color: #fff; } .section-dark .lede { color: rgba(255,255,255,.8); } .section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); } .section-head h2 { margin-bottom: .7rem; } /* About */ .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .about-copy p { color: var(--text-soft); max-width: 58ch; } .about-copy h2 { max-width: 16ch; } .signature { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); margin-top: 1.6rem; line-height: 1.3; } .signature span { display: block; font-family: var(--sans); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-dk); margin-top: .2rem; } .photo-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy); } .photo-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; } .photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .photo-frame img.img-missing { display: none; } .about-photo { position: relative; } .about-photo::before { content: ""; position: absolute; inset: auto -18px -18px auto; width: 62%; height: 62%; border: 2px solid var(--brass); border-radius: var(--radius-lg); z-index: -1; } /* Branded photo fallback (used until real photos are dropped in) */ .photo-fallback, .prop-fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(120% 90% at 50% -10%, rgba(198,154,76,.22), transparent 60%), linear-gradient(150deg, #1c3149, #101d2e); color: rgba(255,255,255,.9); } .photo-fallback::before, .prop-fallback::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 26px 26px; opacity: .6; } .ph-mark { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--brass-lt); position: relative; letter-spacing: .04em; } .ph-cap { display: block; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4rem; position: relative; } /* -------------------------------------------------------------------------- */ /* Portfolio */ /* -------------------------------------------------------------------------- */ .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); } .prop-card { position: relative; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); display: flex; flex-direction: column; } .prop-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .prop-card.flagship { grid-column: 1 / -1; } .prop-card.flagship .prop-media { aspect-ratio: 16 / 8.5; } .prop-media { position: relative; width: 100%; aspect-ratio: 3 / 2; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; background: var(--navy); display: block; color: inherit; font: inherit; } .prop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .6s var(--ease); } .prop-card:hover .prop-img { transform: scale(1.05); } .prop-img.img-missing { display: none; } .prop-media .ph-mark { font-size: 2rem; } .prop-badge { position: absolute; top: .9rem; left: .9rem; z-index: 3; background: var(--brass); color: #23180a; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .34rem .7rem; border-radius: 999px; } .prop-view { position: absolute; bottom: .9rem; right: .9rem; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; background: rgba(16,29,46,.72); color: #fff; font-size: .82rem; font-weight: 600; padding: .45rem .85rem; border-radius: 999px; backdrop-filter: blur(4px); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; } .prop-media:hover .prop-view, .prop-media:focus-visible .prop-view { opacity: 1; transform: translateY(0); } .prop-body { padding: 1.4rem 1.5rem 1.6rem; } .prop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .prop-head h3 { margin: 0; } .prop-area { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--brass-dk); font-weight: 600; } .prop-area .ic { width: 1em; height: 1em; } .prop-street { font-size: .86rem; color: var(--text-mute); letter-spacing: .01em; margin: .35rem 0 .8rem; } .prop-blurb { color: var(--text-soft); margin: 0; font-size: .98rem; } /* -------------------------------------------------------------------------- */ /* "Step inside" gallery */ /* -------------------------------------------------------------------------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; } .gallery-item { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; border-radius: 14px; background: var(--navy); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); } .gallery-item.gone { display: none; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease); } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); } .gallery-item::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16,29,46,.08); pointer-events: none; } .gallery-item:first-child { grid-column: span 2; grid-row: span 2; } @media (max-width: 780px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-item:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-item:first-child { aspect-ratio: 4 / 3; } } /* -------------------------------------------------------------------------- */ /* Cards (why sell) */ /* -------------------------------------------------------------------------- */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cream-line); } .card-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem; background: linear-gradient(150deg, #fbf3e2, #f3e2c3); color: var(--brass-dk); box-shadow: inset 0 0 0 1px rgba(198,154,76,.25); } .card-ic .ic { width: 1.5em; height: 1.5em; } .card h3 { margin-bottom: .5rem; color: var(--navy); } .card p { margin: 0; color: var(--text-soft); font-size: .98rem; } .why-note { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 60ch; text-align: center; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--navy); line-height: 1.45; } /* -------------------------------------------------------------------------- */ /* Steps */ /* -------------------------------------------------------------------------- */ .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); counter-reset: step; } .steps li { position: relative; padding-top: 1rem; } .steps li::before { content: ""; position: absolute; top: 30px; left: 56px; right: -1rem; height: 2px; background: linear-gradient(90deg, rgba(198,154,76,.5), rgba(198,154,76,0)); } .steps li:last-child::before { display: none; } .step-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--brass-lt); background: rgba(255,255,255,.05); border: 1.5px solid rgba(198,154,76,.5); margin-bottom: 1.1rem; } .steps h3 { color: #fff; margin-bottom: .4rem; } .steps p { color: rgba(255,255,255,.76); font-size: .96rem; margin: 0; } .how-cta { margin-top: clamp(2.4rem, 5vw, 3.5rem); } /* -------------------------------------------------------------------------- */ /* Buy box */ /* -------------------------------------------------------------------------- */ .buybox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .buybox-note { color: var(--text-soft); font-style: italic; border-left: 3px solid var(--brass); padding-left: 1rem; margin-top: 1.4rem; } .buybox-list { list-style: none; display: grid; gap: .9rem; } .buybox-list li { display: flex; align-items: flex-start; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.05rem 1.25rem; box-shadow: var(--shadow-sm); font-size: 1rem; color: var(--text); } .buybox-list .ic { color: var(--brass-dk); flex: none; margin-top: .15em; width: 1.2em; height: 1.2em; } /* Tenants-in-place list: same card look, two columns on desktop. */ .tenant-list { grid-template-columns: repeat(2, 1fr); } @media (max-width: 780px) { .tenant-list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- */ /* Stay + Instagram */ /* -------------------------------------------------------------------------- */ .stay-inner { text-align: center; } .stay-inner .section-head { margin-inline: auto; } .stay-inner .lede { margin-inline: auto; } /* Group-stay use pills (homepage Stay section) */ .stay-uses { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .8rem; margin: -0.6rem auto 0; max-width: 62ch; } .stay-uses li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--text); padding: .5rem 1.05rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .stay-uses .ic { color: var(--brass-dk); width: 1.05em; height: 1.05em; } .stay-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.2rem; text-align: left; } .stay-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .stay-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .stay-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); display: block; } .stay-card:hover .stay-media .prop-img { transform: scale(1.04); } .stay-body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } /* (old stay-chip / stay-link rules removed: superseded by the two-button card) */ .stay-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--navy); margin: 0; } .stay-note { font-size: .88rem; color: var(--text-soft); margin: 0 0 .2rem; } .stay-btns { display: flex; gap: .6rem; margin-top: auto; padding-top: .7rem; } .stay-btns .btn { flex: 1; } .btn-sm { padding: .58rem 1rem; font-size: .9rem; } .insta { text-align: center; } .insta-inner { max-width: 54ch; margin-inline: auto; } .insta-ic { margin: 0 auto 1.2rem; } .insta .lede { margin: 0 auto 1.6rem; } /* -------------------------------------------------------------------------- */ /* FAQ */ /* -------------------------------------------------------------------------- */ .faq-wrap { max-width: 820px; margin-inline: auto; } .faq-list details { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: .8rem; box-shadow: var(--shadow-sm); overflow: hidden; } .faq-list summary { list-style: none; cursor: pointer; padding: 1.15rem 1.4rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-list summary::-webkit-details-marker { display: none; } .faq-plus { position: relative; width: 18px; height: 18px; flex: none; } .faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--brass-dk); border-radius: 2px; transition: transform .25s var(--ease); } .faq-plus::before { top: 8px; left: 0; width: 18px; height: 2px; } .faq-plus::after { left: 8px; top: 0; width: 2px; height: 18px; } .faq-list details[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; } .faq-a { padding: 0 1.4rem 1.3rem; } .faq-a p { margin: 0; color: var(--text-soft); } /* -------------------------------------------------------------------------- */ /* Testimonials */ /* -------------------------------------------------------------------------- */ .testimonial-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .testimonial { margin: 0; padding: 1.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .testimonial-mark { display: inline-flex; color: var(--brass); margin-bottom: .3rem; } .testimonial-mark .ic { width: 1.9em; height: 1.9em; } .testimonial blockquote { margin: 0; } .testimonial blockquote p { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--navy); } .testimonial figcaption { margin-top: 1rem; font-weight: 600; font-size: .9rem; color: var(--brass-dk); } /* -------------------------------------------------------------------------- */ /* Contact */ /* -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-methods { display: grid; gap: .8rem; margin-top: 2rem; } .contact-method { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1rem 1.2rem; transition: background .2s, border-color .2s, transform .2s; } a.contact-method:hover { background: rgba(255,255,255,.1); border-color: rgba(198,154,76,.6); transform: translateY(-2px); } .contact-method.static { cursor: default; } .cm-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(198,154,76,.16); color: var(--brass-lt); } .cm-label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); } .cm-value { display: block; font-weight: 600; font-size: 1.05rem; } .contact-form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-lg); color: var(--text); } .form-intro { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); margin-bottom: 1.3rem; } .field { margin-bottom: 1rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; } .field input, .field textarea { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--text); padding: .8rem .95rem; border: 1.5px solid var(--line); border-radius: 11px; background: var(--paper); transition: border-color .2s, box-shadow .2s, background .2s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: #fff; box-shadow: 0 0 0 4px rgba(198,154,76,.16); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3421f; box-shadow: 0 0 0 4px rgba(179,66,31,.14); } .field textarea { resize: vertical; min-height: 96px; } .field-hint { font-size: .85rem; color: var(--text-soft); margin: -.2rem 0 .9rem; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin: .9rem 0 0; font-size: .95rem; font-weight: 600; min-height: 1.2em; } .form-status.ok { color: #1f7a4d; } .form-status.err { color: #b3421f; } .form-fineprint { font-size: .85rem; color: var(--text-mute); margin: 1rem 0 0; } .form-fineprint a { color: var(--brass-dk); font-weight: 600; } /* -------------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------------- */ .site-footer { background: #0c1626; color: rgba(255,255,255,.72); padding-top: clamp(3rem, 6vw, 5rem); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; } .brand-footer .brand-name { font-size: 1.3rem; } .footer-tag { max-width: 38ch; margin: 1.1rem 0 1.4rem; font-size: .96rem; } .footer-social { display: flex; gap: .6rem; } .footer-social a { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: background .2s, border-color .2s, transform .2s; } .footer-social a:hover { background: rgba(198,154,76,.2); border-color: var(--brass); transform: translateY(-2px); } .footer-social .ic { width: 1.25em; height: 1.25em; } .footer-nav, .footer-contact { display: flex; flex-direction: column; } .site-footer h3 { color: #fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem; } .footer-nav a, .footer-contact a { color: rgba(255,255,255,.72); text-decoration: none; padding: .3rem 0; transition: color .2s; } .footer-nav a:hover, .footer-contact a:hover { color: var(--brass-lt); } .footer-big { font-family: var(--serif); font-size: 1.5rem; color: #fff !important; margin-bottom: .3rem; } .footer-area { font-size: .9rem; margin-top: .8rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: center; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .84rem; color: rgba(255,255,255,.5); } .footer-bottom p { margin: 0; } /* -------------------------------------------------------------------------- */ /* Lightbox */ /* -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(8,14,24,.94); backdrop-filter: blur(6px); padding: clamp(1rem, 4vw, 3rem); } .lightbox.open { display: grid; } .lb-stage { margin: 0; max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column; align-items: center; gap: .8rem; } .lb-stage img { max-width: 92vw; max-height: 78vh; border-radius: 12px; box-shadow: var(--shadow-lg); object-fit: contain; } .lb-stage figcaption { color: rgba(255,255,255,.8); font-size: .95rem; letter-spacing: .02em; } .lb-close { position: absolute; top: 1.1rem; right: 1.3rem; background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; opacity: .8; } .lb-close:hover { opacity: 1; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 54px; height: 54px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; display: grid; place-items: center; transition: background .2s; } .lb-nav:hover { background: rgba(255,255,255,.22); } .lb-prev { left: clamp(.6rem, 3vw, 2rem); } .lb-next { right: clamp(.6rem, 3vw, 2rem); } /* -------------------------------------------------------------------------- */ /* Reveal on scroll */ /* -------------------------------------------------------------------------- */ /* --rvd is a per-element stagger delay set by main.js, so cards in the same row cascade in rather than all landing at once. main.js removes the reveal classes after the entrance so hover transitions get the element back. */ .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rvd, 0s); } /* Only hide pre-animation when JS is present to reveal it, so core content stays visible if JavaScript is disabled or fails. The gate is set by an inline head script before first paint (no flash of hidden). */ html.js .reveal { opacity: 0; transform: translateY(24px); } .reveal.in { opacity: 1; transform: none; } /* The brass dash above each section header draws in with the reveal. */ .section-head.reveal .eyebrow::before { width: 0; transition: width .6s var(--ease) .35s; } .section-head.reveal.in .eyebrow::before { width: 26px; } /* -------------------------------------------------------------------------- */ /* Card tilt + sheen (main.js drives --rx/--ry/--mx/--my on desktop pointers) */ /* -------------------------------------------------------------------------- */ .prop-card::after, .stay-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 58%); opacity: 0; transition: opacity .35s var(--ease); } @media (hover: hover) and (pointer: fine) { .prop-card.tilt, .stay-card.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); transition: transform .16s ease-out, box-shadow .35s var(--ease); box-shadow: var(--shadow); will-change: transform; } .prop-card.tilt::after, .stay-card.tilt::after { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .section-head.reveal .eyebrow::before { width: 26px; transition: none; } .prop-card::after, .stay-card::after { display: none; } .btn, .card, .prop-card, .prop-img { transition: none !important; } } /* -------------------------------------------------------------------------- */ /* Responsive */ /* -------------------------------------------------------------------------- */ @media (max-width: 960px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .steps li::before { display: none; } .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 440px; } .buybox-grid, .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 780px) { .header-cta { display: none; } .nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .4rem; background: #101d2e; padding: 6rem 1.8rem 2rem; box-shadow: -20px 0 60px -20px rgba(0,0,0,.6); transform: translateX(100%); transition: transform .35s var(--ease); z-index: 90; } .nav.open { transform: translateX(0); } .nav a { font-size: 1.15rem; padding: .7rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); } .nav a::after { display: none; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; cursor: pointer; z-index: 95; margin-left: auto; } .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.nav-open { overflow: hidden; } .mobile-cta { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); /* Translucent enough that the page glows through the frosted glass. */ background: rgba(16,29,46,.82); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 -12px 30px -12px rgba(0,0,0,.5); } .mobile-cta .btn { flex: 1; justify-content: center; padding: .85rem 1rem; } body { padding-bottom: 76px; } /* clear the sticky bar so it never covers the footer */ } @media (max-width: 680px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: 1fr; } .cards-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-cta .btn { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- */ /* Print */ /* -------------------------------------------------------------------------- */ @media print { .site-header, .nav-toggle, .lightbox, .hero-cta, .contact-form, .footer-social, .mobile-cta { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } body { color: #000; background: #fff; } .section-dark, .stats, .hero { background: #fff !important; color: #000 !important; } .section-dark h2, .hero-title { color: #000 !important; } a { color: #000; text-decoration: underline; } } /* -------------------------------------------------------------------------- */ /* Codex production fixes 2026-07-22 (audit P1/P2) */ /* -------------------------------------------------------------------------- */ /* P1 — the featured gallery tile kept `grid-column: span 2` after the grid collapsed to one column at <=480px, forcing an implicit near-zero-width second track and shrinking three cards to ~0px. Reset it to a single cell. */ @media (max-width: 480px) { .gallery-item:first-child { grid-column: 1; grid-row: auto; width: 100%; aspect-ratio: 4 / 3; } } /* P1 — long CTA labels (e.g. "See group stays in East Walnut Hills") kept white-space:nowrap and pushed the document past the viewport at 320-375px. Let large buttons wrap and stay inside their container on small screens. */ @media (max-width: 480px) { .btn-lg { white-space: normal; max-width: 100%; } /* The fixed bottom CTA bar's two nowrap buttons couldn't shrink below their content width, stretching the document past a 320px viewport. Let them shrink and wrap so the bar stays within the screen. */ .mobile-cta .btn { min-width: 0; white-space: normal; } } /* P1 — let the contact grid and its long email/phone values shrink instead of forcing horizontal overflow on a 320px phone. */ .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .contact-grid > *, .contact-copy, .contact-form, .contact-method, .contact-method > * { min-width: 0; } .cm-value, .contact-method a { overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } } /* P2 — a closed mobile drawer is off-screen visually but its links were still tabbable and exposed to assistive tech. main.js now sets aria-hidden + inert on the closed drawer (inert removes it from tab order, the a11y tree, and pointer events). A pointer-events fallback covers the rare pre-inert browser without cutting the drawer's slide-out animation. */ @media (max-width: 780px) { .nav[aria-hidden="true"] { pointer-events: none; } .nav[aria-hidden="false"] { pointer-events: auto; } }