/* FRA Mobile Responsive Styles — applies below 960px; desktop unchanged above */ /* ── Our Writers dropdown — 5-column grid (desktop) ────────────────────────── WebPlus stacks all 74 writer links in a single absolute-positioned column, producing a ~3400px tall dropdown. Override to a 5-wide flex grid instead. */ #nav_14_B7M { display: flex !important; flex-wrap: wrap !important; width: 550px !important; height: auto !important; overflow: visible !important; } #nav_14_B7M > a { position: relative !important; left: auto !important; top: auto !important; flex: 0 0 110px !important; } /* Orange left-border + brighter background on the sub-menu popup */ #nav_14_B7M_M46, #nav_14_B7M_M23 { border-left: 3px solid #ff8517 !important; } #nav_14_B7M_M46 a, #nav_14_B7M_M23 a { filter: brightness(1.35) !important; } /* Hide static logo wrap on desktop; shown only in mobile media query below */ #fra-logo-wrap { display: none; } /* Mobile-only content divs — hidden on desktop, revealed on mobile by JS-assigned classes */ #divMain > .fra-mobile-only { display: none; } /* ── Global paragraph reset (all widths) ────────────────────────────────────── WebPlus generates P-x classes with hanging-indent patterns (margin-left + negative text-indent) and large fixed margins that only make sense in its absolute-positioned 960px layout. Reset them everywhere so text flows cleanly in both desktop and mobile contexts. */ #divMain p { text-indent: 0 !important; margin-left: 0 !important; } /* ── Older News page — uniform photo width ──────────────────────────────────── previousnews.html carries class="fra-news-page" on . Excludes the 21px bullet icons via :not([style*="width:21px"]). */ body.fra-news-page #divMain img[style*="float:left"]:not([style*="width:21px"]) { width: 100px !important; height: auto !important; } /* Small 21px bullet icons used on news pages: make inline so floats don't accumulate between list items on any screen size. */ #divMain p img[style*="width:21px;height:21px"] { float: none !important; display: inline-block !important; vertical-align: middle !important; margin: 0 4px 2px 0 !important; } @media screen and (max-width: 959px) { /* Hide WebPlus decorative 1px horizontal rule images — they show as stray black bars in mobile flow */ img[src="wpimages/wp61d48991_1a.png"] { display: none !important; } html, body { height: auto !important; overflow-x: hidden; margin: 0; padding: 0; } body { background: #fff !important; } body.fra-nav-open { overflow: hidden; } /* ── Static logo link (injected into each page HTML before ) ── */ #fra-logo-wrap { position: fixed; top: 0; left: 16px; z-index: 3001; display: flex; align-items: flex-end; gap: 10px; height: 58px; padding-bottom: 10px; box-sizing: border-box; text-decoration: none; } #fra-logo-wrap img { height: 38px; width: auto; display: block; } /* ── Header subtitle (appended to #fra-logo-wrap by JS) ── */ #fra-header-subtitle { color: #20476d; font-family: "Roboto Light", Arial, sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; line-height: 1; margin-bottom: 6px; } /* ── Fixed mobile header (injected by JS — hamburger only) ── */ #fra-header { display: flex; align-items: center; justify-content: flex-end; background: #acc2c8; padding: 0 16px; position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 3000; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,.2); } /* ── Hamburger button ── */ #fra-hamburger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 5px; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } #fra-hamburger span { display: block; width: 26px; height: 3px; background: #20476d; border-radius: 2px; transition: transform .28s ease, opacity .28s ease; } body.fra-nav-open #fra-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.fra-nav-open #fra-hamburger span:nth-child(2) { opacity: 0; } body.fra-nav-open #fra-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ── Slide-in nav panel ── */ #fra-nav-panel { position: fixed !important; top: 58px; left: 0; right: 0; bottom: 0; background: #163352; z-index: 2999; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .3s ease; padding: 8px 0 32px; box-sizing: border-box; } body.fra-nav-open #fra-nav-panel { transform: translateX(0); } #fra-nav-panel a { display: block !important; color: #cde !important; text-decoration: none !important; padding: 14px 24px !important; font-family: "Roboto Light", Arial, sans-serif !important; font-size: 17px !important; line-height: 1.4 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; transition: background .15s, color .15s !important; -webkit-tap-highlight-color: transparent; position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; background-image: none !important; } #fra-nav-panel a:hover, #fra-nav-panel a:active { background: rgba(255,255,255,.1) !important; color: #ff8517 !important; } .fra-subnav { display: none; background: rgba(0,0,0,.2); } .fra-subnav.open { display: block; } .fra-subnav a { font-size: 14px !important; padding: 11px 24px 11px 40px !important; color: #9ab !important; border-bottom-color: rgba(255,255,255,.06) !important; } .fra-subnav a:hover { color: #ff8517 !important; } .fra-nav-has-sub { display: flex !important; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.1); } .fra-nav-has-sub > a { flex: 1; border-bottom: none !important; } .fra-sub-toggle { background: none; border: none; border-left: 1px solid rgba(255,255,255,.12); color: #9ab; cursor: pointer; padding: 0 18px; font-size: 20px; transition: transform .2s; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; } .fra-nav-has-sub.open .fra-sub-toggle { transform: rotate(180deg); } /* ── Main container ── */ #divMain { width: 100% !important; height: auto !important; position: relative !important; margin: 0 auto !important; padding-top: 58px !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; background: #fff !important; overflow: visible !important; } /* Hide all direct children by default; JS classes reveal them */ #divMain > * { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; overflow: visible !important; display: none !important; } /* ── Revealed elements ── */ #divMain > .fra-page-title { display: block !important; padding: 16px 16px 0 !important; order: 1; } #divMain > .fra-page-title .Page-headline, #divMain > .fra-page-title span { font-size: 26px !important; line-height: 1.3 !important; color: #20476d !important; } #divMain > .fra-content { display: block !important; padding: 16px !important; order: 2; box-sizing: border-box !important; overflow: hidden !important; } #divMain > .fra-content p, #divMain > .fra-content span { font-size: 16px !important; line-height: 1.65 !important; } #divMain > .fra-content p { margin-right: 0 !important; } #divMain > .fra-content::after { content: ""; display: table; clear: both; } /* Images inside content divs — reset any absolute positioning, constrain width */ #divMain > .fra-content img { position: relative !important; left: auto !important; top: auto !important; max-width: 100% !important; height: auto !important; } /* Author photos / book cover thumbnails floated inside content divs. Remove the float so the image sits above the text (cleaner on narrow screens), and use width: !important to unambiguously beat the inline width attribute. :not([style*="width:21px"]) preserves small inline icons (book-title bullets etc). Covers both fra-content (single-bio pages) and fra-book-entry (multi-bio pages like paphitis.html). */ #divMain > .fra-content img[style*="float:left"]:not([style*="width:21px"]), #divMain > .fra-content img[style*="float:right"]:not([style*="width:21px"]), #divMain > .fra-book-entry img[style*="float:left"]:not([style*="width:21px"]), #divMain > .fra-book-entry img[style*="float:right"]:not([style*="width:21px"]) { float: none !important; display: block !important; width: 120px !important; height: auto !important; margin: 0 0 12px 0 !important; } /* Book covers grid injected by JS */ #fra-books-row { display: flex !important; flex-wrap: wrap !important; justify-content: center; padding: 8px !important; order: 5; } #fra-books-row img { width: 30% !important; max-width: 115px !important; height: auto !important; margin: 4px 1.5% !important; display: block !important; position: static !important; left: auto !important; top: auto !important; } #divMain > .fra-footer { display: block !important; text-align: center !important; padding: 20px 16px !important; border-top: 1px solid #e5e5e5 !important; margin-top: 8px !important; order: 99; } #divMain > .fra-footer span { font-size: 13px !important; color: #888 !important; line-height: 1.5 !important; } /* ── Book entry blocks (heading + body text in same div, e.g. books page) ── */ #divMain > .fra-book-entry { display: block !important; padding: 16px !important; order: 2; box-sizing: border-box !important; overflow: hidden !important; } #divMain > .fra-book-entry::after { content: ""; display: table; clear: both; } #divMain > .fra-book-entry .Page-headline, #divMain > .fra-book-entry .Page-headline span, #divMain > .fra-book-entry .Page-headline a { font-size: 20px !important; line-height: 1.3 !important; color: #20476d !important; } #divMain > .fra-book-entry p:not(.Page-headline), #divMain > .fra-book-entry p:not(.Page-headline) span { font-size: 16px !important; line-height: 1.65 !important; } #divMain > .fra-book-entry a { color: #20476d !important; text-decoration: underline !important; } #divMain > .fra-book-entry a:hover { color: #ff8517 !important; } /* Direct children of #divMain (page content images on individual book pages). align-self: flex-start prevents the flex-column stretch that would otherwise force width:auto images to fill the full container width. */ #divMain > .fra-inline-img { display: block !important; align-self: center !important; max-width: calc(100% - 32px) !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 auto 8px !important; order: 2; } /* Cover image injected by JS into book entry blocks. 58px = 2x-native for 115px source images (58*2=116≈115 device px → sharp on Retina). New higher-res covers (230px+) will allow increasing this back to 80px or more. */ .fra-book-cover-img { float: left; width: 58px; height: auto; margin: 4px 12px 8px 0; display: block; } /* Keep hidden */ #divMain > .fra-tagline, #divMain > .fra-agency-heading, #divMain > .fra-logo, #divMain > .fra-map, #divMain > .fra-nav, #divMain > .fra-gallery, #divMain > .fra-dropdown, #divMain > .fra-book-img-src, #divMain > .fra-book-cover-link { display: none !important; } /* Links inside content */ #divMain > .fra-content a { color: #20476d !important; text-decoration: underline !important; } #divMain > .fra-content a:hover { color: #ff8517 !important; } /* ── Mobile carousel (homepage) ── */ /* Width/height/overflow are set via JS inline styles to bypass specificity wars */ #divMain > #fra-mobile-carousel { display: block !important; order: -1; } #fra-carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0; background: #acc2c8; } .fra-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); transition: background 0.3s; display: inline-block; } .fra-dot.fra-active { background: #fff; } }