/* Danforth Crossing Child — styles Tailwind utilities don't cover. */ html { scroll-behavior: smooth; } /* Logo sizing (same as the original header). */ .header-logo { height: 56px !important; width: auto !important; object-fit: contain; } @media (min-width: 768px) { .header-logo { height: 84px !important; } } /* Hero darkening overlay. */ .hero-overlay { background: linear-gradient(180deg, rgba(26, 32, 44, 0.55) 0%, rgba(26, 32, 44, 0.25) 45%, rgba(26, 32, 44, 0.65) 100%); } /* Fixed header sits below the WP admin bar when logged in. */ .admin-bar #site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar #site-header { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar #site-header { top: 0; } } /* Pages not built by this theme (e.g. Elementor pages, Privacy Policy) get room for the fixed header. */ body:not(.dfc-page) #content { padding-top: 5.5rem; } @media (min-width: 768px) { body:not(.dfc-page) #content { padding-top: 6.5rem; } } body:not(.dfc-page) #content.site-main { max-width: 64rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; padding-bottom: 4rem; } /* Desktop dropdown. */ .dfc-dropdown { opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 70; } .group:hover > .dfc-dropdown, .group:focus-within > .dfc-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* Neutralise Hello Elementor's default pink button styles on icon buttons. */ .dfc-icon-btn, .dfc-icon-btn:hover, .dfc-icon-btn:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; } .dfc-icon-btn:hover { color: #c5a059 !important; } /* Skip link. */ .dfc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; color: #1a202c; padding: .75em 1.5em; } .dfc-skip-link:focus { left: 0; } /* FAQ accordion: hide the native marker. */ .dfc-faq summary::-webkit-details-marker { display: none; } .dfc-faq summary::marker { content: ''; } /* Editor content on theme templates. */ .dfc-prose p { margin-bottom: 1rem; } .dfc-prose h2, .dfc-prose h3 { font-family: 'Playfair Display', serif; color: #1a202c; margin: 1.5rem 0 .75rem; } .dfc-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; } .dfc-prose a { color: #c5a059; text-decoration: underline; } .dfc-prose img { border-radius: .5rem; } /* Fluent Forms submit button fallback (the form's own settings take priority). */ .fluentform .ff-btn-submit { background-color: #c5a059; border-color: #c5a059; color: #fff; } /* Lightbox (counter, swipe, thumbnail strip on desktop). Tall floor plans open full width and scroll. */ .dfc-lightbox { position: fixed; inset: 0; z-index: 100001; background: rgba(13, 17, 23, .95); } .dfc-lightbox[hidden] { display: none; } .dfc-lightbox__stage { position: absolute; left: 0; right: 0; top: 3.5rem; bottom: 4.5rem; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 0 1rem; -webkit-overflow-scrolling: touch; } .dfc-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); } /* Tall mode (floor plans): the WHOLE plan fits on screen (100 %), undistorted. + zooms in (scroll / drag / double-tap), − out. */ .dfc-lightbox--tall .dfc-lightbox__stage { top: 3.5rem; bottom: 4.6rem; padding: .5rem; align-items: flex-start; justify-content: flex-start; overflow: auto; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; } .dfc-lightbox--tall .dfc-lightbox__img { flex: none; max-width: none; max-height: none; width: auto; height: auto; margin: auto; background: #fff; box-shadow: none; object-fit: fill; cursor: zoom-in; } .dfc-lightbox--tall .dfc-lightbox__stage.is-zoomed .dfc-lightbox__img { cursor: grab; } .dfc-lightbox--tall .dfc-lightbox__stage.is-dragging .dfc-lightbox__img { cursor: grabbing; user-select: none; } .dfc-lightbox--tall .dfc-lightbox__thumbs { display: none !important; } .dfc-lightbox--tall .dfc-lightbox__caption { bottom: auto; top: .75rem; pointer-events: none; font-size: 1rem; } /* In tall mode the prev/next arrows move into the top bar so they never cover the plan. */ .dfc-lightbox--tall .dfc-lightbox__prev, .dfc-lightbox--tall .dfc-lightbox__next { top: .35rem; transform: none; font-size: 2rem; padding: .15rem .6rem; } .dfc-lightbox--tall .dfc-lightbox__prev { left: 4rem; right: auto; } .dfc-lightbox--tall .dfc-lightbox__next { left: 6.4rem; right: auto; } .dfc-lightbox__hint { display: none; position: absolute; top: 2.3rem; left: 0; right: 0; text-align: center; color: #9ca3af; font-size: .66rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .5rem; pointer-events: none; z-index: 1; } .dfc-lightbox--tall .dfc-lightbox__hint { display: block; } .dfc-hint-touch { display: inline; } .dfc-hint-mouse { display: none; } @media (hover: hover) and (pointer: fine) { .dfc-hint-touch { display: none; } .dfc-hint-mouse { display: inline; } } .dfc-lightbox__zoom { display: none; } .dfc-lightbox--tall .dfc-lightbox__zoom { display: flex; align-items: center; gap: .25rem; position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 3; padding: .25rem; background: rgba(26, 32, 44, .96); border: 1px solid rgba(255, 255, 255, .22); border-radius: .35rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); } .dfc-lightbox .dfc-lightbox__zoom button { position: static; width: 3rem; height: 3rem; padding: 0; font-size: 1.7rem; line-height: 1; border-radius: .25rem; } .dfc-lightbox .dfc-lightbox__zoom button:disabled { opacity: .3; cursor: default; } .dfc-lightbox .dfc-lightbox__zoom .dfc-lightbox__zoomlevel { width: 4.4rem; font-size: .8rem; letter-spacing: .06em; color: #e5e7eb; } .dfc-lightbox__close, .dfc-lightbox__prev, .dfc-lightbox__next { z-index: 2; } .dfc-lightbox__count { z-index: 2; position: absolute; top: 1.1rem; left: 1.25rem; color: #e5e7eb; font-size: .8rem; letter-spacing: .2em; } .dfc-lightbox__caption { position: absolute; bottom: 1rem; left: 0; right: 0; padding: 0 1rem; text-align: center; color: #e5e7eb; font-family: 'Playfair Display', serif; font-size: 1.125rem; } .dfc-lightbox button { position: absolute; background: transparent !important; border: 0 !important; color: #fff; font-size: 2.25rem; line-height: 1; padding: .5rem 1rem; cursor: pointer; } .dfc-lightbox button:hover { color: #c5a059 !important; } .dfc-lightbox button[hidden] { display: none !important; } .dfc-lightbox__close { top: .5rem; right: .5rem; } .dfc-lightbox__prev { left: .25rem; top: 50%; transform: translateY(-50%); } .dfc-lightbox__next { right: .25rem; top: 50%; transform: translateY(-50%); } .dfc-lightbox__thumbs { display: none; } @media (min-width: 768px) { .dfc-lightbox__stage { bottom: 8.5rem; } .dfc-lightbox__caption { bottom: 5.75rem; } .dfc-lightbox__thumbs { display: flex; gap: .5rem; position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); max-width: 92vw; overflow-x: auto; padding: .25rem; } .dfc-lightbox .dfc-lightbox__thumbs button { position: static; flex: 0 0 auto; width: 4.75rem; height: 3.5rem; padding: 0; font-size: 0; opacity: .5; overflow: hidden; border: 2px solid transparent !important; border-radius: .25rem; transition: opacity .2s; } .dfc-lightbox .dfc-lightbox__thumbs button:hover { opacity: .9; } .dfc-lightbox .dfc-lightbox__thumbs button[aria-current="true"] { opacity: 1; border-color: #c5a059 !important; } .dfc-lightbox .dfc-lightbox__thumbs img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; box-shadow: none; display: block; } } /* Clickable room pins on the 3D floor plan. */ .dfc-pin { position: absolute; transform: translate(-50%, -50%); z-index: 5; display: block; text-decoration: none; } .dfc-pin__dot { position: relative; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #c5a059; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .2s; } .dfc-pin__dot svg { width: .9rem; height: .9rem; } .dfc-pin__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 9999px; border: 2px solid rgba(197, 160, 89, .75); animation: dfc-pulse 2.2s ease-out infinite; } @keyframes dfc-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .dfc-pin:hover .dfc-pin__dot, .dfc-pin:focus-visible .dfc-pin__dot { transform: scale(1.15); } .dfc-pin__label { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); white-space: nowrap; background: #1a202c; color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; border-radius: .2rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .dfc-pin:hover .dfc-pin__label, .dfc-pin:focus-visible .dfc-pin__label { opacity: 1; transform: translateX(-50%); } @media (prefers-reduced-motion: reduce) { .dfc-pin__dot::after { animation: none; } } /* Floor plan photo mosaic: 1 large photo + 4 small. Mobile: large photo, then a swipeable row. */ .dfc-mosaic { display: flex; flex-direction: column; gap: .75rem; } .dfc-mosaic__main { aspect-ratio: 4 / 3; } .dfc-mosaic__side { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; } .dfc-mosaic__side .dfc-mosaic__tile { flex: 0 0 46%; aspect-ratio: 4 / 3; scroll-snap-align: start; } @media (min-width: 768px) { .dfc-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; height: 32rem; } .dfc-mosaic__main { aspect-ratio: auto; height: 100%; } .dfc-mosaic__side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; overflow: visible; padding: 0; min-height: 0; } .dfc-mosaic__side .dfc-mosaic__tile { flex: none; aspect-ratio: auto; min-height: 0; } .dfc-mosaic--n0 { grid-template-columns: 1fr; } .dfc-mosaic--n1 .dfc-mosaic__side { grid-template-columns: 1fr; grid-template-rows: 1fr; } .dfc-mosaic--n2 .dfc-mosaic__side { grid-template-columns: 1fr; } .dfc-mosaic--n3 .dfc-mosaic__side .dfc-mosaic__tile:first-child { grid-column: span 2; } } @media (min-width: 1024px) { .dfc-mosaic { height: 36rem; gap: 1rem; } .dfc-mosaic__side { gap: 1rem; } } .dfc-mosaic__tile > a { display: block; height: 100%; } /* "View all photos" pill (overrides Hello Elementor's button style). */ .dfc-pill, .dfc-pill:focus { background: rgba(255, 255, 255, .96) !important; color: #1a202c !important; border: 1px solid rgba(26, 32, 44, .15) !important; } .dfc-pill:hover { background: #1a202c !important; color: #fff !important; } /* ---------- Danforth Elementor widgets ---------- Containers holding a Danforth widget: no padding/gap, full width, so the sections sit edge to edge exactly like the built-in homepage. */ .e-con:has(> .elementor-widget[class*="elementor-widget-dfc-"]), .e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-dfc-"]), .e-con-inner:has(> .elementor-widget[class*="elementor-widget-dfc-"]) { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0; --row-gap: 0; --column-gap: 0; --widgets-spacing: 0; --content-width: 100%; --container-max-width: 100%; padding: 0; gap: 0; max-width: 100%; } .elementor-widget[class*="elementor-widget-dfc-"] { width: 100%; max-width: 100%; margin: 0; } /* Elementor resets image radius/shadow inside .elementor — restore the design's. */ .elementor .elementor-widget[class*="elementor-widget-dfc-"] img.rounded-lg { border-radius: .5rem; } .elementor .elementor-widget[class*="elementor-widget-dfc-"] img.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } /* Highlight strip overlaps the hero above it. */ .e-con:has(> .elementor-widget-dfc-features), .e-con:has(> .e-con-inner > .elementor-widget-dfc-features) { position: relative; z-index: 20; overflow: visible; } /* Elementor's reset (".elementor img { height:auto; max-width:100% }") out-ranks Tailwind's h-full, so on Elementor-built pages photos stopped filling their tiles and object-fit / object-position had no effect. Restore "fill the box" for the theme's photos (per-photo settings use figure. img.dfc-img and win). */ .elementor img.dfc-img, .elementor img.dfc-fill { height: 100%; } /* Floor plan 3D / 2D tabs + gallery filters (override Hello Elementor's pink button style). */ .dfc-tab, .dfc-tab:focus, .dfc-filter, .dfc-filter:focus { background: #fff !important; color: #1a202c !important; border-color: #d1d5db !important; } .dfc-tab:hover, .dfc-filter:hover { border-color: #c5a059 !important; color: #c5a059 !important; background: #fff !important; } .dfc-tab[aria-selected="true"], .dfc-filter[aria-pressed="true"] { background: #1a202c !important; color: #fff !important; border-color: #1a202c !important; } [data-panel][hidden] { display: none !important; } /* Gallery: masonry-style grid. Tile sizes are assigned by theme.js (no JS = uniform tiles). */ .dfc-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10.5rem; grid-auto-flow: dense; gap: .75rem; } @media (min-width: 768px) { .dfc-gallery-grid { grid-template-columns: repeat(var(--dfc-cols, 4), minmax(0, 1fr)); grid-auto-rows: 13rem; gap: 1.25rem; } } .dfc-tile { margin: 0; min-height: 0; } .dfc-tile[hidden] { display: none !important; } .dfc-tile a { display: block; height: 100%; } .dfc-tile--large { grid-column: span 2; grid-row: span 2; } .dfc-tile--wide { grid-column: span 2; } .dfc-tile--last { grid-column: span var(--dfc-last-sm, 1); } @media (min-width: 768px) { .dfc-tile--last { grid-column: span var(--dfc-last-md, 1); } } /* Keep AOS content visible inside the Elementor editor. */ .elementor-editor-active [data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- PDF flyer popup (assets/js/pdf-viewer.js) ---------- */ .dfc-pdf { position: fixed; inset: 0; z-index: 100003; display: flex; flex-direction: column; background: rgba(13, 17, 23, .97); color: #e5e7eb; font-family: 'Inter', sans-serif; } .dfc-pdf[hidden] { display: none; } .dfc-pdf__bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.25rem; background: #1a202c; border-bottom: 1px solid rgba(197, 160, 89, .4); } .dfc-pdf__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #fff; } .dfc-pdf__pages { white-space: nowrap; font-size: .8rem; color: #9ca3af; } .dfc-pdf__pages b { color: #c5a059; font-weight: 600; } .dfc-pdf a.dfc-pdf__download { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; background: #c5a059; color: #fff !important; border-radius: .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background .2s; } .dfc-pdf a.dfc-pdf__download:hover { background: #b08a45; } .dfc-pdf button { background: transparent !important; border: 0 !important; color: #fff; cursor: pointer; line-height: 1; padding: 0; } .dfc-pdf button:hover { color: #c5a059 !important; } .dfc-pdf button:disabled { opacity: .25; cursor: default; } .dfc-pdf button[hidden] { display: none !important; } .dfc-pdf .dfc-pdf__close { font-size: 2.1rem; padding: 0 .35rem; } .dfc-pdf__stage { position: relative; flex: 1; min-height: 0; } .dfc-pdf__scroll { position: absolute; inset: 0; display: flex; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; } .dfc-pdf__scroll canvas { display: block; flex: none; margin: auto; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .65); border-radius: 2px; } .dfc-pdf__loader, .dfc-pdf__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem; } .dfc-pdf__loader { background: #0d1117; z-index: 5; transition: opacity .3s; } .dfc-pdf__loader.is-hidden { opacity: 0; pointer-events: none; } .dfc-pdf__loader p, .dfc-pdf__error p { margin: 0; font-size: .85rem; color: #9ca3af; letter-spacing: .04em; } .dfc-pdf__error { display: none; z-index: 6; background: #0d1117; } .dfc-pdf__error.is-visible { display: flex; } .dfc-pdf__spinner { width: 42px; height: 42px; border: 3px solid rgba(255, 255, 255, .1); border-top-color: #c5a059; border-radius: 50%; animation: dfc-spin .8s linear infinite; } @keyframes dfc-spin { to { transform: rotate(360deg); } } .dfc-pdf .dfc-pdf__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 3rem; height: 3rem; border-radius: 9999px; font-size: 2rem; display: flex; align-items: center; justify-content: center; padding: 0 0 .2rem; background: rgba(26, 32, 44, .88) !important; border: 1px solid rgba(255, 255, 255, .2) !important; } .dfc-pdf .dfc-pdf__nav:hover { border-color: #c5a059 !important; } .dfc-pdf__prev { left: 1rem; } .dfc-pdf__next { right: 1rem; } .dfc-pdf__foot { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .6rem 1.25rem; background: #1a202c; border-top: 1px solid rgba(255, 255, 255, .08); } .dfc-pdf--single .dfc-pdf__thumbs { display: none; } .dfc-pdf__thumbs { display: flex; gap: .5rem; overflow-x: auto; max-width: 100%; padding: .2rem; scrollbar-width: none; } .dfc-pdf__thumbs::-webkit-scrollbar { display: none; } .dfc-pdf .dfc-pdf__thumb { flex: 0 0 auto; width: 2.8rem; height: 3.6rem; overflow: hidden; border: 2px solid transparent !important; border-radius: .25rem; background: #fff !important; opacity: .6; transition: opacity .2s, border-color .2s; } .dfc-pdf .dfc-pdf__thumb:hover { opacity: 1; } .dfc-pdf .dfc-pdf__thumb.is-active { opacity: 1; border-color: #c5a059 !important; } .dfc-pdf__thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; } .dfc-pdf__zoom { display: flex; align-items: center; gap: .25rem; margin-left: auto; } .dfc-pdf--single .dfc-pdf__zoom { margin-left: 0; } .dfc-pdf .dfc-pdf__zoom button { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; border-radius: .25rem; border: 1px solid rgba(255, 255, 255, .15) !important; } .dfc-pdf .dfc-pdf__zoom .dfc-pdf__zoomlevel { width: 4rem; font-size: .75rem; letter-spacing: .06em; } @media (max-width: 600px) { .dfc-pdf__bar { padding: .55rem .75rem; gap: .6rem; } .dfc-pdf__title { font-size: .95rem; } .dfc-pdf a.dfc-pdf__download span { display: none; } .dfc-pdf a.dfc-pdf__download { padding: .6rem .7rem; } .dfc-pdf .dfc-pdf__nav { width: 2.5rem; height: 2.5rem; font-size: 1.6rem; } .dfc-pdf__prev { left: .4rem; } .dfc-pdf__next { right: .4rem; } .dfc-pdf__foot { padding: .5rem .75rem; justify-content: space-between; } } /* Floor Plans page: plan finder chips, hidden cards, homepage rail */ .dfc-chip { font-size: 0.8125rem; font-weight: 600; color: #1a202c; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0.4rem 0.95rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .dfc-chip:hover { border-color: #c5a059; } .dfc-chip.is-active { background: #1a202c; border-color: #1a202c; color: #fff; } .dfc-chip:focus-visible, [data-sort-key]:focus-visible { outline: 2px solid #c5a059; outline-offset: 2px; } [data-plan][hidden] { display: none !important; } th[aria-sort="ascending"] [data-sort-key] span, th[aria-sort="descending"] [data-sort-key] span { color: #fff; } .dfc-rail { scrollbar-width: thin; scrollbar-color: #c5a059 transparent; } .dfc-rail::-webkit-scrollbar { height: 6px; } .dfc-rail::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 3px; } /* Header: slimmer after scrolling. */ .header-logo { transition: height .25s ease; } .dfc-header-row { transition: min-height .25s ease; } #site-header.is-scrolled .dfc-header-row { min-height: 4.25rem; } @media (min-width: 768px) { #site-header.is-scrolled .header-logo { height: 52px !important; } } /* Header: current page. */ .dfc-nav-link { position: relative; } .dfc-nav-link.is-current { color: #c5a059; font-weight: 600; } @media (min-width: 1280px) { .dfc-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem; height: 2px; background: #c5a059; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .dfc-nav-link:hover::after, .dfc-nav-link.is-current::after { transform: scaleX(1); } } .dfc-nav-child.is-current { color: #c5a059; background: rgba(197, 160, 89, .12); box-shadow: inset 3px 0 0 #c5a059; } .mobile-link.dfc-nav-link.is-current { background: rgba(197, 160, 89, .1); box-shadow: inset 3px 0 0 #c5a059; } .mobile-link.dfc-nav-child.is-current { box-shadow: none; font-weight: 600; } .dfc-prose a { color: #1a202c; text-decoration: underline; text-decoration-color: #c5a059; text-underline-offset: 3px; } .dfc-prose a:hover { color: #c5a059; } .dfc-prose h2 { font-size: 1.6rem; } .dfc-prose ul li { margin-bottom: .35rem; } /* ========================================================================== Phone / small-screen refinements. Everything below sits inside a phone- or short-screen media query, so desktop (1024px and wider) is untouched. ========================================================================== */ @media (max-width: 767px) { /* Bigger touch targets (the look stays the same; only the tappable area grows). */ .dfc-chip { min-height: 2.5rem; padding-inline: 1rem; } [data-sort-key] { min-height: 2.5rem; } #site-footer ul a, #site-footer nav a, #site-footer address a { display: inline-block; padding-block: .55rem; } a.inline-flex.border-b-2, a.text-sm.uppercase.tracking-widest { position: relative; } a.inline-flex.border-b-2::before, a.text-sm.uppercase.tracking-widest::before { content: ""; position: absolute; inset: -12px 0; } .dfc-pin::before { content: ""; position: absolute; inset: -9px; border-radius: 9999px; } .dfc-plan-tile h3 a, [data-dfc-sort-table] tbody th a { display: inline-block; padding-block: .6rem; } /* Readable small print. */ body [class*="text-[10px]"], body [class*="text-[11px]"], body .dfc-pin__label, body .dfc-pill { font-size: .75rem; } /* Forms: 16px text stops iPhones zooming in when a field is tapped. */ .fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .fluentform select, .fluentform textarea { font-size: 16px; min-height: 2.75rem; } .fluentform .ff-btn-submit { min-height: 2.75rem; } } /* Phones turned sideways (short screens): the hero grows with its content and the header slims down. */ @media (max-width: 1023px) and (max-height: 640px) { .dfc-hero { height: auto !important; min-height: 100dvh; padding: 7rem 0 5rem; } } @media (max-width: 1023px) and (max-height: 500px) { #site-header .dfc-header-row { min-height: 3.5rem; } #site-header .header-logo { height: 40px !important; } #mobile-menu { max-height: calc(100dvh - 3.75rem); } } /* Phones & tablets (menu = hamburger): the page must never be wider than the screen. AOS "fade-left/right" starts an element 100px to the side; on Android that widened the whole page (header and hamburger pushed off screen). Below 1024px those fades slide up instead, and overflow is clipped as a safety net (also for Elementor entrance animations). Desktop is unchanged. */ @media (max-width: 1023px) { html, body { overflow-x: hidden; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } [data-aos="fade-left"]:not(.aos-animate), [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(0, 40px, 0); } } /* Plan finder on phones: each filter is a full-width segmented control. */ @media (max-width: 767px) { .dfc-seg { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 4px; } .dfc-seg .dfc-chip { width: 100%; border-color: transparent; background: transparent; padding-inline: .25rem; min-height: 2.5rem; white-space: nowrap; } .dfc-seg .dfc-chip.is-active { background: #1a202c; border-color: #1a202c; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } } /* Plan finder on tablet / desktop: a filter group never breaks across lines (whole groups wrap instead). */ @media (min-width: 768px) { .dfc-chip { white-space: nowrap; } } /* Hello Elementor styles every