/* ================================================================ LISTING DETAIL PAGE — PAGE-SPECIFIC STYLES Location: /home/kitchenbrand/public_html/T-Belle/styles/listing.css Requires global.css first. --success (#1D6A3A) is declared inline in the page as it drives the Active status pill and I'm Interested button. Variable map (old → new): --tahoe-blue → var(--secondary) [global] --tahoe-blue-lt → var(--secondary-light) [global] --gold → var(--accent) [global] --char → var(--charcoal) [global] --snow → var(--warm-white) [global] --pine/stone/stone-dk → page tokens --r-sm/md/lg/xl → var(--radius-*) [global] --shadow-card/lift → var(--shadow-card/lift) [global] --trans → var(--trans) [global] DM Sans → var(--sans) = Jost [global] ================================================================ */ /* ================================================================ PAGE-SPECIFIC TOKENS ================================================================ */ :root { --pine: #1D4032; --stone: #D6D0C4; --stone-dk: #9A9488; --gold: var(--accent); } body { background: var(--white); color: var(--charcoal); } /* ================================================================ BREADCRUMB ================================================================ */ .breadcrumb { background: var(--warm-white); border-bottom: 1px solid var(--stone); padding: 12px 40px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--stone-dk); flex-wrap: wrap; } .breadcrumb a { color: var(--secondary); transition: color var(--trans); } .breadcrumb a:hover { color: var(--secondary-light); } .breadcrumb .sep { opacity: .5; } .breadcrumb .current { color: var(--charcoal); font-weight: 500; } /* ================================================================ PHOTO CAROUSEL ================================================================ */ .carousel-wrap { position: relative; background: var(--charcoal); overflow: hidden; touch-action: pan-y; } /* touch-action: pan-y lets page scroll vertically; horizontal is handled by JS */ .carousel-track { display: flex; transition: transform .4s cubic-bezier(.4,0,.2,1); will-change: transform; touch-action: none; user-select: none; -webkit-user-select: none; } /* Images must NOT absorb touch or the listeners on the wrap never fire on iOS */ .carousel-slide img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; } .carousel-slide { flex: 0 0 100%; position: relative; } .carousel-slide img { width: 100%; height: 68vw; max-height: 580px; object-fit: cover; display: block; } .carousel-slide .slide-ph { width: 100%; height: 68vw; max-height: 580px; background: linear-gradient(148deg,#0d2d47,#1b4f72); display: flex; align-items: center; justify-content: center; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: none; color: var(--white); width: 44px; height: 44px; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background var(--trans); z-index: 10; cursor: pointer; } .carousel-nav:hover { background: rgba(255,255,255,.32); } .carousel-prev { left: 16px; } .carousel-next { right: 16px; } .carousel-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(10,18,26,.65); backdrop-filter: blur(8px); color: var(--white); font-size: 12px; padding: 5px 14px; border-radius: 999px; letter-spacing: .06em; z-index: 10; } .carousel-dots { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 10; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; transition: background var(--trans), transform var(--trans); } .carousel-dot.active { background: var(--white); transform: scale(1.3); } .listing-badge { position: absolute; top: 18px; left: 18px; z-index: 10; background: var(--accent); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; } .gallery-expand-btn { position: absolute; bottom: 14px; right: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); color: var(--charcoal); border: none; border-radius: var(--radius-md); padding: 8px 14px; font-size: 12px; font-weight: 500; font-family: var(--sans); box-shadow: 0 2px 12px rgba(0,0,0,.25); transition: background var(--trans); cursor: pointer; } .gallery-expand-btn:hover { background: var(--white); } @media (min-width: 900px) { .carousel-wrap { max-height: 560px; } .carousel-track { height: 560px; } .carousel-slide img, .carousel-slide .slide-ph { height: 560px; max-height: 560px; } } /* ================================================================ LIGHTBOX ================================================================ */ #lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,18,26,.96); flex-direction: column; align-items: center; justify-content: center; } #lightbox.open { display: flex; } .lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--white); font-size: 36px; line-height: 1; opacity: .7; transition: opacity var(--trans); cursor: pointer; } .lb-close:hover { opacity: 1; } .lb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: var(--white); width: 52px; height: 52px; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; transition: background var(--trans); cursor: pointer; } .lb-nav-btn:hover { background: rgba(255,255,255,.24); } .lb-prev { left: 20px; } .lb-next { right: 20px; } .lb-main { max-width: 90vw; max-height: 75vh; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .lb-main img { max-width: 100%; max-height: 75vh; object-fit: contain; } .lb-main .lb-ph { width: 900px; max-width: 90vw; height: 65vh; border-radius: var(--radius-lg); } .lb-info { position: absolute; bottom: 72px; color: rgba(255,255,255,.55); font-size: 13px; } .lb-thumbs { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; padding: 0 16px; overflow-x: auto; justify-content: center; } .lb-thumb { width: 62px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; opacity: .45; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; transition: opacity var(--trans), border-color var(--trans); } .lb-thumb.active, .lb-thumb:hover { opacity: 1; border-color: var(--accent); } .lb-thumb-ph { width: 62px; height: 46px; border-radius: var(--radius-sm); opacity: .45; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; background: var(--secondary); transition: opacity var(--trans), border-color var(--trans); } .lb-thumb-ph.active, .lb-thumb-ph:hover { opacity: 1; border-color: var(--accent); } /* ================================================================ MAIN LAYOUT ================================================================ */ .detail-layout { display: grid; grid-template-columns: 1fr 390px; gap: 0; max-width: 1320px; margin: 0 auto; padding: 0 40px 100px; align-items: start; } .detail-main { padding-right: 52px; padding-top: 44px; } .detail-sidebar { padding-top: 44px; position: sticky; top: calc(var(--header-h) + 16px); } /* ================================================================ PROPERTY HEADER ================================================================ */ .prop-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); margin-bottom: 10px; } .prop-tag::before { content: ''; display: block; width: 22px; height: 1px; background: var(--secondary); } .prop-address { font-family: var(--serif); font-size: clamp(28px,3.5vw,44px); font-weight: 300; color: var(--charcoal); line-height: 1.08; margin-bottom: 6px; } .prop-city { font-size: 14px; color: var(--stone-dk); letter-spacing: .04em; margin-bottom: 20px; } .prop-price-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; } .prop-price { font-family: var(--serif); font-size: 42px; font-weight: 400; color: var(--secondary); line-height: 1; } .prop-price-orig { font-size: 18px; color: var(--stone-dk); text-decoration: line-through; } .prop-mls { font-size: 12px; color: var(--stone-dk); letter-spacing: .06em; } .prop-status { display: inline-flex; align-items: center; gap: 6px; background: rgba(29,106,58,.10); color: var(--success); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(29,106,58,.20); } .status-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.75);} } /* ================================================================ STATS STRIP ================================================================ */ .prop-stats { display: flex; border: 1px solid var(--stone); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 36px; } .prop-stat { flex: 1; padding: 18px 8px; text-align: center; border-right: 1px solid var(--stone); background: var(--warm-white); } .prop-stat:last-child { border-right: none; } .stat-val { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--charcoal); line-height: 1; margin-bottom: 4px; } .stat-lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--stone-dk); } /* ================================================================ DETAIL SECTIONS ================================================================ */ .detail-section { margin-bottom: 48px; } .section-title { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--charcoal); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--stone); } .prop-desc p { font-size: 15px; line-height: 1.82; color: #3d3c38; } .prop-desc p+p { margin-top: 14px; } .read-more-wrap { overflow: hidden; max-height: 120px; transition: max-height .5s ease; } .read-more-wrap.expanded { max-height: 2000px; } .read-more-btn { background: none; border: none; color: var(--secondary); font-size: 13px; font-weight: 500; font-family: var(--sans); padding: 10px 0 0; display: inline-flex; align-items: center; gap: 5px; transition: color var(--trans); cursor: pointer; } .read-more-btn:hover { color: var(--secondary-light); } /* ================================================================ FEATURES GRID ================================================================ */ .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .feature-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--warm-white); } .feature-row:nth-child(odd) { padding-right: 24px; } .feature-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--stone-dk); min-width: 100px; flex-shrink: 0; } .feature-value { font-size: 14px; font-weight: 500; color: var(--charcoal); } /* ================================================================ AMENITY TAGS ================================================================ */ .amenity-tags { display: flex; flex-wrap: wrap; gap: 8px; } .amenity-tag { background: var(--warm-white); border: 1px solid var(--stone); color: var(--charcoal); font-size: 12px; padding: 5px 13px; border-radius: 999px; } /* ================================================================ ACCORDION ================================================================ */ .accordion-item { border: 1px solid var(--stone); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; } .accordion-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--warm-white); cursor: pointer; font-size: 14px; font-weight: 500; font-family: var(--sans); transition: background var(--trans); border: none; width: 100%; text-align: left; } .accordion-head:hover { background: #ede9e2; } .accordion-head svg { transition: transform var(--trans); flex-shrink: 0; } .accordion-head.open svg { transform: rotate(180deg); } .accordion-body { display: none; padding: 16px 18px; border-top: 1px solid var(--stone); } .accordion-body.open { display: block; } .accordion-tags { display: flex; flex-wrap: wrap; gap: 7px; } .accordion-tag { background: var(--white); border: 1px solid var(--stone); font-size: 12px; padding: 4px 11px; border-radius: 999px; color: var(--charcoal); } /* ================================================================ MAP SECTION ================================================================ */ .map-section-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--warm-white); border: 1px solid var(--stone); color: var(--secondary); font-size: 13px; font-weight: 500; font-family: var(--sans); padding: 10px 18px; border-radius: var(--radius-md); margin-bottom: 14px; transition: all var(--trans); cursor: pointer; } .map-section-btn:hover { background: var(--white); border-color: var(--secondary); } #map-container { display: none; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stone); } #map-container.open { display: block; } #mapbox-map { width: 100%; height: 360px; } .map-no-coords { height: 220px; background: linear-gradient(135deg,#dae8f0,#c8dce8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--stone-dk); } /* ================================================================ SIMILAR PROPERTIES ================================================================ */ .similar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .sim-card { display: block; border: 1px solid var(--stone); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--trans), box-shadow var(--trans); } .sim-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .sim-img { height: 130px; overflow: hidden; background: linear-gradient(135deg, var(--secondary), var(--secondary-light)); } .sim-img img { width: 100%; height: 100%; object-fit: cover; } .sim-body { padding: 14px 16px; } .sim-price { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--secondary); } .sim-addr { font-size: 12px; color: var(--stone-dk); margin: 2px 0 8px; } .sim-meta { font-size: 11px; color: var(--stone-dk); } /* ================================================================ IDX DISCLOSURE ================================================================ */ .idx-disclosure { background: var(--warm-white); border: 1px solid var(--stone); border-radius: var(--radius-md); padding: 20px 24px; font-size: 11px; line-height: 1.75; color: var(--stone-dk); } .idx-disclosure strong { color: var(--charcoal); font-weight: 500; } /* ================================================================ SIDEBAR ================================================================ */ .sidebar-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; } .cta-card { background: var(--secondary); border-color: var(--secondary); } .cta-inner { padding: 28px 28px 24px; } .cta-price { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--white); line-height: 1; margin-bottom: 4px; } .cta-addr { font-size: 13px; color: rgba(255,255,255,.58); margin-bottom: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; font-family: var(--sans); border: none; transition: all var(--trans); margin-bottom: 10px; cursor: pointer; } .cta-primary { background: var(--accent); color: var(--white); } .cta-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,146,58,.40); } .cta-secondary { background: rgba(255,255,255,.13); color: var(--white); border: 1px solid rgba(255,255,255,.25); } .cta-secondary:hover { background: rgba(255,255,255,.22); } .cta-ghost { background: transparent; color: rgba(255,255,255,.70); border: 1px solid rgba(255,255,255,.15); font-size: 13px; padding: 11px; } .cta-ghost:hover { color: var(--white); background: rgba(255,255,255,.09); } .cta-divider { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 18px 0; } .cta-trust { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.42); } /* I'm Interested pulse button */ .im-interested-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; font-family: var(--sans); border: none; background: linear-gradient(135deg,#1a7a3c,#1D6A3A); color: var(--white); transition: all var(--trans); position: relative; overflow: hidden; margin-bottom: 10px; cursor: pointer; } .im-interested-btn::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background var(--trans); } .im-interested-btn:hover::before { background: rgba(255,255,255,.08); } .im-interested-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(29,106,58,.45); } .pulse-ring { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; position: relative; flex-shrink: 0; } .pulse-ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #4ade80; animation: ringPulse 1.5s ease-out infinite; } @keyframes ringPulse { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(2.2);opacity:0;} } /* Open house */ .open-house-wrap { padding: 22px 24px; } .oh-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 14px; } .oh-event { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--warm-white); } .oh-event:last-of-type { border-bottom: none; } .oh-cal { background: var(--secondary); color: var(--white); border-radius: var(--radius-md); padding: 8px 12px; text-align: center; min-width: 52px; flex-shrink: 0; } .oh-month { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; } .oh-day { font-family: var(--serif); font-size: 28px; font-weight: 300; line-height: 1; } .oh-time { font-size: 13px; font-weight: 500; } .oh-note { font-size: 12px; color: var(--stone-dk); margin-top: 2px; } .oh-register { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; margin-top: 14px; background: var(--secondary); color: var(--white); border: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: background var(--trans); } .oh-register:hover { background: var(--secondary-light); } /* Contact form */ .contact-card-head { padding: 22px 24px 0; } .contact-card-head h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--charcoal); } .contact-card-head p { font-size: 13px; color: var(--stone-dk); margin-top: 4px; } .contact-form { padding: 16px 24px 24px; } .form-row { margin-bottom: 11px; } .form-row label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 4px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--stone); border-radius: var(--radius-md); font-size: 14px; color: var(--charcoal); background: var(--white); font-family: var(--sans); transition: border-color var(--trans), box-shadow var(--trans); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,77,122,.10); } .form-row textarea { resize: vertical; min-height: 78px; } .form-submit { width: 100%; padding: 14px; background: var(--secondary); color: var(--white); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background var(--trans), transform var(--trans); } .form-submit:hover { background: var(--secondary-light); transform: translateY(-1px); } /* Agent card */ .agent-wrap { padding: 22px 24px; } .agent-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .agent-avatar { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--secondary), var(--pine)); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--white); } .agent-name { font-weight: 500; font-size: 15px; margin-bottom: 2px; } .agent-title { font-size: 12px; color: var(--stone-dk); margin-bottom: 2px; } .agent-dre { font-size: 11px; color: var(--stone-dk); } .agent-links { display: flex; flex-direction: column; gap: 9px; } .agent-link { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--secondary); transition: color var(--trans); } .agent-link:hover { color: var(--secondary-light); } /* Save / share */ .action-row { display: flex; gap: 10px; margin-bottom: 14px; } .action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--warm-white); border: 1px solid var(--stone); border-radius: var(--radius-md); padding: 10px; font-size: 12px; font-family: var(--sans); color: var(--charcoal); transition: all var(--trans); cursor: pointer; } .action-btn:hover { background: var(--white); border-color: var(--secondary); color: var(--secondary); } .action-btn.saved { background: rgba(200,146,58,.08); border-color: var(--accent); color: var(--accent); } /* ================================================================ FLOATING CONVERSION BAR ================================================================ */ #float-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; background: var(--white); border-top: 1px solid var(--stone); padding: 12px 20px 16px; box-shadow: 0 -4px 24px rgba(0,0,0,.10); transform: translateY(100%); transition: transform var(--trans); } #float-bar.visible { transform: translateY(0); } .float-bar-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 12px; } .float-price { font-family: var(--serif); font-size: 24px; color: var(--secondary); white-space: nowrap; } .float-addr { font-size: 12px; color: var(--stone-dk); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .float-btns { display: flex; gap: 8px; flex-shrink: 0; } .float-btn { padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; font-family: var(--sans); border: none; white-space: nowrap; cursor: pointer; transition: all var(--trans); } .float-btn-gold { background: var(--accent); color: var(--white); } .float-btn-gold:hover { background: var(--accent-dark); } .float-btn-blue { background: var(--secondary); color: var(--white); } .float-btn-blue:hover { background: var(--secondary-light); } .float-btn-green { background: #1D6A3A; color: var(--white); } .float-btn-green:hover { background: #1a7a3c; } /* ================================================================ MODALS ================================================================ */ .modal-wrap { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(10,18,26,.75); align-items: center; justify-content: center; padding: 20px; } .modal-wrap.open { display: flex; } .modal { background: var(--white); border-radius: var(--radius-xl); padding: 36px 36px 32px; max-width: 480px; width: 100%; position: relative; box-shadow: var(--shadow-lift); max-height: 90vh; overflow-y: auto; animation: modalIn .25s ease; } @keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);} } .modal-x { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 24px; color: var(--stone-dk); line-height: 1; cursor: pointer; transition: color var(--trans); } .modal-x:hover { color: var(--charcoal); } .modal h2 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin-bottom: 6px; } .modal > p, .modal-body > p { font-size: 14px; color: var(--stone-dk); margin-bottom: 18px; } .modal-confirm { display: none; text-align: center; padding: 20px 0; } .confirm-icon { font-size: 52px; margin-bottom: 12px; } .modal-confirm h3 { font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--charcoal); margin-bottom: 8px; } .modal-confirm p { font-size: 14px; color: var(--stone-dk); } .form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-offer { max-width: 520px; } .offer-header { text-align: center; padding: 0 0 16px; border-bottom: 1px solid var(--stone); margin-bottom: 18px; } .offer-badge { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; } .offer-addr { font-size: 13px; color: var(--stone-dk); margin: 4px 0 0; } .radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } .radio-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border: 2px solid var(--stone); border-radius: 8px; cursor: pointer; transition: all .15s; gap: 6px; } .radio-card:has(input:checked) { border-color: var(--secondary); background: rgba(30,77,122,.06); } .radio-card input { display: none; } .rc-icon { font-size: 20px; } .rc-label { font-size: 12px; color: var(--charcoal); line-height: 1.4; } .offer-trust-row { display: flex; gap: 12px; justify-content: center; padding: 14px 0 10px; flex-wrap: wrap; } .offer-trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--stone-dk); } .form-submit-offer { background: var(--gold); } .form-submit-offer:hover { background: #a07a38; } @media (max-width: 480px) { .form-row-half { grid-template-columns: 1fr; } .radio-cards { grid-template-columns: 1fr; } } /* ================================================================ FOOTER ================================================================ */ footer { background: var(--charcoal); padding: 64px 40px 32px; } .footer-inner { max-width: 1200px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.10); } .footer-brand .logo-main { color: var(--white); font-size: 30px; margin-bottom: 6px; font-family: var(--serif); } .footer-brand .logo-sub { color: rgba(255,255,255,.38); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } .footer-brand p { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.48); line-height: 1.7; max-width: 280px; } .footer-col h4 { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 18px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col a { font-size: 14px; color: rgba(255,255,255,.60); transition: color var(--trans); } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 26px; } .footer-bottom p { font-size: 12px; color: rgba(255,255,255,.28); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1060px) { .detail-layout { grid-template-columns: 1fr; padding: 0 32px 120px; } .detail-main { padding-right: 0; } .detail-sidebar { position: static; } .similar-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .breadcrumb { padding: 10px 20px; } .detail-layout { padding: 0 20px 120px; } .features-grid { grid-template-columns: 1fr; } .feature-row:nth-child(odd) { padding-right: 0; } .similar-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 36px; } .float-bar-inner { flex-wrap: wrap; } .float-addr { display: none; } .float-price { font-size: 20px; } .modal { padding: 28px 24px 24px; } }