/* ============================================================ Maryam Bokhari — Brand theme override for base template Applies Brand Guide colours + typefaces on top of styles.css. Loaded AFTER styles.css so variables/fonts cascade cleanly. ============================================================ */ /* ============================================================ Switzer — self-hosted webfont (font/switzer/*.otf) Paths are relative to this file (css/brand.css). ============================================================ */ @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Thin.otf") format("opentype"); font-weight:100; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-ThinItalic.otf") format("opentype"); font-weight:100; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Extralight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-ExtralightItalic.otf") format("opentype");font-weight:200; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-MediumItalic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-SemiboldItalic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Extrabold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-ExtraboldItalic.otf") format("opentype"); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("../font/switzer/Switzer-BlackItalic.otf") format("opentype"); font-weight:900; font-style:italic; font-display:swap; } /* Brand Guide palette — exact swatch values sampled from the guide PDF */ :root{ --Primary:#b05f27; --gold-ink:#8C531D; --Gold-gradient:linear-gradient(90deg,#EEC062 0%,#C88A3C 46%,#9D6024 100%); --Text-primary:#101010; --Text-secondary:#55607A; --Black:#10182B; --Cream:#DCCFC0; --Bg-light:#EBE3D6; --Line:#E1D8C8; } /* Body typeface — Switzer */ body, p, .text, .text-body-1, .text-body-2, .text-body-3, input, textarea, select, .nice-select, .form-leave-comment fieldset label{ font-family: "Switzer", sans-serif; } /* Heading typeface — Forum */ h1,h2,h3,h4,h5,h6, .title,.h1,.h2,.h3,.h4,.h5,.h6{ font-family: "Forum", serif; } .tf-section.section-about.relocating{ background: #F9F7F3; } /* Body copy: Regular weight, 140% line-height, navy ink (per guide) */ body{ font-weight:400; line-height:1.4; color:#5C6368; } p, .text, .text-body-1, .text-body-2, .text-body-3{ font-weight:400; line-height:1.5; } /* Headings: Semibold, -2% tracking, tight 105% line-height (per guide: Semibold / -2% / 100%) */ h1,h2,h3,h4,h5,h6,.title,.h1,.h2,.h3,.h4,.h5,.h6{ font-weight:600; letter-spacing:-.0em; line-height:1.05; } .h1,.h2,.h3,.h4,.h5,.h6{ margin-top:0; margin-bottom:0; } /* keep div-baseline spacing when these classes sit on real heading tags */ /* Secondary typeface — Forum for labels/eyebrows: 5% tracking, 140% line-height (per guide) */ .text-label,.sub-title,.text-caption-1,.text-caption-2,.text-button,.text-button-small, .tf-btn span,.nav-link-item,.nav-tab-item,.tag,.footer-heading,.btn-fillter, .wg-social,.hot-line .text-caption-1{ font-family: "Forum", serif; line-height:1.5; } /* Button text — Forum */ button, .tf-btn, .tf-btn span{ font-family: "Forum", serif; } .tf-btn span{ text-transform:uppercase; letter-spacing:.06em; font-size:15px; } .sub-title.text-label{ letter-spacing:.1em; color:var(--gold-ink); margin-bottom: 15px;} /* micro-caps eyebrow (AA on light) */ .sell-card .sub-title.text-label,.section-areas .area-media-label{ color:#fff; } /* on dark grounds, bright gold passes AA */ /* gold accent helper mirrors template's .text-Primary */ .text-Primary{ color:var(--Primary) !important; } /* icon-driven feature boxes (box-icon style-1) take the gold accent */ .box-icon .icon i{ font-size:42px; line-height:1; color:var(--gold-ink); display:inline-flex; } .box-icon .icon .mb-svg-icon{ width:42px; height:42px; color:var(--gold-ink); display:inline-flex; flex:none; } .box-icon.style-1 .icon{ display:flex; align-items:center; justify-content:flex-start; height: 50px; line-height: 50px; background: #fff; padding: 35px 10px; border-radius: 15px; } .box-icon.style-1 p{ font-size: 18px; } /* ---- Hero sub-headline (gold italic) ---- */ .sub-hero{ color:var(--gold-ink); font-weight:500; } .hero-image { position: relative!important; bottom: -45px !important; } .page-id-11 .sl-form-card .sl-select option{ color:#000; } /* ---- Stats: premium dark trust band ---- */ .section-stats.pt-0{ padding-top:clamp(50px,5vw,72px) !important; } .section-stats .wrap-stats{ position:relative; overflow:hidden; border:0; border-radius:22px; background:#F9F7F3; } .section-stats .stat-item{ position:relative; padding:48px 30px; border-right:1px solid rgba(0,0,0,0.1); text-align:center; transition:background .35s; } .section-stats .stat-item:last-child{ border-right:0; } .section-stats .stat-item:hover{ background:rgba(255,255,255,.035); } .section-stats .stat-item .h2{ display:inline-block; margin:0; line-height:1; color:#101010; font-size:clamp(30px,3.2vw,42px); letter-spacing:-.0em; } .section-stats .stat-item .h2 .text-Primary{ color:var(--Primary) !important; } .section-stats .stat-item .h2::after{ content:""; display:block; width:34px; height:2px; background:var(--Primary); margin:18px auto 16px; opacity:.9; } .section-stats .stat-item .text-body-2{ margin:0; color:#101010; font-size:16px; letter-spacing:.01em; } @media(max-width:767px){ .section-stats .stat-item{ padding:32px 18px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .section-stats .stat-item:last-child{ border-bottom:0; } .hero-image { position: relative; bottom: 20px!important; } } .frisco.light .mb-table tbody tr:hover{ background: #fff; } /* ============================================================ Areas & Communities — standalone interactive area showcase ============================================================ */ .section-areas{ background:#F9F7F3; } .areas-panel{ display:grid; grid-template-columns:.82fr 1.18fr; background:#fff;border-radius:16px; overflow:hidden; } /* left: intro + vertical area selector */ .areas-intro{ padding:clamp(34px,3.4vw,56px); display:flex; flex-direction:column; } .areas-intro .sub-title{ margin-bottom:14px; } .areas-intro .title{ margin-bottom:14px; } .areas-intro .areas-lead{ color:var(--Text-secondary); margin-bottom:26px; } .areas-tabs{ display:flex; flex-direction:column; border-top:1px solid var(--Line); margin-bottom:30px; } .area-tab{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:19px 6px 19px 18px; background:none; border:0; border-bottom:1px solid var(--Line); cursor:pointer; text-align:left; } .area-tab .area-tab-name{ font-family: "Forum", serif; font-weight:600; font-size:clamp(25px,2.3vw,33px); line-height:1; letter-spacing:-.01em; color:var(--Text-primary); transition:color .3s; } .area-tab .area-tab-meta{ font-family: "Forum", serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--Text-secondary); transition:color .3s, transform .3s, opacity .3s; } .area-tab::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:0; background:var(--Gold-gradient); transform:translateY(-50%); transition:height .35s; } .area-tab:hover .area-tab-name{ color:var(--gold-ink); } .area-tab.is-active .area-tab-name{ color:var(--gold-ink); } .area-tab.is-active::before{ height:66%; } .area-tab.is-active .area-tab-meta{ color:var(--gold-ink); } .area-tab > i{ color:var(--gold-ink); font-size:17px; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; } .area-tab:hover > i,.area-tab.is-active > i{ opacity:1; transform:translateX(0); } .areas-cta{ margin-top:auto; align-self:flex-start; } /* right: changing image stage + neighborhood chips */ .areas-stage{ position:relative; background:var(--Text-primary); } .area-panel{ display:none; flex-direction:column; height:100%; } .area-panel.is-active{ display:flex; animation:areaFade .55s ease both; } @keyframes areaFade{ from{ opacity:0; } to{ opacity:1; } } .area-media{ position:relative; flex:1; min-height:360px; overflow:hidden; } .area-media img{ width:100%; height:100%; object-fit:cover; } .area-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(13,20,38,.78) 0%, rgba(13,20,38,.15) 52%, transparent 100%); } .area-media-label{ position:absolute; left:30px; bottom:26px; z-index:2; display:flex; align-items:center; gap:11px; color:#fff; font-family: "Forum", serif; font-weight:600; font-size:clamp(28px,2.6vw,38px); line-height:1; } .area-media-label i{ color:#fff; font-size:26px; } .area-hoods{ list-style:none; margin:0; padding:24px 30px 28px; display:flex; flex-wrap:wrap; gap:11px; background:#fff; } .area-hoods li{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid var(--Line); border-radius:999px; font-family: "Forum", serif; font-weight:600; font-size:19px; color:var(--Text-primary); transition:border-color .3s, background .3s; } .area-hoods li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--Primary); flex:none; } .area-hoods li:hover{ border-color:var(--Primary); background:#FBF8F3; } @media(max-width:991px){ .areas-panel{ grid-template-columns:1fr; } .areas-stage{ order:2; } .areas-intro{ order:1; } .area-media{ min-height:300px; } } /* ---- Why work with me: elevated icon-badge cards ---- */ .why-card{ position:relative; height:100%; background:#fff; border:1px solid var(--Line); border-radius:20px; padding:38px 30px; transition:box-shadow .4s, transform .4s, border-color .4s; } .why-card:hover{ transform:translateY(-6px); border-color:var(--Primary); } .why-badge{ width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(201,148,74,.12); margin-bottom:26px; transition:background .35s; } .why-badge i{ font-size:30px; color:var(--gold-ink); transition:color .35s; } .why-card:hover .why-badge{ background:var(--Primary); } .why-card:hover .why-badge i{ color:#fff; } .why-card .title{ margin-bottom:10px; } .why-card .why-text{ color:var(--Text-secondary); } /* ---- Service area: location chip cluster ---- */ .section-area .heading-section{ margin-bottom:30px; } .area-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:1020px; margin:0 auto; } .area-chip{ display:inline-flex; align-items:center; gap:11px; padding:15px 28px; border:1px solid var(--Line); border-radius:999px; background:#fff; color:var(--Text-primary); font-family: "Forum", serif; font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1; transition:border-color .3s, box-shadow .3s, transform .3s, background .3s, color .3s; } .area-chip i{ font-size:19px; color:var(--gold-ink); transition:transform .3s, color .3s; } .area-chip:hover{ border-color:var(--Primary); background: #FBF8F3;} .area-chip:hover i{ transform:scale(1.14); } .area-chip.is-anchor{ background:var(--Text-primary); border-color:var(--Text-primary); color:#fff; } .area-chip.is-anchor i{ color:#fff; } .area-chip.is-anchor:hover{ box-shadow:0 24px 44px -26px rgba(16,24,43,.7); } /* ---- Relocating city links ---- */ .reloc-cities{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; } /* ---- Sell / valuation: high-contrast premium card ---- */ .section-sell .sell-card{ position:relative; overflow:hidden; border-radius:24px; min-height:460px; display:flex; align-items:center; } .sell-card .image{ position:absolute; inset:0; } .sell-card .image img{ width:100%; height:100%; object-fit:cover; } .sell-card .image::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.2) 100%); } .sell-card .content{ position:relative; z-index:2; max-width:720px; padding:clamp(44px,6vw,76px); } .section-sell .sell-card .sub-title{ color:#F9F7F3 !important; margin-bottom:0; } .section-sell .sell-card .gold-rule{ background-color: #F9F7F3; } .sell-card .sub-title{ color:var(--Primary) !important; margin-bottom:0; } .sell-card .sub-title .dot{ background:var(--Primary); } .sell-card .gold-rule{ width:56px; height:2px; background:var(--Primary); border:0; margin:18px 0 22px; opacity:1; } .sell-card .h2{ color:#fff !important; margin-bottom:16px; } .sell-card p{ color:rgba(255,255,255,.84) !important; } @media(max-width:767px){ .sell-card .image::after{ background:linear-gradient(180deg, rgba(13,20,38,.88), rgba(13,20,38,.94)); } } .signup-field input:focus-visible, .signup-field input:focus{ outline: none!important; border: none!important; } /* ---- Signup: premium navy panel with pill field ---- */ .signup-band{ position:relative; overflow:hidden; border-radius:24px; padding:clamp(30px,5vw,70px); background:#17213E; } .signup-band::before{ content:""; position:absolute; top:-45%; right:-8%; width:440px; height:440px; border-radius:50%; pointer-events:none; } .signup-band::after{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; } .signup-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; } .signup-copy .title,.signup-copy .h3{ color:#fff !important; margin-bottom:10px; } .signup-copy .text-body-2{ color:rgba(255,255,255,.68) !important; margin-bottom:0; } .signup-field{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 8px 8px 22px; transition:border-color .3s; } .signup-field:focus-within{ border-color:var(--Primary); } .signup-field > i{ color:#fff; font-size:22px; flex:none; } .signup-field input{ flex:1; background:transparent; border:0; color:#fff; font-size:17px; padding:12px 4px; min-width:0; } .signup-field input::placeholder{ color:rgba(255,255,255,.55); } .signup-field input:focus{ outline:none; } .signup-field .tf-btn{ flex:none; } @media(max-width:900px){ .signup-inner{ grid-template-columns:1fr; gap:26px; text-align:center; } .signup-field{ max-width:520px; margin:0 auto; display: block; padding:0; background: none; border:none;} .signup-field .tf-btn{ max-width: 120px; margin: 15px auto 0 auto; position: relative!important; transform: translate(10px, 10px)!important;} .footer .footer-image{ padding-top:0; } } /* ---- Final CTA: airy premium close on cream ---- */ .section-final{ background:#F9F7F3; } .final-cta{ margin:0 auto; text-align:center; } .final-title{ font-size:clamp(32px,2vw,60px); line-height:.98; color:var(--Text-primary); font-weight:600; letter-spacing:-.035em; } .final-cta .gold-rule-center{ width:64px; height:2px; background:var(--Primary); border:0; margin:0px auto 24px; opacity:1; } .final-sub{ color:var(--Text-secondary); margin:0 auto 36px; font-size:clamp(16px,2vw,18px); line-height:1.55; } .story-relocation .nb-split{ grid-template-columns: 440px 1fr!important; } /* ============================================================ Footer — premium multi-tier layout (all colours meet WCAG AA) ============================================================ */ .footer{ background-color:#17213E; } .footer .footer-body{ padding-top:74px; padding-bottom:52px; border-bottom:0; } /* Tier 1 — brand + primary call-to-action */ .footer-cta-row{ display:flex; align-items:center; justify-content:space-between; gap:36px 56px; flex-wrap:wrap; position:relative; padding-bottom:46px; margin-bottom:46px; } .footer-cta-row::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg, rgba(198,137,59,.7), rgba(255,255,255,.08) 55%, transparent); } .footer-brand .footer-logo{ display:inline-block; margin-bottom:22px; } .footer-brand .footer-logo img{max-width: 200px; filter: brightness(0) invert(1);} .footer-brand .footer-tagline{ max-width:360px; margin-bottom:6px; color:#fff; } .footer-brand .footer-langs{ color:#fff; letter-spacing:.02em; margin:0; } .footer-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; } .footer-cta .tf-btn{ background:var(--Primary); } .footer-cta .tf-btn > span:not(.bg-effect),.footer-cta .tf-btn > i{ color:#17213E; position:relative; z-index:1; } .footer-cta .tf-btn .bg-effect{ background:#fff; color:#17213E; } .footer-cta .tf-btn:hover span{color:#17213E!important;} .footer-cta .tf-btn:hover > span:not(.bg-effect),.footer-cta .tf-btn:hover > i{ color:#17213E; } .footer-call{ display:inline-flex; align-items:center; gap:12px; color:#fff; font-family: "Forum", serif; font-size:22px; line-height:1; transition:color .3s; } .footer-call i{ color:var(--Primary); font-size:22px; transition:transform .3s; } .footer-call strong{ font-weight:600; } .footer-call:hover{ color:var(--Primary); } .footer-call:hover i{ transform:scale(1.1); } /* Tier 2 — organised navigation grid */ .footer-nav{ display:grid; grid-template-columns:1.5fr 1.5fr 1.5fr; gap:40px 48px; padding-bottom:42px; } .footer .footer-heading{ position:relative; padding-bottom:14px; margin-bottom:20px; font-family: "Forum", serif; letter-spacing:.14em; text-transform:uppercase; font-size:20px; font-weight:700; color:var(--Primary); } .footer .footer-heading::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:#fff; } .footer-menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; } .footer-menu-list li{ line-height:1.5; } .footer-menu-list li a{ font-size: 16px; } .footer-menu-list .field-label{ display:block; font-family: "Forum", serif; text-transform:uppercase; letter-spacing:.12em; font-size:18px; font-weight:700; color:var(--Primary); margin-bottom:3px; } .footer-menu-list .fval{ color:#C8CDD9; } .footer .flink{ color:#fff; position:relative; display:inline-block; transition:color .28s, transform .28s; } .footer .flink::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--Primary); transition:width .3s; } .footer .flink:hover,.footer .flink:focus-visible{ color:#fff; } .footer .flink:hover::after,.footer .flink:focus-visible::after{ width:100%; } .footer nav .footer-menu-list .flink:hover{ transform:translateX(3px); } /* Tier 3 — badges + legal */ .footer-badges{ display:flex; flex-wrap:wrap; gap:10px; padding-top:6px; justify-content: center;} .footer-badges .badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.5); border-radius:8px; padding:10px 15px; font-family: "Forum", serif; text-transform:uppercase; letter-spacing:.1em; font-size:14px; color:#fff; transition:border-color .3s, color .3s; } .footer-badges .badge:hover{ border-color:var(--Primary); color:#fff; } .footer-badges .badge svg{ width:15px; height:15px; } .footer-disclaimer{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:26px; } .footer-disclaimer p{ font-size:13px; line-height:1.7; color:#AEB4C2; max-width:1000px; margin:0; } .footer-disclaimer p.mb_8{ margin-bottom:8px; } .footer-disclaimer p strong{ color:#D8DCE4; font-weight:600; } /* Bottom bar */ .footer .footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 0; border-top:1px solid rgba(255,255,255,.1); } .footer .footer-bottom p{ color:#5C6368; font-size:16px; margin:0; } .footer-credit .flink{ color:#C8CDD9; } @media(max-width:991px){ .footer-nav{ grid-template-columns:1fr 1fr; gap:34px 40px; } .footer-cta-row{ flex-direction:column; align-items:flex-start; } .footer-cta{ align-items:flex-start; } .logo_header { max-width: 130px!important; } .signup-copy .split-line{ text-align:center!important; } } @media(max-width:575px){ .footer .footer-body{ padding-top:56px; } .footer-nav{ grid-template-columns:1fr; gap:30px; padding-bottom:0;} .footer .footer-bottom{ justify-content:flex-start; } } .logo_header{ max-width: 160px; } .details-post h2{ margin-bottom:30px; font-size: clamp(24px, 2.8vw, 34px); } .details-post p{ margin-bottom:30px; font-size:18px; } .details-post ul{ padding-left:30px; margin-bottom:30px; } .details-post ul li{ list-style:disc; padding-bottom:10px; } /* ============================================================ Accessibility — focus states, skip link, reduced motion ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .tf-btn:focus-visible, .area-tab:focus-visible, .nice-select:focus-visible, .mobile-button:focus-visible, .btn-close-menu:focus-visible, summary:focus-visible, .footer-call:focus-visible{ outline:3px solid var(--Primary) !important; outline-offset:3px !important; box-shadow:0 0 0 6px rgba(23,33,62,.45) !important; border-radius:4px; } /* keep a visible ring even where the theme resets outline on plain :focus for keyboard-only fallback */ .tf-btn:focus-visible{ outline-offset:4px !important; } .skip-link{ position:fixed; left:16px; top:-64px; z-index:99999; background:#17213E; color:#fff; padding:12px 22px; border-radius:0 0 10px 10px; font-family: "Forum", serif; letter-spacing:.08em; text-transform:uppercase; font-size:13px; transition:top .2s ease; } .skip-link:focus{ top:0; outline:3px solid var(--Primary); outline-offset:2px; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } } /* ============================================================ Areas & Communities — scroll-reveal + per-switch motion (subtle, professional; disabled under reduced-motion) ============================================================ */ @media (prefers-reduced-motion: no-preference){ /* entrance: contents stagger in when the panel enters view */ .section-areas .areas-tabs .area-tab, .section-areas .areas-cta, .section-areas .areas-stage{ opacity:0; will-change:transform,opacity; } .section-areas .areas-tabs .area-tab{ transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; } .section-areas .areas-cta{ transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; } .section-areas .areas-stage{ transform:translateY(20px) scale(.985); transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1); } .section-areas.areas-inview .areas-tabs .area-tab{ opacity:1; transform:none; } .section-areas.areas-inview .areas-tabs .area-tab:nth-child(1){ transition-delay:.10s; } .section-areas.areas-inview .areas-tabs .area-tab:nth-child(2){ transition-delay:.18s; } .section-areas.areas-inview .areas-tabs .area-tab:nth-child(3){ transition-delay:.26s; } .section-areas.areas-inview .areas-cta{ opacity:1; transform:none; transition-delay:.34s; } .section-areas.areas-inview .areas-stage{ opacity:1; transform:none; } /* per-area switch: slow ken-burns on the image + staggered chips (replays on each tab) */ .section-areas.areas-inview .area-panel.is-active .area-media img{ animation:areaKen 6.5s ease-out both; } @keyframes areaKen{ from{ transform:scale(1.09); } to{ transform:scale(1); } } .section-areas .area-panel.is-active .area-hoods li{ opacity:0; } .section-areas.areas-inview .area-panel.is-active .area-hoods li{ animation:chipIn .55s ease forwards; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(1){ animation-delay:.14s; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(2){ animation-delay:.20s; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(3){ animation-delay:.26s; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(4){ animation-delay:.32s; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(5){ animation-delay:.38s; } .section-areas.areas-inview .area-panel.is-active .area-hoods li:nth-child(6){ animation-delay:.44s; } @keyframes chipIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } } @media screen and (max-width: 2560px) and (min-width: 2200px) { .page-title.style-2{ height: 80vh; } } @media screen and (max-width: 1152px) and (min-width: 1000px) { .page-title.style-2{ height: 80vh; } h3, .h3 { font-size: 36px;} .logo_header { max-width: 120px; } .section-stats .stat-item .h2{ font-size: 28px; } .box-icon.style-1{ display: block; } .box-icon.style-1 .icon{ width: 80px; justify-content: center; } .box-icon.style-1 .h4{ margin-top: 15px; } .area-hoods li{ padding: 10px 15px; font-size: 16px; } h4, .h4 { font-size: 28px; } .why-card{ padding: 30px 15px; } } @media screen and (max-width: 991px) and (min-width: 768px) { .section-stats .stat-item{ border: none; } .section-about .left-image img{ width: 100%; } .box-icon.style-1{ display: block; } .box-icon.style-1 .icon{ width: 80px; justify-content: center; } .box-icon.style-1 .h4{ margin-top: 15px; } } /* ============================================================ SHARED INNER-PAGE HERO (.mb-hero) Used by about.html, sell.html and every page after. Slots are optional: eyebrow / title / rule / sub / lead / quote / actions. Same grid, scale and media treatment everywhere, so the pages read as one family. ============================================================ */ .mb-hero { padding-top: clamp(40px, 5vw, 90px); padding-bottom: clamp(40px, 5vw, 90px); } .mb-hero-grid { display: grid; gap: clamp(30px, 4vw, 54px); align-items: center; } .mb-hero-eyebrow { display: flex; align-items: center; gap: 12px; font-family: "Forum", serif; font-weight: 400; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; line-height: 1.6; color: var(--gold-ink); margin: 0 0 clamp(14px, 1.6vw, 20px); } .mb-hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--Primary); flex: none; } .mb-hero-title { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.05; letter-spacing: -.035em; margin: 0; } .mb-hero-rule { width: 56px; height: 2px; background: var(--Primary); border: 0; opacity: 1; margin: clamp(20px, 2.4vw, 30px) 0; } .mb-hero-sub { font-family: "Forum", serif; font-weight: 400; font-size: clamp(12px, 1.15vw, 15px); line-height: 1.7; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin: 0; } .mb-hero-lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; color: var(--Text-secondary); max-width: 620px; margin: 0; } .mb-hero-quote { position: relative; margin: clamp(22px, 2.6vw, 34px) 0 0; padding-left: clamp(18px, 2vw, 28px); } .mb-hero-quote::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #EEC062 0%, #C88A3C 46%, #9D6024 100%); } .mb-hero-quote p { font-family: "Forum", serif; font-style: italic; font-weight: 500; font-size: clamp(21px, 2.5vw, 34px); line-height: 1.3; letter-spacing: -.01em; color: var(--Text-primary); margin: 0; } .mb-hero-actions { margin-top: clamp(24px, 3vw, 36px); } .mb-hero-media img { display: block; width: 100%; height: auto; object-fit: cover; } @media (min-width: 992px) { .mb-hero-grid { grid-template-columns: 1fr 1fr; gap: clamp(44px, 5vw, 78px); } .mb-hero-media img { aspect-ratio: 1 / 1; } } /* ============================================================ Maryam Bokhari — About page Loads AFTER brand.css. Every colour/typeface below is pulled from the existing brand tokens — no new palette, no new fonts. All new classes are namespaced `abt-`. ============================================================ */ /* ------------------------------------------------------------ 2. THE ROUTE — Illinois to California to Texas A single hairline that fills gold as each chapter arrives. ------------------------------------------------------------ */ .abt-route { background: #F9F7F3; } .abt-chapter { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; } .abt-chapter-rail { position: relative; } /* static hairline */ .abt-chapter-rail::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--Line); } .abt-chapter:first-child .abt-chapter-rail::before { top: 14px; } /* the landing card closes the route — line stops at the node */ .abt-chapter.abt-landing .abt-chapter-rail::before { bottom: auto; height: 16px; } /* gold progress segment */ .abt-chapter-fill { position: absolute; left: 4px; top: 0; width: 1px; height: 0; background: linear-gradient(180deg, #EEC062 0%, #C88A3C 46%, #9D6024 100%); } .abt-chapter:first-child .abt-chapter-fill { top: 14px; } .abt-chapter.abt-landing .abt-chapter-fill { display: none; } .abt-node { position: absolute; left: 0; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #F9F7F3; border: 1px solid var(--Line); z-index: 2; transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; } .abt-chapter.is-inview .abt-node { background: var(--Primary); border-color: var(--Primary); box-shadow: 0 0 0 5px rgba(176, 95, 39, .14); } .abt-chapter-body { padding-bottom: clamp(38px, 5vw, 66px); } .abt-chapter-title { font-size: clamp(25px, 3.2vw, 40px); line-height: 1.1; margin: 0 0 clamp(13px, 1.6vw, 20px); } .abt-chapter-body p { color: var(--Text-secondary); font-size: 18px; line-height: 1.62; margin: 0 0 16px; } .abt-chapter-body p:last-child { margin-bottom: 0; } .abt-lead { font-size: clamp(19px, 2vw, 21px) !important; color: var(--Text-primary) !important; } /* the route lands in a single dark anchor */ .abt-landing .abt-chapter-body { background: #17213E; border-radius: 16px; padding: clamp(28px, 4vw, 52px); } .abt-landing .abt-chapter-title { color: #fff; } .abt-landing .abt-chapter-body p { color: rgba(255, 255, 255, .78); } .abt-gold-rule { width: 56px; height: 2px; background: var(--Primary); border: 0; opacity: 1; margin: 0 0 clamp(18px, 2vw, 24px); } @media (min-width: 768px) { .abt-chapter { grid-template-columns: 54px minmax(0, 1fr); column-gap: 32px; } .abt-node { top: 15px; } .abt-chapter:first-child .abt-chapter-rail::before, .abt-chapter:first-child .abt-chapter-fill { top: 17px; } } /* ------------------------------------------------------------ 3. HOW I WORK — editorial promise list ------------------------------------------------------------ */ .abt-how-head { max-width: 620px; margin-bottom: clamp(26px, 3.4vw, 46px); } .abt-how-title { font-size: clamp(30px, 4vw, 56px); line-height: 1.04; letter-spacing: -.03em; margin: 0; } .abt-principles { list-style: none; margin: 0; padding: 0; } .abt-principles li { position: relative; border-top: 1px solid var(--Line); padding: clamp(24px, 3.2vw, 44px) 0 clamp(24px, 3.2vw, 44px) clamp(16px, 2vw, 34px); transition: background .4s ease; } .abt-principles li:last-child { border-bottom: 1px solid var(--Line); } /* gold edge — same gesture as the homepage .area-tab marker */ .abt-principles li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; transform: translateY(-50%); background: #b05f27; transition: height .45s cubic-bezier(.2, .7, .3, 1); } .abt-principles li:hover, .abt-principles li:focus-within { background: #FBF8F3; } .abt-principles li:hover::before, .abt-principles li:focus-within::before { height: 66%; } .abt-principle-lead { display: block; font-family: "Forum", serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.025em; color: var(--Text-primary); margin: 0 0 12px; transition: color .35s ease; } .abt-principles li:hover .abt-principle-lead, .abt-principles li:focus-within .abt-principle-lead { color: var(--gold-ink); } .abt-principle-note { margin: 0; color: var(--Text-secondary); font-size: 17px; line-height: 1.62; } @media (min-width: 992px) { .abt-principles li { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(30px, 4vw, 70px); align-items: start; padding-left: clamp(24px, 2.4vw, 40px); padding-right: clamp(6px, 1vw, 16px); } .abt-principle-lead { margin-bottom: 0; } /* editorial column rule between the promise and the detail */ .abt-principle-note { padding-left: clamp(26px, 3vw, 50px); padding-top: 8px; font-size: 18px; border-left: 1px solid var(--Line); transition: border-color .4s ease; } .abt-principles li:hover .abt-principle-note, .abt-principles li:focus-within .abt-principle-note { border-color: var(--Primary); } } /* ------------------------------------------------------------ 4. SPECIALTIES ------------------------------------------------------------ */ .abt-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .abt-spec { display: flex; align-items: center; gap: 14px; height: 100%; background-color: #F9F7F3; border-radius: 16px; padding: clamp(15px, 2.2vw, 30px); transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; } .abt-spec i { display: flex; align-items: center; justify-content: flex-start; height: 50px; line-height: 50px; background: #fff; padding: 35px 10px; border-radius: 15px; font-size: 42px; line-height: 1; color: var(--gold-ink); display: inline-flex; } .abt-spec span { font-family: "Forum", serif; font-weight: 600; font-size: clamp(20px, 1.7vw, 30px); line-height: 1.2; letter-spacing: -.01em; color: var(--Text-primary); } @media (min-width: 600px) { .abt-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 992px) { .abt-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } /* ------------------------------------------------------------ 5. OUTSIDE OF WORK + CLOSING CTA (sits inside the theme's own .section-final cream ground) ------------------------------------------------------------ */ .abt-outside-inner { max-width: 920px; margin: 0 auto; text-align: center; } .abt-outside-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; margin: 0 0 clamp(18px, 2.2vw, 26px); } .abt-outside-inner p { font-size: clamp(18px, 1.9vw, 18px); line-height: 1.62; color: var(--Text-secondary); margin: 0 0 18px; } .abt-outside-inner p:last-of-type { margin-bottom: 0; } .abt-cta { margin-top: clamp(38px, 4.4vw, 62px); } .abt-cta-actions { margin-top: clamp(26px, 3vw, 36px); } /* ------------------------------------------------------------ 6. MOTION — scroll reveals Guarded by .has-js so nothing is hidden if JS never runs, and fully skipped under prefers-reduced-motion. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .abt-chapter-fill { transition: height 1s cubic-bezier(.2, .7, .3, 1); } .abt-chapter.is-inview .abt-chapter-fill { height: 100%; } .has-js .abt-chapter .abt-chapter-body { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); transition-delay: .1s; } .has-js .abt-chapter.is-inview .abt-chapter-body { opacity: 1; transform: none; } .has-js .abt-principles li { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease, background .35s ease; } .has-js .abt-principles.is-inview li { opacity: 1; transform: none; } .has-js .abt-principles.is-inview li:nth-child(1) { transition-delay: .06s; } .has-js .abt-principles.is-inview li:nth-child(2) { transition-delay: .13s; } .has-js .abt-principles.is-inview li:nth-child(3) { transition-delay: .20s; } .has-js .abt-principles.is-inview li:nth-child(4) { transition-delay: .27s; } .has-js .abt-principles.is-inview li:nth-child(5) { transition-delay: .34s; } .has-js .abt-specs li { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .has-js .abt-specs.is-inview li { opacity: 1; transform: none; } .has-js .abt-specs.is-inview li:nth-child(1) { transition-delay: .05s; } .has-js .abt-specs.is-inview li:nth-child(2) { transition-delay: .11s; } .has-js .abt-specs.is-inview li:nth-child(3) { transition-delay: .17s; } .has-js .abt-specs.is-inview li:nth-child(4) { transition-delay: .23s; } .has-js .abt-specs.is-inview li:nth-child(5) { transition-delay: .29s; } .has-js .abt-specs.is-inview li:nth-child(6) { transition-delay: .35s; } } @media (prefers-reduced-motion: reduce) { .abt-chapter-fill { height: 100%; } .has-js .sl-faq-panel, .sl-faq-icon, .sl-faq-icon::before, .sl-faq-icon::after { transition: none; } } /* ============================================================ Maryam Bokhari — Sell page Namespaced `sl-`. Same tokens, same three typefaces. ============================================================ */ /* --- 2. WHY ONLINE ESTIMATES MISS --------------------------- */ .sl-miss { background: #F9F7F3; } .sl-section-title { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -.03em; margin: 0; max-width: 20ch; } /* the argument made spatially: small + faint vs. large + present */ .sl-contrast { display: grid; gap: clamp(28px, 3.4vw, 48px); } /* dashed = an approximation, which is exactly what it is */ .sl-estimate-note { border: 1px dashed var(--Line); border-radius: 18px; padding: clamp(22px, 2.6vw, 32px); margin: 0; color: var(--Text-secondary); font-size: 17px; line-height: 1.62; } .sl-eyebrow-label { font-family: "Forum", serif; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 14px; line-height: 1.6; color: var(--gold-ink); margin: 0 0 clamp(14px, 1.6vw, 20px); } .sl-blindspots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--Line); } .sl-blindspots li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--Line); padding: clamp(18px, 2.2vw, 24px) 0; } .sl-blindspots li::before { content: ""; width: 20px; height: 1px; margin-top: .78em; background: var(--Primary); transition: width .35s ease; } .sl-blindspots li:hover::before { width: 30px; } .sl-blindspot { font-family: "Forum", serif; font-weight: 600; font-size: clamp(18px, 2vw, 24px); line-height: 1.26; letter-spacing: -.02em; color: var(--Text-primary); } .sl-statement-wrap { margin-top: clamp(32px, 3.8vw, 54px); max-width: 900px; } .sl-statement-rule { width: 56px; height: 2px; background: var(--Primary); border: 0; opacity: 1; margin: 0 0 clamp(16px, 1.8vw, 22px); } .sl-statement { font-family: "Forum", serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.28; letter-spacing: -.01em; color: var(--Text-primary); margin: 0; } @media (min-width: 992px) { .sl-contrast { grid-template-columns: .78fr 1.22fr; gap: clamp(44px, 5vw, 88px); align-items: start; } .sl-contrast-weak { position: sticky; top: 130px; } } /* --- 3. PRICING PROCESS ------------------------------------- */ .sl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 3.4vw, 44px); grid-template-columns: minmax(0, 1fr); } .sl-step-num { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(14px, 1.8vw, 20px); } .sl-step-num > span { flex: none; font-family: "Forum", serif; font-weight: 600; font-size: clamp(42px, 5.2vw, 76px); line-height: .88; letter-spacing: -.02em; color: var(--gold-ink); } @supports (background-clip: text) or (-webkit-background-clip: text) { .sl-step-num > span { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } } .sl-step-num::after { content: ""; flex: 1; height: 1px; background: var(--Line); transition: background .7s ease; } .sl-steps.is-inview .sl-step-num::after { background: var(--Primary); } .sl-steps.is-inview li:nth-child(2) .sl-step-num::after { transition-delay: .12s; } .sl-steps.is-inview li:nth-child(3) .sl-step-num::after { transition-delay: .24s; } .sl-step-title { font-family: "Forum", serif; font-weight: 600; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -.02em; color: var(--Text-primary); margin: 0 0 12px; } .sl-step p { margin: 0; color: var(--Text-secondary); font-size: 18px; line-height: 1.5; } @media (min-width: 900px) { .sl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.6vw, 56px); } } /* --- 4. MARKETING — the page's single dark moment ------------ Six contained cards on a lit navy field. ------------------------------------------------------------- */ .sl-marketing { background: #F9F7F3; } /* .sl-marketing-panel { position: relative; overflow: hidden; background: #17213E; border-radius: 24px; padding: clamp(26px, 4.2vw, 66px); box-shadow: 0 54px 104px -74px rgba(16, 24, 43, .92); } */ /* same gold hairline as the valuation card, so the two read as a pair */ .sl-marketing-head { position: relative; z-index: 2; margin-bottom: clamp(28px, 3.4vw, 48px); } .sl-marketing-title { font-size: clamp(27px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.03em; margin: 0; } .sl-marketing-rule { width: 56px; height: 2px; background: var(--gold-ink); border: 0; opacity: 1; margin: clamp(18px, 2vw, 24px) 0 0; } .sl-services { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .sl-service { height: 100%; display: flex; gap: clamp(15px, 1.8vw, 30px); background-color: #fff; border-radius: 18px; padding: clamp(22px, 2.6vw, 30px); transition: background-color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease; } .sl-service-icon { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(238, 192, 98, .12); border: 1px solid rgba(238, 192, 98, .22); transition: background .45s ease, border-color .45s ease; } .sl-service-icon i { display: flex; align-items: center; justify-content: flex-start; height: 50px; line-height: 50px; background: var(--gold-ink); padding: 30px 10px; border-radius: 15px; font-size: 42px; line-height: 1; color:#fff; display: inline-flex; } /* the tile fills with the brand gradient and the glyph flips to navy */ .sl-service:hover .sl-service-icon { background: #000; border-color: #fff; } .sl-service:hover .sl-service-icon i { color: #fff; } .sl-service-lead { display: block; font-family: "Forum", serif; font-weight: 600; font-size: clamp(19px, 1.95vw, 23px); line-height: 1.24; letter-spacing: -.02em; margin-top: auto; } .sl-service p { margin: 0; font-size: 18px; line-height: 1.5; } @media (min-width: 768px) { .sl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1200px) { .sl-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } } /* --- 5. TIMING ---------------------------------------------- */ .sl-timing-inner { max-width: 880px; } .sl-timing-lead { position: relative; padding-left: clamp(18px, 2vw, 28px); font-family: "Forum", serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.01em; color: var(--Text-primary); margin: 0 0 clamp(20px, 2.4vw, 28px); } .sl-timing-lead::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background:var(--gold-ink); } .sl-timing-inner p { color: var(--Text-secondary); font-size: 18px; line-height: 1.65; margin: 0 0 18px; } .sl-timing-close { margin: clamp(24px, 3vw, 34px) 0 0; padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--Line); font-family: "Forum", serif; font-weight: 600; font-size: clamp(20px, 2.2vw, 27px) !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--Text-primary) !important; } /* --- 6. VALUATION FORM -------------------------------------- */ .sl-form-section { scroll-margin-top: 120px; } .sl-form-card { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; background-color:#F9F7F3; border-radius: 16px; padding: clamp(26px, 4vw, 58px); } .sl-form-head { max-width: 640px; margin-bottom: clamp(26px, 3.2vw, 40px); } .sl-form-title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 14px; } .sl-form-sub { margin: 0; color: var(--Text-secondary); font-size: 17px; line-height: 1.6; } .sl-form-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } .sl-label { display: block; font-family: "Forum", serif; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; font-size: 16px; line-height: 1.5; color: #101010; margin-bottom: 8px; } .sl-req { color: var(--Primary); } .sl-input, .sl-select, .sl-textarea { width: 100%; background: #fff; border: none!important; outline:none!important; border-radius: 14px; padding: 14px 18px; font-family: "Forum", serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--Text-primary); transition: border-color .3s ease, box-shadow .3s ease; } .sl-input::placeholder, .sl-textarea::placeholder { color: var(--Text-muted); } .sl-input:focus, .sl-select:focus, .sl-textarea:focus { border: none!important; outline:none!important; box-shadow:none!important; border-color: var(--Primary); box-shadow: 0 0 0 3px rgba(176, 95, 39, .14); } .sl-input:focus-visible, .sl-select:focus-visible, .sl-textarea:focus-visible { border: none!important; outline:none!important; box-shadow:none!important; border-color: var(--Primary); box-shadow: 0 0 0 3px rgba(176, 95, 39, .14); } .sl-textarea { min-height: 132px; resize: vertical; } .sl-select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2355607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; } .sl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sl-consents { margin-top: clamp(22px, 2.6vw, 30px); display: grid; gap: 16px; } .sl-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 12px; } .sl-consent input[type="checkbox"] { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--Primary); flex: none; } .sl-consent label { font-size: 14px; line-height: 1.58; color: var(--Text-secondary); } .sl-consent a { color: var(--Text-primary); text-decoration: underline; text-underline-offset: 3px; } .sl-form-actions { margin-top: clamp(24px, 2.8vw, 34px); } .sl-submit { border: 0; cursor: pointer; font: inherit; } .sl-disclaimer { margin: clamp(18px, 2vw, 24px) 0 0; font-size: 14px; line-height: 1.6; } @media (min-width: 768px) { .sl-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .sl-col-full { grid-column: 1 / -1; } } /* --- 7. FAQ (accordion) ------------------------------------- */ .sl-faq{ background: #F9F7F3; } .sl-faq-grid { max-width: 940px; margin: 0 auto; } .sl-faq-item { border-top: 1px solid var(--Line); } .sl-faq-item:last-child { border-bottom: 1px solid var(--Line); } .sl-faq-heading { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; } .sl-faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px) 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: "Forum", serif; font-weight: 600; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.22; letter-spacing: -.02em; color: var(--Text-primary); transition: color .3s ease; } .sl-faq-q:hover { color: var(--gold-ink); } /* plus that becomes a minus */ .sl-faq-icon { position: relative; flex: none; width: 28px; height: 28px; margin-top: .12em; border: 1px solid var(--Line); border-radius: 50%; transition: border-color .35s ease, background-color .35s ease, transform .35s ease; } .sl-faq-icon::before, .sl-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--Primary); transition: transform .4s cubic-bezier(.2, .7, .3, 1); } .sl-faq-icon::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); } .sl-faq-icon::after { width: 1.5px; height: 11px; transform: translate(-50%, -50%); } .sl-faq-q:hover .sl-faq-icon { border-color: var(--Primary); } .sl-faq-item.is-open .sl-faq-icon { border-color: var(--Primary); background-color: rgba(176, 95, 39, .09); } .sl-faq-item.is-open .sl-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); } /* 0fr -> 1fr gives a real height transition with no JS measuring */ .sl-faq-panel { display: grid; grid-template-rows: 1fr; } .has-js .sl-faq-panel { grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .3, 1); } .has-js .sl-faq-item.is-open .sl-faq-panel { grid-template-rows: 1fr; } .sl-faq-panel-inner { overflow: hidden; } .sl-faq-a { margin: 0; padding: 0 clamp(36px, 4vw, 52px) clamp(22px, 2.6vw, 30px) 0; color: var(--Text-secondary); font-size: 18px; line-height: 1.5; } /* --- 3.1 Hero additions ------------------------------------------------ */ .page-title.style-inner .sub-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--Text-secondary); } .page-title.style-inner .sub-title .dot { display: flex; width: 8px; height: 8px; border-radius: 50%; background-color: var(--Primary); } .page-title .sub { max-width: 760px; } .nb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } /* --- 3.2 Two-column prose ---------------------------------------------- */ .nb-split { display: grid; grid-template-columns: 340px 1fr; gap: 40px 80px; align-items: start; } .nb-split .nb-split-aside { position: sticky; top: 120px; } .nb-prose > p { margin: 0 0 20px; font-size: 18px; line-height: 30px; color: var(--Text-secondary); } .nb-prose > p:last-child { margin-bottom: 0; } .nb-prose strong { color: var(--Text-primary); font-weight: 600; } /* --- 3.3 Fits / doesn't fit -------------------------------------------- */ .nb-fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .nb-fit-card { padding: 32px; border: 1px solid var(--Line); border-radius: 16px; background-color: var(--White); } .nb-fit-card.is-yes { background-color:#F9F7F3; border-color: transparent; } .nb-fit-card .nb-fit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--Line); } .nb-fit-card .nb-fit-head i { font-size: 22px; line-height: 1; color: var(--Primary); } .nb-list { display: grid; gap: 14px; } .nb-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--Text-secondary); } .nb-list li i { margin-top: 5px; font-size: 14px; line-height: 1; color: var(--Primary); } .nb-fit-card.is-no .nb-list li i { color: var(--Text-muted); } /* --- 3.4 Market pulse panel --------------------------------------------- */ .mp-panel { position: relative; padding: 64px; border-radius: 16px; background-color: #17213E; overflow: hidden; isolation: isolate; } .mp-head { padding-bottom: 32px; margin-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .mp-title { margin: 0 0 8px; color: var(--White); } .mp-source { margin: 0; font-family: var(--font-accent); font-size: 19px; line-height: 28px; font-style: italic; color: rgba(255, 255, 255, 0.5); } .mp-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px 64px; align-items: start; } .mp-label { display: block; font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .mp-feature .mp-label { margin-bottom: 16px; } .mp-feature .mp-value { display: block; font-family: var(--font-display); font-size: 68px; line-height: 74px; font-weight: 400; letter-spacing: -0.02em; color: var(--White); } .mp-feature { position: relative; padding-left: 28px; } .mp-feature::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background-color: var(--Primary); } .mp-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background-color: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; overflow: hidden; } .mp-cell { padding: 24px 26px; background-color: #17213E; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .mp-cell:hover { background-color: rgba(255, 255, 255, 0.04); } .mp-cell .mp-label { margin-bottom: 10px; } .mp-cell-value { display: block; font-size: 18px; line-height: 26px; font-weight: 500; color: rgba(255, 255, 255, 0.92); } /* --- 3.5 Schools module -------------------------------------------------- */ .sch-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: 16px; overflow: hidden; } .sch-rail { padding: 56px 48px; background-color: #17213E; } .sch-rule { display: block; width: 48px; height: 3px; margin-bottom: 28px; border-radius: 3px; background-color: var(--Primary); } .sch-lead { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 46px; font-weight: 400; letter-spacing: -0.01em; color: var(--White); text-wrap: balance; } .sch-body { padding: 56px 48px; background-color: #F9F7F3; } .sch-body > p { margin: 0 0 18px; font-size: 17px; line-height: 29px; color: var(--Text-secondary); } .sch-flag { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; margin-top: 28px; padding: 24px 26px; border-radius: 14px; background-color: var(--White); border: 1px solid var(--Line); } .sch-flag i { margin-top: 3px; font-size: 22px; line-height: 1; color: var(--Primary); } .sch-flag p { margin: 0; font-size: 16px; line-height: 26px; color: var(--Text-secondary); } .sch-flag strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--Text-primary); } /* --- 3.6 What's nearby -------------------------------------------------- */ .nb-nearby { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; } .nb-nearby .nb-nearby-item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: center; padding: 22px 24px; border-radius: 12px; background-color: #F9F7F3; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nb-nearby .nb-nearby-item:hover { border-color: var(--Primary); } .nb-nearby .nb-nearby-item i { display: flex; align-items: center; justify-content: flex-start; font-size: 30px; line-height: 1; color: var(--gold-ink); display: inline-flex; } .nb-nearby .nb-nearby-item strong { color: var(--Text-primary); font-weight: 600; } /* --- 8. MOTION ---------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .has-js .sl-blindspots li, .has-js .sl-steps li, .has-js .sl-services li, .has-js .sl-faq-item { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .has-js .sl-blindspots.is-inview li, .has-js .sl-steps.is-inview li, .has-js .sl-services.is-inview li, .has-js .sl-faq-item.is-inview { opacity: 1; transform: none; } .has-js .sl-blindspots.is-inview li:nth-child(2), .has-js .sl-steps.is-inview li:nth-child(2), .has-js .sl-services.is-inview li:nth-child(2) { transition-delay: .08s; } .has-js .sl-blindspots.is-inview li:nth-child(3), .has-js .sl-steps.is-inview li:nth-child(3), .has-js .sl-services.is-inview li:nth-child(3) { transition-delay: .16s; } .has-js .sl-blindspots.is-inview li:nth-child(4), .has-js .sl-services.is-inview li:nth-child(4) { transition-delay: .24s; } .has-js .sl-blindspots.is-inview li:nth-child(5), .has-js .sl-services.is-inview li:nth-child(5) { transition-delay: .32s; } .has-js .sl-services.is-inview li:nth-child(6) { transition-delay: .40s; } } .frisco .mb-table-wrap{ max-width:100%; } .frisco .mb-table thead th{ font-family: "Forum", serif; font-weight: 600; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.24; letter-spacing: -.02em; color: var(--Text-primary); margin: 0 0 10px; transition: color .35s ease; text-transform:capitalize; } .mbmc-desc{ max-width:100%; } /* --- nb-split: "The vibe" / city-page overview intro --- */ @media (max-width: 991px) { .nb-split { grid-template-columns: 1fr; gap: 24px; } .nb-split .nb-split-aside { position: static; top: auto; } .mbmc-disclaimer { position: relative!important; width:100%!important; bottom:0!important; } } /* --- nb-fit-grid: Who it fits / doesn't, For / Against --- */ @media (max-width: 767px) { .nb-fit-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; } .nb-fit-card { padding: 24px; } .mb-card-eyebrow{ height: 45px!important; } h1, .h1 { font-size: 46px; } h3, .h3 { font-size: 24px; } .tf-grid-layout{ gap:0; } .box-icon.style-1 p { font-size: 16px; } .box-icon.style-1{ padding: 15px; gap: 15px; } .categories-item{ padding: 28px 30px 26px 30px; } .sell-card .content { padding: clamp(30px, 6vw, 76px); } } /* --- mp-panel: Market pulse --- */ @media (max-width: 991px) { .mp-panel { padding: 32px 24px; } .mb-card-eyebrow{ height: 40px!important; } .mp-grid { grid-template-columns: 1fr; gap: 32px; } .mp-feature .mp-value { font-size: 42px; line-height: 54px; } .mp-cell { padding: 18px 16px; } } @media (max-width: 480px) { .mp-cells { grid-template-columns: 1fr; } } /* --- sch-card: Schools module --- */ @media (max-width: 767px) { .sch-card { grid-template-columns: 1fr; } .sch-rail, .sch-body { padding: 32px 24px; } .nb-split, .story-relocation .nb-split{ grid-template-columns: 1fr!important; gap: 0px 40px; } .nb-prose > p { font-size: 16px; } .nb-split .nb-split-aside{ position: static; } .sch-lead { font-size: 28px; line-height: 36px; } } /* --- nb-nearby: What's nearby --- */ @media (max-width: 600px) { .nb-nearby { grid-template-columns: 1fr; } } /* ============================================================ Primary nav dropdown — desktop Append to css/brand.css. Targets the real markup this theme emits: