/** * Theme stylesheet (this theme does not use the root level style.css) * @package Granite Legacy Homes FarSky Theme 2025 **/ /* WORDPRESS RESET */ @media all { html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{} .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal} .screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} .skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline} .skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto} .visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap} } /* FONTS */ @media all { @font-face { font-family:'Playfair'; src:url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2'), url('../fonts/PlayfairDisplay-Regular.woff') format('woff'); font-weight:100; font-style:normal; font-display:swap; } .mulish { font-family:"Mulish", sans-serif; font-weight:300; font-style:normal; } .mulish-bold, strong { font-family:"Mulish", sans-serif; font-weight:600; font-style:normal; } .mulish-italic, em { font-family:"Mulish", sans-serif; font-weight:300; font-style:italic; } .mulish-bold-italic, strong em, em strong { font-family:"Mulish", sans-serif; font-weight:600; font-style:italic; } body { font-family:"Mulish", sans-serif; font-weight:200; font-style:normal; line-height:1.6; color:#666; background-color:#f1f1f1; } h1, h2, h3, h4 { font-family:'Playfair', serif; font-weight:100; color:#657a91; line-height:1.0em; } h1 { font-size:5em; } h2 { font-size:3.5em; } a { text-decoration:underline; color:inherit; } sup.legal-mark { font-size:0.6em; vertical-align:super; line-height:1; } } /* TEXT COLOR PALETTE */ .black { color:#333; } .white { color:#f1f1f1; } .dusk { color:#e7e0e0;} .grey { color:#666d74; } .blue { color:#657a91; } .umber { color:#ce7a3c; } /* DISPLAY TOOLS */ .clear { float:none; clear:both; } .txt-l, .txt-left { text-align:left; } .txt-r, .txt-right { text-align:right; } .txt-c, .txt-cntr { text-align:center; } .txt-hide { text-indent:-9999px; } .hide { display:none; } .bold-preamble { color:#000; font-size:16px; } .bold-preamble:after { content:' '; padding-right:4px; } a.block-link { text-decoration:inherit; } /* PAGE STRUCTURE */ body { width:100%; max-width:1440px; margin:0 auto; overflow-x:hidden; } main { } .site-buffer { position:relative; margin-top:80px; } .site-no-buffer { position:relative; margin-top:0; } /* HEADER ELEMENTS */ .site-header-container { position:fixed; top:0; z-index:101; width:100%; max-width:1440px; } .main-navigation-bar { width:100%; height:80px; background:transparent; position:relative; } .glh-logo { display:block; height:60px; width:120px; background-color:#666d74bd; border:4px solid #fff;font-size:50px; font-weight:100; text-align:center; line-height:1.05; text-decoration:none; color:#f1f1f1; cursor:pointer; position:absolute; left:10px; top:10px; z-index:500; } .header-search-trigger { cursor:pointer; position:absolute; right:100px; top:10px; text-indent:-9999px; } .primary-menu-open { cursor:pointer; position:absolute; right:10px; top:10px; text-indent:-9999px; } .primary-menu-close { cursor:pointer; position:absolute; right:10px; top:10px; text-indent:-9999px; z-index:500; } .header-search-trigger:focus, .primary-menu-open:focus, .primary-menu-close:focus { outline:2px solid #fff; outline-offset:2px; } .primary-menu { position:absolute; top:80px; width:100%; z-index:500; } .primary-menu { background:#e8e1e0; height:100%; position:fixed; width:100%; z-index:490; opacity:0; clip-path:circle(0% at 100% 0%); transition:opacity 0s linear; top:0;} .primary-menu.active { opacity:1; clip-path:circle(250% at 100% 0%); animation:reveal-circle 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; } .primary-menu.closing { animation:hide-circle 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards; /* Close animation */ } @keyframes reveal-circle { from { opacity:0; clip-path:circle(0% at 100% 0%); } to { opacity:1; clip-path:circle(250% at 100% 0%); }} /*Used for modals as well*/ @keyframes hide-circle { from { opacity:1; clip-path:circle(250% at 100% 0%); } to { opacity:0; clip-path:circle(0% at 100% 0%); }} /*Used for modals as well*/ .desktop-nav { width:100%; background:#f1f1f1; margin-top:80px; max-width:1440px; } /* UL */ .menu-item { text-transform:uppercase; list-style:none; font-weight:400; padding:0 0 0 20px; color:#666d74; cursor:pointer; transition:background 0.3s; color:#666d74; margin:1px 0; } /* LI */ .menu-item:nth-child(even) { background:#e7e0e0; } .menu-item:nth-child(odd) { background:#f1f1f1; } .menu-item:hover { background:#666d74; color:#fff} .menu-item a:before { content:'•'; margin-right:20px; } .menu-item a:after { content:'»'; font-size:30px; color:#f1f1f1; position:fixed; right:0; background:#666d74; height:100px; padding:0 50px; align-content:center; } .desktop-nav > li > a { width:100%; text-decoration:none; color:inherit; display:flex; align-items:center; height:100px; } .menu-item a:link, .menu-item a:visited { text-decoration:none; color:inherit; transition:inherit;} .menu-item a:active, .menu-item a:hover { text-decoration:none; color:inherit; } /* FOOTER ELEMENTS */ .min-width-warning { display:none; position:fixed; height:100%; width:100%; background-color:#aca249; align-items:center; align-content:center; flex-wrap:wrap;} .min-width-warning h3 { width:100%; padding:0 2%; text-align:center; font-size:25vw; color:#fff; } .min-width-warning p { width:100%; padding:0 2%; text-align:center; font-size:18px; color:#222; } /* SLIDER/CAROUSEL MODULE */ .carousel { margin:6vh auto; padding:0 3%; max-width:1440px; } .swiper-container { max-height:600px; height:auto; width:100%; margin:0; padding:0; overflow:hidden; } .swiper-wrapper { text-align:center; } .swiper-wrapper .swiper-slide { align-self:center; } .swiper-container .swiper-slide img { width:100%; height:auto; object-fit:cover; object-position:bottom; aspect-ratio:16 / 9; } .swiper-button-prev, .swiper-button-next { color:#fff!important; } .gp-swiper-button-prev, .gp-swiper-button-next { background:none; } .gp-swiper-button-disabled { opacity:0.3; cursor:not-allowed; } .gp-swiper-pagination { position:absolute; bottom:10px; text-align:center; } .gp-swiper-pagination-bullet { background:#444; width:8px; height:8px; border-radius:8px; margin:0 5px; opacity:0.75; display:inline-block; } .gp-swiper-pagination-bullet-active { background:#fff; } figcaption { position:absolute; bottom:10px; left:10px; background:#000000cc; line-height:1em; color:#f1f1f1; padding:3px; } /* GALLERY MODULE */ .gallery { margin:6vh auto; padding:0 3%; max-width:1440px; } .gallery h2 { text-align:left; margin:0 auto 3vw; } .gallery-thumbnails { width:100%; display:grid; grid-template-columns:repeat(auto-fit, 32%); justify-content:center; gap:15px; } .gallery-item { width:auto; height:165px; border:none; cursor:pointer; } .gallery-item:focus { outline:2px solid #c89e4b5e; outline-offset:2px; } .gallery-swiper { max-width:100%; max-height:80vh; } .gallery-full-image { max-width:100%; max-height:80vh; object-fit:contain; } /* LISTING */ /* single-listings.css */ .single-listing { margin:0 auto; } .listing-hero { position:relative; width:100%; height:auto; max-height:600px; } .hero-gradient { position:absolute; z-index:100; width:100%; background:#000000; background:linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%); height:100%; max-height:600px; } .listing-hero img { position:relative; z-index:99; width:100%; height:auto; object-fit:cover; max-height:600px; } .listing-address { font-style:normal; font-size:3vw; position:absolute; bottom:0; z-index:100; text-align:right; width:100%; padding:0 20px; color:#fff; background:#575d63cf; } .listing-header { margin:2rem 0; text-align:center; } .listing-title { font-size:4rem; margin-bottom:25px; } .listing-mls { font-weight:400; } .listing-price { font-size:2.2rem; font-weight:600; color:#ce7a3c; margin:1rem 0; } .badge { display:inline-block; padding:0.35em 0.75em; margin:0.25em; background:#666d74; color:#f1f1f1; border-radius:4px; font-size:0.9rem; font-weight:400; } .listing-info { display:flex; flex-wrap:nowrap; min-height:400px; overflow:hidden; } .listing-specs { width:40%; background:#666d74; padding: 20px 0; } .listing-map { width:60%; padding:3vh 0 0; } .map-embed { width:60vw; } .map-embed > iframe { width:100%; } .specs-heading { font-family:"Mulish", sans-serif; font-weight:200; font-style:normal; font-size:2.0vw; margin:20px 0 20px 15px; color:#fff; text-align:center; display:none; } .specs-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0 1rem; margin:15px; color:#f1f1f1; } .specs-grid dt { margin:0 auto; } .specs-grid dd { margin:0; color:#fff; text-align:center; } .cb-link { border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; width:90%; margin:0 auto; text-align:center; color:#f1f1f1; } .cb-link > a:link, .cb-link > a:visited { text-decoration:none; transition:color 0.3s;} .cb-link > a:active, .cb-link > a:hover { color:#ff6600; } .listing-agent-badge { display:flex; gap:2rem; align-items:flex-start; padding:15px; justify-content:space-evenly; margin-top:20px; } .listing-agent-badge .agent-photo { width:140px; height:140px; border-radius:50%; object-fit:cover; border:4px solid white; flex-shrink:0; object-position:top; } .listing-agent-badge .agent-name { color:#f1f1f1; font-size:22px; } .listing-agent-badge .agent-name a { text-decoration:none; } .listing-agent-badge .agent-role { margin:0 0 5px 0; color:#ce7a3c; font-weight:100; font-size:12px; text-transform:uppercase; } .listing-agent-badge .agent-contact { list-style:none; font-size:1.05rem; } .listing-agent-badge .agent-contact a { color:#f1f1f1; text-decoration:none; padding:0.35rem 0; display:block; border-bottom:1px dotted #ccc; transition:color 0.2s; } .listing-agent-badge .agent-contact a:hover { color:#ce7a3c; border-color:#ce7a3c; } .listing-agent-badge .agent-license { color:#f1f1f1; } .listing-agent-badge .btn-secondary { display:inline-block; padding:5px 10px; background:#ce7a3c; color:white; border-radius:6px; text-decoration:none; font-weight:400; transition:background 0.2s; } .listing-agent-badge .btn-secondary:hover { background:#ccc; } .region-description { width:100%; display:flex; margin:40px 0; padding-right:10px; } .listing-region { width: 30%; display: flex; justify-content: flex-end; padding: 10px 5% 0 0; } .listing-description { width:70%; } .listing-description p { margin:0 0 15px; } .listing-gallery h2 { font-size:30px; padding:0 5%; } /* UNFINSIHED */ .gallery-swiper { margin:3rem 0; --swiper-theme-color:#b12704; } .swiper-button-next, .swiper-button-prev { background:rgba(0,0,0,0.5); width:44px; height:44px; border-radius:50%; } .swiper-pagination-bullet-active { background:#b12704; } .listing-actions { width:50%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1rem 0; border-top:1px solid #ddd; } .btn-print, .share-buttons a { padding:0.75rem 1.25rem; background:#333; color:white; text-decoration:none; border-radius:6px; transition:background 0.2s; } .btn-print:hover, .share-buttons a:hover { background:#b12704; } /* PRINT READY */ @media print { .listing-actions, .gallery-swiper .swiper-button-*, .swiper-pagination { display:none !important; } .listing-gallery img { max-height:400px; page-break-inside:avoid; } } /* CUSTOM CONTACT FORM */ .gp-contact-form { display:block; margin:0 auto 50px; width:100%; max-width:1440px; padding:0 3%; } /* .gp-contact-form header p { margin:30px 0; color:#444; font-size:14px; } .form-group { display:flex; flex-wrap:wrap; margin:6vh auto; gap:5%;} .form-group-title { order:1; width:25%; } .form-group-fields { order:2; width:70%; } .form-group-title h2 { font-family:'Lato', sans-serif; color:#444;font-size:24px; margin-bottom:15px; } .form-group-title h2:after { content:":"; } .form-group-element { position:relative; margin:0 0 40px; } ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-year-field, input::placeholder { font-size:12px; opacity:0.25; color:#444; } .gp-contact-form input[type=text], .gp-contact-form input[type=email]{ border:none; border-bottom:1px solid #c89e4b; width:100%; font-size:14px; padding:5px 10px; color:#383632; background:transparent; } .gp-contact-form input[type=tel], .gp-contact-form input[type=number], .gp-contact-form input[type=date] { border:none; border-bottom:1px solid #c89e4b; width:60%; font-size:14px; padding:5px 10px; color:#383632; background:transparent; } .gp-contact-form textarea { border:none; border:1px solid #c89e4b; width:100%; min-height:80px; font-size:14px; padding:5px 10px; color:#383632; background:#c89e4b1a; -webkit-appearance:none; appearance:none; } .gp-contact-form select { border:none; border:1px solid #c89e4b; width:60%; font-size:14px; padding:5px 10px; color:#383632; background:#c89e4b1a; } .gp-contact-form input[type=radio] { height:20px; width:20px; position:relative; top:5px; margin:7px; } .gp-contact-form input[type=checkbox] { height:20px; width:20px; position:relative; top:5px; margin:7px; } .input-label { position:absolute; bottom:-22px; left:8px; font-size:14px; color:#c89e4b; } .select-label { font-size:14px; color:#444; } .input-label.required:after { content:"*"; padding-left:5px; color:#900; } .form-group-element legend { font-size:14px; color:#c89e4b; } .form-field-radio { font-size:14px; color:#444; } .form-message { display:block; font-size:12px; color:#444; } .gp-contact-form input[type=submit] { border:none; font-size:16px; background:#c89e4b; padding:10px 70px; text-align:center; color:#fff; text-transform:uppercase; text-decoration:none; border-radius:10px; cursor:pointer; display:inline-block; transition:all 0.25s; } .gp-contact-form input[type=submit]:hover { background:#fff; color:#c89e4b; } */ /* ICONS */ @media all { .icon { width:60px; height:60px; border:none; outline:none; } .icon-nh { width:170px; height:360px; border:none; outline:none; } .icon-search { background:url('../assets/icon-sprite.webp') 0 0 no-repeat; } .icon-menu { background:url('../assets/icon-sprite.webp') -60px 0 no-repeat; } .icon-arrow-right { background:url('../assets/icon-sprite.webp') -120px 0 no-repeat; } .icon-arrow-left { background:url('../assets/icon-sprite.webp') -180px 0 no-repeat; } .icon-arrow-down { background:url('../assets/icon-sprite.webp') 0 -60px no-repeat; } .icon-arrow-up { background:url('../assets/icon-sprite.webp') -60px -60px no-repeat; } .icon-house { background:url('../assets/icon-sprite.webp') -120px -60px no-repeat; } .icon-bed { background:url('../assets/icon-sprite.webp') -180px -60px no-repeat; } .icon-map { background:url('../assets/icon-sprite.webp') 0 -120px no-repeat; } .icon-bath { background:url('../assets/icon-sprite.webp') -60px -120px no-repeat; } .icon-area { background:url('../assets/icon-sprite.webp') -120px -120px no-repeat; } .icon-sms { background:url('../assets/icon-sprite.webp') -180px -120px no-repeat; } .icon-garage { background:url('../assets/icon-sprite.webp') 0 -180px no-repeat; } .icon-close { background:url('../assets/icon-sprite.webp') -60px -180px no-repeat; } .icon-open-house { background:url('../assets/icon-sprite.webp') -120px -180px no-repeat; } .icon-acreage { background:url('../assets/icon-sprite.webp') -180px -180px no-repeat; } .icon-facebook { background:url('../assets/icon-sprite.webp') 0 -240px no-repeat; } .icon-instagram { background:url('../assets/icon-sprite.webp') -60px -240px no-repeat; } .icon-linkedin { background:url('../assets/icon-sprite.webp') -120px -240px no-repeat; } .icon-phone { background:url('../assets/icon-sprite.webp') -180px -240px no-repeat; } .icon-email { background:url('../assets/icon-sprite.webp') 0 -300px no-repeat; } .icon-close-dark { background:url('../assets/icon-sprite.webp') -60px -300px no-repeat; } .icon-basement { background:url('../assets/icon-sprite.webp') -120px -300px no-repeat; } .icon-attic { background:url('../assets/icon-sprite.webp') -180px -300px no-repeat; } .icon-nh-all { background:url('../assets/icon-sprite.webp') -240px 0 no-repeat; } .icon-nh-coos { background:url('../assets/icon-sprite.webp') -410px 0 no-repeat; } .icon-nh-grafton { background:url('../assets/icon-sprite.webp') -580px 0 no-repeat; } .icon-nh-caroll { background:url('../assets/icon-sprite.webp') -750px 0 no-repeat; } .icon-nh-sullivan { background:url('../assets/icon-sprite.webp') -240px -360px no-repeat; } .icon-nh-merrimack { background:url('../assets/icon-sprite.webp') -410px -360px no-repeat; } .icon-nh-belknap { background:url('../assets/icon-sprite.webp') -580px -360px no-repeat; } .icon-nh-strafford { background:url('../assets/icon-sprite.webp') -750px -360px no-repeat; } .icon-nh-cheshire { background:url('../assets/icon-sprite.webp') -240px -720px no-repeat; } .icon-nh-hillsborough { background:url('../assets/icon-sprite.webp') -410px -720px no-repeat; } .icon-nh-rockingham { background:url('../assets/icon-sprite.webp') -580px -720px no-repeat; } } /* MEDIA QUERY BREAKS */ @media all and (max-width:320px) { main, .site-header, .site-footer, .gp-modal { display:none; } .min-width-warning { display:flex; } } @media all and (min-width:321px) and (max-width:480px) { .desktop-nav { width:100%; } .listing-info { display:block; } .listing-specs, .listing-map, .map-embed { width:100%; } .listing-region { width:0; display:none; } .listing-description { width:100%; padding:0 5%; } } @media all and (min-width:481px) and (max-width:600px) { .desktop-nav { width:100%; } .listing-info { display:block; } .listing-specs, .listing-map, .map-embed { width:100%; } .listing-region { width:0; display:none; } .listing-description { width:100%; padding:0 5%; } } @media all and (min-width:601px) and (max-width:768px) { .desktop-nav { width:100%; } .listing-info { display:block; } .listing-specs, .listing-map, .map-embed { width:100%; } .listing-region { width:0; display:none; } .listing-description { width:100%; padding:0 5%; } } @media all and (min-width:769px) and (max-width:850px) { .listing-info { display:block; } .listing-specs, .listing-map, .map-embed { width:100%; } } @media all and (min-width:851px) and (max-width:900px) { .listing-info { display:block; } .listing-specs, .listing-map, .map-embed { width:100%; } } @media all and (min-width:851px) and (max-width:1024px) { } @media all and (min-width:1025px) and (max-width:1200px) { } @media all and (min-width:1201px) and (max-width:1440px) { } @media all and (min-width:1441px) { .listing-address { font-size:45px; } }