/* ========================================= MAIN MENU PILL - TRANSPARENT GLASS ========================================= */ #header { position: relative !important; z-index: 9999 !important; } #header:not(.is-sticky):not(.mobile-sticky) .bg-box { background: rgba(248, 246, 240, 0.20) !important; background-color: rgba(248, 246, 240, 0.20) !important; backdrop-filter: blur(22px) saturate(260%) !important; -webkit-backdrop-filter: blur(22px) saturate(260%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(0, 0, 0, 0.05) !important; } /* Keep dropdowns above article cards */ #header .sub-menu, #header .children { z-index: 10000 !important; } /* ========================================================= NOTICE BAR — REVERSED PASTEL TLDR GRADIENT BLUE → PURPLE → CORAL → ORANGE → YELLOW → GREEN ========================================================= */ .notice.text { background: linear-gradient( 90deg, #B7E1F2 0%, #D8B8E2 20%, #F7B5BA 40%, #FFD0A3 60%, #FFF0A8 80%, #C8EDBE 100% ) !important; } /* ========================================================= RECOLETA FONT ========================================================= */ @font-face { font-family: "RecoletaCustom"; src: url("https://appletldr.com/wp-content/uploads/2026/08/recoleta-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================= ARTICLE MAIN TITLE ========================================================= */ #single h1, .single-content h1, article h1 { font-family: "RecoletaCustom", Georgia, serif !important; font-weight: 700 !important; } #header .logo img { width: 60px; height: 60px; aspect-ratio: 1 / 1; } /* ========================================================= FOOTER TITLE — RECOLETA ========================================================= */ #footer .widget-title, #footer .title { font-family: "RecoletaCustom", Georgia, serif !important; font-weight: 700 !important; } /* Featured image edge-gap fix */ .featured-image .thumb { display: block; overflow: hidden; border-radius: 15px; line-height: 0; } .featured-image .thumb img.post-image, .featured-image .thumb img.fullimage { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; transform: scale(1.004); transform-origin: center center; }/* Featured image edge-gap fix */ .featured-image .thumb { display: block; overflow: hidden; border-radius: 15px; line-height: 0; } .featured-image .thumb img.post-image, .featured-image .thumb img.fullimage { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; transform: scale(1.004); transform-origin: center center; } /* Remove divider above footer subscription section */ #footer .epcl-subscribe, #footer .epcl-subscribe::before, #footer .epcl-subscribe::after { border-top: 0 !important; box-shadow: none !important; } #footer .epcl-subscribe hr { display: none !important; } /* AppleTLDR footer subscription pill */ #footer .jetpack_subscription_widget form { position: relative; width: 100%; max-width: 500px; margin: 0 auto; } /* Email field wrapper */ #footer .jetpack_subscription_widget #subscribe-email { margin: 0; } /* Email field */ #footer .jetpack_subscription_widget #subscribe-email input { display: block; width: 100%; height: 54px; box-sizing: border-box; /* Leave room for the button */ padding: 0 135px 0 20px; border: 1px solid #353a44; border-radius: 999px; background: #fff; outline: none; } /* Button wrapper — place it inside the email pill */ #footer .jetpack_subscription_widget #subscribe-submit { position: absolute; top: 5px; right: 5px; margin: 0; z-index: 2; } /* Subscribe button */ #footer .jetpack_subscription_widget #subscribe-submit input, #footer .jetpack_subscription_widget #subscribe-submit button { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; } /* Reduce empty space above footer subscription area */ #footer { margin-top: 60px !important; } /* Tighten spacing inside footer subscribe section */ #footer .epcl-subscribe { padding-top: 1px !important; padding-bottom: 1px !important; } /* Reduce gap between footer heading and subscribe form */ #footer .epcl-subscribe h3, #footer .epcl-subscribe .title { margin-bottom: 1px !important; } /* Pull footer subscribe field closer to heading */ #footer .footer-subscribe-wrapper { margin-top: -30px !important; margin-bottom: -50px } /* ======================================== FOOTER — TABLET / MOBILE SPACING ======================================== /* iPad / tablet */ @media screen and (max-width: 1024px) { #footer { padding-top: 70px !important; padding-bottom: 50px !important; } } /* iPhone / mobile */ @media screen and (max-width: 767px) { #footer { padding-top: 65px !important; padding-bottom: 55px !important; } } /* ======================================== HOME PAGE ONLY iPAD MINI PORTRAIT — SIDE-BY-SIDE CARDS ======================================== */ @media screen and (min-width: 700px) and (max-width: 767px) and (orientation: portrait) { /* ---------------------------------------- ARTICLE LAYOUT ---------------------------------------- */ body.home div.articles.classic article.epcl-flex { display: flex !important; flex-direction: row !important; align-items: stretch !important; } /* ---------------------------------------- IMAGE COLUMN ---------------------------------------- */ body.home div.articles.classic article .post-format-wrapper { display: block !important; flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important; margin: 0 !important; } body.home div.articles.classic article .post-format-image { width: 100% !important; height: 100% !important; margin: 0 auto !important; } /* ---------------------------------------- FEATURED IMAGE FRAME Keep existing sizing logic intact, visually reduce height from centre ---------------------------------------- */ body.home div.articles.classic article .featured-image { position: relative !important; width: 90% !important; height: 100% !important; margin: 0 auto !important; border: 1px solid var(--epcl-border-color) !important; border-radius: 15px !important; box-sizing: border-box !important; overflow: hidden !important; transform: scaleY(0.96) !important; transform-origin: center center !important; } /* ---------------------------------------- CLICKABLE IMAGE WRAPPER ---------------------------------------- */ body.home div.articles.classic article .featured-image .thumb { position: absolute !important; top: -2px !important; right: auto !important; bottom: -3px !important; left: 50% !important; display: block !important; width: 95% !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 15px !important; overflow: hidden !important; line-height: 0 !important; transform: translateX(-50%) !important; transform-origin: center center !important; } /* ---------------------------------------- ACTUAL FEATURED IMAGE ---------------------------------------- */ body.home div.articles.classic article .featured-image .thumb img.post-image, body.home div.articles.classic article .featured-image .thumb img.fullimage { position: absolute !important; top: 0 !important; right: auto !important; bottom: 0 !important; left: 50% !important; display: block !important; width: 95% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover !important; border-radius: inherit !important; transform: translateX(-50%) scaleX(1.06) !important; transform-origin: center center !important; } /* ---------------------------------------- CATEGORY TAG Move slightly further from image edges ---------------------------------------- */ body.home div.articles.classic article .featured-image .tags { top: 16px !important; left: 16px !important; } /* ---------------------------------------- ARTICLE CONTENT ---------------------------------------- */ body.home div.articles.classic article .info { display: block !important; flex: 1 1 62% !important; width: 62% !important; max-width: 62% !important; min-width: 0 !important; } } @media screen and (min-width: 700px) and (max-width: 767px) and (orientation: portrait) { body.home div.articles.classic article .tags > a[class*="tag-link-"] { position: relative !important; left: 14px !important; top: 9px !important; margin: 0 !important; } } /* ======================================== SOCIALS WIDGET — RESPONSIVE SIDEBAR FIX ALL iPAD / NARROW SIDEBAR SIZES ======================================== */ /* Let the Socials widget respond to its own width */ body.home #epcl_social-2 { container-type: inline-size; } /* Narrow sidebar version */ @container (max-width: 320px) { body.home #epcl_social-2 .icons { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Preserve vertical spacing, tighten horizontal spacing */ column-gap: 4px !important; row-gap: 22px !important; width: 100% !important; max-width: 100% !important; align-items: center !important; justify-items: center !important; box-sizing: border-box !important; } } /* ======================================== TAG CLOUD — CONTENT-DRIVEN HEIGHT ALL NARROW SIDEBAR / iPAD LAYOUTS ======================================== */ body.home #epcl_tag_cloud-2 { align-self: flex-start !important; height: fit-content !important; min-height: 0 !important; max-height: none !important; } /* If sidebar wrapper is stretching children */ body.home #sidebar .sidebar-wrapper { align-items: flex-start !important; } /* Ensure the tag container itself isn't forcing height */ body.home #epcl_tag_cloud-2 .tagcloud { height: auto !important; min-height: 0 !important; max-height: none !important; } /* ======================================== ALL iPAD / TABLET SIZES INCLUDING SAFARI 85% ZOOM KEEP ARTICLE META ROW ON ONE LINE ======================================== */ @media screen and (min-width: 700px) and (max-width: 1450px) { body.home div.articles.classic article .meta-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; white-space: nowrap !important; } body.home div.articles.classic article .meta-wrapper .tags { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 12px 0 0 !important; white-space: nowrap !important; } body.home div.articles.classic article .meta-wrapper .tags > a[class*="tag-link-"] { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; padding-left: 12px !important; padding-right: 12px !important; } body.home div.articles.classic article .meta-wrapper .meta { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; width: auto !important; max-width: none !important; margin: 0 !important; white-space: nowrap !important; } body.home div.articles.classic article .meta-wrapper .meta > * { white-space: nowrap !important; } } /* ======================================== ALL iPADS — ALIGN TAG HEXAGON WITH TEXT ======================================== */ @media screen and (min-width: 700px) and (max-width: 1450px) { body.home div.articles.classic article .tags > a[class*="tag-link-"] svg { position: relative !important; top: 2px !important; } } /* ======================================== SINGLE ARTICLE — iPAD PORTRAIT FEATURED IMAGE HEIGHT FIX ======================================== */ @media screen and (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) { body.single-post .featured-image, body.single-post .post-format-image, body.single-post .post-format-wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; } body.single-post .featured-image img, body.single-post .post-format-image img, body.single-post .post-format-wrapper img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top !important; } } /* ======================================== SINGLE ARTICLE — iPHONE PRO MAX LANDSCAPE FEATURED IMAGE HEIGHT FIX ======================================== */ @media screen and (min-width: 850px) and (max-width: 956px) and (max-height: 500px) and (orientation: landscape) { body.single-post .featured-image, body.single-post .post-format-image, body.single-post .post-format-wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; } body.single-post .featured-image img, body.single-post .post-format-image img, body.single-post .post-format-wrapper img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top !important; } } /* ======================================== SINGLE ARTICLE — LANDSCAPE KEEP ARTICLE TITLE ON ONE LINE iPhone Pro Max 85% iPad Mini 100% / 85% iPad 11" 100% / 85% iPad 13" 100% ======================================== */ @media screen and (min-width: 1000px) and (max-width: 1450px) and (orientation: landscape) { body.single-post h1.main-title.title { display: block !important; width: max-content !important; max-width: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-size: clamp(18px, 2vw, 28px) !important; line-height: 1.15 !important; } } /* ======================================== iPAD PRO 13-INCH LANDSCAPE — 100% ZOOM KEEP SINGLE ARTICLE TITLE ON ONE LINE ======================================== */ @media screen and (min-width: 1340px) and (max-width: 1380px) and (orientation: landscape) { body.single-post h1.main-title.title { display: block !important; width: 100% !important; max-width: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-size: 22px !important; line-height: 1.15 !important; } } /* ======================================== iPAD PRO 13-INCH LANDSCAPE HIDE TIME-TO-READ WHEN SPACE IS TIGHT ======================================== */ @media screen and (min-width: 1340px) and (max-width: 1380px) and (orientation: landscape) { body.single-post .min-read { display: none !important; } } /* ======================================== ALL iPAD LANDSCAPE SIZE CLASSES HIDE TIME-TO-READ AT TIGHT LAYOUTS ======================================== */ @media screen and (min-width: 850px) and (max-width: 1450px) and (orientation: landscape) { body.single-post .min-read { display: none !important; } } /* ======================================== HOME PAGE — ARTICLE CARD CATEGORY COLOUR KEEP COLOURS, REMOVE OVERSHOOT ALL DEVICE CLASSES ======================================== */ body.home div.articles.classic article.epcl-flex.bg-box { position: relative !important; border-radius: var(--epcl-boxes-border-radius, 15px) !important; overflow: hidden !important; } /* Main category overlay */ body.home div.articles.classic article.epcl-flex.bg-box .epcl-category-overlay { top: -3px !important; right: -3px !important; bottom: -3px !important; left: -3px !important; margin: 0 !important; border-radius: 0 !important; } /* Keep Groovy's colour layer, but stop it extending down/right */ body.home div.articles.classic article.epcl-flex.bg-box .epcl-category-overlay::before { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; opacity: 0.25 !important; border-radius: 0 !important; } /* ======================================== HOME PAGE — REPLACE ORIGINAL CARD BORDER WITH WORKING OUTLINE ALL DEVICE CLASSES ======================================== */ body.home div.articles.classic article.epcl-flex.bg-box { /* Kill original border */ border: none !important; border-width: 0 !important; /* Keep replacement border */ outline: 1px solid var(--epcl-border-color) !important; outline-offset: -1.px !important; } } /* ======================================== UNIVERSAL JETPACK SUBSCRIPTION PILL Sidebar + inline article embeds ======================================== */ /* ---------------------------------------- FORM ---------------------------------------- */ .wp-block-jetpack-subscriptions form { width: 100%; margin: 0; } /* ---------------------------------------- PILL WRAPPER ---------------------------------------- */ .wp-block-jetpack-subscriptions__supports-newline { position: relative !important; width: 100% !important; box-sizing: border-box !important; border-radius: 999px !important; overflow: hidden !important; } /* ---------------------------------------- EMAIL FIELD ---------------------------------------- */ .wp-block-jetpack-subscriptions input[type="email"] { display: block !important; width: 100% !important; height: 54px !important; box-sizing: border-box !important; /* Leave room for Submit button */ padding: 0 120px 0 18px !important; margin: 0 !important; border: 1px solid #353a44 !important; border-radius: 999px !important; background: #fff !important; outline: none !important; } /* ---------------------------------------- SUBMIT BUTTON ---------------------------------------- */ .wp-block-jetpack-subscriptions button, .wp-block-jetpack-subscriptions input[type="submit"] { position: absolute !important; top: 5px !important; right: 5px !important; width: auto !important; min-width: 105px !important; height: 44px !important; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; cursor: pointer !important; z-index: 2 !important; } /* ---------------------------------------- KEEP INNER PIECES PILL-SHAPED ---------------------------------------- */ .wp-block-jetpack-subscriptions__supports-newline input, .wp-block-jetpack-subscriptions__supports-newline button { border-radius: 999px !important; } /* ---------------------------------------- FOCUS GLOW ---------------------------------------- */ .wp-block-jetpack-subscriptions__supports-newline:focus-within { box-shadow: 0 0 0 3px #f5c451, 0 0 14px rgba(245, 196, 81, 0.45) !important; transition: box-shadow 0.2s ease; } /* ======================================== SIDEBAR-ONLY FLOATING "SUBSCRIBE" TITLE ======================================== */ #sidebar .widget:has(.wp-block-jetpack-subscriptions) { position: relative !important; } #sidebar .widget:has(.wp-block-jetpack-subscriptions)::before { content: "Subscribe🧃"; position: absolute !important; top: -18px !important; left: 25px !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px; padding: 0 20px; background: #fff; color: #353333; border: 1px solid #353333; border-radius: 999px; font-family: var(--epcl-title-font-family); font-size: 21px; font-weight: 850; line-height: 1; white-space: nowrap; } /* ========================================================= SOCIALS WIDGET — 2 ROWS × 4 LARGE ICONS HOMEPAGE + ARTICLE SIDEBARS ========================================================= */ #sidebar .widget_epcl_social { /* Default desktop icon size */ --social-icon-size: 60px; /* Allow layout to respond to the widget's own width */ container-type: inline-size; } /* ---------------------------------------- 4-COLUMN ICON GRID ---------------------------------------- */ #sidebar .widget_epcl_social .icons { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 22px !important; width: 100% !important; max-width: 100% !important; align-items: center !important; justify-items: center !important; box-sizing: border-box !important; } /* ---------------------------------------- HIDE SOCIAL NETWORK NAMES ---------------------------------------- */ #sidebar .widget_epcl_social .icons .name { display: none !important; } /* ---------------------------------------- SOCIAL LINK CONTAINER ---------------------------------------- */ #sidebar .widget_epcl_social .icons > a { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--social-icon-size) !important; height: var(--social-icon-size) !important; min-width: var(--social-icon-size) !important; max-width: var(--social-icon-size) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* ---------------------------------------- ACTUAL CIRCULAR ICON ---------------------------------------- */ #sidebar .widget_epcl_social .icons > a .icon { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--social-icon-size) !important; height: var(--social-icon-size) !important; min-width: var(--social-icon-size) !important; max-width: var(--social-icon-size) !important; margin: 0 !important; flex: 0 0 var(--social-icon-size) !important; border-radius: 50% !important; } /* ========================================================= NARROW SIDEBAR Prevent 4-column grid from overspilling Applies to homepage + article widgets automatically ========================================================= */ @container (max-width: 320px) { #sidebar .widget_epcl_social .icons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Four 60px icons fit; large desktop gaps do not */ column-gap: 4px !important; row-gap: 22px !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } /* DARK MODE — main page gradient */ html.dark-mode { --epcl-background-color: linear-gradient( 135deg, #202327 0%, #181a1d 50%, #101214 100% ); } html.dark-mode #wrapper { background: transparent !important; } html.dark-mode #wrapper { background: transparent !important; } /* ======================================== SOCIALS — TIGHT iPAD LAYOUT SPACING ======================================== */ /* iPad Mini / 11" landscape @ 85% iPad 13" landscape @ 100% */ @media screen and (min-width: 1300px) and (max-width: 1450px) and (orientation: landscape) { #sidebar .widget_epcl_social { --social-icon-size: 58px; } #sidebar .widget_epcl_social .icons { column-gap: 8px !important; row-gap: 26px !important; } } /* iPad 13" portrait @ 85% */ @media screen and (min-width: 1180px) and (max-width: 1230px) and (orientation: portrait) { #sidebar .widget_epcl_social { --social-icon-size: 58px; } #sidebar .widget_epcl_social .icons { column-gap: 8px !important; row-gap: 26px !important; } } /* ========================================= STICKY MENU ========================================= */ @media (min-width: 1367px) { #header.is-sticky .menu-wrapper, #header.is-sticky .menu-wrapper::before, #header.is-sticky .menu-wrapper::after { background: rgba(222, 235, 242, 0.45) !important; background-color: rgba(222, 235, 242, 0.45) !important; background-image: none !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; border-bottom-color: rgba(50, 50, 50, 0.65) !important; } #header.is-sticky .grid-container, #header.is-sticky .bg-box, #header.is-sticky .bg-box::before, #header.is-sticky .bg-box::after { background: transparent !important; background-color: transparent !important; background-image: none !important; } } /* ========================================= MOBILE / TABLET STICKY ========================================= */ @media (max-width: 1366px) { #header.mobile-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; background: rgba(222, 235, 242, 0.50) !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; } #header.mobile-sticky .menu-wrapper, #header.mobile-sticky .grid-container, #header.mobile-sticky .bg-box { background: transparent !important; } } /* ========================================= iPAD / TABLET Glass confined to the pill ========================================= */ @media (min-width: 768px) and (max-width: 1366px) { #header.mobile-sticky { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 0 !important; box-shadow: none !important; } #header.mobile-sticky .bg-box { background: rgba(222, 235, 242, 0.50) !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; border: 1px solid rgba(50, 50, 50, 0.65) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; } } /* ========================================= GROOVY NATIVE STICKY GLASS Desktop + 13" iPad landscape ========================================= */ #header.is-sticky .menu-wrapper { background: rgba(222, 235, 242, 0.45) !important; background-image: none !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; border-bottom: 1px solid rgba(50, 50, 50, 0.65) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; } #header.is-sticky .menu-wrapper .bg-box, #header.is-sticky .menu-wrapper .grid-container { background: transparent !important; background-color: transparent !important; background-image: none !important; } #header.is-sticky .menu-wrapper .bg-box { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================= CONTINUE READING - GLASS EFFECT Preserve original border + dark shadow ========================================= */ a.continue-reading.epcl-button { background: rgba(255, 255, 255, 0.50) !important; background-color: rgba(255, 255, 255, 0.80) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; } /* ========================================= ARTICLE TAGS - GLASS EFFECT Preserve original border + styling ========================================= */ article .tags a { background: rgba(255, 255, 255, 0.80) !important; background-color: rgba(255, 255, 255, 0.80) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; } /* ========================================= DESKTOP SUBMENUS Center dropdown + child items ========================================= */ @media (min-width: 1367px) { /* Anchor submenu to its parent */ #header .main-nav > ul > li { position: relative; } /* Center submenu beneath parent */ #header .main-nav > ul > li > ul.sub-menu, #header .main-nav > ul > li > ul.children { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; text-align: center !important; } /* Center child item text */ #header .main-nav > ul > li > ul.sub-menu > li > a, #header .main-nav > ul > li > ul.children > li > a { text-align: center !important; } } /* ========================================= DESKTOP SUBMENU ITEM HOVER PILLS Compact pill without changing item spacing ========================================= */ @media (min-width: 1367px) { #header .main-nav > ul > li > ul.sub-menu > li > a, #header .main-nav > ul > li > ul.children > li > a { position: relative !important; z-index: 1 !important; background: transparent !important; border: 0 !important; } #header .main-nav > ul > li > ul.sub-menu > li > a::before, #header .main-nav > ul > li > ul.children > li > a::before { content: "" !important; position: absolute !important; z-index: -1 !important; /* Shorter vertically, tighter horizontally */ top: 5px !important; bottom: 5px !important; left: 11px !important; right: 11px !important; border: 1px solid transparent !important; border-radius: 999px !important; background: transparent !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } #header .main-nav > ul > li > ul.sub-menu > li > a:hover::before, #header .main-nav > ul > li > ul.children > li > a:hover::before { background: rgba(245, 248, 250, 0.78) !important; border-color: #49504D !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } } /* ========================================= SEARCH OVERLAY - GLASS BACKGROUND More saturated backdrop ========================================= */ .mfp-bg { background: rgba(222, 235, 242, 0.98) !important; background-color: rgba(222, 235, 242, 0.68) !important; backdrop-filter: blur(50px) saturate(500%) !important; -webkit-backdrop-filter: blur(50px) saturate(440%) !important; } /* ========================================= SEARCH OVERLAY - ABOVE HEADER / MENU ========================================= */ /* Glass background layer */ .mfp-bg { z-index: 100000 !important; } /* Search content layer */ .mfp-wrap { z-index: 100001 !important; } /* ========================================= SITE BACKGROUND - PASTEL GRADIENT Keeps existing body decorations ========================================= */ html { background-color: #e7eef2 !important; } /* Gradient lives underneath the entire site */ html::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient( circle at 15% 10%, rgba(255, 190, 205, 0.34) 0%, transparent 34% ), radial-gradient( circle at 88% 28%, rgba(185, 220, 255, 0.36) 0%, transparent 38% ), radial-gradient( circle at 18% 72%, rgba(205, 235, 190, 0.30) 0%, transparent 38% ), radial-gradient( circle at 85% 88%, rgba(225, 200, 245, 0.28) 0%, transparent 40% ), #e7eef2 !important; } /* * Important: * only remove the body's flat colour. * Do NOT use "background:" here because that * would wipe out your decorative background images. */ body { background-color: transparent !important; } /* /* /* ========================================================= APPLETLDR FULLSCREEN MOBILE / TABLET MENU COMPLETE STANDALONE VERSION ========================================================= */ /* ========================================================= FULLSCREEN OVERLAY ========================================================= */ .atldr-fs-menu { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 2147483000 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: max(26px, env(safe-area-inset-top)) 30px max(24px, env(safe-area-inset-bottom)) 30px !important; /* AppleTLDR pastel glass */ background: radial-gradient( circle at 10% 10%, rgba(255, 196, 211, 0.34), transparent 38% ), radial-gradient( circle at 90% 30%, rgba(190, 220, 255, 0.34), transparent 42% ), radial-gradient( circle at 20% 85%, rgba(205, 238, 195, 0.28), transparent 42% ), rgba(235, 241, 243, 0.88) !important; -webkit-backdrop-filter: blur(40px) saturate(220%) !important; backdrop-filter: blur(40px) saturate(220%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; transition: opacity 250ms ease, visibility 250ms ease !important; } /* ========================================================= OPEN ========================================================= */ body.atldr-fs-open .atldr-fs-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Lock background */ body.atldr-fs-open { overflow: hidden !important; } /* ========================================================= CLOSE BUTTON ========================================================= */ .atldr-fs-close { appearance: none !important; -webkit-appearance: none !important; position: fixed !important; left: var( --atldr-close-left, 20px ) !important; top: var( --atldr-close-top, 20px ) !important; width: var( --atldr-close-width, 44px ) !important; height: var( --atldr-close-height, 44px ) !important; z-index: 2147483100 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; touch-action: manipulation !important; opacity: 0; transition: opacity 180ms ease !important; } body.atldr-fs-open .atldr-fs-close { opacity: 1; } /* X */ .atldr-fs-close::before, .atldr-fs-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; border-radius: 999px; background: #353A44; } .atldr-fs-close::before { transform: translate(-50%, -50%) rotate(45deg); } .atldr-fs-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ========================================================= VIEW AREA ========================================================= */ .atldr-fs-views { position: relative; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; overflow: hidden; } /* ========================================================= MAIN VIEW ========================================================= */ .atldr-fs-main { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: opacity 220ms ease, transform 280ms cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 220ms ease; } /* Main view leaves when submenu opens */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-main { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-36px); } /* ========================================================= MAIN MENU GROUP Group is centred. Individual labels remain left aligned. ========================================================= */ .atldr-fs-main-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: fit-content !important; max-width: 88vw !important; margin: auto !important; padding: 24px 0 !important; list-style: none !important; text-align: left !important; } .atldr-fs-main-list > li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; text-align: left !important; } .atldr-fs-main-list > li::before, .atldr-fs-main-list > li::after { display: none !important; content: none !important; } .atldr-fs-main-list > li > a { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 10px 0 !important; white-space: nowrap !important; text-align: left !important; font-family: "Recoleta", serif !important; font-size: clamp( 30px, 6vw, 48px ) !important; font-weight: 400 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; color: #333 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer !important; touch-action: manipulation !important; } /* Hide nested menus inside main clone */ .atldr-fs-main-list ul.sub-menu { display: none !important; } /* ========================================================= SUBMENU VIEW ========================================================= */ .atldr-fs-submenu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(36px); transition: opacity 220ms ease, transform 280ms cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 220ms ease; } .atldr-fs-menu.atldr-submenu-open .atldr-fs-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* ========================================================= SUBMENU BLOCK Back button remains above the menu items. ========================================================= */ .atldr-fs-submenu-content { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 88vw; margin: auto; padding: 24px 0; box-sizing: border-box; text-align: left; } /* ========================================================= BACK BUTTON ========================================================= */ .atldr-fs-back { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 20px 0 !important; padding: 6px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--epcl-font-family) !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; color: #353A44 !important; text-transform: uppercase; cursor: pointer !important; touch-action: manipulation !important; } .atldr-fs-back::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 3px; } /* ========================================================= SUBMENU LIST ========================================================= */ .atldr-fs-submenu-list { width: fit-content; max-width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; } .atldr-fs-submenu-list > li { display: block; width: auto; margin: 0; padding: 0; list-style: none; text-align: left; } .atldr-fs-submenu-list > li::before, .atldr-fs-submenu-list > li::after { display: none !important; content: none !important; } .atldr-fs-submenu-list > li > a { display: inline-block; width: auto; margin: 0; padding: 9px 0; white-space: nowrap; text-align: left; font-family: "Recoleta", serif !important; font-size: clamp( 25px, 5vw, 38px ) !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; color: #353A44 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .atldr-fs-submenu-list ul.sub-menu { display: none !important; } /* ========================================================= SOCIALS ========================================================= */ .atldr-fs-socials { position: relative; z-index: 20; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; width: 100%; margin: 0; padding: 14px 0 4px 0; transition: opacity 180ms ease, visibility 180ms ease; } .atldr-fs-socials .epcl-social-buttons { display: grid !important; grid-template-columns: repeat( 4, 52px ) !important; grid-auto-rows: 52px !important; justify-content: center !important; align-items: center !important; gap: 14px 18px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .atldr-fs-socials .epcl-social-buttons a { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; } .atldr-fs-socials .epcl-social-buttons a svg { width: 26px !important; height: 26px !important; max-width: none !important; max-height: none !important; } /* Hide socials in submenu */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-socials { opacity: 0; visibility: hidden; pointer-events: none; } /* ========================================================= LANDSCAPE ========================================================= */ @media (orientation: landscape) and (max-height: 900px) { .atldr-fs-menu { padding-top: max( 18px, env(safe-area-inset-top) ) !important; padding-bottom: max( 18px, env(safe-area-inset-bottom) ) !important; } .atldr-fs-main-list > li > a { padding: 7px 0 !important; } .atldr-fs-submenu-list > li > a { padding: 7px 0 !important; } } /* ========================================================= DESKTOP SAFETY Custom fullscreen system cannot appear at desktop widths. ========================================================= */ @media screen and (min-width: 1366px) { .atldr-fs-menu { display: none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .atldr-fs-menu, .atldr-fs-main, .atldr-fs-submenu, .atldr-fs-close, .atldr-fs-socials { transition: none !important; } } /* Prevent the closed fullscreen menu from catching taps. */ body:not(.atldr-fs-open) .atldr-fs-menu, body:not(.atldr-fs-open) .atldr-fs-menu * { visibility: hidden !important; pointer-events: none !important; } /* Keep the page layout stable beneath the glass overlay. */ body.atldr-fs-open { overflow: visible !important; } /* Glass overlay and smooth fade. */ .atldr-fs-menu { background: radial-gradient( circle at 10% 10%, rgba(255, 196, 211, 0.24), transparent 38% ), radial-gradient( circle at 90% 30%, rgba(190, 220, 255, 0.24), transparent 42% ), radial-gradient( circle at 20% 85%, rgba(205, 238, 195, 0.20), transparent 42% ), rgba(235, 241, 243, 0.68) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 320ms ease, visibility 0s linear 320ms !important; } body.atldr-fs-open .atldr-fs-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: opacity 320ms ease, visibility 0s linear 0s !important; } /* Prevent scrolling from spilling onto the page underneath. */ .atldr-fs-main, .atldr-fs-submenu { overscroll-behavior: contain; } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .atldr-fs-menu { transition: none !important; } } body:not(.atldr-fs-open) .atldr-fs-menu, body:not(.atldr-fs-open) .atldr-fs-menu * { visibility: hidden !important; pointer-events: none !important; } /* Keep the closed menu from intercepting taps. */ body:not(.atldr-fs-open) .atldr-fs-menu, body:not(.atldr-fs-open) .atldr-fs-menu * { pointer-events: none !important; } /* Match the glass fade to the item animation. */ .atldr-fs-menu { transition: opacity 456ms ease, visibility 0s linear 456ms !important; } body.atldr-fs-open .atldr-fs-menu { transition: opacity 456ms ease, visibility 0s linear 0s !important; } /* Use transitions so the zoom reverses when closing. */ .atldr-fs-main-list { animation: none !important; opacity: 0; transform: scale(0.92); transform-origin: center center; transition: opacity 456ms ease, transform 456ms cubic-bezier(0.22, 1, 0.36, 1); } body.atldr-fs-open .atldr-fs-main-list { animation: none !important; opacity: 1; transform: scale(1); } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .atldr-fs-menu, body.atldr-fs-open .atldr-fs-menu, .atldr-fs-main-list { transition: none !important; animation: none !important; } } /* Hide the original icon while the animated version takes over. Restore it after the closing animation finishes. */ @media (max-width: 1365px) { #header .menu-mobile svg { transition: opacity 0s linear 456ms; } body.atldr-fs-open #header .menu-mobile svg { opacity: 0 !important; transition-delay: 0s; } } /* Animated hamburger / close icon. The existing JavaScript already positions this button over the original hamburger. */ .atldr-fs-close { opacity: 1 !important; /* Shorter middle bar, matching the hamburger's design. */ background-image: linear-gradient(#353A44, #353A44) !important; background-repeat: no-repeat !important; background-position: calc(50% - 4px) center !important; background-size: 14px 2px !important; transition: background-size 220ms ease !important; } /* Top and bottom bars start in hamburger positions. */ .atldr-fs-close::before, .atldr-fs-close::after { width: 22px; height: 2px; transform-origin: center; transition: transform 456ms cubic-bezier(0.22, 1, 0.36, 1) !important; } .atldr-fs-close::before { transform: translate(-50%, -50%) translateY(-8px) rotate(0deg); } .atldr-fs-close::after { transform: translate(-50%, -50%) translateY(8px) rotate(0deg); } /* Opening: collapse the middle bar and rotate into an X. */ body.atldr-fs-open .atldr-fs-close { background-size: 0px 2px !important; } body.atldr-fs-open .atldr-fs-close::before { transform: translate(-50%, -50%) translateY(0) rotate(45deg); } body.atldr-fs-open .atldr-fs-close::after { transform: translate(-50%, -50%) translateY(0) rotate(-45deg); } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { #header .menu-mobile svg, .atldr-fs-close, .atldr-fs-close::before, .atldr-fs-close::after { transition: none !important; } } @media (max-width: 1365px) { #header .menu-mobile svg { transition: none !important; } } /* Keep the animated button solid above the fading glass. */ .atldr-fs-close.atldr-morph-button { opacity: 1 !important; visibility: hidden !important; pointer-events: none !important; } body.atldr-fs-open .atldr-morph-button, body.atldr-icon-closing .atldr-morph-button { visibility: visible !important; } body.atldr-fs-open .atldr-morph-button { pointer-events: auto !important; } /* Hide the original until the animated bars finish returning. */ @media (max-width: 1365px) { body.atldr-fs-open #header .menu-mobile svg, body.atldr-icon-closing #header .menu-mobile svg { opacity: 0 !important; transition: none !important; } } @media (min-width: 1366px) { .atldr-fs-close.atldr-morph-button { display: none !important; } } /* Use the animated icon in both its hamburger and X states. */ @media (max-width: 1365px) { #header .menu-mobile svg { opacity: 0 !important; transition: none !important; } .atldr-fs-close.atldr-morph-button.atldr-icon-ready { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .atldr-fs-close.atldr-morph-button.atldr-icon-unavailable { visibility: hidden !important; pointer-events: none !important; } } /* Remove Safari's rectangular tap highlight. */ .atldr-fs-menu, .atldr-fs-menu *, .atldr-morph-button, .atldr-morph-button *, #header .menu-mobile, #header .menu-mobile * { -webkit-tap-highlight-color: transparent !important; } /* Remove the socials' reserved space on submenu pages. */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-socials { display: none !important; } /* Menu pages: quick movement with a soft finish. */ .atldr-fs-main, .atldr-fs-submenu { transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, visibility 360ms !important; will-change: transform, opacity; } /* Main page at rest. */ .atldr-fs-main { transform: translateX(0); } /* Main page moves left when entering a submenu. */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-main { transform: translateX(-64px); } /* Submenu enters from the right. */ .atldr-fs-submenu { transform: translateX(64px); } .atldr-fs-menu.atldr-submenu-open .atldr-fs-submenu { transform: translateX(0); } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .atldr-fs-main, .atldr-fs-submenu { transition: none !important; } } /* Slower, smoother movement between menu pages. */ .atldr-fs-main, .atldr-fs-submenu { transition: transform 520ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 380ms ease-in-out, visibility 520ms !important; } @media (prefers-reduced-motion: reduce) { .atldr-fs-main, .atldr-fs-submenu { transition: none !important; } } /* Slide menu pages without fading their content. */ .atldr-fs-main, .atldr-fs-submenu { opacity: 1 !important; visibility: visible !important; transition: transform 520ms cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Main page slides out to the left. */ .atldr-fs-main { transform: translateX(0) !important; } .atldr-fs-menu.atldr-submenu-open .atldr-fs-main { transform: translateX(-100%) !important; } /* Submenu slides in from the right. */ .atldr-fs-submenu { transform: translateX(100%) !important; } .atldr-fs-menu.atldr-submenu-open .atldr-fs-submenu { transform: translateX(0) !important; } @media (prefers-reduced-motion: reduce) { .atldr-fs-main, .atldr-fs-submenu { transition: none !important; } } .atldr-fs-main, .atldr-fs-submenu { transition: transform 624ms cubic-bezier(0.45, 0, 0.2, 1) !important; } @media (prefers-reduced-motion: reduce) { .atldr-fs-main, .atldr-fs-submenu { transition: none !important; } } /* Keep both menu pages at a stable height during the slide. */ .atldr-fs-menu { position: fixed !important; } .atldr-fs-views { flex: 1 1 auto; } /* Socials no longer change the height of the sliding pages. */ .atldr-fs-socials { position: absolute !important; left: 30px; right: 30px; bottom: max(28px, env(safe-area-inset-bottom)); width: auto !important; } /* Reserve room for socials on the main page only. Keep this padding during its outgoing slide. */ .atldr-fs-main { box-sizing: border-box; padding-bottom: 160px; } .atldr-fs-submenu { box-sizing: border-box; padding-bottom: 0; } /* Subscription pill above the social icons. */ .atldr-fs-socials { flex-direction: column !important; gap: 22px !important; } .atldr-menu-subscribe { width: min(100%, 360px); flex: 0 0 auto; } .atldr-menu-subscribe .wp-block-jetpack-subscriptions { width: 100% !important; margin: 0 !important; } .atldr-menu-subscribe form { position: relative; margin: 0 !important; } /* Let JavaScript reserve the actual space needed. Keep that space stable during the slide into a submenu. */ .atldr-fs-menu.atldr-has-subscribe .atldr-fs-main { padding-bottom: var(--atldr-menu-footer-space, 250px) !important; } /* Hide the entire footer on submenu pages. */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-socials { display: none !important; } /* Match the subscription pill to the social grid. */ .atldr-menu-subscribe { width: 262px !important; max-width: 100% !important; margin-inline: auto !important; } /* Keep the curved border and focus glow from being clipped. */ .atldr-menu-subscribe .wp-block-jetpack-subscriptions__supports-newline { overflow: visible !important; } /* Give the email field more room at the narrower width. */ .atldr-menu-subscribe input[type="email"] { min-width: 0 !important; padding-left: 14px !important; padding-right: 94px !important; } /* Compact Submit button. */ .atldr-menu-subscribe button, .atldr-menu-subscribe input[type="submit"] { min-width: 80px !important; padding-inline: 12px !important; } .atldr-menu-subscribe button, .atldr-menu-subscribe input[type="submit"] { min-width: 96px !important; padding-inline: 12px !important; } .atldr-menu-subscribe input[type="email"] { padding-right: 108px !important; } /* Remove the oversized wrapper glow. */ .atldr-menu-subscribe .wp-block-jetpack-subscriptions__supports-newline:focus-within { box-shadow: none !important; } /* Draw the glow directly around the email pill. */ .atldr-menu-subscribe:focus-within input[type="email"] { box-shadow: 0 0 0 3px #f5c451, 0 0 14px rgba(245, 196, 81, 0.45) !important; } /* Keep the pill's glow visible. */ .atldr-menu-subscribe, .atldr-menu-subscribe .wp-block-jetpack-subscriptions, .atldr-menu-subscribe form { overflow: visible !important; } /* * Extend the background beyond the overlay's bounds while * typing, concealing the page if Safari shifts the viewport. * This does not change the menu's layout or form position. */ body.atldr-fs-open .atldr-fs-menu:focus-within { box-shadow: 0 0 0 100vmax #e6eef1 !important; } /* Restore the page behind the glass. */ body.atldr-fs-open #wrapper { opacity: 1 !important; } /* A separate glass background with extra vertical coverage. */ .atldr-menu-glass { position: fixed; inset: -50vh 0; inset: -50lvh 0; z-index: 2147482999; pointer-events: none; background: radial-gradient( ellipse at 10% 35%, rgba(255, 196, 211, 0.24), transparent 38% ), radial-gradient( ellipse at 90% 45%, rgba(190, 220, 255, 0.24), transparent 42% ), radial-gradient( ellipse at 20% 70%, rgba(205, 238, 195, 0.20), transparent 42% ), rgba(235, 241, 243, 0.68); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); opacity: 0; visibility: hidden; transition: opacity 456ms ease, visibility 0s linear 456ms; } body.atldr-fs-open .atldr-menu-glass { opacity: 1; visibility: visible; transition: opacity 456ms ease, visibility 0s; } /* The new layer supplies the glass; avoid doubling it. */ body.atldr-glass-ready .atldr-fs-menu { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Remove the earlier opaque background extension. */ body.atldr-glass-ready .atldr-fs-menu, body.atldr-glass-ready.atldr-fs-open .atldr-fs-menu:focus-within { box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .atldr-menu-glass { transition: none !important; } } /* Remove the original menu background completely. */ body.atldr-glass-ready .atldr-fs-menu, body.atldr-glass-ready.atldr-fs-open .atldr-fs-menu:focus-within { background: transparent !important; background-image: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Use only the separate, neutral frosted layer. */ .atldr-menu-glass { background: rgba(235, 241, 243, 0.28) !important; background-image: none !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; backdrop-filter: blur(28px) saturate(140%) !important; } /* Preserve the page beneath the translucent glass. */ body.atldr-fs-open #wrapper { opacity: 1 !important; } /* Uniform social icon colour in the mobile menu. */ .atldr-fs-socials .epcl-social-buttons a { color: #333333 !important; } /* Main menu and submenu typography. */ .atldr-fs-main-list > li > a, .atldr-fs-submenu-list > li > a { font-family: "DM Sans", sans-serif !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.2 !important; } /* Match the Back button. */ .atldr-fs-back { font-family: "DM Sans", sans-serif !important; font-weight: 500 !important; letter-spacing: 0.02em !important; } /* Uppercase menu labels with slightly wider spacing. */ .atldr-fs-main-list > li > a, .atldr-fs-submenu-list > li > a, .atldr-fs-back { text-transform: uppercase !important; letter-spacing: 0.03em !important; } /* Main menu labels. */ .atldr-fs-main-list > li > a { font-size: clamp(34px, 6.5vw, 52px) !important; font-weight: 600 !important; padding-block: 13px !important; } /* Submenu labels. */ .atldr-fs-submenu-list > li > a { font-size: clamp(28px, 5.5vw, 42px) !important; font-weight: 600 !important; padding-block: 12px !important; } .atldr-fs-socials .epcl-social-buttons a svg { color: #333333 !important; fill: #333333 !important; } /* Reduce the glass's transparency by approximately 20%. */ .atldr-menu-glass { background: rgba(235, 241, 243, 0.7) !important; } .atldr-menu-glass { -webkit-backdrop-filter: blur(40px) saturate(800%) contrast(110%) !important; backdrop-filter: blur(70px) saturate(320%) contrast(180%) !important; } /* Subscribe pill and social icons enter from below. */ .atldr-fs-socials { opacity: 0; transform: translateY(42px) scale(0.9); transform-origin: center bottom; transition: opacity 456ms ease, transform 624ms cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: opacity, transform; } /* Open: slide upward and zoom into place. */ body.atldr-fs-open .atldr-fs-socials { opacity: 1; transform: translateY(0) scale(1); } /* Submenu pages keep the footer hidden. */ .atldr-fs-menu.atldr-submenu-open .atldr-fs-socials { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Respect reduced motion. */ @media (prefers-reduced-motion: reduce) { .atldr-fs-socials, body.atldr-fs-open .atldr-fs-socials { transition: none !important; transform: none !important; } } .atldr-fs-menu.atldr-has-subscribe .atldr-fs-main { box-sizing: border-box !important; padding-top: 110px !important; padding-bottom: var( --atldr-menu-footer-space, 250px ) !important; } /* Final override: keep parent items anchored during exit. */ html body .atldr-fs-menu.atldr-has-subscribe .atldr-fs-main-list { transform-origin: center center !important; } /* Match the parent page's slide timing. */ body.atldr-fs-open .atldr-fs-menu .atldr-fs-socials { transition: transform 624ms cubic-bezier(0.45, 0, 0.2, 1), opacity 456ms ease !important; } /* Slide the whole footer offscreen instead of hiding it. */ body.atldr-fs-open .atldr-fs-menu.atldr-submenu-open .atldr-fs-socials { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; transform: translateX(-100%) translateY(0) scale(1) !important; } @media (prefers-reduced-motion: reduce) { body.atldr-fs-open .atldr-fs-menu .atldr-fs-socials { transition: none !important; } } /* Sidebar socials: iPad portrait spacing */ @media (min-width: 1000px) and (max-width: 1100px) and (orientation: portrait) { #sidebar .widget_epcl_social { --social-icon-size: min(48px, calc(25cqw - 6px)); } #sidebar .widget_epcl_social .icons, body.home #epcl_social-2 .icons { column-gap: 8px !important; row-gap: 22px !important; } #sidebar .widget_epcl_social .icons > a, #sidebar .widget_epcl_social .icons > a .icon { box-sizing: border-box !important; } } /* Compact landscape menu: iPad mini and phones */ @media (orientation: landscape) and (max-width: 1199px) and (max-height: 800px) { /* Left column: remove the portrait footer reservation. */ .atldr-fs-menu.atldr-has-subscribe .atldr-fs-main { right: 50% !important; width: auto !important; padding: 64px 16px 20px !important; overflow-y: auto !important; } .atldr-fs-menu .atldr-fs-main-list { max-width: 100% !important; padding: 0 !important; margin: auto !important; } .atldr-fs-menu .atldr-fs-main-list > li > a { font-size: clamp(24px, 3.4vw, 38px) !important; line-height: 1.2 !important; padding-block: 8px !important; } /* Right column: retain the existing entrance/exit animations. */ .atldr-fs-menu .atldr-fs-socials { left: 52% !important; right: max(24px, env(safe-area-inset-right)) !important; top: 64px !important; bottom: max(20px, env(safe-area-inset-bottom)) !important; width: auto !important; padding: 0 !important; gap: 16px !important; justify-content: center !important; overflow-y: auto !important; } .atldr-fs-menu .atldr-menu-subscribe { width: min(100%, 280px) !important; } .atldr-fs-menu .atldr-fs-socials .epcl-social-buttons { grid-template-columns: repeat(4, 44px) !important; grid-auto-rows: 44px !important; gap: 8px 12px !important; flex-shrink: 0 !important; } /* Submenus retain the full width and can scroll. */ .atldr-fs-menu .atldr-fs-submenu { padding: 64px 24px 20px !important; overflow-y: auto !important; } .atldr-fs-menu .atldr-fs-submenu-list > li > a { font-size: clamp(22px, 3vw, 34px) !important; line-height: 1.25 !important; padding-block: 8px !important; } } @media (orientation: landscape) and (max-width: 1199px) and (max-height: 800px) { /* Bring the parent links inward, away from the X. */ .atldr-fs-menu.atldr-has-subscribe .atldr-fs-main { left: 12% !important; right: 50% !important; } /* Bring the subscription and socials inward too. */ .atldr-fs-menu .atldr-fs-socials { left: 52% !important; right: 12% !important; } /* Travel beyond the viewport, not just one column. */ #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-socials { transform: translateX(-100vw) !important; pointer-events: none !important; } } @media (orientation: landscape) and (max-width: 1199px) and (max-height: 800px) { #atldr-fullscreen-navigation .atldr-fs-main, #atldr-fullscreen-navigation .atldr-fs-socials { transition-duration: 624ms !important; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; transition-delay: 0ms !important; } #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-main, #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-socials { transform: translateX(-100vw) !important; pointer-events: none !important; } } @media (orientation: landscape) and (max-width: 1199px) and (max-height: 800px) { /* Comfortable tap targets. */ #atldr-fullscreen-navigation .atldr-fs-main-list > li > a, #atldr-fullscreen-navigation .atldr-fs-back { min-height: 44px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; touch-action: manipulation !important; } /* Parent page active. */ #atldr-fullscreen-navigation:not(.atldr-submenu-open) .atldr-fs-main { pointer-events: auto !important; } #atldr-fullscreen-navigation:not(.atldr-submenu-open) .atldr-fs-submenu, #atldr-fullscreen-navigation:not(.atldr-submenu-open) .atldr-fs-submenu * { pointer-events: none !important; } /* Submenu active: outgoing content cannot intercept taps. */ #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-main, #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-main *, #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-socials, #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-socials * { pointer-events: none !important; } #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-submenu, #atldr-fullscreen-navigation.atldr-submenu-open .atldr-fs-back { pointer-events: auto !important; } } /* Anchor the button without changing the image alignment. */ body.home div.articles.classic article.epcl-flex.bg-box > .info { align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } body.home div.articles.classic article.epcl-flex.bg-box > .info > footer { margin-top: auto !important; padding-top: 24px !important; } / ======================================== DARK MODE — ARTICLE CATEGORY TAG ======================================== */ html.dark-mode .tag-link-85 { background-color: #54cbca !important; } /* /* ======================================== DARK MODE TOGGLE — CIRCULAR SUN / MOON ======================================== */ #atldr-dark-mode-toggle { position: fixed; /* 5px further right */ right: max(11px, calc(env(safe-area-inset-right) + 11px)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2147483200; /* 5% larger than 48px */ width: 50.4px; height: 50.4px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #333333; border-radius: 50%; background: #fffaf0; color: #333333; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } /* Half sun / half moon icon */ #atldr-dark-mode-toggle::before { content: ""; /* 5% larger than 22px */ width: 23.1px; height: 23.1px; border-radius: 50%; background: linear-gradient( 90deg, currentColor 0 50%, transparent 50% 100% ); border: 2px solid currentColor; box-sizing: border-box; transform: rotate(-25deg); } /* Mobile — retain the existing extra 5% increase */ @media (max-width: 767px) { #atldr-dark-mode-toggle { width: 52.9px; height: 52.9px; } #atldr-dark-mode-toggle::before { width: 24.3px; height: 24.3px; } } /* ======================================== VISIBILITY / HANDOVER ======================================== */ #atldr-dark-mode-toggle { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; } #atldr-dark-mode-toggle.atldr-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ======================================== DARK MODE ======================================== */ html.dark-mode #atldr-dark-mode-toggle { background: #333333; color: #F2F0EE; border-color: #333333; } /* ======================================== KEYBOARD FOCUS ======================================== */ #atldr-dark-mode-toggle:focus-visible { outline: 3px solid #ffcc55; outline-offset: 4px; } /* ======================================== SYSTEM DARK MODE ======================================== */ @media (prefers-color-scheme: dark) { html:not(.light-mode) #atldr-dark-mode-toggle { background: #333333; color: #F2F0EE; border-color: #333333; } } /* ======================================== DARK MODE TOGGLE — PRESS FEEDBACK ======================================== */ #atldr-dark-mode-toggle { transition: opacity 220ms ease, transform 220ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease !important; will-change: transform; } /* Quick physical press */ #atldr-dark-mode-toggle:active { transform: translateY(0) scale(0.88) !important; transition: transform 70ms ease-out, background-color 70ms ease, color 70ms ease !important; } /* Remove Safari tap delay / highlight */ #atldr-dark-mode-toggle { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* ======================================== DARK MODE — CATEGORY COLOURS ======================================== */ /* Archive — default for its category family */ html.dark-mode a[class*="tag-link-"][href*="/category/archive/"], html.dark-mode article:has(a[href*="/category/archive/"]) { --atldr-category-bg: #153F3E; --atldr-category-text: #87EAE6; } /* Accessories */ html.dark-mode a[class*="tag-link-"][href*="/acessories/"], html.dark-mode article:has(a[href*="/acessories/"]) { --atldr-category-bg: #163D46; --atldr-category-text: #83DEEE; } /* AirPods */ html.dark-mode a[class*="tag-link-"][href*="/airpods/"], html.dark-mode article:has(a[href*="/airpods/"]) { --atldr-category-bg: #173F39; --atldr-category-text: #89E3D9; } /* iPad */ html.dark-mode a[class*="tag-link-"][href*="/ipad/"], html.dark-mode article:has(a[href*="/ipad/"]) { --atldr-category-bg: #343149; --atldr-category-text: #D4D0FF; } /* iPhone */ html.dark-mode a[class*="tag-link-"][href*="/iphone/"], html.dark-mode article:has(a[href*="/iphone/"]) { --atldr-category-bg: #24364F; --atldr-category-text: #A8C8F5; } /* Mac */ html.dark-mode a[class*="tag-link-"][href*="/mac/"], html.dark-mode article:has(a[href*="/mac/"]) { --atldr-category-bg: #293E23; --atldr-category-text: #ADD992; } /* Services */ html.dark-mode a[class*="tag-link-"][href*="/services/"], html.dark-mode article:has(a[href*="/services/"]) { --atldr-category-bg: #193B37; --atldr-category-text: #80CCC3; } /* Vision */ html.dark-mode a[class*="tag-link-"][href*="/vision/"], html.dark-mode article:has(a[href*="/vision/"]) { --atldr-category-bg: #443A16; --atldr-category-text: #F0D66B; } /* Watch */ html.dark-mode a[class*="tag-link-"][href*="/watch/"], html.dark-mode article:has(a[href*="/watch/"]) { --atldr-category-bg: #481D36; --atldr-category-text: #F49ACB; } /* Other */ html.dark-mode a[class*="tag-link-"][href*="/category/other/"], html.dark-mode article:has(a[href*="/category/other/"]) { --atldr-category-bg: #482626; --atldr-category-text: #F3A1A1; } /* Wallpaper */ html.dark-mode a[class*="tag-link-"][href*="/category/wallpaper/"], html.dark-mode article:has(a[href*="/category/wallpaper/"]) { --atldr-category-bg: #343538; --atldr-category-text: #E2E1E3; } /* Article card backgrounds */ html.dark-mode body .articles article.epcl-flex.bg-box { background-color: var(--atldr-category-bg, #343538) !important; } /* Replace the light category wash with the dark colour */ html.dark-mode body .articles article.epcl-flex.bg-box .epcl-category-overlay { background-color: var(--atldr-category-bg, #343538) !important; } html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box .epcl-category-overlay::before { background: var(--atldr-category-bg, #343538) !important; opacity: 1 !important; } /* Readable article text */ html.dark-mode body .articles article.epcl-flex.bg-box .title, html.dark-mode body .articles article.epcl-flex.bg-box .title a { color: #F2F0EE !important; } html.dark-mode body .articles article.epcl-flex.bg-box .post-excerpt, html.dark-mode body .articles article.epcl-flex.bg-box .meta { color: #D4D7DA !important; } /* Dark mode — full-page gradient on iPhone */ html.dark-mode { position: relative !important; min-height: 100% !important; background: linear-gradient( 120deg, #354D62 0%, #1B232E 45%, #49364F 100% ) !important; background-attachment: fixed !important; background-size: cover !important; } html.dark-mode::before { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; background: transparent !important; } html.dark-mode body, html.dark-mode body #wrapper { background: transparent !important; } ======================================== DARK MODE — WIDGET TITLES ======================================== */ html.dark-mode #sidebar .widget-title { background-color: #54CBCA !important; color: #F2F0EE !important; } /* ======================================== DARK MODE — WIDGET BACKGROUNDS ======================================== */ html.dark-mode #sidebar .widget.bg-box { background-color: #26384F !important; color: #F2F0EE !important; } /* Widget headings and text */ html.dark-mode #sidebar .widget.bg-box h1, html.dark-mode #sidebar .widget.bg-box h2, html.dark-mode #sidebar .widget.bg-box h3, html.dark-mode #sidebar .widget.bg-box h4, html.dark-mode #sidebar .widget.bg-box h5, html.dark-mode #sidebar .widget.bg-box h6, html.dark-mode #sidebar .widget.bg-box .title, html.dark-mode #sidebar .widget.bg-box .title a, html.dark-mode #sidebar .widget.bg-box p, html.dark-mode #sidebar .widget.bg-box li, html.dark-mode #sidebar .widget.bg-box time { color: #F2F0EE !important; } /* Dark mode — widget title pills */ html.dark-mode #sidebar .widget-title, html.dark-mode #sidebar .widget > .title { background-color: #333333 !important; color: #F2F0EE !important; } /* Dark mode — pagination buttons */ html.dark-mode .epcl-pagination a, html.dark-mode .epcl-pagination button, html.dark-mode .epcl-pagination .epcl-button { background-color: #333333 !important; border-color: #333333 !important; color: #F2F0EE !important; box-shadow: none !important; } html.dark-mode .epcl-pagination a:hover, html.dark-mode .epcl-pagination button:hover, html.dark-mode .epcl-pagination .epcl-button:hover { background-color: #444444 !important; border-color: #444444 !important; color: #F2F0EE !important; } /* Dark mode — pagination count */ html.dark-mode .epcl-pagination, html.dark-mode .epcl-pagination .page-index, html.dark-mode .epcl-pagination .page-count, html.dark-mode .epcl-pagination span { color: #F2F0EE !important; } /* Dark mode — desktop menu parent items, non-sticky only */ html.dark-mode #header:not(.is-sticky) .main-nav > ul > li > a, html.dark-mode #header:not(.is-sticky) .main-nav > ul > li > a:hover, html.dark-mode #header:not(.is-sticky) .main-nav > ul > li.current-menu-item > a, html.dark-mode #header:not(.is-sticky) .main-nav > ul > li.current-menu-ancestor > a { color: #F2F0EE !important; } html.dark-mode #header:not(.is-sticky) .main-nav > ul > li > a svg, html.dark-mode #header:not(.is-sticky) .main-nav > ul > li > a::after { color: #F2F0EE !important; fill: currentColor !important; } /* Dark mode — desktop submenu with compact hover pills */ html.dark-mode #header .main-nav > ul > li > ul.sub-menu, html.dark-mode #header .main-nav > ul > li > ul.children { background-color: #26384F !important; border-color: #353A44 !important; } html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li, html.dark-mode #header .main-nav > ul > li > ul.children > li { background: transparent !important; } html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li > a, html.dark-mode #header .main-nav > ul > li > ul.children > li > a { display: inline-flex !important; width: auto !important; max-width: max-content !important; margin: 4px 12px !important; padding: 8px 18px !important; border-radius: 999px !important; background-color: transparent !important; color: #F2F0EE !important; } html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li > a:hover, html.dark-mode #header .main-nav > ul > li > ul.children > li > a:hover { background-color: #333333 !important; color: #F2F0EE !important; } /* Remove the theme's duplicate submenu hover pill */ html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li > a::before, html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li > a::after, html.dark-mode #header .main-nav > ul > li > ul.children > li > a::before, html.dark-mode #header .main-nav > ul > li > ul.children > li > a::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* Keep one hover pill on the link itself */ html.dark-mode #header .main-nav > ul > li > ul.sub-menu > li > a:hover, html.dark-mode #header .main-nav > ul > li > ul.children > li > a:hover { background-color: #333333 !important; color: #F2F0EE !important; } html.dark-mode body.single-post article.main-article .epcl-category-overlay::before { background-color: var( --atldr-open-category-bg, #343538 ) !important; opacity: 1 !important; } /* Dark mode — opened article text */ html.dark-mode body.single-post article.main-article, html.dark-mode body.single-post article.main-article h1, html.dark-mode body.single-post article.main-article h2, html.dark-mode body.single-post article.main-article h3, html.dark-mode body.single-post article.main-article h4, html.dark-mode body.single-post article.main-article h5, html.dark-mode body.single-post article.main-article h6, html.dark-mode body.single-post article.main-article p, html.dark-mode body.single-post article.main-article li, html.dark-mode body.single-post article.main-article blockquote, html.dark-mode body.single-post article.main-article .post-content, html.dark-mode body.single-post article.main-article .post-content a { color: #F2F0EE !important; } /* Dark mode — opened article title box */ html.dark-mode body.single-post article.main-article h1.main-title { background-color: #333333 !important; color: #F2F0EE !important; border-width: 1px !important; border-style: solid !important; border-color: #353A44 !important; } html.dark-mode body.single-post article.main-article h1.main-title a { color: #F2F0EE !important; } /* Dark mode — quote boxes */ html.dark-mode body.single-post article.main-article blockquote.wp-block-quote, html.dark-mode body.single-post article.main-article blockquote.wp-block-quote::before, html.dark-mode body.single-post article.main-article blockquote.wp-block-quote::after { background-color: #333333 !important; } html.dark-mode body.single-post article.main-article blockquote.wp-block-quote, html.dark-mode body.single-post article.main-article blockquote.wp-block-quote p { color: #F2F0EE !important; } /* Dark mode — floating share pill */ html.dark-mode body.single-post article.main-article .epcl-share { background-color: #333333 !important; } /* Dark mode — custom Subscribe widget heading */ html.dark-mode #sidebar .widget:has(.wp-block-jetpack-subscriptions)::before { background-color: #333333 !important; color: #F2F0EE !important; border: 1px solid #353A44 !important; } /* Dark mode — desktop Subscribe text on hover only */ html.dark-mode #header .main-nav > ul > li.subscribe-menu-item > a.subscribe:hover { color: #333333 !important; } /* Dark mode — comments box */ html.dark-mode #single #comments.bg-box { background-color: #26384F !important; } /* Dark mode — comments text */ html.dark-mode #single #comments, html.dark-mode #single #comments :is( h1, h2, h3, h4, h5, h6, p, span, a, label, li, time, input, textarea, button ) { color: #F2F0EE !important; } /* Dark mode — Comments title pill */ html.dark-mode #single #comments > h3.title.bordered { background-color: #333333 !important; } /* Dark mode — footer */ html.dark-mode #footer { background-color: #26384F !important; color: #F2F0EE !important; } html.dark-mode #footer :is(h1, h2, h3, h4, h5, h6, p, a, span, li, label) { color: #F2F0EE !important; } /* Dark mode — back-to-top arrow */ html.dark-mode #footer #back-to-top { color: #333333 !important; } html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box, html.dark-mode body div.articles article.epcl-flex.bg-box, html.dark-mode body #single article.main-article.bg-box { border: 2px solid #353a44 !important; outline: 1px solid #353a44 !important; outline-offset: -2px !important; } /* Remove the border from the image wrappers */ html.dark-mode body .articles article .featured-image, html.dark-mode body #single article.main-article .post-format-image { border: none !important; } /* Follow the image edges without changing its dimensions */ html.dark-mode body .articles article .featured-image img, html.dark-mode body #single article.main-article .post-format-image img { outline: 5px solid #353a44 !important; outline-offset: -2px !important; } @media (max-width: 1199px) { html.dark-mode #header:not(.is-sticky):not(.mobile-sticky) .bg-box { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05) !important; } } /* Dark mode — search overlay */ html.dark-mode .mfp-bg { background-color: rgba(38, 56, 79, 0.85) !important; } html.dark-mode body .mfp-wrap .mfp-content #search-lightbox h4.title.textcenter { color: #F2F0EE !important; -webkit-text-fill-color: #F2F0EE !important; } html.dark-mode body .mfp-wrap .mfp-content #search-lightbox h4.title.textcenter span { color: #FF647C !important; -webkit-text-fill-color: #FF647C !important; } /* Dark mode — popular categories label */ html.dark-mode body .mfp-wrap .mfp-content #search-lightbox .categories > h5.textcenter { color: #F2F0EE !important; -webkit-text-fill-color: #F2F0EE !important; } /* Show the search heading on mobile and tablet in dark mode */ html.dark-mode body .mfp-wrap .mfp-content #search-lightbox h4.title.textcenter.hide-on-mobile.hide-on-tablet { display: block !important; } /* Dark mode — mobile menu glass */ html.dark-mode .atldr-menu-glass { background: rgba(38, 56, 79, 0.85) !important; } /* Parent links, submenu links and Back */ html.dark-mode .atldr-fs-menu .atldr-fs-main-list a, html.dark-mode .atldr-fs-menu .atldr-fs-submenu-list a, html.dark-mode .atldr-fs-menu .atldr-fs-back { color: #F2F0EE !important; } /* Social icons */ html.dark-mode .atldr-fs-socials .epcl-social-buttons a { color: #F2F0EE !important; } /* Dark mode — all mobile menu social icons */ html.dark-mode .atldr-fs-socials .epcl-social-buttons a, html.dark-mode .atldr-fs-socials .epcl-social-buttons a svg { color: #F2F0EE !important; fill: #F2F0EE !important; } /* Dark mode — X while the menu is open */ html.dark-mode body.atldr-fs-open .atldr-fs-close::before, html.dark-mode body.atldr-fs-open .atldr-fs-close::after { background-color: #F2F0EE !important; } /* Dark mode — custom social images in the mobile menu */ html.dark-mode .atldr-fs-socials .epcl-social-buttons a img { filter: brightness(0) saturate(100%) invert(96%) sepia(5%) saturate(170%) hue-rotate(345deg) brightness(99%) contrast(94%) !important; } /* Dark mode — translucent social circles and tag cloud pills */ html.dark-mode #sidebar .widget_epcl_social .epcl-social-buttons a, html.dark-mode #sidebar .widget_epcl_tag_cloud a[class*="tag-link-"] { background-color: rgba(255, 255, 255, 0.80) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; backdrop-filter: blur(12px) saturate(180%) !important; } /* Dark mode — translucent social icon circles */ html.dark-mode #sidebar .widget_epcl_social div.icons a .icon { background-color: rgba(255, 255, 255, 0.80) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; backdrop-filter: blur(12px) saturate(180%) !important; } /* Dark mode — featured image border inside opened articles only */ html.dark-mode body.single-post #single article.main-article .post-format-image img { outline: none !important; border: 1px solid #F2F0EE !important; border-radius: var(--epcl-boxes-border-radius, 15px) !important; box-sizing: border-box !important; } /* Keep opened article titles inside their title boxes */ html body #single article.main-article h1.main-title { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; box-sizing: border-box !important; height: auto !important; } /* ======================================== DARK MODE — OPEN ARTICLE CATEGORY COLOUR ======================================== */ /* Archive */ html.dark-mode body.single-post article.main-article.primary-cat-85 { --atldr-open-category-bg: #153F3E; } /* Accessories */ html.dark-mode body.single-post article.main-article:is( .primary-cat-19, .primary-cat-50, .primary-cat-53, .primary-cat-54 ) { --atldr-open-category-bg: #163D46; } /* AirPods */ html.dark-mode body.single-post article.main-article:is( .primary-cat-4, .primary-cat-32, .primary-cat-33, .primary-cat-34 ) { --atldr-open-category-bg: #173F39; } /* iPad */ html.dark-mode body.single-post article.main-article:is( .primary-cat-7, .primary-cat-38, .primary-cat-39, .primary-cat-40, .primary-cat-41, .primary-cat-42 ) { --atldr-open-category-bg: #343149; } /* iPhone */ html.dark-mode body.single-post article.main-article:is( .primary-cat-6, .primary-cat-35, .primary-cat-36, .primary-cat-37, .primary-cat-43 ) { --atldr-open-category-bg: #24364F; } /* Mac */ html.dark-mode body.single-post article.main-article:is( .primary-cat-3, .primary-cat-23, .primary-cat-24, .primary-cat-25, .primary-cat-26, .primary-cat-27, .primary-cat-31 ) { --atldr-open-category-bg: #293E23; } /* Services */ html.dark-mode body.single-post article.main-article:is( .primary-cat-20, .primary-cat-60, .primary-cat-61, .primary-cat-62, .primary-cat-67, .primary-cat-68 ) { --atldr-open-category-bg: #193B37; } /* Vision */ html.dark-mode body.single-post article.main-article:is( .primary-cat-5, .primary-cat-44, .primary-cat-45 ) { --atldr-open-category-bg: #443A16; } /* Watch */ html.dark-mode body.single-post article.main-article:is( .primary-cat-8, .primary-cat-56, .primary-cat-57, .primary-cat-59 ) { --atldr-open-category-bg: #481D36; } /* Other */ html.dark-mode body.single-post article.main-article:is( .primary-cat-18, .primary-cat-70 ) { --atldr-open-category-bg: #482626; } /* Wallpaper */ html.dark-mode body.single-post article.main-article.primary-cat-69 { --atldr-open-category-bg: #343538; } /* Apply the selected colour */ html.dark-mode body.single-post article.main-article, html.dark-mode body.single-post article.main-article .epcl-category-overlay { background-color: var(--atldr-open-category-bg, #343538) !important; } html.dark-mode body.single-post article.main-article .epcl-category-overlay::before { background-color: var(--atldr-open-category-bg, #343538) !important; opacity: 1 !important; } /* ======================================== DARK MODE — KEEP HOMEPAGE CARD GEOMETRY IDENTICAL TO LIGHT MODE ======================================== */ /* Card itself must not gain a real border */ html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box { border: 0 !important; border-width: 0 !important; box-sizing: border-box !important; /* Visual edge only, does not affect dimensions */ outline: 1px solid #353a44 !important; outline-offset: -1px !important; } /* Do not draw an inward 5px outline over the image */ html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box .featured-image img { outline: none !important; } /* Preserve the exact same featured-image geometry */ html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box .featured-image { border: 0 !important; } /* Preserve the article's internal flex dimensions */ html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box .post-format-wrapper, html.dark-mode body.home div.articles.classic article.epcl-flex.bg-box .info { box-sizing: border-box !important; } /* ======================================== DARK MODE — KEEP SINGLE ARTICLE GEOMETRY IDENTICAL TO LIGHT MODE ======================================== */ /* Main article box must not gain a real border */ html.dark-mode body.single-post #single article.main-article.bg-box { border: 0 !important; border-width: 0 !important; box-sizing: border-box !important; /* Visual edge only, does not affect dimensions */ outline: 1px solid #353a44 !important; outline-offset: -1px !important; } /* Do not draw an inward outline over the featured image */ html.dark-mode body.single-post #single article.main-article .post-format-image img { outline: none !important; } /* Preserve the exact featured-image geometry */ html.dark-mode body.single-post #single article.main-article .post-format-image { border: 0 !important; } /* Keep article internals on the same box model */ html.dark-mode body.single-post #single article.main-article .post-format-wrapper, html.dark-mode body.single-post #single article.main-article .info, html.dark-mode body.single-post #single article.main-article .post-content { box-sizing: border-box !important; } /* WordPress File blocks — large link text in both modes */ .wp-block-file > a { font-size: 24px !important; font-weight: 700 !important; line-height: 1.1 !important; } /* Dark mode — File block link text */ html.dark-mode .wp-block-file > a { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* WordPress File blocks — narrower pill containers */ .wp-block-file { width: 70% !important; max-width: 70% !important; margin-left: auto !important; margin-right: auto !important; border-radius: 999px !important; overflow: hidden !important; box-sizing: border-box !important; } /* Keep the link centered inside each pill */ .wp-block-file > a { display: block !important; text-align: center !important; } /* Dark mode — category cards match the homepage */ html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box { border: 0 !important; box-sizing: border-box !important; outline: 1px solid #353A44 !important; outline-offset: -1px !important; } /* Remove the extra featured-image frame */ html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box .featured-image { border: 0 !important; } html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box .featured-image img { outline: none !important; } /* Match homepage sizing */ html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box .post-format-wrapper, html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box .info { box-sizing: border-box !important; } /* iPad mini portrait — shorter excerpts */ @media screen and (min-width: 700px) and (max-width: 767px) and (orientation: portrait) { body.home div.articles.classic article .post-excerpt { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden !important; } } /* Light mode: remove the sliver inside the featured-image border */ html:not(.dark-mode) body.single-post #single.classic .featured-image > .epcl-loader.bg-box { padding: 0 !important; overflow: hidden !important; line-height: 0 !important; border-radius: 15px !important; } html:not(.dark-mode) body.single-post #single.classic .featured-image > .epcl-loader.bg-box > img { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; transform: scale(1.006) !important; transform-origin: center !important; } /* Hide the subscriber count in the footer */ #footer .wp-block-jetpack-subscriptions__subscount { display: none !important; } /* Align dark-mode category borders with the article cards */ html.dark-mode body.category div.articles.classic article.epcl-flex.bg-box { border: 1px solid #353A44 !important; outline: none !important; outline-offset: 0 !important; box-sizing: border-box !important; }