/* ===================================================================== Mirdad "mx" design layer Loaded after the legacy styles. Page styles only apply when the layout adds body.mx-on (homepage: .mx-home, category pages: .mx-category). The sign-in sheet (#LogIn, #forgottenPassword) is styled on every page. Brand assets kept as-is: emerald #2bb65a, the teal-to-forest banner gradient, HeadlinerMedium / Markazi Text / Tajawal, logo-v5.svg. Shape rule: cards 22px, media 18px, inputs 14px, buttons full pill. ===================================================================== */ :root { --mx-emerald: #2bb65a; --mx-emerald-hi: #40d45b; --mx-teal-300: #5dbca0; --mx-teal-500: #43907a; --mx-teal-700: #006a62; --mx-forest: #113428; --mx-forest-ink: #062a16; --mx-bg: #EDF2EF; --mx-surface: #FFFFFF; --mx-surface-2: #E7EEEA; --mx-text: #101814; --mx-text-2: #46554E; --mx-text-3: #5C6A63; --mx-line: rgba(17, 24, 20, .09); --mx-line-2: rgba(17, 24, 20, .17); --mx-accent-text: #13753A; --mx-danger: #c23a3a; --mx-shadow: 0 1px 0 rgba(17, 52, 40, .04), 0 18px 40px -22px rgba(17, 52, 40, .35); --mx-glass: rgba(251, 252, 251, .72); --mx-icon-filter: none; --mx-font-display: 'HeadlinerMedium', 'TajawalRegular', sans-serif; --mx-font-read: 'MarkaziTextVariableFont_wght', 'HeadlinerMedium', serif; --mx-font-ui: 'Tajawal', 'TajawalRegular', 'HeadlinerMedium', sans-serif; --mx-r-card: 22px; --mx-r-media: 18px; --mx-r-input: 14px; --mx-ease: cubic-bezier(.16, 1, .3, 1); --mx-dock-h: 64px; } /* dark: follows the system unless the reader picked light; or forced by the theme choice */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.mx-on { --mx-bg: #070E0B; --mx-surface: #111C17; --mx-surface-2: #18251F; --mx-text: #E3EDE7; --mx-text-2: #A5B5AD; --mx-text-3: #7D8E86; --mx-line: rgba(230, 238, 232, .10); --mx-line-2: rgba(230, 238, 232, .18); --mx-accent-text: #5EDF7B; --mx-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 24px 48px -26px rgba(0, 0, 0, .8); --mx-glass: rgba(17, 23, 20, .72); --mx-icon-filter: invert(.88) hue-rotate(180deg); --mx-btn: #1F5A45; --mx-btn-hover: #27704F; --mx-btn-ink: #EFFAF2; --mx-card-edge: rgba(230, 238, 232, .09); } } html[data-theme="dark"] body.mx-on { --mx-bg: #070E0B; --mx-surface: #111C17; --mx-surface-2: #18251F; --mx-text: #E3EDE7; --mx-text-2: #A5B5AD; --mx-text-3: #7D8E86; --mx-line: rgba(230, 238, 232, .10); --mx-line-2: rgba(230, 238, 232, .18); --mx-accent-text: #5EDF7B; --mx-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 24px 48px -26px rgba(0, 0, 0, .8); --mx-glass: rgba(17, 23, 20, .72); --mx-icon-filter: invert(.88) hue-rotate(180deg); --mx-btn: #1F5A45; --mx-btn-hover: #27704F; --mx-btn-ink: #EFFAF2; --mx-card-edge: rgba(230, 238, 232, .09); } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ body.mx-on { background: var(--mx-bg) !important; color: var(--mx-text); font-family: var(--mx-font-ui); -webkit-font-smoothing: antialiased; } body.mx-on .wrapper { background: transparent; } body.mx-on > img[width="99999"] { display: none; } body.mx-on .landig-mobile { display: none; } body.mx-on a { color: inherit; } body.mx-on .container { background: transparent; } body.mx-on .sep-line { display: none; } /* film grain: fixed, non-interactive, never on scrolling layers */ body.mx-on::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,"); } /* --------------------------------------------------------------------- Mobile header: slim glass bar --------------------------------------------------------------------- */ body.mx-on .header-mobile { position: sticky !important; top: 0 !important; z-index: 1030; background: var(--mx-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--mx-line); box-shadow: none !important; } body.mx-on .header-mobile .main-bar { background: transparent !important; } body.mx-on .header-mobile .h-52 { height: 56px; } body.mx-on .header-mobile .mobile-logo { height: 34px !important; transition: transform .5s var(--mx-ease); } body.mx-on .header-mobile .mobile-logo:active { transform: scale(.92); } body.mx-on .header-mobile .box-search-mobile { filter: var(--mx-icon-filter); } body.mx-on .header-mobile .start-button, body.mx-on .header .start-button { background: var(--mx-emerald) !important; color: var(--mx-forest-ink) !important; border: 0 !important; border-radius: 12px !important; font-family: var(--mx-font-display); font-size: 15px; padding: 8px 16px !important; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 22px -12px rgba(43, 182, 90, .9); transition: transform .25s var(--mx-ease); } body.mx-on .start-button:active { transform: scale(.96); } body.mx-on .box-profile-img-mobile img, body.mx-on .box-profile-img img { border-radius: 50%; box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 4px var(--mx-emerald); } /* --------------------------------------------------------------------- Mobile tab bar becomes a floating dock (thumb zone) --------------------------------------------------------------------- */ @media (max-width: 575.98px) { body.mx-on { padding-bottom: calc(var(--mx-dock-h) + 34px + env(safe-area-inset-bottom)); } body.mx-on .locked-bar { position: fixed !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; width: auto !important; height: var(--mx-dock-h) !important; z-index: 1031; background: var(--mx-glass) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--mx-line) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 40px -18px rgba(6, 42, 22, .55) !important; padding: 0 6px; } body.mx-on .locked-bar .container, body.mx-on .locked-bar .row, body.mx-on .locked-bar .col { padding: 0 !important; margin: 0 !important; max-width: none; } body.mx-on .locked-bar .h-39px { height: var(--mx-dock-h) !important; } body.mx-on .locked-bar .container-icon { position: relative; height: 48px; margin: 0 2px; border-radius: 12px; background: transparent !important; transition: background-color .35s var(--mx-ease), transform .25s var(--mx-ease); } body.mx-on .locked-bar .container-icon:active { transform: scale(.92); } body.mx-on .locked-bar .container-icon.active { background: rgba(43, 182, 90, .16) !important; } body.mx-on .locked-bar .container-icon > div, body.mx-on .locked-bar .category-menu { filter: var(--mx-icon-filter); } body.mx-on .locked-bar .container-icon.active > div { filter: none; } body.mx-on .locked-bar .counter-new-notification { background: var(--mx-emerald) !important; color: var(--mx-forest-ink) !important; font-family: var(--mx-font-ui); } /* write button rides above the dock, on the thumb side */ body.mx-on .writing-box { position: fixed !important; bottom: calc(var(--mx-dock-h) + 26px + env(safe-area-inset-bottom)) !important; inset-inline-start: 18px !important; inset-inline-end: auto !important; left: auto; width: 58px !important; height: 58px !important; border-radius: 50% !important; z-index: 1032; display: grid !important; place-items: center; background: radial-gradient(120% 120% at 30% 20%, var(--mx-emerald-hi), var(--mx-emerald) 45%, var(--mx-teal-700)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 30px -12px rgba(43, 182, 90, .85) !important; transition: transform .3s var(--mx-ease); } body.mx-on .writing-box:active { transform: scale(.9) rotate(-8deg); } body.mx-on .writing-box img { width: 30px !important; height: 30px !important; } } /* --------------------------------------------------------------------- Desktop header: quiet glass bar --------------------------------------------------------------------- */ @media (min-width: 576px) { /* not sticky: with the category row it is ~145px, too tall to keep on screen */ body.mx-on .header { position: relative; z-index: 1030; background: var(--mx-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--mx-line); } body.mx-on .header .write-button, body.mx-on .header .publish-button { background: var(--mx-emerald) !important; color: var(--mx-forest-ink) !important; border-radius: 12px !important; border: 0 !important; font-family: var(--mx-font-display); } body.mx-on .header .nav-scroller .nav { gap: 6px; border: 0 !important; padding: 8px 0 12px; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } body.mx-on .header .nav-scroller .nav::-webkit-scrollbar { display: none; } body.mx-on .header .nav-scroller .nav a, body.mx-on .header .nav-scroller .nav-link { white-space: nowrap; } /* the legacy icons are full square images (dark tile, white glyph): round and scale them */ body.mx-on .header .social-media .item { width: 34px !important; height: 34px !important; border-radius: 50% !important; background-size: cover !important; opacity: .82; transition: transform .25s var(--mx-ease), opacity .25s var(--mx-ease) !important; } body.mx-on .header .social-media a:hover .item { transform: translateY(-2px); opacity: 1; } body.mx-on .header .nav-scroller .nav a, body.mx-on .header .nav-scroller .nav-link { border-radius: 12px; padding: 7px 14px !important; color: var(--mx-text-2) !important; font-family: var(--mx-font-display); transition: background-color .25s var(--mx-ease), color .25s var(--mx-ease); } body.mx-on .header .nav-scroller .nav a:hover { background: rgba(43, 182, 90, .14); color: var(--mx-text) !important; } } /* --------------------------------------------------------------------- Homepage hero: brand light field --------------------------------------------------------------------- */ .mx-hero { position: relative; isolation: isolate; overflow: hidden; margin: 12px 12px 0; padding: 26px 22px 22px; min-height: 0; border-radius: 28px; color: #effaf2; background: radial-gradient(140% 90% at 100% 0%, rgba(93, 188, 160, .55), transparent 55%), linear-gradient(160deg, var(--mx-teal-700) 0%, #0b4a3c 38%, var(--mx-forest) 72%, #0a2219 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -34px rgba(6, 42, 22, .9); } .mx-hero__field { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .mx-orb { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .75; will-change: transform; } .mx-orb--a { width: 62%; aspect-ratio: 1; top: -18%; inset-inline-end: -14%; background: radial-gradient(circle, rgba(64, 212, 91, .75), transparent 65%); } .mx-orb--b { width: 70%; aspect-ratio: 1; bottom: -36%; inset-inline-start: -22%; background: radial-gradient(circle, rgba(0, 106, 98, .9), transparent 65%); } .mx-orb--c { width: 40%; aspect-ratio: 1; top: 30%; inset-inline-start: 30%; background: radial-gradient(circle, rgba(93, 188, 160, .5), transparent 65%); } .mx-hero__mark { position: absolute; z-index: -1; inset-inline-end: -10%; top: 50%; width: 62%; max-width: 340px; transform: translateY(-50%) rotate(-8deg); opacity: .22; mix-blend-mode: screen; filter: saturate(140%); pointer-events: none; } .mx-hero__ring { position: absolute; z-index: -1; inset-inline-end: -16%; top: 50%; width: 78%; max-width: 420px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(239, 250, 242, .14); transform: translateY(-50%); pointer-events: none; } .mx-hero__ring::before { content: ""; position: absolute; top: 14%; left: 14%; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-emerald-hi); box-shadow: 0 0 0 6px rgba(64, 212, 91, .16); } .mx-hero__welcome { font-family: var(--mx-font-display); font-size: 17px; color: rgba(239, 250, 242, .78); margin: 0 0 4px; } .mx-hero__title { font-family: var(--mx-font-display); font-size: 21px; line-height: 1.35; color: #effaf2; margin: 0; max-width: 15em; } .mx-hero__title h1 { display: block; font-family: var(--mx-font-display); font-size: clamp(76px, 24vw, 150px); line-height: 1.02; margin: 0 0 2px; color: #f4fff6; text-shadow: 0 18px 50px rgba(6, 42, 22, .45); padding-bottom: .06em; } .mx-hero__lede { font-family: var(--mx-font-read); font-size: 21px; line-height: 1.5; color: rgba(239, 250, 242, .86); margin: 6px 0 20px; max-width: 22em; } .mx-hero__campaign { margin: 0 0 18px; border-radius: var(--mx-r-media); overflow: hidden; } .mx-hero__campaign img { display: block; width: 100%; height: auto; } /* composer: the micro-blogging entry point */ .mx-composer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; background: rgba(239, 250, 242, .1); border: 1px solid rgba(239, 250, 242, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; transition: transform .3s var(--mx-ease), background-color .3s var(--mx-ease); } .mx-composer:hover { background: rgba(239, 250, 242, .15); } .mx-composer:active { transform: scale(.98); } .mx-composer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(64, 212, 91, .9); } .mx-composer span { flex: 1; font-family: var(--mx-font-display); font-size: 17px; color: rgba(239, 250, 242, .9); } .mx-composer i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-emerald); color: var(--mx-forest-ink); font-size: 18px; } .mx-hero__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; font-family: var(--mx-font-display); font-size: 17px; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform .25s var(--mx-ease), box-shadow .25s var(--mx-ease), background-color .25s var(--mx-ease); } .mx-btn:active { transform: scale(.97); } .mx-btn--primary { background: var(--mx-emerald); color: var(--mx-forest-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 28px -14px rgba(43, 182, 90, .95); } .mx-btn--primary:hover { background: var(--mx-emerald-hi); } @media (min-width: 768px) { .mx-hero { margin: 22px auto 0; max-width: 1140px; padding: 56px 56px 48px; min-height: 420px; display: flex; flex-direction: column; justify-content: center; } .mx-hero__copy { max-width: 560px; } .mx-hero__mark { width: 44%; inset-inline-end: 4%; opacity: .5; } .mx-hero__ring { width: 52%; inset-inline-end: -2%; } .mx-hero__title { font-size: 26px; } .mx-composer { max-width: 520px; } } /* --------------------------------------------------------------------- Section headings: quiet display type, as in Claudad (.sec-h) --------------------------------------------------------------------- */ body.mx-on .more-box, body.mx-on .box-head-common { position: relative; display: flex; align-items: baseline; gap: 12px; font-family: var(--mx-font-display) !important; font-size: 26px !important; line-height: 1.15; color: var(--mx-text) !important; border: 0 !important; background: transparent !important; padding: 3px 0 0 !important; margin: 40px 0 14px !important; } body.mx-on .more-box a, body.mx-on .box-head-common a { margin-inline-start: auto; font-size: 14px; color: var(--mx-accent-text) !important; font-family: var(--mx-font-ui); } body.mx-on .box-head-common .small-line { display: none !important; } body.mx-on .box-head-common .title { font: inherit !important; color: inherit !important; height: auto !important; margin: 0 !important; } /* --------------------------------------------------------------------- Shared article bits --------------------------------------------------------------------- */ body.mx-on .captions-story, body.mx-on .captions-story p, body.mx-on .captions-story label { font-family: var(--mx-font-ui) !important; font-size: 13.5px !important; color: var(--mx-text-3) !important; margin-bottom: 2px; } body.mx-on .captions-story .name-author { color: var(--mx-text) !important; font-weight: 700; } body.mx-on .captions-story .category, body.mx-on .box-item .category a { color: var(--mx-accent-text) !important; } /* reaction bar: a soft pill, icons keep their brand drawings */ body.mx-on .reaction { align-items: center; margin-top: 14px !important; } body.mx-on .reaction > .col:first-child { flex: 0 0 auto; width: auto; gap: 2px; padding: 6px 12px !important; border-radius: 12px; background: var(--mx-surface-2); } body.mx-on .brain-reaction, body.mx-on .heart-reaction, body.mx-on .comment-reaction, body.mx-on .bookmark { filter: var(--mx-icon-filter); cursor: pointer; transition: transform .35s var(--mx-ease); } body.mx-on .brain-reaction:active, body.mx-on .heart-reaction:active, body.mx-on .bookmark:active { transform: scale(1.3); } body.mx-on .brain-reaction.active, body.mx-on .heart-reaction.active, body.mx-on .bookmark.active { filter: none; animation: mx-pop .45s var(--mx-ease); } body.mx-on .brain-reaction-nb, body.mx-on .heart-reaction-nb, body.mx-on .comment-reaction-nb { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-2); margin-inline-end: 10px; min-width: 1ch; } @keyframes mx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } /* --------------------------------------------------------------------- Featured rail (owl-featured-articles): immersive cover cards --------------------------------------------------------------------- */ body.mx-on .banner-section { margin: 22px 0 0 !important; } /* legacy fixes .box-article at 340px, its image at 176px and its title at 54px */ body.mx-on .box-article, body.mx-on .box-article .box-img, body.mx-on .box-article .box-description, body.mx-on .box-article .box-description .title { height: auto !important; max-height: none !important; } /* Claudad's "pick" card: media inset in a padded card, quiet shadow */ body.mx-on .owl-featured-articles .box-article { position: relative; padding: 12px 12px 4px; border: 0 !important; border-radius: var(--mx-r-card); overflow: hidden; background: var(--mx-surface) !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22) !important; transition: transform .2s var(--mx-ease); } body.mx-on .owl-featured-articles .box-article:active { transform: scale(.985); } body.mx-on .owl-featured-articles .box-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px !important; background: var(--mx-surface-2); } body.mx-on .owl-featured-articles .box-img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .8s var(--mx-ease); } @media (hover: hover) and (pointer: fine) { body.mx-on .owl-featured-articles .box-article:hover .box-img img { transform: scale(1.04); } } body.mx-on .owl-featured-articles .box-description { padding: 12px 8px 8px !important; background: transparent !important; } body.mx-on .owl-featured-articles .title, body.mx-on .owl-featured-articles .title a { font-family: var(--mx-font-read) !important; font-weight: 700; font-size: clamp(23px, 6vw, 27px) !important; line-height: 1.35 !important; color: var(--mx-text) !important; min-height: 0 !important; } /* dots stretch into a pill when active; scaled with transform so nothing re-lays out */ body.mx-on .owl-theme .owl-dots .owl-dot span { width: 22px; height: 7px; margin: 5px -2px; border-radius: 12px; background: var(--mx-line); transform: scaleX(.32); transition: transform .35s var(--mx-ease), background-color .35s var(--mx-ease); } body.mx-on .owl-theme .owl-dots .owl-dot.active span { transform: none; background: var(--mx-emerald); } /* --------------------------------------------------------------------- Trending: ranking numerals + story-ring avatars --------------------------------------------------------------------- */ body.mx-on .trending-mobile, body.mx-on .more-stories-section { background: transparent !important; } body.mx-on .owl-trend-authors .item .box-img, body.mx-on .owl-folowers-writers .box-img { width: 66px !important; height: 66px !important; margin: 4px auto 12px; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, var(--mx-emerald), var(--mx-teal-300), var(--mx-teal-700), var(--mx-emerald)); } body.mx-on .owl-trend-authors .item .box-img img, body.mx-on .owl-folowers-writers .box-img img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; border: 3px solid var(--mx-bg) !important; } body.mx-on .trending-mobile .col-12.d-flex { gap: 14px; padding-top: 14px !important; padding-bottom: 14px !important; align-items: flex-start !important; justify-content: flex-start !important; } body.mx-on .trending-mobile .col-12.d-flex + .col-12.d-flex { border-top: 1px solid var(--mx-line); } body.mx-on .nb-trend { flex: none; width: 64px; font-family: var(--mx-font-display) !important; font-size: 52px !important; line-height: .95 !important; color: transparent !important; -webkit-text-stroke: 1.4px var(--mx-emerald); opacity: .95; } body.mx-on .trending-mobile .box-item { flex: 1; min-width: 0; } body.mx-on .trending-mobile .box-item .title, body.mx-on .trending-mobile .box-item .title a { font-family: var(--mx-font-read) !important; font-weight: 700; font-size: 21px !important; line-height: 1.35 !important; color: var(--mx-text) !important; margin: 4px 0 6px !important; } body.mx-on .trending-mobile .box-item .category, body.mx-on .trending-mobile .box-item .category a { font-family: var(--mx-font-ui) !important; font-size: 13px !important; } /* --------------------------------------------------------------------- Feed posts (.subjects-section .item), home and category. Claudad's post card: media, then who and where, then title, excerpt and a hairline action row. Phones stack; wider screens put the image beside the text. --------------------------------------------------------------------- */ body.mx-on .subjects-section, body.mx-on .subjects-section-followers { background: transparent !important; padding-top: 0 !important; } body.mx-on .subjects-section .main { margin-top: 0 !important; } body.mx-on .subjects-section .row.item, body.mx-on .subjects-section-followers .row.item { position: relative; margin: 0 0 16px !important; padding: 12px 12px 2px !important; border: 0 !important; border-radius: var(--mx-r-card); background: var(--mx-surface) !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); transition: transform .2s var(--mx-ease), box-shadow .25s; } body.mx-on .subjects-section .row.item:active { transform: scale(.995); } @media (hover: hover) and (pointer: fine) { body.mx-on .subjects-section .row.item:hover { box-shadow: 0 2px 4px rgba(17, 52, 40, .06), 0 24px 48px -22px rgba(17, 52, 40, .34); } body.mx-on .subjects-section .row.item:hover .box-img img { transform: scale(1.04); } } body.mx-on .subjects-section .row.item > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; } /* undo the legacy fixed heights that clipped the excerpt */ body.mx-on .subjects-section .main .item .container-desc, body.mx-on .subjects-section .item .container-desc, body.mx-on .subjects-section .box-desc { height: auto !important; margin-top: 0 !important; } body.mx-on .subjects-section .row.item .box-img { height: auto !important; max-height: none !important; aspect-ratio: 2 / 1; border-radius: 16px !important; overflow: hidden; background: var(--mx-surface-2); } body.mx-on .subjects-section .row.item .box-img img { width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover; border-radius: 0 !important; opacity: 1 !important; transition: transform .8s var(--mx-ease); } body.mx-on .subjects-section .row.item .box-img img:hover { transform: none; } body.mx-on .subjects-section .row.item .title { margin: 0 !important; } body.mx-on .subjects-section .row.item .title a, body.mx-on .subjects-section-followers .row.item .title a { display: block; font-family: var(--mx-font-read) !important; font-weight: 700; font-size: 23px !important; line-height: 1.35 !important; color: var(--mx-text) !important; text-wrap: pretty; } body.mx-on .subjects-section .row.item .description { max-height: none !important; margin: 6px 0 0 !important; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.mx-on .subjects-section .row.item .description a { font-family: var(--mx-font-read) !important; font-size: 18px !important; line-height: 1.55 !important; color: var(--mx-text-2) !important; } body.mx-on .subjects-section .container-desc { padding: 0 !important; } body.mx-on .subjects-section .container-desc > div { padding: 0 8px; } /* who and where: a quiet two-line byline */ body.mx-on .subjects-section .row.item .captions-story p { margin: 0 !important; line-height: 1.5; } body.mx-on .subjects-section .row.item .captions-story p + p { font-size: 13px !important; } body.mx-on .subjects-section .row.item .captions-story .name-author { font-size: 15px; } /* action row: hairline above, no pill */ body.mx-on .subjects-section .row.item .reaction { margin: 12px -8px 0 !important; padding: 6px 0 4px; border-top: 1px solid var(--mx-line); } body.mx-on .subjects-section .row.item .reaction > .col:first-child { background: transparent; padding: 6px 8px !important; } /* phones: media first, then byline, then text */ @media (max-width: 575.98px) { body.mx-on .subjects-section .row.item > .col-12.d-block { order: 2; padding: 12px 8px 4px !important; } body.mx-on .subjects-section .row.item > .padding-xs-0, body.mx-on .subjects-section .row.item > [class*="col-xl-5"] { order: 1; } body.mx-on .subjects-section .row.item > .container-desc { order: 3; } body.mx-on .subjects-section .row.item > .col-12.d-block .captions-story { margin: 0 !important; } } /* wider: text beside a square-ish image, byline above the title */ @media (min-width: 576px) { body.mx-on .subjects-section .row.item, body.mx-on .subjects-section-followers .row.item { padding: 16px 16px 4px !important; align-items: flex-start; } body.mx-on .subjects-section .row.item .box-img { aspect-ratio: 4 / 3; } body.mx-on .subjects-section .row.item > [class*="col-xl-5"] { padding-inline-end: 16px !important; } body.mx-on .subjects-section .row.item .box-desc { display: flex; flex-direction: column; } /* the byline and the reaction row share .captions-story: flatten it so the byline can lead and the reactions stay last */ body.mx-on .subjects-section .row.item .box-desc .captions-story { display: contents; } body.mx-on .subjects-section .row.item .box-desc .captions-story > p { order: -1; } body.mx-on .subjects-section .row.item .box-desc .captions-story > p + p { margin-bottom: 8px !important; } body.mx-on .subjects-section .row.item .box-desc .reaction { order: 3; } body.mx-on .subjects-section .row.item .description { -webkit-line-clamp: 3; } } body.mx-on .load-more .vote-loader { opacity: .8; } /* per-card options menu keeps its behaviour; just restyled */ body.mx-on .animated-options-menu { background: var(--mx-surface) !important; border: 1px solid var(--mx-line) !important; border-radius: 16px !important; box-shadow: var(--mx-shadow) !important; overflow: hidden; } body.mx-on .animated-options-menu li span { font-family: var(--mx-font-ui); color: var(--mx-text) !important; } body.mx-on .other-options { filter: var(--mx-icon-filter); } /* story rail (owl-story): tall portrait cards */ body.mx-on .slide-section { background: transparent !important; } body.mx-on .owl-story .item, body.mx-on .owl-story .box-article { border-radius: var(--mx-r-card); overflow: hidden; position: relative; } body.mx-on .owl-story img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--mx-r-card); } /* reviews: quiet quote cards */ body.mx-on .reviews-cards .item, body.mx-on .owl-reviews .item { border-radius: var(--mx-r-card) !important; background: var(--mx-surface) !important; border: 1px solid var(--mx-line) !important; box-shadow: var(--mx-shadow) !important; } /* cookie notice: floating toast above the dock */ body.mx-on .cookies-section { left: 12px !important; right: 12px !important; bottom: calc(var(--mx-dock-h) + 24px + env(safe-area-inset-bottom)) !important; width: auto !important; border-radius: var(--mx-r-card) !important; background: var(--mx-glass) !important; color: var(--mx-text) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--mx-line) !important; box-shadow: var(--mx-shadow) !important; z-index: 1033 !important; } @media (min-width: 576px) { body.mx-on .cookies-section { bottom: 20px !important; max-width: 520px; inset-inline-start: 20px !important; right: auto !important; } } /* --------------------------------------------------------------------- Category page: topic cover --------------------------------------------------------------------- */ body.mx-category .science-section { position: relative; isolation: isolate; } body.mx-category .path-section { padding-top: 16px !important; background: transparent !important; } body.mx-category .path-section ul { display: inline-flex !important; gap: 8px; padding: 6px 14px !important; margin: 0 !important; border-radius: 12px; background: var(--mx-surface-2); font-family: var(--mx-font-ui); font-size: 13.5px; } body.mx-category .path-section li, body.mx-category .path-section a { color: var(--mx-text-2) !important; padding: 0 !important; } body.mx-category .path-section li:last-child a { color: var(--mx-accent-text) !important; } body.mx-category .path-section .fa { font-size: 10px; opacity: .6; } .mx-topic-echo { position: absolute; z-index: -1; top: 40px; inset-inline-start: -6px; font-family: var(--mx-font-display); font-size: clamp(110px, 38vw, 260px); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(43, 182, 90, .22); pointer-events: none; user-select: none; } .mx-topic-glow { position: absolute; z-index: -2; top: -60px; inset-inline-end: -30%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(43, 182, 90, .22), transparent 62%); filter: blur(20px); pointer-events: none; } body.mx-category .Title-section { background: transparent !important; padding: 26px 0 4px !important; } body.mx-category .Title-section .col { flex-direction: column !important; align-items: flex-start !important; gap: 14px; } body.mx-category .Title-section h1 { font-family: var(--mx-font-display) !important; font-size: clamp(56px, 17vw, 104px) !important; line-height: 1.04 !important; color: var(--mx-text) !important; margin: 0 !important; padding-bottom: .05em; } body.mx-on .folow-status { min-height: 44px; padding: 0 26px !important; border-radius: 12px !important; border: 1.5px solid var(--mx-emerald) !important; background: transparent !important; color: var(--mx-accent-text) !important; font-family: var(--mx-font-display) !important; font-size: 17px !important; margin: 0 !important; transition: background-color .35s var(--mx-ease), color .35s var(--mx-ease), transform .25s var(--mx-ease); } body.mx-on .folow-status:active { transform: scale(.95); } body.mx-on .folow-status.active { background: var(--mx-emerald) !important; color: var(--mx-forest-ink) !important; } body.mx-category .category-description p { font-family: var(--mx-font-read) !important; font-size: 21px !important; line-height: 1.6 !important; color: var(--mx-text-2) !important; max-width: 34em; } body.mx-category .sub-category { justify-content: flex-start !important; flex-wrap: wrap; gap: 8px; } body.mx-category .sub-category span:not(:has(a)) { display: none; } body.mx-category .sub-category a { display: inline-block; padding: 7px 14px; border-radius: 12px; background: var(--mx-surface-2); color: var(--mx-text) !important; font-family: var(--mx-font-display); font-size: 15px; } body.mx-category .middle-section { background: transparent !important; } body.mx-category .middle-section .box-item { padding: 16px 0 !important; } body.mx-category .middle-section .col-12 + .col-12 .box-item { border-top: 1px solid var(--mx-line); } body.mx-category .middle-section .border-left { border-color: var(--mx-line) !important; } body.mx-category .middle-section .title, body.mx-category .middle-section .title a { font-family: var(--mx-font-read) !important; font-weight: 700; font-size: 22px !important; line-height: 1.4 !important; color: var(--mx-text) !important; margin: 4px 0 6px !important; } body.mx-category .middle-section .category a { font-family: var(--mx-font-ui) !important; font-size: 13px !important; color: var(--mx-accent-text) !important; } @media (min-width: 576px) { body.mx-category .middle-section .col-12 + .col-12 .box-item { border-top: 0; } } body.mx-category .owl-category .item, body.mx-category .categories-slide .item { border-radius: var(--mx-r-card) !important; background: var(--mx-surface) !important; border: 1px solid var(--mx-line) !important; } /* --------------------------------------------------------------------- Entrance motion (only when mx.js runs and motion is allowed) --------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .mx-hero__welcome, .mx-hero__title, .mx-hero__lede, .mx-hero__campaign, .mx-composer, .mx-hero__actions { animation: mx-rise .9s var(--mx-ease) both; } .mx-hero__title { animation-delay: .06s; } .mx-hero__lede { animation-delay: .14s; } .mx-composer, .mx-hero__campaign { animation-delay: .22s; } .mx-hero__actions { animation-delay: .3s; } .mx-orb--a { animation: mx-drift-a 22s ease-in-out infinite alternate; } .mx-orb--b { animation: mx-drift-b 26s ease-in-out infinite alternate; } .mx-orb--c { animation: mx-drift-c 18s ease-in-out infinite alternate; } .mx-hero__ring { animation: mx-orbit 60s linear infinite; } .mx-hero__mark { animation: mx-float 9s ease-in-out infinite alternate; } html.mx-js body.mx-on .mx-reveal { opacity: 0; transform: translateY(18px); } html.mx-js body.mx-on .mx-reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--mx-ease), transform .8s var(--mx-ease); } } @keyframes mx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes mx-drift-a { to { transform: translate(-14%, 10%) scale(1.15); } } @keyframes mx-drift-b { to { transform: translate(12%, -8%) scale(1.1); } } @keyframes mx-drift-c { to { transform: translate(-10%, -14%) scale(.9); } } @keyframes mx-orbit { to { transform: translateY(-50%) rotate(360deg); } } @keyframes mx-float { to { transform: translateY(-54%) rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { body.mx-on *, body.mx-on *::before, body.mx-on *::after, #LogIn *, #forgottenPassword * { animation: none !important; transition: none !important; } } /* ===================================================================== Sign-in (#LogIn) and password recovery (#forgottenPassword) Applies on every page. A full-screen page on phones and a split dialog with a lit brand panel from 768px. The Bootstrap tabs stay in the DOM for the legacy scripts; the visible switch is a text link. ===================================================================== */ #LogIn .modal-dialog, #forgottenPassword .modal-dialog { font-family: var(--mx-font-ui); } #LogIn .modal-content, #forgottenPassword .modal-content { position: relative; isolation: isolate; border: 0 !important; border-radius: 28px !important; background: var(--mx-bg) !important; color: var(--mx-text); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(6, 22, 15, .6) !important; } /* soft emerald light falling on the top of the form */ #LogIn .modal-content::before, #forgottenPassword .modal-content::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 360px; background: radial-gradient(70% 100% at 70% 0%, rgba(43, 182, 90, .14), transparent 70%); pointer-events: none; } /* Bootstrap makes .modal-content a flex column; keep every block at its natural height */ #LogIn .modal-content > *, #forgottenPassword .modal-content > * { flex-shrink: 0; } /* undo legacy widths, margins and heights */ #LogIn .fields-box, #forgottenPassword .fields-box, #LogIn .validation-box, #forgottenPassword .validation-box { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; text-align: start !important; } #LogIn .fields-box, #forgottenPassword .fields-box { margin-top: 0 !important; margin-bottom: 0 !important; } #LogIn .message-input, #forgottenPassword .message-input { display: block; width: 100% !important; max-width: none !important; } #LogIn #gSignInWrapper, #LogIn #gSignInWrapperr, #LogIn a#custom-facebook-login, #LogIn a#custom-facebook-login-signin, #LogIn .custom-facebook-login, #LogIn .custom-google-login { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; } #LogIn .body-box { padding: 0 !important; } #LogIn .body-box br { display: none; } body.mx-on .modal-backdrop.show { opacity: 1 !important; background: rgba(5, 14, 9, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* the old segmented tabs: kept for the scripts, replaced by .mx-auth__switch */ #LogIn .modal-header nav { display: none !important; } /* ---------- brand panel ---------- */ .mx-auth__brand { position: relative; isolation: isolate; overflow: hidden; } .mx-auth__mark { display: flex; align-items: center; gap: 10px; } .mx-auth__mark img { width: 30px; height: 30px; object-fit: contain; } .mx-auth__mark strong { font-family: var(--mx-font-display); font-weight: 400; font-size: 22px; line-height: 1; } .mx-auth__orb, .mx-auth__light, .mx-auth__flame, .mx-auth__quote { display: none; } /* ---------- close button ---------- */ #LogIn .modal-header, #forgottenPassword .modal-header { position: static; border: 0 !important; padding: 0 !important; min-height: 0; background: transparent !important; } #LogIn .close-popup, #forgottenPassword .close-popup { position: absolute !important; top: 12px; left: 12px; right: auto; width: 42px; height: 42px; margin: 0 !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; background: var(--mx-surface-2) !important; color: var(--mx-text) !important; opacity: 1 !important; text-shadow: none; font-family: var(--mx-font-ui); font-size: 14px; z-index: 3; transition: transform .16s var(--mx-ease), background-color .2s; } #LogIn .close-popup:active, #forgottenPassword .close-popup:active { transform: scale(.92); } #LogIn .close-popup img { width: 14px; height: 14px; filter: var(--mx-icon-filter); } /* ---------- title ---------- */ #LogIn .modal-body, #forgottenPassword .modal-body { padding: 8px 20px 28px !important; background: transparent !important; } #LogIn .head-box, #forgottenPassword .head-box { margin: 0 0 26px !important; padding: 0 !important; background: transparent !important; text-align: start !important; } .mx-auth__title, #forgottenPassword .head-box > span { display: block; margin: 0; font-family: var(--mx-font-display) !important; font-weight: 400; font-size: clamp(40px, 11vw, 54px); line-height: 1.1; color: var(--mx-text); text-wrap: balance; } .mx-auth__sub, #forgottenPassword .about-forgotten { margin: 8px 0 0; font-family: var(--mx-font-read) !important; font-size: 21px !important; line-height: 1.5 !important; color: var(--mx-text-2) !important; text-wrap: pretty; } /* ---------- social: full-width pills, brand glyphs keep their colour ---------- */ #LogIn .custom-facebook-login, #LogIn .custom-google-login { display: block; margin: 0 0 10px !important; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; color: var(--mx-text) !important; cursor: pointer; transition: transform .16s var(--mx-ease), box-shadow .2s; } #LogIn .custom-facebook-login:active, #LogIn .custom-google-login:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { #LogIn .custom-facebook-login:hover, #LogIn .custom-google-login:hover { box-shadow: inset 0 0 0 1px var(--mx-text-3) !important; } } #LogIn .custom-facebook-login > div, #LogIn .custom-google-login > div { height: 54px !important; justify-content: center !important; gap: 10px; font-family: var(--mx-font-ui); font-size: 16px; color: var(--mx-text) !important; } #LogIn .custom-facebook-login .fa { color: #1877f2 !important; font-size: 20px; } #LogIn .custom-google-login .fa { color: #ea4335 !important; font-size: 19px; } #LogIn a#custom-facebook-login, #LogIn a#custom-facebook-login-signin { text-decoration: none; display: block; border: 0 !important; } #LogIn .via-box { display: flex; align-items: center; gap: 12px; margin: 20px 0 18px !important; padding: 0 !important; font-family: var(--mx-font-ui) !important; font-size: 14px !important; color: var(--mx-text-3) !important; text-align: center; white-space: nowrap; } #LogIn .via-box::before, #LogIn .via-box::after { content: ""; flex: 1; height: 1px; background: var(--mx-line-2); } /* ---------- fields: label above, input, message below ---------- */ #LogIn .validation-box, #forgottenPassword .validation-box { margin-bottom: 16px !important; } .mx-label { display: block; margin: 0 0 6px; font-family: var(--mx-font-display); font-size: 15px; line-height: 21px; color: var(--mx-text-2); } .mx-label em { font-style: normal; color: var(--mx-accent-text); } #LogIn .message-input, #forgottenPassword .message-input { height: 54px !important; padding: 0 18px !important; border: 0 !important; border-radius: 16px !important; background: var(--mx-surface) !important; color: var(--mx-text) !important; font-family: var(--mx-font-ui) !important; font-size: 17px !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; outline: none; transition: box-shadow .2s; } #LogIn .message-input::placeholder, #forgottenPassword .message-input::placeholder { color: var(--mx-text-3) !important; opacity: 1; } #LogIn .message-input:focus, #forgottenPassword .message-input:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald) !important; } #LogIn .was-validated .form-control:invalid, #LogIn .form-control.is-invalid, #forgottenPassword .was-validated .form-control:invalid, #forgottenPassword .form-control.is-invalid { box-shadow: inset 0 0 0 2px var(--mx-danger) !important; } #LogIn .was-validated .form-control:valid, #forgottenPassword .was-validated .form-control:valid { background-image: none !important; } #LogIn .invalid-feedback, #forgottenPassword .invalid-feedback, #LogIn .validation-email-password, #forgottenPassword .validation-email { font-family: var(--mx-font-ui) !important; font-size: 14px !important; color: var(--mx-danger) !important; margin-top: 6px; } #LogIn .valid-feedback, #forgottenPassword .valid-feedback { font-family: var(--mx-font-ui) !important; font-size: 14px !important; color: var(--mx-accent-text) !important; } .mx-has-reveal { position: relative; } .mx-reveal-pass { position: absolute; top: 0; inset-inline-end: 6px; height: 54px; width: 44px; border: 0; background: transparent; color: var(--mx-text-3); display: grid; place-items: center; cursor: pointer; font-size: 17px; } .mx-reveal-pass--labelled { top: 27px; } .mx-reveal-pass:focus-visible { outline: 2px solid var(--mx-emerald); border-radius: 10px; } #LogIn .message-input-password { padding-inline-end: 50px !important; } #LogIn .forgetten-password { margin: -6px 0 16px !important; text-align: start; } #LogIn .forgetten-password a { font-family: var(--mx-font-ui); font-size: 14px; color: var(--mx-accent-text) !important; } /* primary action: ink pill, like Claudad's email button */ #LogIn .create-account, #forgottenPassword .create-account { width: 100%; height: 54px; margin: 6px 0 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0 !important; border-radius: 12px !important; background: var(--mx-text) !important; color: var(--mx-bg) !important; font-family: var(--mx-font-display) !important; font-size: 18px !important; box-shadow: none !important; transition: transform .16s var(--mx-ease), opacity .2s; } #LogIn .create-account:active, #forgottenPassword .create-account:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { #LogIn .create-account:hover, #forgottenPassword .create-account:hover { opacity: .88; } } /* switch between "new account" and "sign in" */ .mx-auth__switch { margin: 22px 0 0; text-align: center; font-family: var(--mx-font-ui); font-size: 15px; color: var(--mx-text-2); } .mx-auth__link { border: 0; padding: 4px 2px; background: none; font: inherit; color: var(--mx-accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .mx-auth__link:focus-visible { outline: 2px solid var(--mx-emerald); border-radius: 6px; } #LogIn .foot-box, #LogIn .foot-box p { margin: 14px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; font-family: var(--mx-font-ui) !important; font-size: 13px !important; line-height: 1.6; color: var(--mx-text-3) !important; text-align: center; } #LogIn .foot-box a { color: var(--mx-accent-text) !important; text-decoration: underline; text-underline-offset: 3px; } /* switching tabs: a short fade and lift instead of Bootstrap's flat fade */ #LogIn .tab-pane.fade { transition: opacity .25s var(--mx-ease), transform .25s var(--mx-ease); } #LogIn .tab-pane.fade:not(.show) { transform: translateY(8px); } /* ---------- phones and small tablets: a full-screen page ---------- */ @media (max-width: 767.98px) { #LogIn.modal, #forgottenPassword.modal { padding: 0 !important; overflow: hidden !important; } #LogIn .modal-dialog, #forgottenPassword .modal-dialog { position: fixed; inset: 0; margin: 0 !important; max-width: none !important; min-height: 0 !important; height: 100%; display: block; } /* Bootstrap's centring spacer would push the page below the screen */ #LogIn .modal-dialog-centered::before, #forgottenPassword .modal-dialog-centered::before { display: none; } #LogIn .modal-content, #forgottenPassword .modal-content { height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 !important; box-shadow: none !important; padding-bottom: env(safe-area-inset-bottom); } #LogIn .mx-auth__brand { padding: calc(16px + env(safe-area-inset-top)) 20px 8px; min-height: 66px; display: flex; align-items: center; background: transparent; color: var(--mx-text); } #LogIn .close-popup, #forgottenPassword .close-popup { top: calc(12px + env(safe-area-inset-top)); } #forgottenPassword .modal-body { padding-top: calc(72px + env(safe-area-inset-top)) !important; } #LogIn .modal-body > .tab-content, #forgottenPassword .modal-body > .body-box, #forgottenPassword .modal-body > .head-box { max-width: 520px; margin-inline: auto; } /* the page rises into place; it leaves faster than it arrives */ #LogIn.modal.fade .modal-dialog, #forgottenPassword.modal.fade .modal-dialog { transform: translateY(32px); opacity: 0; transition: transform .2s ease-in, opacity .2s ease-in; } #LogIn.modal.show .modal-dialog, #forgottenPassword.modal.show .modal-dialog { transform: none; opacity: 1; transition: transform .45s var(--mx-ease), opacity .3s var(--mx-ease); } } /* ---------- 768px and up: a full-screen split page, form beside the lit brand panel ---------- */ @media (min-width: 768px) { #LogIn.modal { padding: 0 !important; overflow: hidden !important; } #LogIn .modal-dialog { position: fixed; inset: 0; margin: 0 !important; max-width: none !important; min-height: 0 !important; height: 100%; display: block; } #LogIn .modal-dialog-centered::before { display: none; } #LogIn .modal-content { display: grid !important; grid-template-columns: minmax(0, 1fr) 42%; grid-template-rows: auto minmax(0, 1fr); height: 100%; border-radius: 0 !important; box-shadow: none !important; } #LogIn .modal-header { grid-column: 1; grid-row: 1; } /* the form scrolls on its own so the brand panel stays whole */ #LogIn .modal-body { grid-column: 1; grid-row: 2; padding: 72px 48px 48px !important; overflow-y: auto; overscroll-behavior: contain; } #LogIn .modal-body > .tab-content { max-width: 440px; margin-inline: auto; } #LogIn .mx-auth__title { font-size: 50px; } #LogIn .mx-auth__brand { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 32px 38px; color: #effaf2; background: radial-gradient(120% 70% at 80% 0%, rgba(93, 188, 160, .45), transparent 60%), linear-gradient(170deg, var(--mx-teal-500), #0b4a3c 30%, var(--mx-forest) 66%, #0a2219); } #LogIn .mx-auth__mark strong { color: #f4fff6; } #LogIn .mx-auth__orb, #LogIn .mx-auth__light, #LogIn .mx-auth__flame, #LogIn .mx-auth__quote { display: block; } .mx-auth__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(42px); opacity: .78; pointer-events: none; } .mx-auth__orb--a { width: 80%; aspect-ratio: 1; top: -14%; right: -26%; background: radial-gradient(circle, rgba(64, 212, 91, .7), transparent 65%); animation: mx-drift-a 22s ease-in-out infinite alternate; } .mx-auth__orb--b { width: 90%; aspect-ratio: 1; bottom: -30%; left: -34%; background: radial-gradient(circle, rgba(0, 106, 98, .9), transparent 65%); animation: mx-drift-b 26s ease-in-out infinite alternate; } .mx-auth__light { position: absolute; z-index: -1; width: 130%; aspect-ratio: 1; top: 4%; left: -15%; border-radius: 50%; background: radial-gradient(circle, rgba(64, 212, 91, .5), rgba(64, 212, 91, .1) 40%, transparent 66%); pointer-events: none; animation: mx-breathe 5s ease-in-out infinite alternate; } .mx-auth__flame { position: absolute; z-index: -1; width: 40%; top: 22%; left: 30%; mix-blend-mode: screen; filter: saturate(140%) drop-shadow(0 0 40px rgba(64, 212, 91, .45)); pointer-events: none; } .mx-auth__quote { margin: 0; font-family: var(--mx-font-read); font-size: 27px; line-height: 1.45; color: #effaf2; text-wrap: balance; } .mx-auth__quote span { display: block; margin-top: 12px; font-family: var(--mx-font-ui); font-size: 15px; color: rgba(239, 250, 242, .8); } /* close sits on the lit panel */ #LogIn .close-popup { top: 26px; left: 24px; background: rgba(239, 250, 242, .14) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } #LogIn .close-popup img { filter: invert(1) brightness(2); } #forgottenPassword .modal-dialog { max-width: 500px; } #forgottenPassword .modal-body { padding: 64px 40px 36px !important; } /* the dialog settles in with a small scale, never from zero */ #LogIn.modal.fade .modal-dialog { transform: none; opacity: 0; transition: opacity .25s var(--mx-ease); } #LogIn.modal.show .modal-dialog { opacity: 1; } #forgottenPassword.modal.fade .modal-dialog { transform: scale(.96) translateY(8px); transition: transform .3s var(--mx-ease); } #forgottenPassword.modal.show .modal-dialog { transform: none; } } @media (min-width: 1024px) { #LogIn .modal-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #LogIn .mx-auth__brand { padding: 40px 48px 56px; } .mx-auth__quote { font-size: 30px; max-width: 16em; } } @keyframes mx-breathe { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } } /* ===================================================================== mx home, ported from the Claudad prototype (body.mx-home) Shell: rail | main | aside from 1024px, one column under the dock below. Shape rule: controls are pills, cards 22px, media 16px. ===================================================================== */ body.mx-shell { background: var(--mx-bg) !important; } /* the Claudad dock replaces the legacy dock and floating write button */ body.mx-shell .locked-bar, body.mx-shell .writing-box { display: none !important; } body.mx-shell .ic, .cx-gate .ic { width: 22px; height: 22px; flex: none; } .cx-grow { flex: 1; min-width: 0; } .cx-mob { display: block; } .cx-rail, .cx-aside { display: none; } .cx-shell { min-height: 100dvh; } .cx-main { display: block; padding: 0 max(16px, env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .cx-topline { display: none; } /* buttons */ .cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding-inline: 22px; border: 0; border-radius: 12px; font-family: var(--mx-font-ui); font-weight: 700; font-size: 16px; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: transform .16s var(--mx-ease), background-color .2s, box-shadow .2s, opacity .2s; } .cx-btn:active { transform: scale(.97); } .cx-btn--lg { height: 54px; font-size: 17px; padding-inline: 26px; } .cx-btn--sm { height: 38px; font-size: 14px; padding-inline: 16px; } .cx-btn--accent { background: var(--mx-emerald); color: #04210E !important; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35); } .cx-btn--ink { background: var(--mx-text); color: var(--mx-bg) !important; } .cx-btn--glass { background: rgba(239, 250, 242, .1); color: #EFFAF2 !important; box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .cx-btn .ic { width: 20px; height: 20px; } /* avatars */ .cx-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; background: var(--mx-surface-2); } .cx-av img { width: 100%; height: 100%; object-fit: cover; } .cx-av--letter { background: linear-gradient(140deg, #43907A, #113428); color: #EFFAF2; font-family: var(--mx-font-display); font-size: 19px; line-height: 1; padding-top: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .cx-av--sm { width: 32px; height: 32px; font-size: 15px; } .cx-av--guest { background: var(--mx-emerald); color: #04210E; } .cx-av--guest .ic { width: 18px; height: 18px; } .cx-av--glass { background: rgba(239, 250, 242, .14); color: #EFFAF2; } /* brand light, shared by the hero and the welcome screen */ .cx-orb { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .78; will-change: transform; } .cx-orb--a { width: 62%; aspect-ratio: 1; top: -18%; right: -14%; background: radial-gradient(circle, rgba(64, 212, 91, .75), transparent 65%); } .cx-orb--b { width: 70%; aspect-ratio: 1; bottom: -36%; left: -22%; background: radial-gradient(circle, rgba(0, 106, 98, .9), transparent 65%); } .cx-orb--c { width: 40%; aspect-ratio: 1; top: 30%; left: 30%; background: radial-gradient(circle, rgba(93, 188, 160, .5), transparent 65%); } .cx-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(239, 250, 242, .14); pointer-events: none; } .cx-ring::before { content: ""; position: absolute; top: 14%; left: 14%; width: 8px; height: 8px; border-radius: 50%; background: #40D45B; box-shadow: 0 0 0 6px rgba(64, 212, 91, .16), 0 0 18px #40D45B; } .cx-flame { position: absolute; pointer-events: none; mix-blend-mode: screen; filter: saturate(140%) drop-shadow(0 0 40px rgba(64, 212, 91, .45)); } .cx-light { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(64, 212, 91, .55), rgba(64, 212, 91, .12) 40%, transparent 66%); } @media (prefers-reduced-motion: no-preference) { .cx-orb--a { animation: mx-drift-a 22s ease-in-out infinite alternate; } .cx-orb--b { animation: mx-drift-b 26s ease-in-out infinite alternate; } .cx-orb--c { animation: mx-drift-c 18s ease-in-out infinite alternate; } .cx-ring { animation: cx-orbit 60s linear infinite; } .cx-light { animation: cx-breathe 7s ease-in-out infinite alternate; } } @keyframes cx-orbit { to { rotate: 360deg; } } @keyframes cx-breathe { from { opacity: .75; scale: .96; } to { opacity: 1; scale: 1.04; } } @keyframes cx-float { to { translate: 0 -54%; rotate: -4deg; } } .cx-wordmark { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(88px, 30vw, 176px); line-height: .95; padding-bottom: .08em; color: #F4FFF6; text-shadow: 0 18px 50px rgba(6, 42, 22, .5); } /* ---------- welcome ---------- */ html.mx-welcome-open, html.mx-welcome-open body { overflow: hidden; } .cx-welcome { position: fixed; inset: 0; z-index: 1060; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding-inline: max(20px, env(safe-area-inset-left)); color: #EFFAF2; background: radial-gradient(120% 70% at 80% 0%, rgba(93, 188, 160, .5), transparent 60%), linear-gradient(170deg, #43907A 0%, #0B4A3C 30%, #113428 66%, #0A2219 100%); transition: opacity .35s var(--mx-ease), transform .35s var(--mx-ease); } .cx-welcome[hidden] { display: none; } .cx-welcome.is-leaving { opacity: 0; transform: scale(1.02); pointer-events: none; } .cx-welcome__field { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cx-welcome__field .cx-ring { width: min(118vw, 620px); top: 8%; left: 50%; translate: -50% 0; } .cx-welcome__field .cx-light { width: min(140vw, 760px); aspect-ratio: 1; top: 0; left: 50%; translate: -50% 0; } .cx-welcome__field .cx-flame { width: min(48vw, 280px); top: 12%; left: 50%; translate: -50% 0; opacity: .92; } .cx-welcome__top { display: flex; align-items: center; gap: 10px; padding-top: calc(18px + env(safe-area-inset-top)); } .cx-welcome__top img { width: 28px; height: 28px; } .cx-latin { font-family: var(--mx-font-ui); font-weight: 700; font-size: 15px; letter-spacing: .14em; color: rgba(239, 250, 242, .8); } .cx-welcome__about { margin-inline-start: auto; font-family: var(--mx-font-ui); font-size: 14px; color: rgba(239, 250, 242, .8) !important; } .cx-welcome__copy { grid-row: 3; display: grid; gap: 14px; max-width: 560px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .cx-welcome__lede { margin: 0; font-family: var(--mx-font-read); font-size: 23px; line-height: 1.45; color: rgba(239, 250, 242, .8); max-width: 21em; text-wrap: balance; } .cx-welcome__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .cx-welcome__guest { justify-self: center; padding: 10px 14px; border: 0; background: none; font-family: var(--mx-font-ui); font-size: 15px; color: rgba(239, 250, 242, .8); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(239, 250, 242, .35); cursor: pointer; } @media (min-width: 900px) { .cx-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; padding-inline: max(48px, 6vw); } .cx-welcome__top { grid-column: 1 / -1; } .cx-welcome__copy { grid-row: 2; grid-column: 1; align-self: center; padding: 0 0 40px; } .cx-welcome__field .cx-ring { width: min(46vw, 640px); top: 50%; left: 24%; translate: -50% -50%; } .cx-welcome__field .cx-light { width: min(64vw, 900px); top: 50%; left: 24%; translate: -50% -50%; } .cx-welcome__field .cx-flame { width: min(24vw, 340px); top: 50%; left: 24%; translate: -50% -50%; } } /* ---------- hero card ---------- */ .cx-hero { position: relative; isolation: isolate; overflow: hidden; margin: 8px -4px 0; padding: 22px 20px 20px; border-radius: 30px; color: #EFFAF2; background: radial-gradient(140% 90% at 100% 0%, rgba(93, 188, 160, .55), transparent 55%), linear-gradient(160deg, #43907A 0%, #0B4A3C 38%, #113428 72%, #0A2219 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -28px rgba(10, 40, 28, .5); } .cx-hero__field { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cx-hero__field .cx-ring { width: 78%; max-width: 420px; top: 50%; left: -16%; translate: 0 -50%; } .cx-hero__field .cx-light { width: 90%; max-width: 520px; aspect-ratio: 1; top: 50%; left: -20%; translate: 0 -50%; } .cx-hero__field .cx-flame { width: 46%; max-width: 280px; top: 50%; left: -2%; translate: 0 -50%; rotate: -8deg; opacity: .42; } @media (prefers-reduced-motion: no-preference) { .cx-hero__field .cx-flame { animation: cx-float 9s ease-in-out infinite alternate; } } .cx-hero__greet { margin: 0; font-family: var(--mx-font-display); font-size: 16px; line-height: 1.3; color: rgba(239, 250, 242, .8); padding-top: 2px; } .cx-hero .cx-wordmark { font-size: clamp(64px, 19vw, 112px); } .cx-composer { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 7px; border: 0; border-radius: 12px; background: rgba(239, 250, 242, .1); box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .2), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: start; cursor: pointer; color: inherit; transition: transform .2s var(--mx-ease), background-color .25s; } .cx-composer:active { transform: scale(.98); } .cx-composer .cx-av { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(64, 212, 91, .9); } .cx-composer__txt { flex: 1; font-family: var(--mx-font-display); font-size: 16px; line-height: 1.2; padding-top: 3px; color: rgba(239, 250, 242, .92); } .cx-composer i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #EFFAF2; color: #113428; font-style: normal; } @media (hover: hover) and (pointer: fine) { .cx-composer:hover { background: rgba(239, 250, 242, .16); } } /* ---------- sections ---------- */ .cx-sec { margin-top: 52px; } .cx-sec-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } .cx-sec-h h2 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 21px; line-height: 1.15; padding-top: 3px; color: var(--mx-text); } .cx-sec-h .ic { width: 22px; height: 22px; color: var(--mx-accent-text); align-self: center; } .cx-sec-h--flush { margin-bottom: 0; } .cx-more { margin-inline-start: auto; font-family: var(--mx-font-ui); font-size: 14px; font-weight: 700; color: var(--mx-accent-text) !important; } /* feed controls */ .cx-feed-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 52px; margin-bottom: 22px; } .cx-seg { position: relative; justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); } .cx-seg button { position: relative; z-index: 1; height: 38px; padding-inline: 18px; border: 0; border-radius: 12px; background: none; font-family: var(--mx-font-ui); font-size: 15px; font-weight: 500; color: var(--mx-text-3); cursor: pointer; transition: color .25s; } .cx-seg button[aria-pressed="true"] { color: var(--mx-text); } .cx-seg__ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); transition: transform .32s var(--mx-ease); } .cx-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; } .cx-chips::-webkit-scrollbar { display: none; } .cx-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 14px; border: 0; border-radius: 12px; background: none; font-family: var(--mx-font-ui); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--mx-text-2) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2); cursor: pointer; text-decoration: none !important; transition: background-color .2s, color .2s, transform .16s var(--mx-ease); } .cx-chip:active { transform: scale(.96); } .cx-chip .ic { width: 18px; height: 18px; } .cx-chip[aria-pressed="true"] { background: var(--mx-text); color: var(--mx-bg) !important; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .cx-chip:not([aria-pressed="true"]):hover { background: var(--mx-surface-2); color: var(--mx-text) !important; } } .cx-tchips { display: flex; flex-wrap: wrap; gap: 8px; } .cx-empty { margin: 8px 0 0; padding: 28px 20px; border-radius: 22px; background: var(--mx-surface); text-align: center; font-family: var(--mx-font-read); font-size: 19px; color: var(--mx-text-2); } /* ---------- post card ---------- */ .cx-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .cx-posts[hidden], .cx-post[hidden], .cx-empty[hidden] { display: none; } .cx-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "pm" "pt" "acts"; gap: 12px; padding: 12px 12px 2px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); transition: transform .3s var(--mx-ease), box-shadow .3s var(--mx-ease); } .cx-post__media { grid-area: media; position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--mx-surface-2); aspect-ratio: 2 / 1; } .cx-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mx-ease); } .cx-post > .cx-pm { grid-area: pm; } .cx-post > .cx-pt { grid-area: pt; display: grid; gap: 6px; align-content: start; } .cx-post > .cx-acts { grid-area: acts; margin: 0; padding-top: 4px; border-top: 1px solid var(--mx-line); } .cx-post--wide > .cx-pm, .cx-post--wide > .cx-pt, .cx-post--pick > .cx-pm, .cx-post--pick > .cx-pt { padding-inline: 8px; } .cx-pm { display: flex; align-items: center; gap: 10px; min-width: 0; } .cx-pm .cx-av { width: 34px; height: 34px; font-size: 16px; } .cx-pm__txt { min-width: 0; display: grid; line-height: 1.35; } .cx-pm__name { justify-self: start; font-family: var(--mx-font-ui); font-weight: 700; font-size: 14px; color: var(--mx-text) !important; } .cx-pm__sub { font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-pm__topic { color: var(--mx-accent-text) !important; font-weight: 500; } .cx-pt { min-width: 0; } .cx-ptitle { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 20px; line-height: 1.45; text-wrap: balance; padding-top: 2px; } .cx-ptitle a { color: var(--mx-text) !important; transition: color .2s; } .cx-pdek { margin: 0; font-family: var(--mx-font-read); font-size: 17.5px; line-height: 1.55; color: var(--mx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-post--side { grid-template-columns: minmax(0, 1fr) 84px; grid-template-areas: "pm pm" "pt media" "acts acts"; padding: 16px 16px 2px; gap: 12px 14px; } .cx-post--side .cx-post__media { aspect-ratio: 1; width: 84px; align-self: start; margin-top: 4px; } .cx-post--side > .cx-acts { margin-inline: -8px; } .cx-post--pick .cx-post__media { aspect-ratio: 16 / 10; } .cx-post--pick .cx-ptitle { font-size: clamp(23px, 6vw, 28px); line-height: 1.35; } .cx-post--pick .cx-pdek { -webkit-line-clamp: 3; } @media (min-width: 600px) { .cx-post--side { grid-template-columns: 36% minmax(0, 1fr); grid-template-areas: "media pm" "media pt" "media acts"; grid-template-rows: auto 1fr auto; padding: 12px; padding-inline-end: 20px; gap: 10px 22px; } .cx-post--side .cx-post__media { width: auto; aspect-ratio: auto; min-height: 184px; height: 100%; margin: 0; } .cx-post--side > .cx-pm { padding-top: 8px; } } @media (hover: hover) and (pointer: fine) { .cx-post:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17, 52, 40, .06), 0 24px 48px -22px rgba(17, 52, 40, .34); } .cx-post:hover .cx-post__media img { transform: scale(1.04); } .cx-post:hover .cx-ptitle a { color: var(--mx-accent-text) !important; } } /* actions: Claudad glyphs drawn through the legacy elements, so the jQuery handlers still bind */ .cx-acts { position: relative; display: flex; align-items: center; gap: 2px; } .cx-act { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding-inline: 8px; border-radius: 12px; color: var(--mx-text-2); font-family: var(--mx-font-ui); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none !important; transition: background-color .2s, transform .16s var(--mx-ease); } .cx-act:active { transform: scale(.92); } @media (hover: hover) and (pointer: fine) { .cx-act:hover { background: var(--mx-surface-2); } } .cx-acts .brain-reaction, .cx-acts .heart-reaction, .cx-acts .comment-reaction, .cx-acts .bookmark { width: 21px !important; height: 21px !important; margin: 0 !important; flex: none; background: currentColor !important; filter: none !important; cursor: pointer; -webkit-mask: var(--cx-glyph) center / contain no-repeat; mask: var(--cx-glyph) center / contain no-repeat; } .cx-acts .brain-reaction { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z'/%3E%3C/svg%3E"); } .cx-acts .brain-reaction.active { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M212,76V72a44,44,0,0,0-74.86-31.31,3.93,3.93,0,0,0-1.14,2.8v88.72a4,4,0,0,0,6.2,3.33A47.67,47.67,0,0,1,167.68,128a8.18,8.18,0,0,1,8.31,7.58,8,8,0,0,1-8,8.42,32,32,0,0,0-32,32v33.88a4,4,0,0,0,1.49,3.12,47.92,47.92,0,0,0,74.21-17.16,4,4,0,0,0-4.49-5.56A68.06,68.06,0,0,1,192,192h-7.73a8.18,8.18,0,0,1-8.25-7.47,8,8,0,0,1,8-8.53h8a51.6,51.6,0,0,0,24-5.88v0A52,52,0,0,0,212,76Zm-12,36h-4a36,36,0,0,1-36-36V72a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4a8,8,0,0,1,0,16ZM88,28A44.05,44.05,0,0,0,44,72v4a52,52,0,0,0-4,94.12h0A51.6,51.6,0,0,0,64,176h7.73A8.18,8.18,0,0,1,80,183.47,8,8,0,0,1,72,192H64a67.48,67.48,0,0,1-15.21-1.73,4,4,0,0,0-4.5,5.55A47.93,47.93,0,0,0,118.51,213a4,4,0,0,0,1.49-3.12V176a32,32,0,0,0-32-32,8,8,0,0,1-8-8.42A8.18,8.18,0,0,1,88.32,128a47.67,47.67,0,0,1,25.48,7.54,4,4,0,0,0,6.2-3.33V43.49a4,4,0,0,0-1.14-2.81A43.85,43.85,0,0,0,88,28Zm8,48a36,36,0,0,1-36,36H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,76V72a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); color: var(--mx-accent-text); } .cx-acts .heart-reaction { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E"); } .cx-acts .heart-reaction.active { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E"); color: var(--mx-accent-text); } .cx-acts .comment-reaction { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E"); } .cx-acts .bookmark { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z'/%3E%3C/svg%3E"); color: var(--mx-text-2); margin-inline-start: 4px !important; width: 38px !important; -webkit-mask-size: 21px; mask-size: 21px; } .cx-acts .bookmark.active { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z'/%3E%3C/svg%3E"); color: var(--mx-accent-text); } .cx-acts .brain-reaction.active, .cx-acts .heart-reaction.active, .cx-acts .bookmark.active { animation: mx-pop .42s var(--mx-ease); } .cx-acts .brain-reaction-nb, .cx-acts .heart-reaction-nb, .cx-acts .comment-reaction-nb { margin: 0 !important; font-size: 14px; color: inherit; min-width: 1ch; } .cx-act-rt { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; padding-inline: 8px; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); white-space: nowrap; } .cx-act-rt .ic { width: 17px; height: 17px; } .cx-acts .container-other-options { position: relative; } .cx-acts .other-options { width: 30px !important; height: 30px !important; filter: var(--mx-icon-filter); opacity: .6; } .cx-acts .animated-options-menu { position: absolute; bottom: 40px; inset-inline-end: 0; z-index: 5; min-width: 200px; } .cx-acts .animated-options-menu ul { margin: 0; padding: 6px; list-style: none; } .cx-acts .animated-options-menu li span { display: block; padding: 10px 12px; border-radius: 12px; font-size: 14px; cursor: pointer; } /* legacy cards that infinite scroll appends keep the earlier card style */ .cx-legacy-feed { padding: 0 !important; } .cx-legacy-feed .row.item { margin-left: 0 !important; margin-right: 0 !important; } body.mx-home .load-more { display: grid; place-items: center; padding: 18px 0; } body.mx-home .load-more img { width: 34px; } /* most engaged rail (phones) */ .cx-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 290px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 10px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .cx-hscroll::-webkit-scrollbar { display: none; } .cx-hscroll > * { scroll-snap-align: start; } .cx-tr { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 172px; padding: 18px 18px 16px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); text-decoration: none !important; } .cx-tr__rank { font-family: var(--mx-font-read); font-weight: 700; font-size: 42px; line-height: .8; color: var(--mx-accent-text); padding-top: 6px; } .cx-tr h3 { margin: 0; font-family: var(--mx-font-read); font-weight: 700; font-size: 18.5px; line-height: 1.3; color: var(--mx-text); text-wrap: balance; } .cx-tr small { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } /* quotes */ .cx-quotes { grid-auto-columns: min(86%, 360px); } .cx-tq { margin: 0; padding: 22px; border-radius: 22px; background: var(--mx-surface-2); display: grid; gap: 14px; align-content: space-between; } .cx-tq p { margin: 0; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--mx-text); } .cx-tq p .read-more { color: var(--mx-accent-text) !important; font-size: 15px; } .cx-tq p .more-text { display: none; } .cx-tq figcaption { font-family: var(--mx-font-ui); font-size: 14px; color: var(--mx-text-2); line-height: 1.4; } .cx-tq figcaption b { display: block; color: var(--mx-text); } /* footer links */ .cx-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--mx-line); } .cx-foot__brand { display: flex; align-items: center; gap: 8px; font-family: var(--mx-font-display); font-size: 22px; color: var(--mx-text); } .cx-foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; } .cx-foot__links a { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3) !important; } /* ---------- desktop: rail | main | aside ---------- */ @media (min-width: 1024px) { body.mx-shell header.header { display: none !important; } .cx-mob { display: none !important; } .cx-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: clamp(24px, 3vw, 48px); max-width: 1320px; margin-inline: auto; padding-inline: 24px; } .cx-main { width: 100%; max-width: 660px; justify-self: center; padding: 22px 0 64px; } .cx-topline { display: flex; justify-content: flex-end; margin-bottom: 14px; } .cx-hero { margin: 0; padding: 30px 30px 26px; } .cx-hero__field .cx-flame { opacity: .5; } .cx-hscroll { margin-inline: 0; padding-inline: 0; } .cx-rail { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100dvh; padding-block: 22px; } .cx-rail__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: var(--mx-text) !important; text-decoration: none !important; } .cx-rail__brand img { width: 34px; height: 34px; } .cx-rail__brand span { font-family: var(--mx-font-display); font-size: 34px; line-height: 1; padding-top: 6px; } .cx-rail__nav { display: grid; gap: 4px; } .cx-rail__i { display: flex; align-items: center; gap: 14px; height: 50px; padding-inline: 14px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 17px; font-weight: 500; color: var(--mx-text-2) !important; text-decoration: none !important; transition: background-color .2s, color .2s; } .cx-rail__i[aria-current="page"] { background: var(--mx-surface); color: var(--mx-text) !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } .cx-rail__i[aria-current="page"] .ic { color: var(--mx-accent-text); } .cx-rail__write { width: 100%; } .cx-rail__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } .cx-rail__foot b { display: block; font-family: var(--mx-font-ui); font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--mx-text); } .cx-rail__foot small { display: block; font-family: var(--mx-font-ui); font-size: 12px; color: var(--mx-text-3); } .cx-rail__foot small a { color: inherit !important; } @media (hover: hover) and (pointer: fine) { .cx-rail__i:hover { background: var(--mx-surface-2); color: var(--mx-text) !important; } } .cx-aside { display: block; position: sticky; top: 0; height: 100dvh; overflow: auto; padding-block: 26px; scrollbar-width: none; } .cx-aside::-webkit-scrollbar { display: none; } .cx-aside h2 { margin: 0 0 12px; font-family: var(--mx-font-display); font-weight: 400; font-size: 22px; line-height: 1.2; padding-top: 4px; color: var(--mx-text); } .cx-aside section + section { margin-top: 30px; } .cx-as-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .cx-as-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-decoration: none !important; } .cx-rank { font-family: var(--mx-font-read); font-weight: 700; font-size: 30px; line-height: 1; color: var(--mx-text-3); width: 22px; padding-top: 4px; } .cx-as-item b { display: block; font-family: var(--mx-font-read); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--mx-text); transition: color .2s; } .cx-as-item small { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } @media (hover: hover) and (pointer: fine) { .cx-as-item:hover b { color: var(--mx-accent-text); } } .cx-wlist { display: grid; } .cx-wrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--mx-line); } .cx-wrow:last-child { border-bottom: 0; } .cx-wrow b { display: block; font-family: var(--mx-font-ui); font-weight: 700; font-size: 15px; color: var(--mx-text); } .cx-wrow p { margin: 0; font-family: var(--mx-font-read); font-size: 16.5px; line-height: 1.35; color: var(--mx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-aside .cx-foot { margin-top: 30px; } } /* infinite scroll now appends the same Claudad cards */ .cx-legacy-feed .container-load-articles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .cx-legacy-feed .container-load-articles:not(:empty) { margin-top: 16px; } /* ---------- quieter rail ---------- */ @media (min-width: 1024px) { .cx-rail { gap: 28px; padding-block: 28px; } .cx-rail__brand { padding: 4px 12px; } .cx-rail__brand img { width: 30px; height: 30px; } .cx-rail__brand span { font-size: 30px; } .cx-rail__nav { gap: 2px; } .cx-rail__i { position: relative; height: 46px; gap: 14px; padding-inline: 12px; font-size: 16px; color: var(--mx-text-3) !important; } .cx-rail__i .ic { width: 21px; height: 21px; } .cx-rail__i[aria-current="page"] { background: transparent; box-shadow: none; color: var(--mx-text) !important; font-weight: 700; } .cx-rail__i[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -2px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 9px; background: var(--mx-emerald); } .cx-rail__write { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 12px; background: var(--mx-text); color: var(--mx-bg) !important; font-family: var(--mx-font-ui); font-weight: 700; font-size: 15px; text-decoration: none !important; transition: transform .16s var(--mx-ease), opacity .2s; } .cx-rail__write .ic { width: 19px; height: 19px; } .cx-rail__write:active { transform: scale(.97); } .cx-rail__foot { padding: 8px 4px; background: transparent; box-shadow: none; border-top: 1px solid var(--mx-line); border-radius: 0; } @media (hover: hover) and (pointer: fine) { .cx-rail__i:hover { background: transparent; color: var(--mx-text) !important; } .cx-rail__write:hover { opacity: .88; } } } /* ---------- most engaged: two lines at most, a quiet numbered column ---------- */ .cx-as-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; } .cx-as-list li + li .cx-as-item { border-top: 1px solid var(--mx-line); } .cx-as-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; text-decoration: none !important; } .cx-rank { width: auto; font-family: var(--mx-font-read); font-weight: 700; font-size: 24px; line-height: 1; color: var(--mx-emerald); opacity: .55; padding-top: 2px; transition: opacity .2s; } .cx-as-txt { min-width: 0; display: grid; gap: 3px; } .cx-as-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--mx-font-read); font-weight: 700; font-size: 17.5px; line-height: 1.35; color: var(--mx-text); text-wrap: pretty; transition: color .2s; } .cx-as-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); } @media (hover: hover) and (pointer: fine) { .cx-as-item:hover b { color: var(--mx-accent-text); } .cx-as-item:hover .cx-rank { opacity: 1; } } .cx-tr h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cx-tr small { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; } .cx-tr small .ic { width: 16px; height: 16px; color: var(--mx-accent-text); } .cx-aside__h { display: flex; align-items: baseline; } .cx-aside__h h2 { margin-bottom: 12px !important; } /* ---------- topic tiles (Claudad explore bento) ---------- */ .cx-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cx-tile { position: relative; isolation: isolate; overflow: hidden; min-height: 132px; border-radius: 22px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; background: linear-gradient(160deg, #43907A, #113428); color: #F2FBF6 !important; text-decoration: none !important; transition: transform .2s var(--mx-ease); } .cx-tile:active { transform: scale(.98); } .cx-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mx-ease); } .cx-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 14, 10, .72), rgba(4, 14, 10, 0) 70%); } .cx-tile--wide { grid-column: span 2; min-height: 150px; } .cx-tile--big { grid-column: span 2; min-height: 170px; } .cx-tile__name { font-family: var(--mx-font-display); font-size: 25px; line-height: 1.05; padding-top: 4px; text-shadow: 0 2px 14px rgba(4, 14, 10, .4); } @media (hover: hover) and (pointer: fine) { .cx-tile:hover img { transform: scale(1.04); } } @media (min-width: 768px) { .cx-bento:not(.cx-bento--aside) { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; } .cx-bento:not(.cx-bento--aside) .cx-tile { min-height: 0; } .cx-bento:not(.cx-bento--aside) .cx-tile--big { grid-column: span 2; grid-row: span 2; } .cx-bento:not(.cx-bento--aside) .cx-tile--big .cx-tile__name { font-size: 40px; } } /* the aside keeps them small and even */ .cx-bento--aside { gap: 8px; } .cx-bento--aside .cx-tile, .cx-bento--aside .cx-tile--big, .cx-bento--aside .cx-tile--wide { grid-column: auto; min-height: 84px; padding: 10px 12px; border-radius: 16px; } .cx-bento--aside .cx-tile__name { font-size: 18px; } /* ---------- writers ---------- */ .cx-wlist { display: grid; } .cx-wrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--mx-line); } .cx-wrow:last-child { border-bottom: 0; } .cx-wrow b { display: block; font-family: var(--mx-font-ui); font-weight: 700; font-size: 15px; color: var(--mx-text); } .cx-wrow p { margin: 0; font-family: var(--mx-font-read); font-size: 16.5px; line-height: 1.35; color: var(--mx-text-2); } .cx-btn--soft { background: var(--mx-surface-2); color: var(--mx-text) !important; box-shadow: inset 0 0 0 1px var(--mx-line); } /* ---------- explore header ---------- */ .cx-screen-h { padding-top: 14px; } .cx-screen-title { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(34px, 9.5vw, 44px); line-height: 1.1; color: var(--mx-text); } .cx-search { position: relative; display: flex; align-items: center; margin-top: 16px; } .cx-search .ic { position: absolute; inset-inline-start: 18px; width: 20px; height: 20px; color: var(--mx-text-3); pointer-events: none; } .cx-search input { width: 100%; height: 54px; padding-inline: 50px 18px; border: 0; border-radius: 12px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line-2); font-family: var(--mx-font-ui); font-size: 16px; color: var(--mx-text); outline: none; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; } .cx-search input::placeholder { color: var(--mx-text-3); } .cx-search input:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald); } .cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cx-sec--first { margin-top: 30px; } .cx-empty-state { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border-radius: 22px; background: var(--mx-surface); text-align: center; } .cx-empty-state .ic { width: 34px; height: 34px; color: var(--mx-text-3); } .cx-empty-state h3 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 22px; color: var(--mx-text); } .cx-empty-state p { margin: 0; font-family: var(--mx-font-read); font-size: 18px; color: var(--mx-text-2); } @media (min-width: 1024px) { .cx-screen-h { padding-top: 6px; } .cx-screen-title { font-size: 44px; } } /* ---------- Claudad dock (below 1024px) ---------- */ .cx-dock { position: fixed; z-index: 1030; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 6px; border-radius: 12px; background: var(--mx-glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 0 0 1px var(--mx-line), 0 18px 40px -18px rgba(17, 52, 40, .45); } .cx-dock__i { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: 58px; border-radius: 12px; color: var(--mx-text-3) !important; font-family: var(--mx-font-ui); font-size: 11px; font-weight: 500; line-height: 1; text-decoration: none !important; transition: transform .16s var(--mx-ease), color .2s; } .cx-dock__i:active { transform: scale(.92); } .cx-dock__i .ic { width: 23px; height: 23px; } .cx-dock__i[aria-current="page"] { color: var(--mx-text) !important; } .cx-dock__i[aria-current="page"] .ic { color: var(--mx-accent-text); } .cx-dock__i[aria-current="page"]::after { content: ""; position: absolute; bottom: 2px; width: 16px; height: 3px; border-radius: 9px; background: var(--mx-emerald); box-shadow: 0 0 12px var(--mx-emerald); } .cx-dock__w { justify-self: center; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 28%, #7BEA97, var(--mx-emerald) 58%, #1C8A45); color: #04210E !important; box-shadow: 0 12px 26px -10px rgba(43, 182, 90, .9), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .16s var(--mx-ease); } .cx-dock__w:active { transform: scale(.92); } .cx-dock__w .ic { width: 26px; height: 26px; } @media (min-width: 1024px) { .cx-dock { display: none; } } /* ---------- sign-up gate: a small sheet before the full sign-in page ---------- */ .cx-gate { position: fixed; inset: 0; z-index: 1070; display: grid; align-items: end; font-family: var(--mx-font-ui); } .cx-gate[hidden] { display: none; } .cx-gate__scrim { position: absolute; inset: 0; background: rgba(6, 18, 13, .42); opacity: 0; transition: opacity .25s var(--mx-ease); } .cx-gate__sheet { position: relative; width: 100%; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--mx-surface); color: var(--mx-text); box-shadow: 0 -20px 50px -20px rgba(6, 22, 15, .4); transform: translateY(100%); transition: transform .4s cubic-bezier(.32, .72, 0, 1); } .cx-gate.is-open .cx-gate__scrim { opacity: 1; } .cx-gate.is-open .cx-gate__sheet { transform: none; } .cx-gate__grip { display: block; width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 9px; background: var(--mx-line-2); } .cx-gate__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cx-gate__head h2 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--mx-text); } .cx-gate__x { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--mx-text); cursor: pointer; transition: transform .16s var(--mx-ease), background-color .2s; } .cx-gate__x:active { transform: scale(.92); } .cx-gate p { margin: 8px 0 18px; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.5; color: var(--mx-text-2); } .cx-gate__btns { display: grid; gap: 10px; } .cx-gate .cx-btn { width: 100%; } @media (min-width: 768px) { .cx-gate { align-items: center; justify-items: center; } .cx-gate__sheet { width: min(420px, calc(100% - 32px)); padding: 22px 24px 24px; border-radius: 28px; transform: scale(.96); opacity: 0; transition: transform .25s var(--mx-ease), opacity .25s var(--mx-ease); } .cx-gate.is-open .cx-gate__sheet { transform: none; opacity: 1; } .cx-gate__grip { display: none; } } @media (prefers-reduced-motion: reduce) { .cx-gate__scrim, .cx-gate__sheet { transition: none !important; } } /* generated covers fade in once painted */ .cx-tile img[data-mx-cover] { opacity: 0; transition: opacity .5s var(--mx-ease), transform .6s var(--mx-ease); } .cx-tile img.is-painted { opacity: 1; } /* ---------- most engaged: image cards with a large rank ---------- */ .cx-hscroll--tr { grid-auto-columns: min(74%, 270px); } .cx-tr { display: grid; grid-template-rows: auto 1fr; gap: 0; min-height: 0; padding: 0; overflow: hidden; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); transition: transform .2s var(--mx-ease); } .cx-tr:active { transform: scale(.98); } .cx-tr__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, #43907A, #113428); } .cx-tr__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mx-ease); } .cx-tr__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 14, 10, .7), rgba(4, 14, 10, 0) 55%); } .cx-tr__rank { position: absolute; z-index: 1; bottom: 6px; inset-inline-start: 14px; font-family: var(--mx-font-read); font-weight: 700; font-size: 64px; line-height: 1; color: #F4FFF6; text-shadow: 0 6px 24px rgba(4, 14, 10, .55); } .cx-tr__body { display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; } .cx-tr__cat { font-family: var(--mx-font-ui); font-size: 12.5px; font-weight: 700; color: var(--mx-accent-text); } .cx-tr h3 { margin: 0; font-family: var(--mx-font-read); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; } .cx-tr small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); } @media (hover: hover) and (pointer: fine) { .cx-tr:hover .cx-tr__media img { transform: scale(1.05); } } /* ---------- topics inside the feed ---------- */ .cx-inline-topics { margin: 22px 0 6px; } .cx-inline-topics .cx-sec-h { margin-bottom: 14px; } /* ---------- aside leaderboard ---------- */ .cx-board__h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .cx-board__h .ic { width: 20px; height: 20px; color: var(--mx-emerald); } .cx-board__h h2 { margin: 0 !important; padding-top: 3px; } .cx-board__tag { margin-inline-start: auto; padding: 4px 10px; border-radius: 12px; background: var(--mx-surface-2); font-family: var(--mx-font-ui); font-size: 12px; font-weight: 700; color: var(--mx-text-2); } .cx-board { display: grid; gap: 14px; } /* the leader: its cover, a scrim, an outlined numeral */ .cx-board__lead { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 230px; overflow: hidden; border-radius: 22px; padding: 18px; background: linear-gradient(160deg, #43907A, #113428); color: #F4FFF6 !important; text-decoration: none !important; box-shadow: 0 24px 48px -26px rgba(10, 40, 28, .7); } .cx-board__lead img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--mx-ease); } .cx-board__lead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 30, 20, .94) 8%, rgba(6, 30, 20, .55) 48%, rgba(6, 30, 20, .1)), radial-gradient(90% 60% at 0% 0%, rgba(64, 212, 91, .35), transparent 70%); } .cx-board__num { position: absolute; top: 4px; inset-inline-end: 16px; z-index: 0; font-family: var(--mx-font-read); font-weight: 700; font-size: 120px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 255, 246, .85); text-shadow: 0 0 40px rgba(64, 212, 91, .35); } .cx-board__lead-txt { position: relative; display: grid; gap: 6px; } .cx-board__lead-txt b { font-family: var(--mx-font-read); font-weight: 700; font-size: 22px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; } .cx-board__lead-txt small { font-family: var(--mx-font-ui); font-size: 12.5px; color: rgba(239, 250, 242, .78); } .cx-board__lead-txt .cx-board__cat { justify-self: start; padding: 3px 9px; border-radius: 12px; background: rgba(64, 212, 91, .22); color: #CFF7DA; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* the rest: thumbnail, badge, two lines */ .cx-board__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .cx-board__row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; margin-inline: -8px; border-radius: 18px; text-decoration: none !important; transition: background-color .2s; } .cx-board__thumb { position: relative; width: 58px; height: 58px; } .cx-board__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: var(--mx-surface-2); } .cx-board__badge { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; background: var(--mx-emerald); color: #04210E; font-family: var(--mx-font-read); font-weight: 700; font-size: 15px; line-height: 1; box-shadow: 0 0 0 3px var(--mx-bg); } .cx-board__txt { min-width: 0; display: grid; gap: 3px; } .cx-board__txt b { font-family: var(--mx-font-read); font-weight: 700; font-size: 16.5px; line-height: 1.32; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .cx-board__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mx-font-ui); font-size: 12px; color: var(--mx-text-3); } @media (hover: hover) and (pointer: fine) { .cx-board__lead:hover img { transform: scale(1.05); } .cx-board__row:hover { background: var(--mx-surface); } .cx-board__row:hover b { color: var(--mx-accent-text); } } /* ===================================================================== Category page (body.mx-catpage), ported from Claudad's category screen ===================================================================== */ body.mx-catpage header.header, body.mx-catpage .header-mobile { display: none !important; } .cx-cat { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } .cx-av--lg { width: 56px; height: 56px; font-size: 26px; } /* desktop top navigation over the hero, glass once scrolled */ .cx-topnav { display: none; } @media (min-width: 1024px) { .cx-cat { padding-bottom: 0; } .cx-topnav { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; height: 72px; margin-bottom: -72px; color: #F2FBF6; transition: background-color .3s, color .3s, box-shadow .3s; } .cx-topnav.is-stuck { color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } .cx-topnav__in { display: flex; align-items: center; gap: 22px; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 32px; } .cx-topnav__brand { display: flex; align-items: center; gap: 8px; color: inherit !important; text-decoration: none !important; } .cx-topnav__brand img { width: 28px; height: 28px; } .cx-topnav__brand span { font-family: var(--mx-font-display); font-size: 26px; line-height: 1; padding-top: 4px; } .cx-topnav__links { display: flex; gap: 2px; } .cx-topnav__links a { position: relative; display: flex; align-items: center; height: 40px; padding-inline: 14px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 15px; font-weight: 500; color: inherit !important; opacity: .8; text-decoration: none !important; transition: opacity .2s; } .cx-topnav__links a[aria-current="page"] { opacity: 1; } .cx-topnav__links a[aria-current="page"]::after { content: ""; position: absolute; bottom: 3px; inset-inline: 16px; height: 2px; border-radius: 2px; background: var(--mx-emerald-hi); box-shadow: 0 0 10px var(--mx-emerald-hi); } .cx-topnav__login { height: 38px; padding-inline: 14px; border: 0; border-radius: 12px; background: none; font-family: var(--mx-font-ui); font-weight: 700; font-size: 14px; color: inherit; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .cx-topnav__links a:hover { opacity: 1; } } } /* phones: a back button and the name, glass once scrolled */ .cx-mobbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; height: 60px; margin-bottom: -60px; padding: env(safe-area-inset-top) 8px 0; color: #F2FBF6; transition: background-color .25s, color .25s; } .cx-mobbar__back { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #EEF7F1 !important; background: rgba(6, 18, 13, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cx-mobbar__title { font-family: var(--mx-font-display); font-size: 22px; line-height: 1; padding-top: 3px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--mx-ease); } .cx-mobbar.is-stuck { color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } .cx-mobbar.is-stuck .cx-mobbar__back { background: transparent; color: var(--mx-text) !important; } .cx-mobbar.is-stuck .cx-mobbar__title { opacity: 1; transform: none; } @media (min-width: 1024px) { .cx-mobbar { display: none; } } /* hero */ .cx-cat-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(460px, 122vw, 580px); display: flex; align-items: flex-end; color: #F2FBF6; background: #0A1410; } .cx-cat-hero__cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--mx-ease); } .cx-cat-hero__cover.is-painted { opacity: 1; } .cx-cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 12, 9, .94) 0%, rgba(4, 12, 9, .6) 42%, rgba(4, 12, 9, .08) 72%, rgba(4, 12, 9, .4) 100%); } .cx-cat-hero__in { width: 100%; max-width: 1240px; margin-inline: auto; padding: 120px max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left)); display: grid; gap: 12px; justify-items: start; } .cx-cat-hero__parent { padding: 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-family: var(--mx-font-ui); font-size: 13px; font-weight: 700; color: #F2FBF6 !important; text-decoration: none !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cx-cat-name { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(54px, 16vw, 128px); line-height: 1.02; padding-top: .08em; color: #F4FFF6; text-shadow: 0 10px 40px rgba(0, 0, 0, .45); text-wrap: balance; } .cx-cat-desc { margin: 0; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.5; max-width: 30em; color: rgba(242, 251, 246, .86); } .cx-cat-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-family: var(--mx-font-ui); font-size: 14px; color: rgba(242, 251, 246, .72); } .cx-cat-stats b { color: #fff; font-weight: 700; } .cx-cat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .cx-follow { height: 46px; padding-inline: 26px; border: 0; border-radius: 12px; background: var(--mx-emerald); color: #04210E; font-family: var(--mx-font-ui); font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .16s var(--mx-ease), background-color .2s; } .cx-follow:active { transform: scale(.97); } .cx-follow.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .cx-cat-hero .cx-btn--glass { height: 46px; } /* sub-topics */ .cx-subnav { position: sticky; top: 60px; z-index: 25; background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--mx-line); } .cx-subnav__in { max-width: 1240px; margin-inline: auto; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); } /* body */ .cx-cat-body { max-width: 1240px; margin-inline: auto; padding: 28px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); } .cx-cat-feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .cx-mini-h { margin: 0 0 12px; font-family: var(--mx-font-display); font-weight: 400; font-size: 19px; padding-top: 3px; color: var(--mx-text); } .cx-mini-list { display: grid; padding: 4px 16px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); } .cx-mini { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--mx-line); text-decoration: none !important; } .cx-mini:last-child { border-bottom: 0; } .cx-mini__txt { display: grid; gap: 2px; min-width: 0; } .cx-mini small { font-family: var(--mx-font-ui); font-size: 12.5px; font-weight: 500; color: var(--mx-accent-text); } .cx-mini b { font-family: var(--mx-font-display); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .cx-mini__txt > span { font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); } .cx-mini img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--mx-surface-2); } @media (hover: hover) and (pointer: fine) { .cx-mini:hover b { color: var(--mx-accent-text); } } .cx-cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .cx-cat .cx-sec-h h2 { font-size: 24px; } .cx-wcards { grid-auto-columns: min(62%, 220px); } .cx-wc { display: grid; justify-items: center; gap: 8px; padding: 20px 14px 16px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); text-align: center; } .cx-wc b { font-family: var(--mx-font-ui); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--mx-text); } .cx-wc p { margin: 0; font-family: var(--mx-font-read); font-size: 16px; line-height: 1.35; color: var(--mx-text-2); min-height: 2.7em; } .cx-bento--rel .cx-tile, .cx-bento--rel .cx-tile--big, .cx-bento--rel .cx-tile--wide { grid-column: auto !important; grid-row: auto !important; min-height: 140px; } .cx-cat .load-more { display: grid; place-items: center; padding: 18px 0; } .cx-cat .load-more img { width: 34px; } @media (min-width: 1024px) { .cx-subnav { top: 72px; } .cx-cat-hero { min-height: 600px; } .cx-cat-hero__in, .cx-subnav__in, .cx-cat-body { padding-left: 32px; padding-right: 32px; } .cx-cat-hero__in { padding-bottom: 48px; } .cx-cat-desc { font-size: 21px; } .cx-cat-body { padding-top: 44px; } .cx-cat-feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .cx-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .cx-cat-body .cx-sec { margin-top: 72px; } .cx-bento--rel { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 180px; } .cx-hscroll.cx-wcards { margin-inline: 0; padding-inline: 0; } } /* ---------- gallery (arts) ---------- */ .cx-cat--gallery .cx-cat-hero { min-height: clamp(520px, 140vw, 680px); } .cx-cat--gallery .cx-cat-hero::after { background: linear-gradient(to top, #050807 0%, rgba(5, 8, 7, .92) 30%, rgba(5, 8, 7, .35) 62%, rgba(5, 8, 7, .15) 100%); } .cx-gal-mark { width: 44px; height: 44px; filter: drop-shadow(0 0 18px rgba(64, 212, 91, .6)); } .cx-gal-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 4px; color: rgba(242, 251, 246, .4); } .cx-gal-subs a { font-family: var(--mx-font-display); font-size: 21px; padding: 4px 0; color: #F2FBF6 !important; border-bottom: 2px solid transparent; text-decoration: none !important; transition: border-color .2s; } .cx-gal-subs a:first-child { color: var(--mx-emerald-hi) !important; } @media (hover: hover) and (pointer: fine) { .cx-gal-subs a:hover { border-color: var(--mx-emerald-hi); } } .cx-wall { position: relative; isolation: isolate; overflow: hidden; padding: 52px 0 60px; background: #0B0F0D; color: #EEF4F0; } .cx-wall::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 85% 0%, rgba(64, 212, 91, .12), transparent 70%), radial-gradient(50% 45% at 10% 100%, rgba(93, 188, 160, .1), transparent 70%); } .cx-wall__in { max-width: 1240px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)); } .cx-wall .cx-sec-h { margin-bottom: 6px; } .cx-wall .cx-sec-h h2 { color: #EEF4F0; } .cx-wall__sub { margin: 0; font-family: var(--mx-font-read); font-size: 18px; color: rgba(238, 244, 240, .66); } .cx-frames { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 44px 4px 8px; --fh: clamp(240px, 64vw, 340px); } .cx-frames::-webkit-scrollbar { display: none; } .cx-frame { position: relative; flex: none; scroll-snap-align: start; display: grid; gap: 3px; justify-items: start; text-decoration: none !important; } .cx-frame::before { content: ""; position: absolute; top: -44px; left: 50%; width: 130%; height: 75%; translate: -50% 0; background: radial-gradient(50% 60% at 50% 0%, rgba(255, 246, 222, .18), transparent 72%); pointer-events: none; } .cx-frame__img { display: block; padding: clamp(8px, 2vw, 14px); background: #EDEFEA; box-shadow: 0 0 0 3px #161616, 0 0 0 4px #3a3a3a, 0 34px 50px -20px rgba(0, 0, 0, .9); transition: transform .5s var(--mx-ease); } .cx-frame__img img { display: block; height: var(--fh); width: auto; min-width: calc(var(--fh) * .7); max-width: calc(var(--fh) * 1.3); object-fit: cover; } .cx-frame b { margin-top: 18px; font-family: var(--mx-font-display); font-weight: 400; font-size: 18px; color: #EEF4F0; max-width: 18em; } .cx-frame small { font-family: var(--mx-font-ui); font-size: 12.5px; color: rgba(238, 244, 240, .62); } @media (hover: hover) and (pointer: fine) { .cx-frame:hover .cx-frame__img { transform: translateY(-4px); } } .cx-masonry { columns: 2 160px; column-gap: 14px; } .cx-mz { display: block; break-inside: avoid; margin-bottom: 18px; text-decoration: none !important; } .cx-mz img { display: block; width: 100%; height: auto; min-height: 120px; border-radius: 16px; background: var(--mx-surface-2); box-shadow: 0 18px 30px -22px rgba(10, 30, 20, .6); transition: transform .5s var(--mx-ease); } .cx-mz b { display: block; margin-top: 10px; font-family: var(--mx-font-display); font-weight: 400; font-size: 17px; line-height: 1.35; color: var(--mx-text); } .cx-mz small { font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); } @media (hover: hover) and (pointer: fine) { .cx-mz:hover img { transform: translateY(-3px); } } @media (min-width: 1024px) { .cx-masonry { columns: 4 220px; column-gap: 22px; } .cx-wall__in { padding-inline: 32px; } } .cx-cta-band { position: relative; isolation: isolate; overflow: hidden; margin-top: 56px; padding: 34px 24px 28px; border-radius: 28px; display: grid; gap: 8px; justify-items: start; color: #EFFAF2; background: radial-gradient(140% 90% at 100% 0%, rgba(93, 188, 160, .55), transparent 55%), linear-gradient(160deg, #43907A 0%, #0B4A3C 38%, #113428 72%, #0A2219 100%); box-shadow: 0 30px 60px -28px rgba(10, 40, 28, .5); } .cx-cta-band .cx-hero__field .cx-flame { width: 44%; max-width: 220px; top: 50%; left: -4%; translate: 0 -50%; opacity: .35; } .cx-cta-band h2 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 30px; line-height: 1.2; padding-top: 4px; color: #F4FFF6; } .cx-cta-band p { margin: 0 0 8px; font-family: var(--mx-font-read); font-size: 19px; color: rgba(239, 250, 242, .8); } /* the legacy loader is absolutely placed; keep it in the flow and show it only while loading */ body.mx-shell .load-more, body.mx-shell .load-more .vote-loader { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; } .cx-cat .load-more .vote-loader { opacity: 0; transition: opacity .2s; } .cx-cat .load-more.is-busy .vote-loader { opacity: .8; } /* ===================================================================== Article reading (body.mx-article), ported from Claudad's read screen ===================================================================== */ body.mx-article header.header, body.mx-article .header-mobile, body.mx-article .header-articledetails { display: none !important; } body.mx-article { background: var(--mx-bg) !important; } .cx-read { --cx-fs: 21px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); } .cx-rprog { position: fixed; z-index: 60; top: env(safe-area-inset-top); right: 0; left: 0; height: 3px; pointer-events: none; } .cx-rprog i { display: block; height: 100%; background: linear-gradient(to left, #5DBCA0, var(--mx-emerald-hi)); box-shadow: 0 0 12px var(--mx-emerald); transform-origin: right; transform: scaleX(0); transition: transform .5s var(--mx-ease); } .cx-remain { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 13px; font-weight: 500; color: var(--mx-text-2); background: var(--mx-surface-2); white-space: nowrap; opacity: 0; transition: opacity .25s; } .cx-remain .ic { width: 16px; height: 16px; } .cx-mobbar.is-stuck .cx-remain { opacity: 1; } .cx-mobbar--read .cx-mobbar__title { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-r-hero { position: relative; height: clamp(300px, 92vw, 460px); margin: 0; overflow: hidden; background: var(--mx-surface-2); } .cx-r-hero img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 98%); mask-image: linear-gradient(to bottom, #000 50%, transparent 98%); } .cx-r-hero--art img { opacity: 0; transition: opacity .6s var(--mx-ease); } .cx-r-hero--art img.is-painted { opacity: 1; } .cx-r-head { position: relative; display: grid; gap: 16px; max-width: 760px; margin: -110px auto 0; padding-inline: max(16px, env(safe-area-inset-left)); } .cx-r-topic { justify-self: start; display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 14px; font-weight: 700; color: var(--mx-accent-text) !important; background: var(--mx-glass); box-shadow: inset 0 0 0 1px var(--mx-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-decoration: none !important; } .cx-r-title { margin: 0; padding-top: 8px; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(32px, 8.6vw, 54px); line-height: 1.22; color: var(--mx-text); text-wrap: balance; } .cx-r-caption { margin: -6px 0 0; font-family: var(--mx-font-read); font-size: 17px; color: var(--mx-text-3); } .cx-r-by { display: flex; align-items: center; gap: 12px; padding-block: 14px; border-block: 1px solid var(--mx-line); } .cx-r-who { flex: 1; min-width: 0; display: grid; line-height: 1.35; } .cx-r-who b { font-family: var(--mx-font-ui); font-weight: 700; font-size: 16px; color: var(--mx-text); } .cx-r-who a { text-decoration: none !important; } .cx-r-who small { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } .cx-follow--soft { height: 38px; padding-inline: 18px; font-size: 14px; background: var(--mx-text); color: var(--mx-bg); box-shadow: none; } .cx-follow--soft.active { background: var(--mx-surface-2); color: var(--mx-text); box-shadow: inset 0 0 0 1px var(--mx-line-2); } .cx-r-by .bookmark { width: 40px !important; height: 40px !important; margin: 0 !important; flex: none; cursor: pointer; background: var(--mx-text-2) !important; filter: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z'/%3E%3C/svg%3E") center / 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z'/%3E%3C/svg%3E") center / 22px no-repeat; } .cx-r-by .bookmark.active { background: var(--mx-accent-text) !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z'/%3E%3C/svg%3E"); } body.mx-article .article-details { margin: 0 !important; padding: 0 !important; background: transparent !important; } body.mx-article .article-details > .container { max-width: 760px; padding-inline: max(16px, env(safe-area-inset-left)); } body.mx-article .article-details .title, body.mx-article .article-details .profile-box, body.mx-article .article-details .box-img { display: none !important; } body.mx-article .article-details .box-details { max-width: 34em; margin: 34px auto 0 !important; padding: 0 !important; font-family: var(--mx-font-read) !important; font-size: var(--cx-fs) !important; line-height: 1.9 !important; color: var(--mx-text) !important; text-wrap: pretty; } body.mx-article .box-details p, body.mx-article .box-details span, body.mx-article .box-details div, body.mx-article .box-details li { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; background: transparent !important; } body.mx-article .box-details p { margin: 0 0 1.05em !important; } body.mx-article .box-details h2, body.mx-article .box-details h3, body.mx-article .box-details h4 { margin: 1.5em 0 .45em !important; font-family: var(--mx-font-read) !important; font-weight: 700 !important; font-size: 1.32em !important; line-height: 1.35 !important; color: var(--mx-text) !important; } body.mx-article .box-details blockquote { position: relative; margin: 1.5em 0 !important; padding: 42px 0 0 !important; border: 0 !important; font-weight: 600; font-size: 1.32em; line-height: 1.5; text-wrap: balance; } body.mx-article .box-details blockquote::before { content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: var(--mx-emerald); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M100,56H40A16,16,0,0,0,24,72v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,100,56Zm0,80H40V72h60ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Zm0,80H156V72h60Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M100,56H40A16,16,0,0,0,24,72v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,100,56Zm0,80H40V72h60ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Zm0,80H156V72h60Z'/%3E%3C/svg%3E") center / contain no-repeat; } body.mx-article .box-details blockquote::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--mx-emerald); box-shadow: 0 0 12px var(--mx-emerald); } body.mx-article .box-details img { max-width: 100%; height: auto; border-radius: 16px; margin: 1em 0; } body.mx-article .box-details figure { margin: 1.4em 0; } body.mx-article .box-details figcaption { font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); text-align: center; } body.mx-article .box-details a { color: var(--mx-accent-text) !important; text-decoration: underline; text-underline-offset: 4px; } body.mx-article .box-details-gallery img, body.mx-article .gallery-mobile img { border-radius: 16px; } .cx-rend { max-width: 34em; margin: 40px auto 0; padding-inline: max(16px, env(safe-area-inset-left)); display: grid; gap: 26px; } .cx-rend-done { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-family: var(--mx-font-ui); font-weight: 700; font-size: 15px; color: var(--mx-accent-text); } .cx-rend-done .ic { width: 20px; height: 20px; } .cx-rend-q { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 27px; line-height: 1.2; text-align: center; padding-top: 4px; color: var(--mx-text); } .cx-rend-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cx-pick { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 10px 16px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32), inset 0 0 0 1px var(--mx-line); transition: transform .16s var(--mx-ease), box-shadow .25s, background-color .25s; } .cx-pick:active { transform: scale(.97); } .cx-pick .brain-reaction, .cx-pick .heart-reaction { position: absolute !important; inset: 0; z-index: 2; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 22px; background: transparent !important; filter: none !important; cursor: pointer; animation: none !important; } .cx-pick .brain-reaction-nb, .cx-pick .heart-reaction-nb { order: 3; margin: 0 !important; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } .cx-pick__ic { order: 1; width: 38px; height: 38px; background: var(--mx-text-2); } .cx-pick b { order: 2; font-family: var(--mx-font-read); font-weight: 700; font-size: 19px; color: var(--mx-text); } .cx-pick--brain .cx-pick__ic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z'/%3E%3C/svg%3E") center / contain no-repeat; } .cx-pick--heart .cx-pick__ic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E") center / contain no-repeat; } .cx-pick--brain .active ~ .cx-pick__ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M212,76V72a44,44,0,0,0-74.86-31.31,3.93,3.93,0,0,0-1.14,2.8v88.72a4,4,0,0,0,6.2,3.33A47.67,47.67,0,0,1,167.68,128a8.18,8.18,0,0,1,8.31,7.58,8,8,0,0,1-8,8.42,32,32,0,0,0-32,32v33.88a4,4,0,0,0,1.49,3.12,47.92,47.92,0,0,0,74.21-17.16,4,4,0,0,0-4.49-5.56A68.06,68.06,0,0,1,192,192h-7.73a8.18,8.18,0,0,1-8.25-7.47,8,8,0,0,1,8-8.53h8a51.6,51.6,0,0,0,24-5.88v0A52,52,0,0,0,212,76Zm-12,36h-4a36,36,0,0,1-36-36V72a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4a8,8,0,0,1,0,16ZM88,28A44.05,44.05,0,0,0,44,72v4a52,52,0,0,0-4,94.12h0A51.6,51.6,0,0,0,64,176h7.73A8.18,8.18,0,0,1,80,183.47,8,8,0,0,1,72,192H64a67.48,67.48,0,0,1-15.21-1.73,4,4,0,0,0-4.5,5.55A47.93,47.93,0,0,0,118.51,213a4,4,0,0,0,1.49-3.12V176a32,32,0,0,0-32-32,8,8,0,0,1-8-8.42A8.18,8.18,0,0,1,88.32,128a47.67,47.67,0,0,1,25.48,7.54,4,4,0,0,0,6.2-3.33V43.49a4,4,0,0,0-1.14-2.81A43.85,43.85,0,0,0,88,28Zm8,48a36,36,0,0,1-36,36H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,76V72a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M212,76V72a44,44,0,0,0-74.86-31.31,3.93,3.93,0,0,0-1.14,2.8v88.72a4,4,0,0,0,6.2,3.33A47.67,47.67,0,0,1,167.68,128a8.18,8.18,0,0,1,8.31,7.58,8,8,0,0,1-8,8.42,32,32,0,0,0-32,32v33.88a4,4,0,0,0,1.49,3.12,47.92,47.92,0,0,0,74.21-17.16,4,4,0,0,0-4.49-5.56A68.06,68.06,0,0,1,192,192h-7.73a8.18,8.18,0,0,1-8.25-7.47,8,8,0,0,1,8-8.53h8a51.6,51.6,0,0,0,24-5.88v0A52,52,0,0,0,212,76Zm-12,36h-4a36,36,0,0,1-36-36V72a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4a8,8,0,0,1,0,16ZM88,28A44.05,44.05,0,0,0,44,72v4a52,52,0,0,0-4,94.12h0A51.6,51.6,0,0,0,64,176h7.73A8.18,8.18,0,0,1,80,183.47,8,8,0,0,1,72,192H64a67.48,67.48,0,0,1-15.21-1.73,4,4,0,0,0-4.5,5.55A47.93,47.93,0,0,0,118.51,213a4,4,0,0,0,1.49-3.12V176a32,32,0,0,0-32-32,8,8,0,0,1-8-8.42A8.18,8.18,0,0,1,88.32,128a47.67,47.67,0,0,1,25.48,7.54,4,4,0,0,0,6.2-3.33V43.49a4,4,0,0,0-1.14-2.81A43.85,43.85,0,0,0,88,28Zm8,48a36,36,0,0,1-36,36H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,76V72a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); background: var(--mx-accent-text); animation: mx-pop .42s var(--mx-ease); } .cx-pick--heart .active ~ .cx-pick__ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E"); background: var(--mx-accent-text); animation: mx-pop .42s var(--mx-ease); } .cx-pick:has(.active) { background: radial-gradient(90% 90% at 50% 0%, rgba(43, 182, 90, .14), transparent 75%), var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32), inset 0 0 0 1.5px var(--mx-emerald); } .cx-acard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } .cx-acard a { text-decoration: none !important; } .cx-acard b { display: block; font-family: var(--mx-font-ui); font-weight: 700; font-size: 16px; color: var(--mx-text); } .cx-acard p { margin: 0; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } .cx-next { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; align-items: center; padding: 16px; border-radius: 22px; background: var(--mx-surface-2); text-decoration: none !important; transition: transform .2s var(--mx-ease); } .cx-next:active { transform: scale(.98); } .cx-next small { font-family: var(--mx-font-ui); font-size: 13px; font-weight: 700; color: var(--mx-accent-text); } .cx-next h3 { margin: 2px 0 0; font-family: var(--mx-font-read); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-next img { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; background: var(--mx-surface); } .cx-cmprev h2 { margin: 0 0 10px; font-family: var(--mx-font-display); font-weight: 400; font-size: 24px; padding-top: 3px; color: var(--mx-text); } .cx-cmprev__open { width: 100%; } .cx-r-similar { max-width: 1040px; margin: 64px auto 0; padding-inline: max(16px, env(safe-area-inset-left)); } @media (min-width: 1024px) { .cx-r-similar .cx-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } body.mx-article .comment-section.cx-rdock { position: fixed !important; z-index: 1020; left: 50% !important; right: auto !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100% - 24px); height: auto !important; margin: 0 !important; padding: 6px 10px !important; display: block !important; opacity: 1 !important; visibility: visible !important; border-radius: 12px; background: var(--mx-glass) !important; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: inset 0 0 0 1px var(--mx-line), 0 18px 40px -18px rgba(17, 52, 40, .45) !important; } body.mx-article .cx-rdock .container, body.mx-article .cx-rdock .reaction-box, body.mx-article .cx-rdock .captions-story { width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.mx-article .cx-rdock .row.reaction { flex-wrap: nowrap; margin: 0 !important; gap: 6px; } body.mx-article .cx-rdock .row.reaction > [class*="col"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0 !important; gap: 4px; } body.mx-article .cx-rdock .brain-reaction-nb, body.mx-article .cx-rdock .heart-reaction-nb, body.mx-article .cx-rdock .comment-reaction-nb { margin-inline-end: 8px !important; font-family: var(--mx-font-ui); font-size: 14px; color: var(--mx-text-2); } body.mx-article .cx-rdock .comment-reaction { cursor: pointer; } body.mx-article .cx-rdock .options { gap: 6px; padding-inline-start: 10px; border-inline-start: 1px solid var(--mx-line-2); } body.mx-article .cx-rdock .share-icon a, body.mx-article .cx-rdock .social-mobile a { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding-inline: 10px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-2) !important; background: transparent !important; text-decoration: none !important; } body.mx-article .cx-rdock .social-mobile img { width: 22px; height: 22px; } body.mx-article .cx-rdock .fa { font-size: 18px !important; color: #1877f2; padding: 0 !important; } body.mx-article .take-comment-section, body.mx-article .message-take-comment { display: none !important; } body.mx-article #comment-box, body.mx-article #child-comment-box { background: var(--mx-surface) !important; color: var(--mx-text); font-family: var(--mx-font-ui); border-radius: 28px 28px 0 0; box-shadow: 0 -20px 50px -20px rgba(6, 22, 15, .4) !important; } body.mx-article #comment-box .caption-responses { padding: 18px 4px 10px; font-family: var(--mx-font-display); font-size: 22px; color: var(--mx-text); } body.mx-article #comment-box .close-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface-2); font-family: var(--mx-font-ui); font-size: 14px; cursor: pointer; } body.mx-article .comment-item { padding: 14px 0 !important; border-bottom: 1px solid var(--mx-line) !important; background: transparent !important; } body.mx-article .comment-item .box-name, body.mx-article .comment-item .box-name a { font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 15px !important; color: var(--mx-text) !important; } body.mx-article .comment-description { font-family: var(--mx-font-read) !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--mx-text) !important; } body.mx-article .comment-form-box textarea, body.mx-article .comment-form-box .message-input { border: 0 !important; border-radius: 22px !important; background: var(--mx-surface-2) !important; box-shadow: inset 0 0 0 1px var(--mx-line) !important; font-family: var(--mx-font-read) !important; font-size: 19px !important; color: var(--mx-text) !important; } body.mx-article .comment-form-box textarea:focus, body.mx-article .comment-form-box .message-input:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald) !important; outline: none; } body.mx-article .comment-button button, body.mx-article .comment-form-box button[type="submit"] { border: 0 !important; border-radius: 12px !important; background: var(--mx-emerald) !important; color: #04210E !important; font-family: var(--mx-font-ui) !important; font-weight: 700; } @media (min-width: 1024px) { .cx-read { padding-bottom: 120px; --cx-fs: 22px; } .cx-r-hero { height: 460px; } .cx-r-head { margin-top: -130px; padding-inline: 32px; } .cx-r-title { font-size: 54px; } } /* reading: a soft band keeps the navigation legible over light photos; Markazi reads small, so one step up */ .cx-r-hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 120px; background: linear-gradient(to bottom, rgba(4, 12, 9, .5), transparent); pointer-events: none; } .cx-read { --cx-fs: 22px; } @media (min-width: 1024px) { .cx-read { --cx-fs: 24px; } } @media (min-width: 768px) { body.mx-article #comment-box, body.mx-article #child-comment-box { border-radius: 0; } } /* leaderboard rows stay inside the aside; the rank badge sits in the thumbnail corner */ .cx-board__row { margin-inline: 0; padding: 8px 4px; } .cx-board__badge { top: 4px; inset-inline-start: 4px; min-width: 22px; height: 22px; font-size: 14px; box-shadow: 0 2px 8px rgba(4, 14, 10, .35); } .cx-aside { padding-inline: 2px; } /* ===================================================================== Author page (body.mx-author), ported from Claudad's writer screen ===================================================================== */ body.mx-author header.header, body.mx-author .header-mobile { display: none !important; } .cx-author { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } .cx-av--xl { width: 96px; height: 96px; font-size: 44px; box-shadow: 0 0 0 4px var(--mx-bg), 0 18px 40px -18px rgba(0, 0, 0, .5); } .cx-prof__media { position: relative; height: clamp(170px, 46vw, 240px); overflow: hidden; background: #0A1410; } .cx-prof__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--mx-ease); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } .cx-prof__media img.is-painted { opacity: 1; } .cx-prof__head { position: relative; display: grid; gap: 10px; justify-items: start; max-width: 760px; margin: -58px auto 0; padding-inline: max(16px, env(safe-area-inset-left)); } .cx-prof__name { margin: 4px 0 0; font-family: var(--mx-font-read); font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--mx-text); } .cx-prof__bio { margin: 0; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.45; color: var(--mx-text-2); max-width: 30em; } .cx-prof__actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .cx-author .cx-follow.active { background: var(--mx-surface-2); color: var(--mx-text); box-shadow: inset 0 0 0 1px var(--mx-line-2); } .cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 6px 0 0; padding: 14px 0; border-block: 1px solid var(--mx-line); } .cx-stats div { display: grid; gap: 2px; text-align: center; } .cx-stats div + div { border-inline-start: 1px solid var(--mx-line); } .cx-stats dt { order: 2; font-family: var(--mx-font-ui); font-size: 13px; font-weight: 500; color: var(--mx-text-3); } .cx-stats dd { margin: 0; font-family: var(--mx-font-display); font-size: 26px; line-height: 1.1; padding-top: 4px; color: var(--mx-text); } .cx-sig { width: 100%; padding: 16px 18px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } .cx-sig h3 { margin: 0 0 12px; font-family: var(--mx-font-ui); font-size: 13px; font-weight: 700; color: var(--mx-text-3); } .cx-spec { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-2); } .cx-spec__end { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .cx-spec__end .ic { width: 18px; height: 18px; color: var(--mx-accent-text); } .cx-spec__track { position: relative; height: 2px; border-radius: 2px; background: linear-gradient(to left, #5DBCA0, var(--mx-emerald-hi)); opacity: .9; } .cx-spec__dot { position: absolute; top: 50%; right: calc(var(--p, .5) * 100%); width: 14px; height: 14px; margin: -7px -7px 0 0; border-radius: 50%; background: var(--mx-surface); box-shadow: 0 0 0 3px var(--mx-emerald), 0 0 18px 4px rgba(64, 212, 91, .55); } .cx-spec__cap { margin: 8px 0 0; font-family: var(--mx-font-ui); font-size: 14px; color: var(--mx-text-2); } .cx-spec__cap b { color: var(--mx-text); } .cx-author .cx-prof__head .cx-tchips { margin-top: 4px; } /* legacy pieces under the head: the edit form only when asked, tabs as Claudad chips, posts as cards */ body.mx-author .container-profile-info { display: none; } body.mx-author.mx-editing .container-profile-info { display: block; max-width: 760px; margin: 24px auto 0; padding: 18px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } body.mx-author .writer-details { max-width: 760px; margin: 28px auto 0; padding: 0 !important; background: transparent !important; } body.mx-author .writer-details > .container { padding-inline: max(16px, env(safe-area-inset-left)); } body.mx-author .tabs-buttons { margin: 0 0 18px !important; } body.mx-author .tabs-buttons > .col { display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 !important; justify-content: flex-start !important; } body.mx-author .tabs-buttons > .col.d-none { display: none !important; } @media (min-width: 576px) { body.mx-author .tabs-buttons > .col.d-none.d-sm-block { display: flex !important; } body.mx-author .tabs-buttons > .col.d-sm-none { display: none !important; } } body.mx-author .tabs-buttons .folow-status, body.mx-author .tabs-buttons .mobile-main-link, body.mx-author .tabs-links .folow-status { flex: none; display: inline-flex; align-items: center; height: 38px; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--mx-text-2) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; font-family: var(--mx-font-ui) !important; font-size: 14px !important; font-weight: 500; text-decoration: none !important; white-space: nowrap; cursor: pointer; } body.mx-author .tabs-buttons .active, body.mx-author .tabs-links .active { background: var(--mx-text) !important; color: var(--mx-bg) !important; box-shadow: none !important; } body.mx-author .tabs-buttons .d-none { display: none !important; } body.mx-author .tabs-links { gap: 8px; margin-bottom: 8px; } body.mx-author .list-articles { margin: 0 !important; } body.mx-author .cx-prof-post { padding: 0 !important; margin-bottom: 16px; } body.mx-author .write-button { display: none !important; } .cx-author__foot { max-width: 760px; margin-inline: auto !important; padding-inline: max(16px, env(safe-area-inset-left)); } @media (min-width: 1024px) { .cx-author { padding-bottom: 40px; } .cx-prof__media { height: 280px; } .cx-prof__head { margin-top: -64px; padding-inline: 32px; } .cx-prof__name { font-size: 36px; } } .cx-prof__bio:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .cx-prof__more { margin-top: -6px; padding: 2px 0; border: 0; background: none; font-family: var(--mx-font-ui); font-size: 14px; font-weight: 700; color: var(--mx-accent-text); cursor: pointer; } /* ===================================================================== «عن مرداد» (body.mx-about): one pinned screen, ported from Claudad ===================================================================== */ body.mx-about { background: #07100C !important; } body.mx-about .cx-topnav.is-over-dark, body.mx-about .cx-mobbar.is-over-dark { color: #F2FBF6; } .st { position: relative; color: #EFFAF2; background: #07100C; } .st-stage { position: relative; isolation: isolate; overflow: hidden; } .st-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 80% 0%, rgba(93, 188, 160, .5), transparent 60%), linear-gradient(170deg, #43907A 0%, #0B4A3C 30%, #113428 66%, #0A2219 100%); } .st-bg .cx-light { width: min(150vw, 1000px); aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%; } .st-bg .cx-ring { width: min(118vw, 680px); top: 50%; left: 50%; translate: -50% -50%; } .st-bg .cx-flame { width: min(52vw, 330px); top: 50%; left: 50%; translate: -50% -50%; opacity: .5; } .st-night { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 100%, rgba(64, 212, 91, .14), transparent 70%), #050B08; opacity: var(--night, 0); } .sc { position: relative; display: grid; place-items: center; padding: 110px max(20px, env(safe-area-inset-right)) 120px max(20px, env(safe-area-inset-left)); } .sc-in { width: 100%; max-width: 960px; text-align: center; } .st p, .st h1, .st h2, .st h3, .st blockquote, .st ol { margin: 0; } .st-about { font-family: var(--mx-font-display); font-size: 22px; color: rgba(239, 250, 242, .8); padding-top: 3px; } .st-word { font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(120px, 38vw, 300px); line-height: .95; padding-bottom: .06em; color: #F4FFF6; text-shadow: 0 24px 70px rgba(6, 42, 22, .55); } .st-statement { font-family: var(--mx-font-display); font-size: clamp(30px, 7.4vw, 62px); line-height: 1.35; max-width: 16em; margin-inline: auto !important; text-wrap: balance; color: #EFFAF2; } .st-read { font-family: var(--mx-font-read); font-weight: 600; font-size: clamp(24px, 6vw, 42px); line-height: 1.6; max-width: 22em; margin-inline: auto !important; text-wrap: balance; color: rgba(239, 250, 242, .94); } .st-read mark { background: none; color: #40D45B; text-shadow: 0 0 30px rgba(64, 212, 91, .5); } .st-gtitle { font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(30px, 7.4vw, 54px); line-height: 1.25; max-width: 14em; margin: 0 auto 28px !important; text-wrap: balance; color: #EFFAF2; } .st-dim { color: rgba(239, 250, 242, .4); } .st-lit { color: #40D45B; text-shadow: 0 0 34px rgba(64, 212, 91, .6); } .st-cards { display: grid; max-width: 720px; margin-inline: auto; text-align: start; } .st-card { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; padding: 28px 26px; border-radius: 28px; background: rgba(9, 30, 22, .72); box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .12), 0 40px 80px -30px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform-origin: 50% 0; } .st-pain { font-family: var(--mx-font-read); font-size: clamp(20px, 5vw, 25px); line-height: 1.6; color: rgba(239, 250, 242, .55); } .st-beam { display: block; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(to left, rgba(239, 250, 242, .15), #40D45B); box-shadow: 0 0 16px rgba(64, 212, 91, .7); transform-origin: right; } .st-hope { font-family: var(--mx-font-read); font-weight: 600; font-size: clamp(22px, 5.4vw, 28px); line-height: 1.6; color: #F4FFF6; } .st-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #40D45B; background: radial-gradient(circle, rgba(64, 212, 91, .22), transparent 70%); box-shadow: inset 0 0 0 1px rgba(64, 212, 91, .35), 0 0 30px -6px rgba(64, 212, 91, .6); } .st-ring .ic { width: 26px; height: 26px; } .st-pil h3 { font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(26px, 6.4vw, 36px); padding-top: 4px; color: #EFFAF2; } .st-pil p { font-family: var(--mx-font-read); font-size: clamp(17.5px, 4.4vw, 21px); line-height: 1.75; color: rgba(239, 250, 242, .82); } .st-pil .st-now { font-family: var(--mx-font-ui); font-size: 14px; line-height: 1.6; padding-top: 12px; border-top: 1px solid rgba(239, 250, 242, .12); color: rgba(239, 250, 242, .75); } .st-now b { display: block; font-size: 12.5px; color: #40D45B; } .st-qlead { font-family: var(--mx-font-read); font-size: 19px; color: rgba(239, 250, 242, .6); } .st-quote { margin: 22px auto 0 !important; max-width: 22em; padding: 0; border: 0; font-family: var(--mx-font-read); font-weight: 600; font-size: clamp(26px, 6.6vw, 48px); line-height: 1.6; text-wrap: balance; } .st-quote .w { color: rgba(239, 250, 242, .16); transition: color .45s var(--mx-ease), text-shadow .45s; } .st-quote .w.lit { color: #F4FFF6; text-shadow: 0 0 22px rgba(64, 212, 91, .25); } .st-cite { margin-top: 20px !important; font-family: var(--mx-font-ui); font-size: 15px; font-weight: 700; color: #40D45B; } .st-name { max-width: 30em; margin: 0 auto 28px !important; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.7; color: rgba(239, 250, 242, .6); } .st-giant { font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(76px, 22vw, 170px); line-height: 1; padding-top: .08em; color: #5BE375; text-shadow: 0 0 70px rgba(64, 212, 91, .45); } .st-body { max-width: 34em; margin: 26px auto 0 !important; font-family: var(--mx-font-read); font-size: clamp(19px, 4.8vw, 23px); line-height: 1.9; color: #EAF4EE; } .st-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 880px; margin-inline: auto; } .st-tile { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; display: flex; align-items: flex-end; padding: 12px 14px; color: #F2FBF6 !important; text-align: start; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .12); background: linear-gradient(160deg, #43907A, #113428); } .st-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--mx-ease); } .st-tile img.is-painted { opacity: 1; } .st-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 12, 9, .8), transparent 65%); } .st-tile span { font-family: var(--mx-font-display); font-size: clamp(17px, 4.4vw, 22px); padding-top: 3px; } .st-join { margin: 12px auto 0 !important; max-width: 13em; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(34px, 8.6vw, 68px); line-height: 1.25; text-wrap: balance; color: #EFFAF2; } .st-steps { display: grid; gap: 12px; max-width: 820px; margin: 30px auto 0 !important; padding: 0; list-style: none; text-align: start; counter-reset: st; } .st-steps li { counter-increment: st; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; } .st-steps li::before { content: counter(st, arabic-indic); grid-row: span 2; font-family: var(--mx-font-read); font-weight: 700; font-size: 28px; line-height: 1; color: #40D45B; } .st-steps b { font-family: var(--mx-font-ui); font-size: 16px; } .st-steps span { font-family: var(--mx-font-ui); font-size: 14px; color: rgba(239, 250, 242, .8); } .st-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; } .st-chap, .st-rail { display: none; } .ab3-wrap { max-width: 1120px; margin-inline: auto; padding: 8px max(20px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom)); background: var(--mx-bg); } body.mx-about .ab3-wrap { max-width: none; padding-inline: max(20px, calc((100vw - 1120px) / 2)); } .st-live { height: calc(var(--units, 12) * 100svh); } .st-live .st-stage { position: sticky; top: 0; height: 100svh; } .st-live .sc { position: absolute; inset: 0; padding-top: 96px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; pointer-events: none; } .st-live .sc.on { pointer-events: auto; } .st-live .sc-in { will-change: transform, opacity; } .st-live .st-card { will-change: transform; } .st-live .st-bg .cx-flame { transform: scale(calc(1 + var(--hz, 0) * 1.6)); opacity: calc(.55 - var(--hz, 0) * .35 - var(--night, 0) * .35); animation: none; } .st-live .st-bg .cx-ring { transform: scale(calc(1 + var(--hz, 0) * 2.2)); opacity: calc(1 - var(--hz, 0)); } .st-live .st-chap { display: block; position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 74px); right: max(20px, env(safe-area-inset-right)); font-family: var(--mx-font-ui); font-size: 13px; font-weight: 700; color: #40D45B; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s var(--mx-ease); } .st-live .st-chap.show { opacity: 1; transform: none; } .st-live .st-rail { display: block; position: absolute; z-index: 2; left: max(14px, env(safe-area-inset-left)); top: 50%; width: 2px; height: min(34vh, 260px); translate: 0 -50%; border-radius: 2px; background: rgba(239, 250, 242, .14); overflow: hidden; } .st-live .st-rail i { display: block; width: 100%; height: 100%; background: #40D45B; box-shadow: 0 0 12px #40D45B; transform-origin: top; transform: scaleY(0); } .st:not(.st-live) .sc { min-height: auto; padding-block: 72px; } .st:not(.st-live) .st-cards { gap: 14px; } .st:not(.st-live) .st-card { grid-area: auto; } .st:not(.st-live) .st-stage { background: #07100C; } @media (min-width: 768px) { .st-tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; } .st-tile { aspect-ratio: 4 / 5; } .st-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } .st-card { padding: 36px 38px; } } @media (min-width: 1024px) { .st-live .sc { padding-top: 100px; padding-bottom: 64px; } .st-live .st-chap { top: 96px; right: max(40px, calc((100vw - 1120px) / 2)); } .st-live .st-rail { left: 40px; } } @media (max-height: 700px) { .st-card { padding: 20px; } .st-gtitle { margin-bottom: 16px !important; } } /* author page: the posts sit right under the head; "all / most shared" is Claudad's segmented switch */ body.mx-author .tabs-buttons { display: none !important; } body.mx-author .writer-details { margin-top: 32px; } body.mx-author .tabs-links { display: inline-flex !important; align-items: center; gap: 0; width: auto; margin: 0 0 20px !important; padding: 4px !important; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); } body.mx-author .tabs-links > span { display: none !important; } body.mx-author .tabs-links a, body.mx-author .tabs-links .folow-status { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; font-family: var(--mx-font-ui) !important; font-size: 15px !important; font-weight: 500; color: var(--mx-text-3) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: color .25s, background-color .25s, box-shadow .25s; } body.mx-author .tabs-links .active { background: var(--mx-surface) !important; color: var(--mx-text) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32) !important; } @media (hover: hover) and (pointer: fine) { body.mx-author .tabs-links a:not(.active):hover, body.mx-author .tabs-links .folow-status:not(.active):hover { color: var(--mx-text) !important; } } body.mx-author .row:has(> .col-12 > .tabs-links) { margin: 0; } body.mx-author .row > .col-12:has(> .tabs-links) { padding: 0 !important; } /* ===================================================================== Account sheet (phone header avatar), Claudad style, every Arabic page ===================================================================== */ .cx-msheet-scrim { position: fixed; inset: 0; z-index: 1065; background: rgba(6, 18, 13, .42); opacity: 0; pointer-events: none; transition: opacity .25s var(--mx-ease); } .box-profile-animated-mobile.cx-msheet { position: fixed !important; z-index: 1066; inset: auto 0 0 0 !important; top: auto !important; width: auto !important; height: auto !important; display: grid !important; gap: 14px; margin: 0 !important; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 28px 28px 0 0 !important; background: var(--mx-bg) !important; color: var(--mx-text); box-shadow: 0 -20px 50px -20px rgba(6, 22, 15, .4) !important; font-family: var(--mx-font-ui); text-align: start; transform: translateY(105%); visibility: hidden; transition: transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .4s; } html.mx-msheet-open .cx-msheet-scrim { opacity: 1; pointer-events: auto; } html.mx-msheet-open .box-profile-animated-mobile.cx-msheet { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s; } html.mx-msheet-open { overflow: hidden; } .cx-msheet__grip { justify-self: center; width: 42px; height: 5px; border-radius: 9px; background: var(--mx-line-2); } .cx-msheet a { text-decoration: none !important; } .cx-msheet .ic { width: 22px; height: 22px; flex: none; } .cx-msheet__me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); color: var(--mx-text) !important; } .cx-msheet__me img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--mx-emerald); } .cx-msheet__who { flex: 1; min-width: 0; display: grid; line-height: 1.35; } .cx-msheet__who b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-msheet__who small { font-size: 13px; color: var(--mx-accent-text); font-weight: 700; } .cx-msheet__me > .ic, .cx-msheet__row > .ic:last-child { width: 18px; height: 18px; color: var(--mx-text-3); } .cx-msheet__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cx-msheet__q { display: grid; justify-items: center; gap: 6px; padding: 16px 10px 14px; border-radius: 22px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); color: var(--mx-text) !important; font-size: 15px; font-weight: 700; transition: transform .16s var(--mx-ease); } .cx-msheet__q:active, .cx-msheet__row:active, .cx-msheet__me:active { transform: scale(.98); } .cx-msheet__q .ic { width: 26px; height: 26px; color: var(--mx-accent-text); } .cx-msheet__q--primary { background: var(--mx-emerald); color: #04210E !important; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35); } .cx-msheet__q--primary .ic { color: #04210E; } .cx-msheet__group { display: grid; padding: 4px 0; border-radius: 22px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); overflow: hidden; } .cx-msheet__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--mx-text) !important; font-size: 16px; font-weight: 500; transition: background-color .2s, transform .16s var(--mx-ease); } .cx-msheet__row + .cx-msheet__row { border-top: 1px solid var(--mx-line); } .cx-msheet__row > span { flex: 1; } .cx-msheet__row > .ic:first-child { color: var(--mx-accent-text); } .cx-msheet__out { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 12px; color: var(--mx-danger) !important; font-size: 15px; font-weight: 700; background: transparent; box-shadow: inset 0 0 0 1px var(--mx-line-2); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .cx-msheet__row:hover { background: var(--mx-surface-2); } } /* desktop: the same sheet opens from the rail's profile card, as a small panel just above it (placed by mx.js) */ @media (min-width: 576px) { .box-profile-animated-mobile.cx-msheet { width: 340px !important; gap: 10px; padding: 12px 12px 14px !important; border-radius: 18px !important; box-shadow: 0 24px 60px -20px rgba(6, 22, 15, .45), 0 0 0 1px var(--mx-line) !important; opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom right; transition: transform .2s var(--mx-ease), opacity .2s, visibility 0s linear .2s; } html.mx-msheet-open .box-profile-animated-mobile.cx-msheet { opacity: 1; transform: none; transition: transform .2s var(--mx-ease), opacity .2s, visibility 0s; } .cx-msheet__grip { display: none !important; } .cx-msheet-scrim { background: transparent; } } .cx-rail__foot[data-mx-me] { cursor: pointer; transition: background-color .2s; } @media (hover: hover) and (pointer: fine) { .cx-rail__foot[data-mx-me]:hover { background: var(--mx-surface-2); } } @media (prefers-reduced-motion: reduce) { .box-profile-animated-mobile.cx-msheet, .cx-msheet-scrim { transition: none !important; } } .cx-msheet:focus { outline: none; } /* no toast notifications anywhere (bookmark, reactions, follow, forms) */ .alertify-notifier, .ajs-message, .alertify-logs, #toast-container { display: none !important; } /* the legacy bookmark is absolutely placed; keep it inside the card's action row */ .cx-acts .bookmark { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: none !important; transform: none !important; } #alertify-logs, .alertify-log { display: none !important; } /* ===================================================================== قائمتي (body.mx-readlist), Claudad's reading list ===================================================================== */ .cx-readlist { max-width: 760px; margin-inline: auto; padding: 0 max(16px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom)); } body.mx-readlist .box-head-common, body.mx-readlist .tabs-buttons, body.mx-readlist .container-sep-line, body.mx-readlist .vote-loader { display: none !important; } body.mx-readlist .notreading-list, body.mx-readlist .reading-list { margin: 0 !important; padding: 0 !important; background: transparent !important; } body.mx-readlist .notreading-list > .container, body.mx-readlist .reading-list > .container { max-width: none; padding: 0; } body.mx-readlist .container-load-unreadlist, body.mx-readlist .container-load-readlist, body.mx-readlist .notreading-list .row, body.mx-readlist .reading-list .row { display: grid !important; gap: 10px; margin: 0 !important; } .cx-bmhead { padding-top: 18px; display: grid; gap: 18px; justify-items: start; } .cx-bm-sum { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; padding: 14px 0; border-block: 1px solid var(--mx-line); } .cx-bm-sum div { display: grid; gap: 2px; text-align: center; } .cx-bm-sum div + div { border-inline-start: 1px solid var(--mx-line); } .cx-bm-sum dt { order: 2; font-family: var(--mx-font-ui); font-size: 13px; font-weight: 500; color: var(--mx-text-3); } .cx-bm-sum dd { margin: 0; font-family: var(--mx-font-display); font-size: 30px; line-height: 1.1; padding-top: 4px; color: var(--mx-text); } .cx-seg--links { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); margin-bottom: 18px; } .cx-seg--links a { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 12px; font-family: var(--mx-font-ui); font-size: 15px; font-weight: 500; color: var(--mx-text-3) !important; text-decoration: none !important; transition: color .25s, background-color .25s; } .cx-seg--links a[aria-current="page"] { background: var(--mx-surface); color: var(--mx-text) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32); } .cx-bm { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); transition: transform .2s var(--mx-ease); } .cx-bm:active { transform: scale(.99); } .cx-bm__link { flex: 1; min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none !important; } .cx-bm__link img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--mx-surface-2); } .cx-bm__txt { min-width: 0; display: grid; gap: 3px; } .cx-bm__txt b { font-family: var(--mx-font-read); font-weight: 700; font-size: 18px; line-height: 1.32; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-bm__txt small { font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-bm__txt .cx-bm__cat { color: var(--mx-accent-text); font-weight: 700; } .cx-bm__rm { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--mx-text-3); cursor: pointer; transition: background-color .2s, color .2s, transform .16s var(--mx-ease); } .cx-bm__rm .ic { width: 18px; height: 18px; } .cx-bm__rm:active { transform: scale(.92); } @media (hover: hover) and (pointer: fine) { .cx-bm__rm:hover { background: var(--mx-surface-2); color: var(--mx-danger); } .cx-bm:hover .cx-bm__txt b { color: var(--mx-accent-text); } } .cx-readlist .cx-empty-state { margin-top: 8px; } @media (min-width: 1024px) { .cx-readlist { padding-top: 92px; } } body.mx-readlist .notreading-list .row.tabs-buttons, body.mx-readlist .reading-list .row.tabs-buttons, body.mx-readlist .row.d-none { display: none !important; } /* ===================================================================== Every remaining Arabic page (body.mx-generic): Claudad's base (notifications, interests, drafts, publishing, help, legal, contact, features, reviews). Page-specific polish comes on top. ===================================================================== */ body.mx-generic { background: var(--mx-bg) !important; color: var(--mx-text); font-family: var(--mx-font-ui); } body.mx-generic > .wrapper > div:not(.header):not(header) > .container, body.mx-generic .wrapper > .container { max-width: 1040px; } body.mx-generic .box-head-common, body.mx-generic .more-box { margin: 28px 0 22px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.mx-generic .box-head-common .title, body.mx-generic .more-box, body.mx-generic h1.title, body.mx-generic .page-title span { font-family: var(--mx-font-display) !important; font-weight: 400 !important; font-size: clamp(34px, 9.5vw, 44px) !important; line-height: 1.1 !important; color: var(--mx-text) !important; } body.mx-generic .small-line { display: none !important; } body.mx-generic h2, body.mx-generic h3 { font-family: var(--mx-font-display); font-weight: 400; color: var(--mx-text); } body.mx-generic p, body.mx-generic li { font-family: var(--mx-font-read); font-size: 19px; line-height: 1.75; color: var(--mx-text-2); } body.mx-generic a { color: var(--mx-accent-text); } /* cards */ body.mx-generic .item, body.mx-generic .card, body.mx-generic .notification, body.mx-generic .box-item, body.mx-generic .container-item > .item { border: 0 !important; border-radius: 22px !important; background: var(--mx-surface) !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22) !important; } body.mx-generic .notification { margin-bottom: 10px; padding: 14px 16px !important; } body.mx-generic img.lozad, body.mx-generic .box-img img { border-radius: 16px; } body.mx-generic .box-profile-img img, body.mx-generic .box-writer-img img, body.mx-generic .notification-icon img { border-radius: 50% !important; } /* buttons as Claudad pills */ body.mx-generic .folow-status, body.mx-generic button[type="submit"], body.mx-generic .btn-primary, body.mx-generic .save, body.mx-generic .create-account, body.mx-generic .send-button { height: 44px; padding: 0 22px !important; border: 0 !important; border-radius: 12px !important; background: var(--mx-text) !important; color: var(--mx-bg) !important; font-family: var(--mx-font-ui) !important; font-size: 15px !important; font-weight: 700; box-shadow: none !important; cursor: pointer; transition: transform .16s var(--mx-ease), opacity .2s; } body.mx-generic .folow-status:not(.active) { background: var(--mx-emerald) !important; color: #04210E !important; } body.mx-generic .folow-status.active { background: var(--mx-surface-2) !important; color: var(--mx-text) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; } body.mx-generic .folow-status:active, body.mx-generic button[type="submit"]:active { transform: scale(.97); } /* fields */ body.mx-generic .form-control, body.mx-generic .message-input, body.mx-generic textarea, body.mx-generic input[type="text"], body.mx-generic input[type="email"] { min-height: 54px; padding: 0 18px !important; border: 0 !important; border-radius: 16px !important; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; font-family: var(--mx-font-ui) !important; font-size: 16px !important; color: var(--mx-text) !important; } body.mx-generic textarea { padding: 14px 18px !important; font-family: var(--mx-font-read) !important; font-size: 19px !important; } body.mx-generic .form-control:focus, body.mx-generic .message-input:focus, body.mx-generic textarea:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald) !important; outline: none; } /* the legacy floating write button gives way to the dock */ body.mx-generic .writing-box { display: none !important; } body.mx-generic .locked-bar { display: none !important; } body.mx-generic .wrapper { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } /* ---------- notifications: Claudad's notes list ---------- */ body.mx-generic .box-notification > .container { max-width: 760px; } body.mx-generic .box-notification-content-mobile .all-notification { margin: 24px 0 18px !important; } body.mx-generic .all-notification a, body.mx-generic .all-notification span { font-family: var(--mx-font-display) !important; font-size: clamp(34px, 9.5vw, 44px) !important; line-height: 1.1; color: var(--mx-text) !important; text-decoration: none !important; } body.mx-generic .notifications-items { display: grid; padding: 4px 0; border-radius: 22px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 32px -18px rgba(17, 52, 40, .22); overflow: hidden; } body.mx-generic .notifications-items .notification { margin: 0 !important; padding: 14px 16px !important; gap: 12px; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; transition: background-color .2s; } body.mx-generic .notifications-items .notification + .notification { border-top: 1px solid var(--mx-line) !important; } body.mx-generic .notifications-items .notification:has(.news-status) { background: rgba(43, 182, 90, .07) !important; } body.mx-generic .container-box-sender-img { position: relative; flex: none; width: 46px; height: 46px; } body.mx-generic .box-sender-img, body.mx-generic .box-sender-img img { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover; } body.mx-generic .notification-icon { position: absolute !important; bottom: -3px; inset-inline-start: -3px; width: 22px !important; height: 22px !important; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface); box-shadow: 0 0 0 2px var(--mx-surface), 0 2px 6px rgba(17, 52, 40, .25); } body.mx-generic .notification-icon img { width: 14px !important; height: 14px !important; border-radius: 0 !important; } body.mx-generic .box-message { flex: 1; min-width: 0; } body.mx-generic .box-message .message, body.mx-generic .box-message .message span { margin: 0 !important; font-family: var(--mx-font-ui) !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--mx-text-2) !important; } body.mx-generic .box-message .highlight-notification { color: var(--mx-text) !important; font-weight: 700; } body.mx-generic .box-message .date, body.mx-generic .box-message .date label { margin: 4px 0 0 !important; font-family: var(--mx-font-ui) !important; font-size: 12.5px !important; color: var(--mx-text-3) !important; } body.mx-generic .news-status { display: inline-flex; align-items: center; gap: 5px; color: var(--mx-accent-text) !important; font-weight: 700; } body.mx-generic .news-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-emerald); box-shadow: 0 0 8px var(--mx-emerald); } @media (hover: hover) and (pointer: fine) { body.mx-generic .notifications-items .notification:hover { background: var(--mx-surface-2) !important; } } /* ---------- account pages: switches ---------- */ body.mx-generic .tabs-buttons { margin: 24px 0 18px !important; } body.mx-generic .tabs-buttons > .col, body.mx-generic .box-tabs { display: inline-flex !important; flex: none; width: auto; gap: 0; padding: 4px !important; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); } body.mx-generic .tabs-buttons .folow-status, body.mx-generic .box-tabs > .box { height: 40px; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; background: transparent !important; color: var(--mx-text-3) !important; box-shadow: none !important; font-family: var(--mx-font-ui) !important; font-size: 15px !important; font-weight: 500; cursor: pointer; } body.mx-generic .tabs-buttons .folow-status.active, body.mx-generic .box-tabs > .box.active { background: var(--mx-surface) !important; color: var(--mx-text) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 14px 34px -20px rgba(17, 52, 40, .32) !important; } body.mx-generic .box-tabs > .box img, body.mx-generic .box-written img { display: none; } body.mx-generic .box-written { height: 44px; padding: 0 20px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; gap: 8px; background: var(--mx-emerald) !important; color: #04210E !important; font-family: var(--mx-font-ui); font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75); } body.mx-generic .box-written * { color: #04210E !important; font-family: var(--mx-font-ui) !important; } /* ---------- interests: people rows ---------- */ body.mx-generic .folowed-peoples .item { margin: 0 0 10px !important; padding: 14px !important; gap: 12px; } body.mx-generic .folowed-peoples .box-profile-img img { width: 56px !important; height: 56px !important; object-fit: cover; } body.mx-generic .folowed-peoples .name-writer, body.mx-generic .folowed-peoples .name-writer a { font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 16px !important; color: var(--mx-text) !important; } body.mx-generic .folowed-peoples .description { font-family: var(--mx-font-read) !important; font-size: 16.5px !important; line-height: 1.4; color: var(--mx-text-2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.mx-generic .follow-box, body.mx-generic .follow-box span, body.mx-generic .follow-box label { margin: 4px 0 0 !important; font-family: var(--mx-font-ui) !important; font-size: 12.5px !important; color: var(--mx-text-3) !important; } body.mx-generic .folowed-peoples .folow-status, body.mx-generic .topic-item .folow-status { height: 38px; padding: 0 16px !important; font-size: 14px !important; } /* ---------- interests: topics as image tiles ---------- */ body.mx-generic .topic-item { row-gap: 14px; } body.mx-generic .topic-item .item { position: relative; overflow: hidden; padding: 0 !important; } body.mx-generic .topic-item .box-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 !important; background: linear-gradient(160deg, #43907A, #113428); } body.mx-generic .topic-item .box-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } body.mx-generic .topic-item .box-info { padding: 14px 16px !important; gap: 10px; } body.mx-generic .topic-item .name-category, body.mx-generic .topic-item .name-category a { font-family: var(--mx-font-display) !important; font-size: 22px !important; color: var(--mx-text) !important; } body.mx-generic .topic-item .item.active { box-shadow: 0 0 0 2px var(--mx-emerald), 0 12px 32px -18px rgba(17, 52, 40, .22) !important; } /* ---------- drafts and published posts as cards ---------- */ body.mx-generic .container-item .item, body.mx-generic .container-publish-story .item { margin-bottom: 16px; padding: 12px !important; overflow: hidden; } body.mx-generic .container-item .box-img, body.mx-generic .container-publish-story .box-img { overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 10; background: var(--mx-surface-2); } body.mx-generic .container-item .box-img img, body.mx-generic .container-publish-story .box-img img { width: 100% !important; height: 100% !important; object-fit: cover; } body.mx-generic .container-item .title, body.mx-generic .container-item .title a, body.mx-generic .container-publish-story .title, body.mx-generic .container-publish-story .title a { margin: 10px 0 4px !important; font-family: var(--mx-font-read) !important; font-weight: 700; font-size: 20px !important; line-height: 1.35 !important; color: var(--mx-text) !important; } body.mx-generic .container-item .description, body.mx-generic .container-publish-story .description { font-family: var(--mx-font-read) !important; font-size: 17px !important; color: var(--mx-text-2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.mx-generic .time-publish, body.mx-generic .container-publish-story .date, body.mx-generic .container-publish-story .time-read { font-family: var(--mx-font-ui) !important; font-size: 12.5px !important; color: var(--mx-text-3) !important; } body.mx-generic .remove-draft { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface-2); cursor: pointer; } body.mx-generic .remove-draft img { width: 16px; height: 16px; border-radius: 0 !important; } /* ---------- help, privacy, terms: Claudad prose ---------- */ body.mx-generic .staticpage-details { max-width: 34em; margin: 28px auto 0; padding: 0 4px 40px; font-family: var(--mx-font-read) !important; font-size: 21px; line-height: 1.85; color: var(--mx-text); text-wrap: pretty; } body.mx-generic .staticpage-details h1, body.mx-generic .staticpage-details h2 { margin: 1.4em 0 .45em; font-family: var(--mx-font-display) !important; font-weight: 400; font-size: clamp(30px, 8vw, 40px); line-height: 1.2; color: var(--mx-text); } body.mx-generic .staticpage-details h1:first-child, body.mx-generic .staticpage-details h2:first-child { margin-top: 0; } body.mx-generic .staticpage-details h3, body.mx-generic .staticpage-details h4, body.mx-generic .staticpage-details strong { font-family: var(--mx-font-read) !important; font-weight: 700; color: var(--mx-text); } body.mx-generic .staticpage-details h3, body.mx-generic .staticpage-details h4 { margin: 1.3em 0 .3em; font-size: 1.15em; } body.mx-generic .staticpage-details p, body.mx-generic .staticpage-details li, body.mx-generic .staticpage-details span { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: var(--mx-text-2) !important; background: transparent !important; } body.mx-generic .staticpage-details ol, body.mx-generic .staticpage-details ul { padding-inline-start: 1.2em; } body.mx-generic .staticpage-details li::marker { color: var(--mx-emerald); font-weight: 700; } /* ---------- reviews: Claudad quote cards ---------- */ body.mx-generic .item.card { margin-bottom: 14px; padding: 22px !important; background: var(--mx-surface-2) !important; box-shadow: none !important; } body.mx-generic .item.card .review-description, body.mx-generic .item.card .review-description p { font-family: var(--mx-font-read) !important; font-size: 20px !important; line-height: 1.5 !important; font-weight: 500; color: var(--mx-text) !important; } body.mx-generic .item.card .review-description::before { content: "«"; color: var(--mx-emerald); font-size: 1.4em; margin-inline-end: 2px; } body.mx-generic .item.card .box-writer-img img { width: 44px !important; height: 44px !important; object-fit: cover; } body.mx-generic .item.card .name-writer { font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 15px !important; color: var(--mx-text) !important; } body.mx-generic .item.card .box-info p { font-family: var(--mx-font-ui) !important; font-size: 13px !important; color: var(--mx-text-2) !important; } body.mx-generic .cx-feat-grid { display: grid; gap: 16px; padding: 0 !important; } @media (min-width: 1024px) { body.mx-generic .cx-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } /* empty drafts: a calm invitation to start writing */ .cx-empty-state--cta { margin-top: 4px; } .cx-empty-state--cta .cx-btn { margin-top: 10px; } .cx-empty-state--cta > .ic { width: 40px; height: 40px; color: var(--mx-emerald); } /* ---------- interests: people (Claudad follow rows) ---------- */ body.mx-generic .profile-peoples [hidden] { display: none !important; } body.mx-generic .suggestions-peoples .item { margin: 0 0 10px !important; padding: 14px 16px !important; border-radius: 20px; background: var(--mx-surface); box-shadow: 0 1px 0 var(--mx-line), 0 10px 28px -20px rgba(17, 52, 40, .25); } body.mx-generic .suggestions-peoples .sep-line { display: none !important; } body.mx-generic .suggestions-peoples .box-section { gap: 12px; } body.mx-generic .suggestions-peoples .box-section > [class*="col-"] { flex: 0 0 auto; max-width: none; width: auto; padding: 0 !important; } body.mx-generic .suggestions-peoples .box-section > .box-info { flex: 1 1 auto; min-width: 0; } body.mx-generic .suggestions-peoples .box-profile-img img { width: 52px !important; height: 52px !important; border-radius: 50%; object-fit: cover; } body.mx-generic .suggestions-peoples .name-writer { font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 16px !important; color: var(--mx-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.mx-generic .suggestions-peoples .box-info > div:first-child { gap: 10px; } body.mx-generic .suggestions-peoples .folow-status { flex: none; height: 36px !important; min-height: 0 !important; padding: 0 16px !important; font-size: 14px !important; } body.mx-generic .suggestions-peoples .follow-box, body.mx-generic .folowed-peoples .follow-box { margin: 2px 0 0 !important; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } body.mx-generic .suggestions-peoples .item > .description { margin: 10px 0 0 !important; padding: 0 !important; } body.mx-generic .suggestions-peoples .description .description { margin: 0 !important; padding: 0 !important; font-family: var(--mx-font-read) !important; font-size: 16.5px !important; line-height: 1.45; color: var(--mx-text-2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.mx-generic .suggestions-peoples .description .description p { margin: 0 !important; } /* nobody followed yet / nobody in common: say so instead of an orphan heading */ body.mx-generic .folowed-peoples:not(:has(.item)) .box-head-common::after, body.mx-generic .common-following-peoples:not(:has(.item)) .box-head-common::after { content: 'لا أحد هنا بعد. تابع كاتبًا من الاقتراحات ليظهر هنا.'; display: block; margin-top: 12px; padding: 18px 20px; border-radius: 20px; background: var(--mx-surface); font-family: var(--mx-font-read); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--mx-text-2); } body.mx-generic .common-following-peoples:not(:has(.item)) .box-head-common::after { content: 'سيظهر هنا من يتابع المواضيع نفسها التي تتابعها.'; } /* "more" under each list: a quiet pill instead of the big legacy chevron */ body.mx-generic .profile-peoples .load-more { position: static !important; transform: none !important; display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 6px auto 0; padding: 0 18px; border-radius: 12px; background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-line); cursor: pointer; } body.mx-generic .profile-peoples .load-more::after { content: 'اعرض المزيد'; font-family: var(--mx-font-ui); font-weight: 700; font-size: 14px; color: var(--mx-text); } body.mx-generic .profile-peoples .load-more > img { width: 14px !important; height: auto; opacity: .7; } body.mx-generic .profile-peoples .load-more .vote-loader { position: static !important; transform: none !important; } body.mx-generic .profile-peoples .load-more .vote-loader img { width: 18px; } body.mx-generic .suggestions-peoples .item > .description, body.mx-generic .suggestions-peoples .description .description { height: auto !important; min-height: 0 !important; } body.mx-generic .suggestions-peoples .description .description { display: -webkit-box !important; } body.mx-generic .folowed-peoples .box-head-common, body.mx-generic .common-following-peoples .box-head-common { display: block !important; } body.mx-generic .profile-peoples .load-more { width: auto !important; } /* ---------- interests: followed main topics as Claudad cover tiles ---------- */ body.mx-generic .profile-categories .main-topic { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; margin: 0 0 14px !important; padding: 0 !important; border-radius: 24px !important; background: #113428 !important; box-shadow: 0 14px 34px -22px rgba(17, 52, 40, .45) !important; } body.mx-generic .profile-categories .main-topic > .row { margin: 0; min-height: 190px; align-items: flex-end; } body.mx-generic .profile-categories .main-topic > .row > [class*="col-"] { position: static; flex: 0 0 100%; max-width: 100%; padding: 0; } body.mx-generic .profile-categories .main-topic .box-img { position: absolute; inset: 0; z-index: -2; margin: 0 !important; border-radius: 0 !important; } body.mx-generic .profile-categories .main-topic .box-img img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; } body.mx-generic .profile-categories .main-topic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 14, 10, .78), rgba(4, 14, 10, 0) 72%); pointer-events: none; } body.mx-generic .profile-categories .main-topic .box-info { justify-content: space-between; gap: 12px; padding: 18px 18px 16px !important; } body.mx-generic .profile-categories .main-topic .name-category, body.mx-generic .profile-categories .main-topic .name-category a { font-family: var(--mx-font-display) !important; font-size: 26px !important; line-height: 1.2; color: #fff !important; } body.mx-generic .profile-categories .main-topic .folow-status { flex: none; height: 38px !important; min-height: 0 !important; padding: 0 16px !important; font-size: 14px !important; background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.mx-generic .profile-categories .main-topic .folow-status.active { background: #fff !important; color: var(--mx-text) !important; border-color: #fff !important; } body.mx-generic .profile-categories .main-topic .description:not(:has(*)) { display: none !important; } @media (min-width: 768px) { body.mx-generic .profile-categories .main-topic, body.mx-generic .profile-categories .main-topic > .row { min-height: 240px; } } body.mx-generic .container-publish-story .description, body.mx-generic .container-item .description { height: auto !important; max-height: none !important; } body.mx-generic .container-publish-story .description a, body.mx-generic .container-item .description a { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--mx-font-read) !important; font-size: 17px !important; line-height: 1.5 !important; color: var(--mx-text-2) !important; } body.mx-generic .container-publish-story .item > .row, body.mx-generic .container-publish-story .item .row.reaction { margin-inline: 0 !important; } body.mx-generic .container-publish-story .item .row.reaction > .col { flex: 0 1 auto; padding-inline: 0 !important; } /* ---------- generic pages on desktop: a reading measure, not the full 1200px ---------- */ @media (min-width: 992px) { body.mx-generic .box-notification > .container, body.mx-generic .staticpage-details, body.mx-generic .profile-stories > .container, body.mx-generic .drafts-story > .container { max-width: 820px !important; margin-inline: auto !important; } body.mx-generic .staticpage-details { padding-inline: 0 !important; } } /* ===================================================================== Composer: share a thought, a photo, or open the full editor. A bottom sheet on phones, a centred dialog from 768px. ===================================================================== */ html.mx-cmp-open { overflow: hidden; } .cx-cmp { position: fixed; inset: 0; z-index: 1080; display: grid; align-items: end; font-family: var(--mx-font-ui); color: var(--mx-text); } .cx-cmp[hidden] { display: none; } .cx-cmp__scrim { position: absolute; inset: 0; background: rgba(4, 14, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; } .cx-cmp__sheet { position: relative; display: grid; gap: 14px; width: 100%; max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--mx-bg); box-shadow: 0 -24px 60px -24px rgba(6, 22, 15, .45); transform: translateY(104%); transition: transform .45s cubic-bezier(.32, .72, 0, 1); } .cx-cmp.is-open .cx-cmp__scrim { opacity: 1; } .cx-cmp.is-open .cx-cmp__sheet { transform: none; } .cx-cmp.is-dragging .cx-cmp__sheet { transition: none; } .cx-cmp__grip { justify-self: center; width: 42px; height: 5px; border-radius: 9px; background: var(--mx-line-2); touch-action: none; } .cx-cmp .ic { width: 20px; height: 20px; flex: none; } .cx-cmp__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; touch-action: none; } .cx-cmp__head h2 { margin: 0; text-align: center; font-family: var(--mx-font-display); font-weight: 400; font-size: 22px; line-height: 1.2; padding-top: 3px; color: var(--mx-text); } .cx-cmp__x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--mx-surface-2); color: var(--mx-text); cursor: pointer; transition: transform .16s var(--mx-ease); } .cx-cmp__x:active { transform: scale(.94); } .cx-cmp__send { gap: 6px; } .cx-cmp__send[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } .cx-cmp__send.is-busy span::after { content: '…'; } .cx-cmp__send .ic { width: 18px; height: 18px; } .cx-cmp__body { display: grid; gap: 14px; } .cx-cmp__body[hidden] { display: none; } .cx-cmp__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cx-cmp__modes > * { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 0; border-radius: 18px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); color: var(--mx-text-2) !important; font: 700 14px/1.2 var(--mx-font-ui); text-decoration: none !important; cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .16s var(--mx-ease); } .cx-cmp__modes > *:active { transform: scale(.97); } .cx-cmp__modes .ic { width: 24px; height: 24px; } .cx-cmp__modes > [aria-checked="true"] { background: rgba(43, 182, 90, .1); box-shadow: inset 0 0 0 2px var(--mx-emerald); color: var(--mx-accent-text) !important; } .cx-cmp__who { display: flex; align-items: center; gap: 12px; } .cx-cmp__av .cx-av, .cx-cmp__av img { width: 44px; height: 44px; } .cx-cmp__av[hidden] { display: none; } .cx-cmp__name { display: grid; justify-items: start; gap: 4px; min-width: 0; } .cx-cmp__name b { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cx-cmp__anon { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--mx-surface-2); color: var(--mx-text-2); font: 700 12.5px/1 var(--mx-font-ui); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .cx-cmp__anon .ic { width: 15px; height: 15px; } .cx-cmp__anon[aria-pressed="true"] { background: var(--mx-forest); color: #EFFAF2; } .cx-cmp textarea { display: block; width: 100%; min-height: 128px; max-height: 42dvh; margin: 0; padding: 4px 2px; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--mx-font-read); font-size: 23px; line-height: 1.55; color: var(--mx-text); } .cx-cmp textarea::placeholder { color: var(--mx-text-3); opacity: 1; } .cx-cmp.is-photo textarea { min-height: 72px; font-size: 21px; } .cx-cmp__pic { position: relative; overflow: hidden; border-radius: 20px; background: var(--mx-surface-2); } .cx-cmp__pic[hidden] { display: none; } .cx-cmp__pic img { display: block; width: 100%; max-height: 44dvh; object-fit: cover; } .cx-cmp__picx { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(6, 22, 15, .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; } .cx-cmp__picx .ic { width: 18px; height: 18px; } .cx-cmp__drop { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 150px; margin: 0; padding: 18px; border-radius: 20px; border: 1.5px dashed var(--mx-line-2); background: var(--mx-surface); text-align: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .cx-cmp__drop[hidden] { display: none; } .cx-cmp__drop.is-over, .cx-cmp__drop:focus-within { border-color: var(--mx-emerald); background: rgba(43, 182, 90, .07); } .cx-cmp__dropic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(43, 182, 90, .12); color: var(--mx-accent-text); } .cx-cmp__dropic .ic { width: 26px; height: 26px; } .cx-cmp__drop b { font-size: 16px; } .cx-cmp__drop small { font-size: 13px; color: var(--mx-text-3); } .cx-cmp__err { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(194, 58, 58, .1); color: var(--mx-danger); font-size: 14px; font-weight: 700; } .cx-cmp__err[hidden] { display: none; } .cx-cmp__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--mx-line); font-size: 13px; color: var(--mx-text-3); } .cx-cmp__note { display: inline-flex; align-items: center; gap: 6px; } .cx-cmp__note .ic { width: 16px; height: 16px; color: var(--mx-accent-text); } .cx-cmp__count { font-variant-numeric: tabular-nums; white-space: nowrap; } .cx-cmp__count.is-near { color: var(--mx-danger); font-weight: 700; } .cx-cmp__long { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); color: var(--mx-text) !important; text-decoration: none !important; transition: transform .16s var(--mx-ease); } .cx-cmp__long:active { transform: scale(.98); } .cx-cmp__longic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: linear-gradient(160deg, var(--mx-teal-500), var(--mx-forest)); color: #EFFAF2; } .cx-cmp__long > span:nth-child(2) { flex: 1; display: grid; gap: 2px; line-height: 1.3; } .cx-cmp__long b { font-size: 15px; } .cx-cmp__long small { font-size: 13px; color: var(--mx-text-3); } .cx-cmp__long > .ic:last-child { width: 18px; height: 18px; color: var(--mx-text-3); } .cx-cmp__done { display: grid; justify-items: center; gap: 10px; padding: 18px 6px 8px; text-align: center; outline: 0; } .cx-cmp__done[hidden] { display: none; } .cx-cmp__doneic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(43, 182, 90, .12); color: var(--mx-emerald); box-shadow: 0 0 0 10px rgba(43, 182, 90, .05); animation: mx-cmp-pop .5s var(--mx-ease) both; } .cx-cmp__doneic .ic { width: 40px; height: 40px; } .cx-cmp__done h3 { margin: 6px 0 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 26px; color: var(--mx-text); } .cx-cmp__done p { margin: 0; max-width: 30ch; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.5; color: var(--mx-text-2); } .cx-cmp__donebtns { display: flex; gap: 10px; margin-top: 8px; } @keyframes mx-cmp-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } @media (min-width: 768px) { .cx-cmp { align-items: center; justify-items: center; padding: 24px; } .cx-cmp__sheet { width: min(580px, 100%); max-height: calc(100dvh - 48px); padding: 18px 22px 20px; border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(6, 22, 15, .5); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .35s var(--mx-ease), opacity .25s ease; } .cx-cmp.is-open .cx-cmp__sheet { transform: none; opacity: 1; } .cx-cmp__grip { display: none; } } @media (hover: hover) and (pointer: fine) { .cx-cmp__modes > *:hover { color: var(--mx-text) !important; } .cx-cmp__long:hover, .cx-cmp__drop:hover { background: var(--mx-surface-2); } } @media (prefers-reduced-motion: reduce) { .cx-cmp__sheet, .cx-cmp__scrim { transition-duration: .01s !important; } .cx-cmp__doneic { animation: none; } } /* ---------- thought cards: no title, the words are the post ---------- */ .cx-post--thought { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 16px 16px 2px; gap: 12px; } .cx-post--thought > * { grid-area: auto !important; } .cx-post--thought > .cx-acts { margin-inline: -8px; } .cx-pm__kind { display: inline-flex; align-items: center; gap: 3px; color: var(--mx-accent-text); font-weight: 700; } .cx-pm__kind .ic { width: 13px; height: 13px; } .cx-thought { display: block; color: var(--mx-text) !important; text-decoration: none !important; } .cx-thought__txt { margin: 0; font-family: var(--mx-font-read); font-size: 21px; line-height: 1.6; color: var(--mx-text); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .cx-thought__pic { display: block; overflow: hidden; margin-inline: -4px; border-radius: 18px; background: var(--mx-surface-2); } .cx-thought__pic img { display: block; width: 100%; max-height: 520px; object-fit: cover; } @media (min-width: 1024px) { .cx-thought__txt { font-size: 22px; } } /* ---------- a thought opened on its own page ---------- */ .cx-r-head--thought { margin-top: 0; padding-top: calc(76px + env(safe-area-inset-top)); } body.mx-article .cx-r-head--thought ~ * .box-details, body.mx-article:has(.cx-r-head--thought) .article-details .box-details { display: none !important; } .cx-r-thought { font-family: var(--mx-font-read); font-size: 25px; line-height: 1.7; color: var(--mx-text); white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; } .cx-r-photo { margin: 4px 0 0; overflow: hidden; border-radius: 22px; background: var(--mx-surface-2); } .cx-r-photo img { display: block; width: 100%; max-height: 80vh; object-fit: contain; } @media (min-width: 1024px) { .cx-r-head--thought { padding-top: 112px; } .cx-r-thought { font-size: 28px; } } .cx-r-head--thought .cx-r-topic { gap: 6px; } .cx-r-head--thought .cx-r-topic .ic { width: 15px; height: 15px; } .cx-cmp.is-done .cx-cmp__send { visibility: hidden; } .cx-cmp .cx-cmp__modes .ic { width: 24px; height: 24px; } .cx-cmp .cx-cmp__doneic .ic { width: 40px; height: 40px; } .cx-cmp .cx-cmp__dropic .ic { width: 26px; height: 26px; } .cx-cmp textarea { height: auto; } /* ===================================================================== Info pages (help, contact): Claudad's page hero, cards and forms ===================================================================== */ body.mx-generic .cx-page { max-width: 760px; margin: 0 auto; padding: 8px 16px calc(120px + env(safe-area-inset-bottom)); font-family: var(--mx-font-ui); color: var(--mx-text); } .cx-phero { margin: 8px 0 0; padding: 30px 22px 26px; min-height: 180px; display: grid; align-content: end; gap: 8px; } .cx-phero__t { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(40px, 11vw, 60px); line-height: 1.1; color: #EFFAF2; } .cx-phero__l { margin: 0; max-width: 30ch; font-family: var(--mx-font-read); font-size: 20px; line-height: 1.45; color: rgba(239, 250, 242, .85); } .cx-page > section + section, .cx-page > .cx-search + section { margin-top: 34px; } .cx-search--faq { margin-top: 22px; } /* questions */ .cx-faq { display: grid; gap: 10px; } .cx-qa { border-radius: 20px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 30px -20px rgba(17, 52, 40, .25); overflow: hidden; } .cx-qa[hidden] { display: none; } .cx-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px; cursor: pointer; font-family: var(--mx-font-ui); font-weight: 700; font-size: 16.5px; line-height: 1.45; color: var(--mx-text); } .cx-qa summary::-webkit-details-marker { display: none; } .cx-qa summary .ic { width: 20px; height: 20px; flex: none; color: var(--mx-text-3); transition: transform .3s var(--mx-ease); } .cx-qa[open] summary .ic { transform: rotate(180deg); color: var(--mx-accent-text); } .cx-qa__a { padding: 0 18px 18px; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.75; color: var(--mx-text-2); } .cx-qa__a > :first-child { margin-top: 0; } .cx-qa__a p, .cx-qa__a li { margin: 0 0 .7em; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; } .cx-qa__a ol, .cx-qa__a ul { margin: 0 0 .8em; padding-inline-start: 1.3em; } .cx-qa__a li::marker { color: var(--mx-accent-text); font-weight: 700; } .cx-qa__a strong, .cx-qa__a b { color: var(--mx-text); } .cx-qa__a a { color: var(--mx-accent-text) !important; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .cx-qa__a figure { margin: 10px 0 16px; } .cx-qa__a img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--mx-line); } .cx-qa__a figcaption { margin-top: 6px; text-align: center; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } .cx-qa mark { background: rgba(64, 212, 91, .28); color: inherit; border-radius: 3px; } /* closing band */ .cx-ctaband { position: relative; isolation: isolate; overflow: hidden; margin-top: 40px; padding: 30px 22px; border-radius: 28px; display: grid; justify-items: start; gap: 8px; color: #EFFAF2; background: linear-gradient(160deg, #43907A 0%, #0B4A3C 45%, #0A2219 100%); } .cx-ctaband .cx-hero__field .cx-flame { width: 34%; max-width: 200px; top: 50%; left: 0; translate: 0 -50%; rotate: -8deg; opacity: .4; } .cx-ctaband h2 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 28px; line-height: 1.2; } .cx-ctaband p { margin: 0 0 8px; max-width: 28ch; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.45; color: rgba(239, 250, 242, .85); } /* contact channels */ .cx-chan { display: grid; gap: 10px; margin-top: 22px; } .cx-chan__row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 12px 30px -20px rgba(17, 52, 40, .25); } .cx-chan__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(43, 182, 90, .12); color: var(--mx-accent-text); } .cx-chan__ic .ic { width: 24px; height: 24px; } .cx-chan__txt { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; } .cx-chan__txt small { font-size: 13px; color: var(--mx-text-3); } .cx-chan__txt b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-chan__row .cx-btn { flex: none; gap: 6px; } .cx-chan__row .cx-btn .ic { width: 16px; height: 16px; } /* form card */ .cx-formcard { padding: 18px; border-radius: 24px; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(17, 52, 40, .05), 0 14px 34px -22px rgba(17, 52, 40, .3); } .cx-form { display: grid; gap: 18px; } .cx-fset { margin: 0; padding: 0; border: 0; min-width: 0; } .cx-lbl { display: block; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--mx-text-2); } .cx-form .cx-chips { flex-wrap: wrap; overflow: visible; } .cx-form .cx-chip[aria-checked="true"] { background: var(--mx-text); color: var(--mx-bg) !important; box-shadow: none; } .cx-fld input, .cx-fld textarea { display: block; width: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: var(--mx-r-input); background: var(--mx-bg); box-shadow: inset 0 0 0 1px var(--mx-line-2); font-family: var(--mx-font-ui); font-size: 16px; line-height: 1.5; color: var(--mx-text); outline: none; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; } .cx-fld textarea { min-height: 140px; resize: vertical; font-family: var(--mx-font-read); font-size: 19px; } .cx-fld input:focus, .cx-fld textarea:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald); } .cx-fld.is-bad input, .cx-fld.is-bad textarea { box-shadow: inset 0 0 0 2px var(--mx-danger); } .cx-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mx-text-3); } .cx-err { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--mx-danger); } .cx-err[hidden] { display: none; } .cx-form .cx-btn--lg { justify-self: stretch; justify-content: center; gap: 8px; } .cx-form .cx-btn--lg[disabled] { opacity: .55; } .cx-sent { display: grid; justify-items: center; gap: 10px; padding: 20px 6px; text-align: center; outline: 0; } .cx-sent[hidden] { display: none; } .cx-sent .cx-cmp__doneic .ic { width: 40px; height: 40px; } .cx-sent h3 { margin: 6px 0 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 26px; } .cx-sent p { margin: 0 0 6px; max-width: 30ch; font-family: var(--mx-font-read); font-size: 19px; line-height: 1.5; color: var(--mx-text-2); } @media (min-width: 768px) { .cx-phero { min-height: 220px; padding: 40px 36px 34px; } .cx-formcard { padding: 26px; } .cx-form .cx-btn--lg { justify-self: start; } .cx-ctaband { padding: 36px 36px; } } .cx-form[hidden] { display: none; } /* the info pages' own type and buttons win over the generic-page defaults */ body.mx-generic .cx-page .cx-phero__t, body.mx-generic .cx-page .cx-ctaband h2 { color: #EFFAF2; } body.mx-generic .cx-page .cx-phero__l, body.mx-generic .cx-page .cx-ctaband p { color: rgba(239, 250, 242, .88); line-height: 1.45; font-size: 19px; } body.mx-generic .cx-page .cx-sent p, body.mx-generic .cx-page .cx-sent h3 { line-height: 1.5; } body.mx-generic .cx-page button[type="submit"].cx-btn--accent { background: var(--mx-emerald) !important; color: #04210E !important; border: 0 !important; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important; } .cx-phero .cx-hero__field .cx-flame { width: 30%; max-width: 160px; left: -4%; opacity: .32; } .cx-phero .cx-hero__field .cx-light { opacity: .6; } .cx-phero__l { max-width: 24ch; } /* composer, simpler: a quiet mode switch, small chrome, the page is for writing */ .cx-cmp__sheet { gap: 12px; } .cx-cmp__head h2 { font-size: 18px; } .cx-cmp__x { width: 36px; height: 36px; } .cx-cmp .cx-cmp__x .ic { width: 18px; height: 18px; } .cx-cmp__body { gap: 12px; } .cx-cmp__modes { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: 12px; background: var(--mx-surface-2); } .cx-cmp__modes > * { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 12px; background: transparent; box-shadow: none; font-size: 13.5px; } .cx-cmp .cx-cmp__modes .ic { width: 16px; height: 16px; } .cx-cmp__modes > [aria-checked="true"] { background: var(--mx-surface); box-shadow: 0 1px 3px rgba(17, 52, 40, .14); color: var(--mx-text) !important; } .cx-cmp__modes > [aria-checked="true"] .ic { color: var(--mx-emerald); } .cx-cmp__who { gap: 10px; } .cx-cmp__av .cx-av, .cx-cmp__av img { width: 34px; height: 34px; font-size: 15px; } .cx-cmp__name { grid-auto-flow: column; align-items: center; gap: 8px; } .cx-cmp__name b { font-size: 14.5px; } .cx-cmp__anon { height: 24px; padding: 0 8px; font-size: 11.5px; } .cx-cmp .cx-cmp__anon .ic { width: 13px; height: 13px; } .cx-cmp textarea { min-height: 34dvh; font-size: 21px; line-height: 1.6; } .cx-cmp.is-photo textarea { min-height: 84px; font-size: 19px; } .cx-cmp__drop { min-height: 120px; gap: 4px; } .cx-cmp__dropic { width: 40px; height: 40px; } .cx-cmp .cx-cmp__dropic .ic { width: 20px; height: 20px; } .cx-cmp__drop b { font-size: 14.5px; } .cx-cmp__drop small { font-size: 12px; } .cx-cmp__foot { padding-top: 8px; font-size: 12px; } .cx-cmp .cx-cmp__note .ic { width: 14px; height: 14px; } .cx-cmp__send { height: 36px; font-size: 14px; } @media (min-width: 768px) { .cx-cmp textarea { min-height: 240px; } } /* ===================================================================== Editor (body.mx-write): Claudad's write screen around the CKEditor that stays as it is. A quiet bar, a wide column, a sheet to publish. ===================================================================== */ body.mx-write header.header, body.mx-write .header-mobile, body.mx-write .locked-bar, body.mx-write .anonymous-section, body.mx-write .save-indicator, body.mx-write .help-section, body.mx-write .close-writing { display: none !important; } body.mx-write { background: var(--mx-bg) !important; } body.mx-write::after { display: none; } .cx-wbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: 58px; padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-left)) 0; font-family: var(--mx-font-ui); color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } .cx-wbar .ic { width: 18px; height: 18px; flex: none; } .cx-wbar__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mx-surface-2); color: var(--mx-text) !important; text-decoration: none !important; } .cx-wbar__status { display: inline-flex; align-items: center; gap: 6px; padding-inline: 4px; font-size: 12.5px; color: var(--mx-text-3); white-space: nowrap; } .cx-wbar__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mx-text-3); transition: background-color .3s, box-shadow .3s; } .cx-wbar__status.is-saving i { background: #E0A630; animation: mx-wpulse 1s ease-in-out infinite; } .cx-wbar__status.is-saved i { background: var(--mx-emerald); box-shadow: 0 0 8px var(--mx-emerald); } .cx-wbar__status.is-error i { background: var(--mx-danger); } .cx-wbar__status.is-warn { color: var(--mx-danger); font-weight: 600; white-space: normal; line-height: 1.3; } .cx-wbar__status.is-warn i { background: var(--mx-danger); } @keyframes mx-wpulse { 50% { opacity: .35; } } .cx-wbar__anon { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--mx-line-2); color: var(--mx-text-2); font: 700 12.5px/1 var(--mx-font-ui); cursor: pointer; transition: background-color .2s, color .2s; } .cx-wbar .cx-wbar__anon .ic { width: 15px; height: 15px; } .cx-wbar__anon[aria-pressed="true"] { background: var(--mx-forest); color: #EFFAF2; box-shadow: none; } .cx-wbar__next { height: 36px; padding-inline: 18px; font-size: 14px; } @media (max-width: 420px) { .cx-wbar__anon span { display: none; } .cx-wbar__anon { width: 32px; padding: 0; justify-content: center; } } /* the writing column */ body.mx-write .write-story { max-width: 760px; margin: 0 auto !important; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)) !important; background: transparent !important; } body.mx-write .write-story > .container { max-width: none; padding: 0 !important; } body.mx-write .ck.ck-editor { font-family: var(--mx-font-ui); } body.mx-write .ck.ck-editor__top .ck-sticky-panel__content { border: 0 !important; background: transparent !important; } body.mx-write .ck.ck-editor__top .ck-toolbar { border: 0 !important; border-radius: 16px !important; padding: 2px 6px !important; background: var(--mx-surface) !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .06), 0 10px 26px -18px rgba(17, 52, 40, .35) !important; } body.mx-write .ck-sticky-panel__content_sticky .ck-toolbar { border-radius: 0 0 16px 16px !important; } body.mx-write .ck.ck-toolbar .ck.ck-button, body.mx-write .ck.ck-toolbar .ck-dropdown__button { color: var(--mx-text-2) !important; border-radius: 10px !important; } body.mx-write .ck.ck-toolbar .ck.ck-button.ck-on { background: rgba(43, 182, 90, .14) !important; color: var(--mx-accent-text) !important; } body.mx-write .ck.ck-toolbar .ck.ck-toolbar__separator { background: var(--mx-line) !important; } body.mx-write .ck.ck-editor__main > .ck-editor__editable, body.mx-write .ck.ck-editor__main > .ck-editor__editable.ck-focused { min-height: 62vh; margin-top: 10px; padding: 18px 2px 40px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; font-family: var(--mx-font-read) !important; font-size: 21px; line-height: 1.9; color: var(--mx-text); } body.mx-write .ck-editor__editable p { margin: 0 0 1em; } body.mx-write .ck-editor__editable h1 { margin: 0 0 .55em; font-family: var(--mx-font-display) !important; font-weight: 400 !important; font-size: clamp(32px, 8.5vw, 46px) !important; line-height: 1.2 !important; color: var(--mx-text); } body.mx-write .ck-editor__editable h2, body.mx-write .ck-editor__editable h3, body.mx-write .ck-editor__editable h4 { font-family: var(--mx-font-read) !important; font-weight: 700; line-height: 1.35; margin: 1.3em 0 .4em; } body.mx-write .ck-editor__editable blockquote { margin: 1.4em 0; padding: 0; border: 0; font-style: normal; font-weight: 600; font-size: 1.22em; line-height: 1.55; color: var(--mx-text); } body.mx-write .ck-editor__editable .ck-placeholder::before, body.mx-write .ck.ck-placeholder::before { color: var(--mx-text-3) !important; opacity: .8; } body.mx-write .ck-editor__editable img { border-radius: 14px; } @media (min-width: 1024px) { body.mx-write .ck.ck-editor__main > .ck-editor__editable { font-size: 22px; } } body.mx-write .write-story.background-anonymous { background: transparent !important; } .cx-wfoot { position: fixed; z-index: 35; inset-inline: 0; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; } .cx-wfoot span { padding: 6px 14px; border-radius: 12px; background: var(--mx-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--mx-line); font: 12.5px/1.3 var(--mx-font-ui); color: var(--mx-text-3); font-variant-numeric: tabular-nums; } .cx-wfoot.is-warn span { color: var(--mx-danger); font-weight: 700; } /* before publishing: the legacy settings panel as a sheet */ html.mx-wsheet-open { overflow: hidden; } .cx-wscrim { position: fixed; inset: 0; z-index: 1084; background: rgba(4, 14, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s ease; } html.mx-wsheet-open .cx-wscrim { opacity: 1; pointer-events: auto; } body.mx-write #configuration-section { position: fixed !important; z-index: 1085; inset: auto 0 0 0 !important; width: auto !important; height: auto !important; max-height: 92dvh; overflow: auto !important; overscroll-behavior: contain; margin: 0 !important; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 28px 28px 0 0 !important; opacity: 1 !important; background: var(--mx-bg) !important; box-shadow: 0 -24px 60px -24px rgba(6, 22, 15, .45) !important; font-family: var(--mx-font-ui); color: var(--mx-text); text-align: start; } body.mx-write #configuration-section.is-open { animation: mx-wsheet-in .45s cubic-bezier(.32, .72, 0, 1) both; } @keyframes mx-wsheet-in { from { transform: translateY(100%); } } body.mx-write #configuration-section .configuration-form, body.mx-write #configuration-section .configuration-edit-form { position: relative; display: grid; gap: 14px; } body.mx-write #configuration-section .close-box { position: absolute; top: 4px; left: 0; z-index: 2; margin: 0 !important; padding: 0 !important; } body.mx-write #configuration-section .close-conf { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mx-surface-2); color: var(--mx-text) !important; font-size: 0 !important; cursor: pointer; } body.mx-write #configuration-section .close-conf .ic { width: 18px; height: 18px; } .cx-wsheet-h { display: grid; gap: 4px; padding-top: 6px; } .cx-wsheet-grip { justify-self: center; width: 42px; height: 5px; margin-bottom: 6px; border-radius: 9px; background: var(--mx-line-2); } .cx-wsheet-h h2 { margin: 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--mx-text); } .cx-wsheet-h p { margin: 0; font-family: var(--mx-font-read); font-size: 17px; line-height: 1.5; color: var(--mx-text-2); } .cx-wprev { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); } .cx-wprev small { display: block; font-size: 12px; color: var(--mx-text-3); } .cx-wprev b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-family: var(--mx-font-read); font-size: 20px; line-height: 1.3; color: var(--mx-text); } .cx-wprev__img { position: relative; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, var(--mx-teal-500), var(--mx-forest)); color: rgba(239, 250, 242, .8); } .cx-wprev__img .ic { width: 24px; height: 24px; } .cx-wprev__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cx-wprev__img img[hidden] { display: none; } body.mx-write #configuration-section .row { display: grid; gap: 14px; margin: 0 !important; } body.mx-write #configuration-section .row > [class*="col-"] { flex: none; max-width: none; width: auto; padding: 0 !important; } .cx-wlbl { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--mx-text-2); } .cx-wlbl small { font-weight: 400; color: var(--mx-text-3); } body.mx-write #configuration-section .upload-box { position: relative; display: grid !important; justify-items: center; gap: 10px; min-height: 0; margin: 0 !important; padding: 16px !important; border: 1.5px dashed var(--mx-line-2) !important; border-radius: 18px !important; background: var(--mx-surface) !important; text-align: center; } body.mx-write #configuration-section .upload-box p { margin: 0 !important; font-family: var(--mx-font-ui) !important; font-size: 12.5px !important; line-height: 1.6 !important; color: var(--mx-text-3) !important; } body.mx-write #configuration-section .take-img-box { display: inline-flex !important; align-items: center; height: 34px; padding: 0 16px; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); cursor: pointer; position: static !important; width: auto !important; margin: 0 !important; } body.mx-write #configuration-section .take-img-box img { display: none !important; } body.mx-write #configuration-section .take-img-box::before { content: 'اختر صورة'; font: 700 13px/1 var(--mx-font-ui); color: var(--mx-text); } body.mx-write #configuration-section .box-main-img { width: 100%; margin: 0 !important; } body.mx-write #configuration-section .box-main-img img { display: block; width: 100% !important; height: auto !important; max-height: 230px; object-fit: cover; border-radius: 14px; } body.mx-write #configuration-section .remove-img, body.mx-write #configuration-section .remove-img-edit { position: absolute !important; top: 24px !important; left: 24px !important; right: auto !important; display: none; place-items: center; width: 32px !important; height: 32px !important; border-radius: 50%; background: rgba(6, 22, 15, .55) !important; color: #fff !important; font: 700 13px/32px var(--mx-font-ui) !important; text-align: center; cursor: pointer; } body.mx-write #configuration-section .box-caption-img { margin-top: 10px !important; } body.mx-write #configuration-section .message-input-caption { display: block; width: 100%; height: auto !important; min-height: 0 !important; margin: 0; padding: 11px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2); font: 14px/1.5 var(--mx-font-ui) !important; color: var(--mx-text); resize: none; } body.mx-write #configuration-section .message-input-caption:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--mx-emerald); } body.mx-write #configuration-section .category-box { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: start; min-height: 0 !important; height: auto !important; } body.mx-write #configuration-section .category-box > p { margin: 4px 0 8px !important; font: 700 13px/1.4 var(--mx-font-ui) !important; color: var(--mx-text-2) !important; } body.mx-write #configuration-section .box-body { display: flex; flex-wrap: wrap; gap: 8px; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; } body.mx-write #configuration-section .box-body br { display: none; } body.mx-write #configuration-section .box-body label { position: relative; display: inline-flex; margin: 0 !important; cursor: pointer; } body.mx-write #configuration-section .box-body input { position: absolute; opacity: 0; width: 1px; height: 1px; } body.mx-write #configuration-section .box-body .checkmark { position: static !important; display: inline-flex !important; align-items: center; width: auto !important; height: 34px !important; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2); font: 700 13.5px/1 var(--mx-font-ui) !important; color: var(--mx-text-2) !important; transition: background-color .15s, color .15s; } body.mx-write #configuration-section .box-body .checkmark::after, body.mx-write #configuration-section .box-body .checkmark::before { display: none !important; } body.mx-write #configuration-section .box-body input:checked + .checkmark { background: var(--mx-text) !important; color: var(--mx-bg) !important; box-shadow: none; } body.mx-write #configuration-section .box-body input:focus-visible + .checkmark { box-shadow: 0 0 0 2px var(--mx-emerald); } .cx-wnote { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 !important; font: 12.5px/1.5 var(--mx-font-ui) !important; color: var(--mx-text-3) !important; } .cx-wnote .ic { width: 15px; height: 15px; flex: none; color: var(--mx-accent-text); } .cx-wnote a { color: var(--mx-accent-text) !important; text-decoration: underline; text-underline-offset: 3px; } body.mx-write #configuration-section .box-publish-button { display: grid !important; grid-template-columns: 1fr 1.4fr; gap: 10px; margin: 10px 0 0 !important; padding: 0 !important; } body.mx-write #configuration-section .box-publish-button button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; font: 700 15px/1 var(--mx-font-ui) !important; cursor: pointer; } body.mx-write #configuration-section #saveDraft { background: var(--mx-surface-2) !important; color: var(--mx-text) !important; box-shadow: inset 0 0 0 1px var(--mx-line) !important; } body.mx-write #configuration-section #saveButton { background: var(--mx-emerald) !important; color: #04210E !important; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important; } body.mx-write #configuration-section .box-publish-button img { display: none !important; } body.mx-write #configuration-section button.is-busy { opacity: .6; pointer-events: none; } body.mx-write #configuration-section .error-message-editor { margin: 6px 0 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 14px; background: rgba(194, 58, 58, .1) !important; color: var(--mx-danger) !important; font: 700 13px/1.6 var(--mx-font-ui) !important; } body.mx-write #configuration-section .error-message-editor a { color: inherit !important; text-decoration: underline; } @media (min-width: 768px) { body.mx-write #configuration-section { inset: 50% auto auto 50% !important; width: min(620px, calc(100% - 48px)) !important; max-height: 88dvh; padding: 22px 24px 24px !important; border-radius: 28px !important; transform: translate(-50%, -50%); box-shadow: 0 40px 90px -30px rgba(6, 22, 15, .5) !important; } body.mx-write #configuration-section.is-open { animation: mx-wdlg-in .35s var(--mx-ease) both; } .cx-wsheet-grip { display: none; } } @keyframes mx-wdlg-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.97); } } /* the published moment */ .cx-pub { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; color: #EFFAF2; isolation: isolate; overflow: hidden; font-family: var(--mx-font-ui); background: radial-gradient(120% 70% at 50% 0%, rgba(93, 188, 160, .5), transparent 60%), linear-gradient(170deg, #43907A, #0B4A3C 30%, #113428 66%, #0A2219); clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); animation: mx-pub-in .8s cubic-bezier(.65, 0, .35, 1) both; } .cx-pub .cx-light { width: min(150vw, 900px); aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -62%; } .cx-pub .cx-orb { z-index: -1; } .cx-pub__flame { position: relative; width: 104px; filter: drop-shadow(0 0 40px rgba(64, 212, 91, .5)); animation: mx-pub-flame 1s .25s var(--mx-ease) both; } .cx-pub h2 { margin: 6px 0 0; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(44px, 13vw, 72px); line-height: 1.05; color: #EFFAF2; animation: mx-pub-rise .6s .45s var(--mx-ease) both; } .cx-pub p { margin: 0; max-width: 22em; font-family: var(--mx-font-read); font-size: 20px; line-height: 1.5; color: rgba(239, 250, 242, .85); animation: mx-pub-rise .6s .55s var(--mx-ease) both; } .cx-pub__ctas { display: grid; gap: 10px; width: min(100%, 340px); margin-top: 14px; animation: mx-pub-rise .6s .65s var(--mx-ease) both; } .cx-pub__ctas .cx-btn { justify-content: center; } .cx-pub .cx-btn--glass { background: rgba(239, 250, 242, .12); color: #EFFAF2 !important; box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .25); } @keyframes mx-pub-in { from { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); } } @keyframes mx-pub-flame { from { opacity: 0; transform: scale(.6) translateY(20px); filter: brightness(2.2) blur(6px); } } @keyframes mx-pub-rise { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { .cx-pub, .cx-pub *, body.mx-write #configuration-section.is-open { animation: none !important; } } body.mx-write #configuration-section .close-box { right: auto !important; width: auto !important; } body.mx-write #configuration-section .upload-box, body.mx-write #configuration-section .box-main-img { height: auto !important; min-height: 0 !important; } body.mx-write #configuration-section .upload-box p { max-width: 46ch; } .cx-wbar { padding-inline: max(12px, calc((100% - 900px) / 2)); } body.mx-write #configuration-section .box-publish-button { display: flex !important; font-size: 0 !important; } body.mx-write #configuration-section #saveDraft { flex: 1 1 0; } body.mx-write #configuration-section #saveButton { flex: 1.4 1 0; } /* ===================================================================== Edit profile: the legacy form as a calm Claudad sheet ===================================================================== */ html.mx-pedit-open { overflow: hidden; } .cx-pedit-scrim { position: fixed; inset: 0; z-index: 1084; background: rgba(4, 14, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s ease; } html.mx-pedit-open .cx-pedit-scrim { opacity: 1; pointer-events: auto; } body.mx-author.mx-editing .container-profile-info { position: fixed; z-index: 1085; inset: auto 0 0 0; max-width: none; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--mx-bg); box-shadow: 0 -24px 60px -24px rgba(6, 22, 15, .45); animation: mx-wsheet-in .45s cubic-bezier(.32, .72, 0, 1) both; font-family: var(--mx-font-ui); color: var(--mx-text); } body.mx-author .container-profile-info > .container { max-width: none; padding: 0 !important; } .cx-pedit-h { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 2px; } .cx-pedit-grip { width: 42px; height: 5px; border-radius: 9px; background: var(--mx-line-2); } .cx-pedit-h h2 { margin: 6px 0 0; font-family: var(--mx-font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--mx-text); } .cx-pedit-x { position: absolute; top: 12px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--mx-surface-2); color: var(--mx-text); cursor: pointer; } .cx-pedit-x .ic { width: 18px; height: 18px; } body.mx-author .profile-details-form { display: grid !important; gap: 16px; margin: 16px 0 0 !important; } body.mx-author .profile-details-form > [class*="col-"] { flex: none; max-width: none; width: auto; padding: 0 !important; } body.mx-author .profile-details-form .profile-caption, body.mx-author .profile-details-form .follow-box, body.mx-author .profile-details-form .write-button, body.mx-author .profile-details-form .edit-loader { display: none !important; } body.mx-author .profile-details-form .container-profile-img { display: grid; justify-items: center; gap: 10px; margin: 0 auto; } body.mx-author .profile-details-form .box-profile-img { width: 96px !important; height: 96px !important; margin: 0 !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--mx-bg), 0 0 0 5px var(--mx-emerald); } body.mx-author .profile-details-form .box-profile-img img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; } body.mx-author .profile-details-form .take-img-box { position: static !important; display: inline-flex !important; align-items: center; width: auto !important; height: 32px !important; padding: 0 14px; border-radius: 12px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line-2); cursor: pointer; } body.mx-author .profile-details-form .take-img-box img { display: none !important; } body.mx-author .profile-details-form .take-img-box::before { content: 'غيّر الصورة'; font: 700 13px/1 var(--mx-font-ui); color: var(--mx-text); } body.mx-author .profile-details-form .box-description { display: grid; gap: 14px; margin: 0 !important; padding: 0 !important; background: transparent !important; } body.mx-author .profile-details-form .box-description > div { display: block !important; margin: 0 !important; } body.mx-author .profile-details-form .form-group { width: 100%; margin: 0 !important; } body.mx-author .profile-details-form .cx-lbl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--mx-text-2); text-align: start; } body.mx-author .profile-details-form .message-input { display: block; width: 100% !important; height: auto !important; margin: 0 !important; padding: 13px 15px !important; border: 0 !important; border-radius: 14px !important; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; font: 16px/1.5 var(--mx-font-ui) !important; color: var(--mx-text) !important; text-align: start !important; outline: none; } body.mx-author .profile-details-form .message-input-description { min-height: 130px; resize: vertical; font-family: var(--mx-font-read) !important; font-size: 19px !important; line-height: 1.6 !important; } body.mx-author .profile-details-form .message-input:focus { box-shadow: inset 0 0 0 2px var(--mx-emerald) !important; } body.mx-author .profile-details-form .invalid-feedback { font-size: 13px; font-weight: 700; color: var(--mx-danger); } body.mx-author .profile-details-form .profile-button { margin: 4px 0 0 !important; } body.mx-author .profile-details-form .profile-button > .col { display: grid !important; gap: 10px; padding: 0 !important; } body.mx-author .profile-details-form button.save { display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--mx-emerald) !important; color: #04210E !important; font: 700 16px/1 var(--mx-font-ui) !important; box-shadow: 0 12px 28px -12px rgba(43, 182, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important; cursor: pointer; } body.mx-author .profile-details-form button.save.is-busy { opacity: .6; pointer-events: none; } .cx-pedit-msg { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; text-align: center; } .cx-pedit-msg[hidden] { display: none; } .cx-pedit-msg.is-ok { background: rgba(43, 182, 90, .12); color: var(--mx-accent-text); } .cx-pedit-msg.is-bad { background: rgba(194, 58, 58, .1); color: var(--mx-danger); } @media (min-width: 768px) { body.mx-author.mx-editing .container-profile-info { inset: 50% auto auto 50%; width: min(520px, calc(100% - 48px)); max-height: 88dvh; padding: 22px 24px 24px; border-radius: 28px; transform: translate(-50%, -50%); animation: mx-wdlg-in .35s var(--mx-ease) both; box-shadow: 0 40px 90px -30px rgba(6, 22, 15, .5); } .cx-pedit-grip { display: none; } .cx-pedit-x { top: -6px; } } body.mx-author .profile-details-form .box-description > .follow-box { display: none !important; } body.mx-author .profile-details-form .file-upload { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; overflow: hidden; pointer-events: none; } body.mx-author .profile-details-form .profile-button > .col { grid-template-columns: 1fr; justify-content: stretch !important; } /* Mirdad's own heart (an anatomical one), red when chosen, as on mirdad.app */ .cx-acts .heart-reaction.active { color: #E20303; } .cx-pick--heart .active ~ .cx-pick__ic { background: #E20303; } /* thought mode: a slim reminder that a photo can go with it */ .cx-cmp__addpic { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); color: var(--mx-text-2); font: 700 13.5px/1 var(--mx-font-ui); text-align: start; cursor: pointer; transition: background-color .2s, transform .16s var(--mx-ease); } .cx-cmp__addpic[hidden] { display: none; } .cx-cmp__addpic span { flex: 1; } .cx-cmp .cx-cmp__addpic .ic { width: 18px; height: 18px; color: var(--mx-accent-text); } .cx-cmp .cx-cmp__addpic .ic:last-child { width: 16px; height: 16px; color: var(--mx-text-3); } .cx-cmp__addpic:active { transform: scale(.98); } @media (hover: hover) and (pointer: fine) { .cx-cmp__addpic:hover { background: var(--mx-surface-2); } } /* ===================================================================== Comments drawer, Claudad style: a quiet list, small actions, the writing pill pinned at the bottom. Every legacy hook stays in place. ===================================================================== */ body.mx-article #comment-box, body.mx-article #child-comment-box { background: var(--mx-bg) !important; font-family: var(--mx-font-ui); color: var(--mx-text); } body.mx-article #comment-box > .container, body.mx-article #child-comment-box > .container { max-width: none; min-height: 100%; display: flex; flex-direction: column; padding: 0 16px !important; } body.mx-article #comment-box > .container > .row, body.mx-article #child-comment-box > .container > .row { margin: 0; } body.mx-article #comment-box > .container > .row:last-child { flex: 1; } body.mx-article #comment-box > .container > .row > .col, body.mx-article #child-comment-box > .container > .row > .col { padding: 0 !important; } body.mx-article #comment-box > .container > .row:last-child > .col { display: flex; flex-direction: column; min-height: 100%; } /* head */ body.mx-article #comment-box .caption-responses, body.mx-article #child-comment-box .caption-responses { position: sticky; top: 0; z-index: 3; display: flex !important; align-items: center; justify-content: space-between; margin: 0 -16px; padding: 14px 16px 12px !important; background: var(--mx-bg); border-bottom: 1px solid var(--mx-line); font-family: var(--mx-font-ui) !important; font-size: 16px !important; } body.mx-article .caption-responses label { margin: 0; font-family: var(--mx-font-display); font-size: 22px; font-weight: 400; color: var(--mx-text); } body.mx-article .caption-responses label + label { margin-inline-start: 6px; font-family: var(--mx-font-ui); font-size: 15px; color: var(--mx-text-3); } body.mx-article #comment-box .close-icon, body.mx-article #child-comment-box .close-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mx-surface-2) !important; color: var(--mx-text); font-size: 0 !important; cursor: pointer; } body.mx-article #comment-box .close-icon::before, body.mx-article #child-comment-box .close-icon::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat; } body.mx-article #child-comment-box .close-icon img { display: none !important; } body.mx-article #child-comment-box .close-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E"); } /* the list */ body.mx-article #comment-box .users-comment { order: 1; padding-bottom: 8px; } body.mx-article #comment-box .users-comment .sep-line, body.mx-article #child-comment-box .sep-line { display: none !important; } body.mx-article #comment-box .comment-item, body.mx-article #child-comment-box .comment-item { padding: 14px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--mx-line) !important; background: transparent !important; box-shadow: none !important; } body.mx-article .comment-item .comment-info { gap: 10px; align-items: center !important; } body.mx-article .comment-item .container-box-writer-img, body.mx-article .comment-item .box-writer-img { width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; flex: none; } body.mx-article .comment-item .box-writer-img img { width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; border: 0 !important; } body.mx-article .comment-item .box-name { flex: 1; min-width: 0; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 !important; padding: 0 !important; } body.mx-article .comment-item .box-name > .d-flex { display: contents !important; } body.mx-article .comment-item .box-name .name { order: 1; font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 15px !important; color: var(--mx-text) !important; } body.mx-article .comment-item .box-name .date { order: 2; margin: 0 !important; font-family: var(--mx-font-ui) !important; font-size: 12.5px !important; color: var(--mx-text-3) !important; } body.mx-article .comment-item .more-options { order: 3; align-self: center; width: 28px !important; height: 28px !important; margin: 0 0 0 0 !important; margin-inline-start: auto !important; padding: 0 !important; border-radius: 50%; background: var(--mx-text-3) !important; cursor: pointer; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z'/%3E%3C/svg%3E") center / 20px no-repeat; } body.mx-article .comment-item .comment-description { margin: 4px 0 0 !important; margin-inline-start: 46px !important; padding: 0 !important; font-family: var(--mx-font-read) !important; font-size: 19px !important; line-height: 1.55 !important; color: var(--mx-text) !important; overflow-wrap: anywhere; } body.mx-article .comment-item .comment-description b { font-weight: 600; } body.mx-article .comment-item .comment-description a, body.mx-article .comment-item .read-more { color: var(--mx-accent-text) !important; font-family: var(--mx-font-ui); font-size: 14px; font-weight: 700; } /* small actions under each comment */ body.mx-article .comment-item .captions-story { margin: 2px 0 0 !important; margin-inline-start: 38px !important; padding: 0 !important; background: transparent !important; } body.mx-article .comment-item .captions-story .reaction { margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body.mx-article .comment-item .captions-story .reaction > .col { display: flex !important; align-items: center; gap: 2px; padding: 0 !important; color: var(--mx-text-3); font-size: 0; } body.mx-article .comment-item .brain-comment-reaction, body.mx-article .comment-item .heart-comment-reaction, body.mx-article .comment-item .comment-reaction-child { width: 32px !important; height: 32px !important; margin: 0 !important; flex: none; border-radius: 50%; background: currentColor !important; filter: none !important; cursor: pointer; -webkit-mask: var(--cx-glyph) center / 17px no-repeat; mask: var(--cx-glyph) center / 17px no-repeat; } body.mx-article .comment-item .brain-comment-reaction { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z'/%3E%3C/svg%3E"); } body.mx-article .comment-item .brain-comment-reaction.active { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M212,76V72a44,44,0,0,0-74.86-31.31,3.93,3.93,0,0,0-1.14,2.8v88.72a4,4,0,0,0,6.2,3.33A47.67,47.67,0,0,1,167.68,128a8.18,8.18,0,0,1,8.31,7.58,8,8,0,0,1-8,8.42,32,32,0,0,0-32,32v33.88a4,4,0,0,0,1.49,3.12,47.92,47.92,0,0,0,74.21-17.16,4,4,0,0,0-4.49-5.56A68.06,68.06,0,0,1,192,192h-7.73a8.18,8.18,0,0,1-8.25-7.47,8,8,0,0,1,8-8.53h8a51.6,51.6,0,0,0,24-5.88v0A52,52,0,0,0,212,76Zm-12,36h-4a36,36,0,0,1-36-36V72a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4a8,8,0,0,1,0,16ZM88,28A44.05,44.05,0,0,0,44,72v4a52,52,0,0,0-4,94.12h0A51.6,51.6,0,0,0,64,176h7.73A8.18,8.18,0,0,1,80,183.47,8,8,0,0,1,72,192H64a67.48,67.48,0,0,1-15.21-1.73,4,4,0,0,0-4.5,5.55A47.93,47.93,0,0,0,118.51,213a4,4,0,0,0,1.49-3.12V176a32,32,0,0,0-32-32,8,8,0,0,1-8-8.42A8.18,8.18,0,0,1,88.32,128a47.67,47.67,0,0,1,25.48,7.54,4,4,0,0,0,6.2-3.33V43.49a4,4,0,0,0-1.14-2.81A43.85,43.85,0,0,0,88,28Zm8,48a36,36,0,0,1-36,36H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,76V72a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); color: var(--mx-accent-text); } body.mx-article .comment-item .heart-comment-reaction { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 25%22%3E%3Cpath d='M8.229,3.062c0.647,0.328,1.237,0.658,1.854,0.923c0.204,0.088,0.491,0.052,0.722-0.004 c1.163-0.283,2.319-0.594,3.478-0.891c0.614-0.157,1.122,0.048,1.365,0.61c0.291,0.67,0.569,1.373,0.674,2.089 c0.134,0.915-0.117,1.138-1.041,1.299c-0.189,0.033-0.378,0.065-0.611,0.105c0.045,0.091,0.055,0.161,0.094,0.184 c1.844,1.102,2.805,2.81,3.326,4.825c0.771,2.984,0.942,5.981,0.22,9.001c-0.046,0.191-0.102,0.379-0.166,0.565 c-0.823,2.368-2.082,3.215-4.541,2.75C9.481,23.74,5.998,21.77,3.289,18.529c-1.024-1.225-1.589-2.644-1.569-4.271 c0.004-0.299-0.046-0.612-0.141-0.896c-0.612-1.827-0.619-3.658,0.037-5.459c0.88-2.416,1.83-4.806,2.738-7.213 C4.535,0.209,4.86,0.009,5.355,0.028c1.039,0.039,1.958,0.403,2.763,1.05c0.39,0.313,0.569,0.704,0.358,1.213 C8.376,2.53,8.315,2.786,8.229,3.062z M13.971,4.066c-2.466,0.19-5.177,1.593-6.765,3.437c-0.262,0.304-0.69,0.54-1.084,0.639 C5.483,8.303,5.315,8.1,5.362,7.403C4.293,7.797,3.631,8.561,3.23,9.576c-0.556,1.408-0.596,2.892-0.65,4.38 c-0.06,1.667,0.487,3.097,1.583,4.313c2.631,2.922,5.899,4.75,9.76,5.458c1.856,0.341,2.802-0.243,3.361-2.076 c1.099-3.6,0.72-7.166-0.465-10.677c-0.519-1.539-1.632-2.551-3.061-3.247c-0.613-0.298-2.336,0.701-2.365,1.373 c-0.004,0.1,0.051,0.211,0.102,0.304c0.216,0.388,0.2,0.667-0.311,0.76c-0.091,0.017-0.204,0.071-0.252,0.143 c-0.418,0.63-0.282,2.179,0.293,2.692c0.679,0.606,1.411,1.152,2.129,1.713c0.688,0.538,1.395,1.051,2.073,1.6 c0.124,0.101,0.251,0.388,0.196,0.477c-0.088,0.141-0.323,0.199-0.505,0.27c-0.117,0.046-0.268,0.022-0.372,0.083 c-0.456,0.269-0.789,0.123-0.733-0.412c0.067-0.639-0.338-0.814-0.767-1.06c-0.105,0.775-0.222,1.505-0.298,2.238 c-0.076,0.733-0.226,1.473,0.184,2.179c0.061,0.105-0.056,0.45-0.153,0.479c-0.167,0.051-0.498,0.002-0.558-0.112 c-0.188-0.356-0.392-0.763-0.389-1.149c0.006-0.869,0.109-1.74,0.216-2.604c0.171-1.376-0.185-2.111-1.376-2.709 c-0.062,0.211-0.111,0.424-0.187,0.628c-0.286,0.762-0.71,1.473-0.409,2.37c0.134,0.4-0.295,0.609-0.677,0.377 c-0.098-0.059-0.192-0.151-0.297-0.166c-0.225-0.032-0.456-0.024-0.684-0.032c0.085-0.267,0.118-0.567,0.263-0.796 c0.875-1.39,1.652-2.789,0.848-4.563c-0.21,0.234-0.377,0.495-0.612,0.658c-0.158,0.11-0.412,0.083-0.623,0.117 c-0.026-0.197-0.146-0.466-0.061-0.578c0.289-0.376,0.666-0.682,0.979-1.042c0.25-0.286,0.581-0.583,0.659-0.924 c0.438-1.908,1.734-2.904,3.493-3.449c0.362-0.112,0.732-0.201,1.048-0.287C14.39,5.534,14.188,4.827,13.971,4.066z M4.893,1.612 C3.886,4.364,2.579,7.019,2.071,9.961c0.644-1.979,1.901-3.35,3.975-3.641c1.381-0.194,2.238-1.148,3.469-1.775 C8.95,4.297,8.503,4.1,8.003,3.88C7.977,4.133,7.951,4.282,7.949,4.43C7.943,4.77,7.94,5.174,7.484,5.102 c-0.161-0.026-0.38-0.459-0.362-0.689c0.049-0.618,0.212-1.228,0.323-1.808C6.626,2.286,5.801,1.965,4.893,1.612z M7.288,1.671 C7.316,1.6,7.344,1.528,7.372,1.457C6.824,1.246,6.277,1.036,5.73,0.825C5.705,0.891,5.679,0.957,5.654,1.023 C6.198,1.239,6.743,1.455,7.288,1.671z M15.301,5.804c0.079-0.021,0.159-0.041,0.238-0.062c-0.158-0.494-0.316-0.988-0.474-1.482 c-0.074,0.023-0.148,0.047-0.221,0.07C14.996,4.821,15.149,5.313,15.301,5.804z'/%3E%3C/svg%3E"); } body.mx-article .comment-item .heart-comment-reaction.active { color: #E20303; } body.mx-article .comment-item .comment-reaction-child { --cx-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E"); } body.mx-article .comment-item .brain-comment-reaction.active, body.mx-article .comment-item .heart-comment-reaction.active { animation: mx-pop .42s var(--mx-ease); } body.mx-article .comment-item .captions-story .brain-reaction-nb, body.mx-article .comment-item .captions-story .heart-reaction-nb, body.mx-article .comment-item .comment-childs-nb { min-width: 1ch; margin: 0 6px 0 0 !important; margin-inline: -4px 10px !important; font-family: var(--mx-font-ui) !important; font-size: 13px !important; color: var(--mx-text-3) !important; } @media (hover: hover) and (pointer: fine) { body.mx-article .comment-item .captions-story .reaction > .col > div:hover { color: var(--mx-text); } } /* replies: the parent comment as a soft card */ body.mx-article #child-comment-box .parent-comment .comment-item { margin: 12px 0 4px !important; padding: 14px !important; border: 0 !important; border-radius: 18px; background: var(--mx-surface) !important; } /* writing: a pill with a round send, pinned at the bottom */ body.mx-article #comment-box .comment-form-box, body.mx-article #child-comment-box .comment-form-box { order: 2; position: sticky; bottom: 0; z-index: 3; margin: auto -16px 0 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 1px solid var(--mx-line) !important; border-radius: 0 !important; background: var(--mx-bg) !important; box-shadow: none !important; } body.mx-article .comment-form-box .comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; } body.mx-article .comment-form-box .article-info { display: none !important; } body.mx-article .comment-form-box .validation-box { margin: 0 !important; } body.mx-article .comment-form-box textarea, body.mx-article .comment-form-box .message-input { display: block; width: 100%; height: 46px; min-height: 46px !important; max-height: 140px; margin: 0 !important; padding: 10px 16px !important; resize: none; line-height: 1.4 !important; background: var(--mx-surface) !important; } body.mx-article .comment-form-box .comment-form > .row { margin: 0 !important; } body.mx-article .comment-form-box .comment-button { display: flex !important; align-items: center; gap: 6px; padding: 0 !important; } body.mx-article .comment-form-box .comment-button .send { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; background: var(--mx-emerald) !important; color: #04210E !important; box-shadow: 0 10px 22px -12px rgba(43, 182, 90, .8) !important; order: 2; } body.mx-article .comment-form-box .comment-button .send::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z'/%3E%3C/svg%3E") center / contain no-repeat; } body.mx-article .comment-form-box .comment-button .send img { display: none !important; } body.mx-article .comment-form-box .comment-button .cancel { order: 1; height: 46px !important; padding: 0 12px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--mx-text-3) !important; box-shadow: none !important; font: 700 13px/1 var(--mx-font-ui) !important; } body.mx-article .comment-form-box .comment-form:has(textarea:placeholder-shown) .cancel { display: none !important; } body.mx-article .comment-form-box .invalid-feedback { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--mx-danger); } /* the delete / report menu */ body.mx-article .popover { border: 0 !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17, 52, 40, .08), 0 16px 40px -16px rgba(6, 22, 15, .4) !important; font-family: var(--mx-font-ui) !important; background: var(--mx-surface) !important; } body.mx-article .popover .arrow { display: none !important; } body.mx-article .popover-body { padding: 4px !important; } body.mx-article .custom-popup ul { margin: 0; padding: 0; list-style: none; } body.mx-article .custom-popup li span { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--mx-text); cursor: pointer; white-space: nowrap; } body.mx-article .custom-popup li span:hover { background: var(--mx-surface-2); } body.mx-article .custom-popup .delete-comment { color: var(--mx-danger); } body.mx-article #comment-box, body.mx-article #child-comment-box { padding: 0 !important; } body.mx-article #comment-box .comment-item .captions-story .reaction > .col, body.mx-article #child-comment-box .comment-item .captions-story .reaction > .col { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } body.mx-article #comment-box .comment-form-box textarea, body.mx-article #child-comment-box .comment-form-box textarea { height: 46px !important; } /* replies panel: same layout as the comments list, reply pill pinned at the bottom */ body.mx-article #child-comment-box > .container > .row:last-child { flex: 1; } body.mx-article #child-comment-box > .container > .row:last-child > .col { display: flex; flex-direction: column; min-height: 100%; } body.mx-article #child-comment-box .users-comment { order: 1; padding-bottom: 8px; } body.mx-article .comment-form-box form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; } body.mx-article .comment-form-box .validation-box-response { margin: 0 !important; } body.mx-article .comment-form-box form > .row { margin: 0 !important; } body.mx-article .comment-form-box form:has(textarea:placeholder-shown) .cancel { display: none !important; } /* قائمتي has no photo header: the top bar is solid and the page starts under it */ @media (min-width: 1024px) { body.mx-readlist .cx-topnav { margin-bottom: 0; color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } body.mx-readlist .cx-bmhead { padding-top: 28px; } } /* ابحث: grouped results, quiet chips, clean on phones */ .cx-find-sum { margin: 14px 2px 0; font-size: 13px; color: var(--mx-text-3); } .cx-find-sum:empty { display: none; } .cx-main .cx-find-sec { margin-top: 22px; } .cx-main .cx-find-sec .cx-sec-h { margin-bottom: 10px; } .cx-main .cx-find-sec .cx-sec-h h2 { font-size: 18px; } .cx-find-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cx-find-chips .cx-chip { text-decoration: none !important; } .cx-wrow--link { color: var(--mx-text) !important; text-decoration: none !important; } .cx-wrow--link > .ic:last-child { width: 16px; height: 16px; color: var(--mx-text-3); flex: none; } .cx-wrow--link b { color: var(--mx-text); } .cx-main .cx-empty-state.cx-find-sec { margin-top: 26px; } @media (max-width: 1023px) { body.mx-explore .cx-screen-h { padding-top: 6px; } body.mx-explore .cx-search { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 5; } body.mx-explore .cx-search input { height: 50px; font-size: 16px; box-shadow: inset 0 0 0 1px var(--mx-line-2), 0 8px 20px -14px rgba(17, 52, 40, .3); } } /* disabled buttons, everywhere: a calm neutral surface, not a faded accent */ .cx-btn[disabled], .cx-btn:disabled, .cx-btn[aria-disabled="true"], body.mx-generic .cx-page button[type="submit"].cx-btn--accent:disabled, body.mx-write #configuration-section .box-publish-button button:disabled, body.mx-article .comment-form-box .comment-button .send:disabled { opacity: 1 !important; background: var(--mx-surface-2) !important; color: var(--mx-text-3) !important; box-shadow: inset 0 0 0 1px var(--mx-line) !important; cursor: not-allowed; transform: none !important; } .cx-btn { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .16s var(--mx-ease); } /* شارك: the send button is a full-width bar at the bottom, as on Facebook */ .cx-cmp__head { grid-template-columns: 36px 1fr 36px; } .cx-cmp__hsp { width: 36px; } .cx-cmp__send[disabled] { opacity: 1; } .cx-cmp .cx-cmp__send { position: sticky; bottom: 0; z-index: 2; width: 100%; height: 52px; justify-content: center; gap: 8px; margin-top: 2px; font-size: 16px; } .cx-cmp .cx-cmp__send .ic { width: 19px; height: 19px; } /* rail: about, help and contact always in reach, just above the profile */ @media (min-width: 1024px) { .cx-rail__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; padding-inline: 12px; } .cx-rail__links a { font-family: var(--mx-font-ui); font-size: 12.5px; color: var(--mx-text-3) !important; text-decoration: none !important; } .cx-rail__links a:hover { color: var(--mx-text) !important; } .cx-rail__links + .cx-rail__foot { margin-top: 0; } } /* ===================================================================== Buttons: Forest. One deep brand green with light text, no glow, for every primary action; light buttons on green panels; calm grey when disabled. ===================================================================== */ :root { --mx-btn: #113428; --mx-btn-hover: #0B4A3C; --mx-btn-ink: #EFFAF2; } .cx-btn--accent, .cx-follow:not(.active), .cx-msheet__q--primary, .mx-btn--primary, .cx-rail__write, body.mx-on .header .start-button, body.mx-on .header-mobile .start-button, body.mx-on .header .write-button, body.mx-on .header .publish-button, body.mx-generic .folow-status:not(.active), body.mx-generic .box-written, body.mx-generic .cx-page button[type="submit"].cx-btn--accent, body.mx-write #configuration-section #saveButton, body.mx-author .profile-details-form button.save, body.mx-article .comment-form-box .comment-button .send, body.mx-article .comment-button button.send { background: var(--mx-btn) !important; color: var(--mx-btn-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; filter: none !important; } .cx-btn--accent .ic, .cx-rail__write .ic, .cx-msheet__q--primary .ic { color: currentColor; } @media (hover: hover) and (pointer: fine) { .cx-btn--accent:not(:disabled):hover, .cx-follow:not(.active):hover, .cx-rail__write:hover, .cx-msheet__q--primary:hover, body.mx-write #configuration-section #saveButton:hover, body.mx-author .profile-details-form button.save:hover, body.mx-article .comment-form-box .comment-button .send:not(:disabled):hover { background: var(--mx-btn-hover) !important; } } /* following: quiet, so the call to follow stands out */ .cx-follow.active { background: var(--mx-surface-2) !important; color: var(--mx-text) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; } /* on green panels the button turns light */ .cx-pub .cx-btn--accent, .cx-ctaband .cx-btn--accent, .cx-hero .cx-btn--accent, .cx-cat-hero .cx-btn--accent, .cx-cmp__done .cx-btn--accent.on-green { background: #EFFAF2 !important; color: var(--mx-forest) !important; box-shadow: none !important; } /* disabled stays calm grey, whatever the style above */ .cx-btn[disabled], .cx-btn:disabled, .cx-btn[aria-disabled="true"], body.mx-generic .cx-page button[type="submit"].cx-btn--accent:disabled, body.mx-write #configuration-section .box-publish-button button:disabled, body.mx-article .comment-form-box .comment-button .send:disabled { background: var(--mx-surface-2) !important; color: var(--mx-text-3) !important; box-shadow: inset 0 0 0 1px var(--mx-line) !important; } /* the old desktop header never shows on Arabic pages: Claudad's top bar from 1024px, the slim phone header below */ body.mx-on header.header:not(.header-mobile) { display: none !important; } @media (max-width: 1023px) { body.mx-on:not(.mx-catpage):not(.mx-article):not(.mx-author):not(.mx-write) .header-mobile { display: block !important; } } @media (min-width: 1024px) { body.mx-generic .cx-topnav { margin-bottom: 0; color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } body.mx-generic .header-mobile { display: none !important; } } /* follow on the dark cover heroes (topics, writers): a light button with forest text */ body.mx-on .cx-cat-actions .cx-follow, body.mx-on .cx-cat-actions .cx-follow.folow-status, body.mx-on .cx-prof__media ~ * .cx-follow:not(.active) { background: #EFFAF2 !important; color: var(--mx-forest) !important; border: 0 !important; box-shadow: none !important; } body.mx-on .cx-cat-actions .cx-follow.active { background: rgba(239, 250, 242, .14) !important; color: #EFFAF2 !important; box-shadow: inset 0 0 0 1px rgba(239, 250, 242, .35) !important; } /* ===================================================================== اهتماماتك (interests): the tabs are a switch, not two follow buttons; sub-topics as compact rows; calmer headings on phones. ===================================================================== */ body.mx-generic .tabs-buttons { margin: 18px 0 6px !important; } body.mx-generic .tabs-buttons > .col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 440px; margin-inline: auto; padding: 4px !important; border-radius: 14px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); } body.mx-generic .tabs-buttons .folow-status, body.mx-generic .tabs-buttons .folow-status:not(.active) { width: 100%; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--mx-text-2) !important; box-shadow: none !important; font: 700 14.5px/1 var(--mx-font-ui) !important; cursor: pointer; } body.mx-generic .tabs-buttons .folow-status.active { background: var(--mx-surface) !important; color: var(--mx-text) !important; box-shadow: 0 1px 3px rgba(17, 52, 40, .16) !important; cursor: default; } /* page headings: a size that fits a phone */ body.mx-generic .box-head-common .title, body.mx-generic .more-box { font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.25 !important; } body.mx-generic .box-head-common, body.mx-generic .more-box { margin: 26px 0 14px !important; } /* follow buttons in lists: not following = Forest, following = quiet */ body.mx-generic .folowed-peoples .folow-status.active, body.mx-generic .suggestions-peoples .folow-status.active, body.mx-generic .topic-item .folow-status.active, body.mx-generic .common-following-peoples .folow-status.active { background: var(--mx-surface-2) !important; color: var(--mx-text) !important; box-shadow: inset 0 0 0 1px var(--mx-line-2) !important; } /* people: round avatars without a clipped ring */ body.mx-generic .suggestions-peoples .box-profile-img, body.mx-generic .folowed-peoples .box-profile-img { width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%; overflow: hidden; box-shadow: none !important; background: var(--mx-surface-2); } body.mx-generic .suggestions-peoples .box-profile-img img, body.mx-generic .folowed-peoples .box-profile-img img { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 50%; object-fit: cover; } /* topic groups: a clean section title */ body.mx-generic .topic-item { margin: 0 !important; } body.mx-generic .topic-item .main-category { margin: 26px 0 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.mx-generic .topic-item .main-category a { display: inline-block; padding: 0 !important; border: 0 !important; font-family: var(--mx-font-display) !important; font-size: 20px !important; line-height: 1.3; color: var(--mx-text) !important; text-decoration: none !important; } body.mx-generic .topic-item .main-category::after, body.mx-generic .topic-item .main-category a::after { display: none !important; } /* sub-topics: compact rows, small cover, name, follow, two lines of description */ body.mx-generic .topic-item > [class*="col-"] { margin-bottom: 10px; } body.mx-generic .topic-item .item { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img info" "img desc"; column-gap: 12px; row-gap: 2px; align-items: start; height: auto !important; min-height: 0 !important; padding: 12px !important; border-radius: 18px; } body.mx-generic .topic-item .item .box-img { grid-area: img; width: 64px !important; height: 64px !important; aspect-ratio: 1; margin: 0 !important; border-radius: 14px !important; overflow: hidden; } body.mx-generic .topic-item .item .box-img img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 14px !important; } body.mx-generic .topic-item .item .box-info { grid-area: info; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 !important; } body.mx-generic .topic-item .item .name-category, body.mx-generic .topic-item .item .name-category a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mx-font-ui) !important; font-weight: 700; font-size: 16px !important; color: var(--mx-text) !important; } body.mx-generic .topic-item .item .folow-status { flex: none; height: 32px !important; min-height: 0 !important; padding: 0 14px !important; font-size: 13px !important; } body.mx-generic .topic-item .item .description { grid-area: desc; margin: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important; font-family: var(--mx-font-read) !important; font-size: 16px !important; line-height: 1.45 !important; color: var(--mx-text-2) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.mx-generic .topic-item .item .description:empty { display: none !important; } /* dark: cards are lifted a step and drawn with a thin light hairline, since shadows vanish on a dark page */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.mx-on .cx-acard, html:not([data-theme="light"]) body.mx-on .cx-bm, html:not([data-theme="light"]) body.mx-on .cx-chan__row, html:not([data-theme="light"]) body.mx-on .cx-cmp__drop, html:not([data-theme="light"]) body.mx-on .cx-cmp__addpic, html:not([data-theme="light"]) body.mx-on .cx-empty, html:not([data-theme="light"]) body.mx-on .cx-empty-state, html:not([data-theme="light"]) body.mx-on .cx-mini-list, html:not([data-theme="light"]) body.mx-on .cx-msheet__group, html:not([data-theme="light"]) body.mx-on .cx-msheet__me, html:not([data-theme="light"]) body.mx-on .cx-msheet__q, html:not([data-theme="light"]) body.mx-on .cx-pick, html:not([data-theme="light"]) body.mx-on .cx-post, html:not([data-theme="light"]) body.mx-on .cx-qa, html:not([data-theme="light"]) body.mx-on .cx-rail__foot, html:not([data-theme="light"]) body.mx-on .cx-sig, html:not([data-theme="light"]) body.mx-on .cx-tr, html:not([data-theme="light"]) body.mx-on .cx-wc, html:not([data-theme="light"]) body.mx-on .cx-wprev, html:not([data-theme="light"]) body.mx-on .cx-formcard, html:not([data-theme="light"]) body.mx-on .cx-next, html:not([data-theme="light"]) body.mx-on .cx-wrow, html:not([data-theme="light"]) body.mx-on .cx-r-photo, html:not([data-theme="light"]) body.mx-generic .item, html:not([data-theme="light"]) body.mx-generic .card, html:not([data-theme="light"]) body.mx-generic .box-item, html:not([data-theme="light"]) body.mx-generic .notifications-items, html:not([data-theme="light"]) body.mx-generic .container-item > .item, html:not([data-theme="light"]) body.mx-generic .suggestions-peoples .item, html:not([data-theme="light"]) body.mx-generic .topic-item .item, html:not([data-theme="light"]) body.mx-on .reviews-cards .item, html:not([data-theme="light"]) body.mx-on .owl-reviews .item, html:not([data-theme="light"]) body.mx-on .subjects-section .row.item, html:not([data-theme="light"]) body.mx-on .owl-featured-articles .box-article, html:not([data-theme="light"]) body.mx-category .owl-category .item, html:not([data-theme="light"]) body.mx-article #child-comment-box .parent-comment .comment-item, html:not([data-theme="light"]) body.mx-article .popover, html:not([data-theme="light"]) body.mx-on .animated-options-menu, html:not([data-theme="light"]) body.mx-author.mx-editing .container-profile-info, html:not([data-theme="light"]) body.mx-write #configuration-section .upload-box, html:not([data-theme="light"]) body.mx-write .ck.ck-editor__top .ck-toolbar, html:not([data-theme="light"]) body.mx-on .cx-cmp__sheet, html:not([data-theme="light"]) body.mx-on .cx-gate__sheet, html:not([data-theme="light"]) body.mx-write #configuration-section, html:not([data-theme="light"]) body.mx-on .cx-msheet { outline: 1px solid var(--mx-card-edge); outline-offset: -1px; } } html[data-theme="dark"] body.mx-on .cx-acard, html[data-theme="dark"] body.mx-on .cx-bm, html[data-theme="dark"] body.mx-on .cx-chan__row, html[data-theme="dark"] body.mx-on .cx-cmp__drop, html[data-theme="dark"] body.mx-on .cx-cmp__addpic, html[data-theme="dark"] body.mx-on .cx-empty, html[data-theme="dark"] body.mx-on .cx-empty-state, html[data-theme="dark"] body.mx-on .cx-mini-list, html[data-theme="dark"] body.mx-on .cx-msheet__group, html[data-theme="dark"] body.mx-on .cx-msheet__me, html[data-theme="dark"] body.mx-on .cx-msheet__q, html[data-theme="dark"] body.mx-on .cx-pick, html[data-theme="dark"] body.mx-on .cx-post, html[data-theme="dark"] body.mx-on .cx-qa, html[data-theme="dark"] body.mx-on .cx-rail__foot, html[data-theme="dark"] body.mx-on .cx-sig, html[data-theme="dark"] body.mx-on .cx-tr, html[data-theme="dark"] body.mx-on .cx-wc, html[data-theme="dark"] body.mx-on .cx-wprev, html[data-theme="dark"] body.mx-on .cx-formcard, html[data-theme="dark"] body.mx-on .cx-next, html[data-theme="dark"] body.mx-on .cx-wrow, html[data-theme="dark"] body.mx-on .cx-r-photo, html[data-theme="dark"] body.mx-generic .item, html[data-theme="dark"] body.mx-generic .card, html[data-theme="dark"] body.mx-generic .box-item, html[data-theme="dark"] body.mx-generic .notifications-items, html[data-theme="dark"] body.mx-generic .container-item > .item, html[data-theme="dark"] body.mx-generic .suggestions-peoples .item, html[data-theme="dark"] body.mx-generic .topic-item .item, html[data-theme="dark"] body.mx-on .reviews-cards .item, html[data-theme="dark"] body.mx-on .owl-reviews .item, html[data-theme="dark"] body.mx-on .subjects-section .row.item, html[data-theme="dark"] body.mx-on .owl-featured-articles .box-article, html[data-theme="dark"] body.mx-category .owl-category .item, html[data-theme="dark"] body.mx-article #child-comment-box .parent-comment .comment-item, html[data-theme="dark"] body.mx-article .popover, html[data-theme="dark"] body.mx-on .animated-options-menu, html[data-theme="dark"] body.mx-author.mx-editing .container-profile-info, html[data-theme="dark"] body.mx-write #configuration-section .upload-box, html[data-theme="dark"] body.mx-write .ck.ck-editor__top .ck-toolbar, html[data-theme="dark"] body.mx-on .cx-cmp__sheet, html[data-theme="dark"] body.mx-on .cx-gate__sheet, html[data-theme="dark"] body.mx-write #configuration-section, html[data-theme="dark"] body.mx-on .cx-msheet { outline: 1px solid var(--mx-card-edge); outline-offset: -1px; } /* المظهر switch: light, dark, follow the device */ .cx-theme { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); font-family: var(--mx-font-ui); } .cx-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--mx-text-2); font: 700 13px/1 var(--mx-font-ui); cursor: pointer; transition: background-color .2s, color .2s; } .cx-theme button .ic { width: 16px; height: 16px; } .cx-theme button[aria-checked="true"] { background: var(--mx-surface); color: var(--mx-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); } .cx-theme--sm button { height: 30px; padding: 0 10px; font-size: 12.5px; } .cx-msheet__theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--mx-surface); font-family: var(--mx-font-ui); font-size: 15px; font-weight: 700; color: var(--mx-text); } .cx-msheet__theme > span { display: inline-flex; align-items: center; gap: 8px; } .cx-msheet__theme > span .ic { width: 20px; height: 20px; color: var(--mx-text-2); } .cx-prof__theme { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; font-family: var(--mx-font-ui); font-size: 13px; color: var(--mx-text-3); } body.mx-on .switch-field { display: none !important; } /* keyboard users always see where they are */ body.mx-on :focus-visible { outline: 2px solid var(--mx-emerald) !important; outline-offset: 2px !important; } body.mx-on input:focus-visible, body.mx-on textarea:focus-visible { outline-offset: 0 !important; } /* ===================================================================== Comments as a bottom sheet (the Instagram / Facebook pattern): it rises from below over a dimmed page, a grab handle and a centred title on top, the list scrolls, and the writing pill stays pinned above the keyboard. The article's action bar steps aside while it is open. ===================================================================== */ body.mx-article #comment-box, body.mx-article #child-comment-box { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 640px; margin: 0 auto !important; padding: 0 !important; height: 82vh !important; height: min(82dvh, 780px) !important; overflow: hidden !important; z-index: 1100 !important; border: 0 !important; border-radius: 18px 18px 0 0 !important; background: var(--mx-surface) !important; box-shadow: 0 -24px 60px -24px rgba(6, 22, 15, .5) !important; outline: 1px solid var(--mx-card-edge, transparent); outline-offset: -1px; animation: mx-sheet-up .34s var(--mx-ease) both; } body.mx-article #child-comment-box { z-index: 1101 !important; } body.mx-article #comment-box.is-closing { animation: mx-sheet-down .24s ease-in both; } @keyframes mx-sheet-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes mx-sheet-down { from { transform: none; } to { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { body.mx-article #comment-box, body.mx-article #child-comment-box, body.mx-article #comment-box.is-closing { animation-duration: .01s; } } .cx-cm-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(4, 12, 9, .5); opacity: 0; pointer-events: none; transition: opacity .3s; } html.mx-cm-open .cx-cm-scrim { opacity: 1; pointer-events: auto; } html.mx-cm-open, html.mx-cm-open body { overflow: hidden; } html.mx-cm-open body.mx-article .comment-section.cx-rdock { display: none !important; } /* inside: head fixed, list scrolls, writing pill at the bottom */ body.mx-article #comment-box > .container, body.mx-article #child-comment-box > .container { height: 100%; min-height: 0 !important; display: flex; flex-direction: column; padding: 0 !important; } body.mx-article #comment-box > .container > .row, body.mx-article #child-comment-box > .container > .row { flex: none; margin: 0 !important; } body.mx-article #comment-box > .container > .row:last-child, body.mx-article #child-comment-box > .container > .row:last-child { flex: 1 1 auto; min-height: 0; } body.mx-article #comment-box > .container > .row:last-child > .col, body.mx-article #child-comment-box > .container > .row:last-child > .col { height: 100%; min-height: 0 !important; display: flex; flex-direction: column; } body.mx-article #comment-box .users-comment, body.mx-article #child-comment-box .users-comment { order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 16px 12px !important; } body.mx-article #child-comment-box .parent-comment { max-height: 34%; overflow-y: auto; padding: 0 16px !important; border-bottom: 1px solid var(--mx-line); } /* head: grab handle, centred title, a small close */ body.mx-article #comment-box > .container > .row > .col.caption-responses, body.mx-article #child-comment-box > .container > .row > .col.caption-responses { position: relative !important; justify-content: center !important; margin: 0 !important; padding: 24px 56px 12px !important; background: transparent !important; border-bottom: 1px solid var(--mx-line); touch-action: none; cursor: grab; } body.mx-article #comment-box .caption-responses::before, body.mx-article #child-comment-box .caption-responses::before { content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; border-radius: 2px; background: var(--mx-text-3); opacity: .4; transform: translateX(-50%); } body.mx-article #comment-box .caption-responses label, body.mx-article #child-comment-box .caption-responses label { font-family: var(--mx-font-ui) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--mx-text) !important; } body.mx-article #comment-box .caption-responses label + label, body.mx-article #child-comment-box .caption-responses label + label { font-weight: 500 !important; color: var(--mx-text-3) !important; } body.mx-article #comment-box .close-icon, body.mx-article #child-comment-box .close-icon { position: absolute; inset-inline-end: 12px; top: 13px; width: 32px !important; height: 32px !important; background: transparent !important; cursor: pointer; } body.mx-article #child-comment-box .close-icon { inset-inline-end: auto; inset-inline-start: 12px; } /* the list, small and neat */ body.mx-article #comment-box .comment-item, body.mx-article #child-comment-box .comment-item { padding: 12px 0 !important; border-bottom: 0 !important; } body.mx-article #comment-box .comment-item .container-box-writer-img, body.mx-article #comment-box .comment-item .box-writer-img, body.mx-article #comment-box .comment-item .box-writer-img img, body.mx-article #child-comment-box .comment-item .box-writer-img img { width: 34px !important; height: 34px !important; } body.mx-article #comment-box .comment-item .box-name .name, body.mx-article #child-comment-box .comment-item .box-name .name { font-size: 14px !important; } body.mx-article #comment-box .comment-item .date, body.mx-article #child-comment-box .comment-item .date { font-size: 12px !important; color: var(--mx-text-3) !important; } body.mx-article #comment-box .comment-description, body.mx-article #child-comment-box .comment-description { margin-top: 4px !important; padding-inline-start: 44px !important; font-size: 17px !important; line-height: 1.55 !important; } body.mx-article #comment-box .comment-item .reaction, body.mx-article #child-comment-box .comment-item .reaction { margin-top: 4px !important; padding-inline-start: 44px !important; } /* writing pill: your photo, the field, a round send */ body.mx-article #comment-box .comment-form-box, body.mx-article #child-comment-box .comment-form-box { order: 2; flex: none; position: static !important; margin: 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--mx-line) !important; background: var(--mx-surface) !important; } body.mx-article #comment-box .comment-form-box form, body.mx-article #child-comment-box .comment-form-box form { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 8px; } body.mx-article #comment-box .comment-form-box .article-info, body.mx-article #child-comment-box .comment-form-box .article-info { display: flex !important; align-self: end; margin: 0 !important; padding: 0 !important; } body.mx-article #comment-box .comment-form-box .article-info .box-name, body.mx-article #child-comment-box .comment-form-box .article-info .box-name { display: none !important; } body.mx-article #comment-box .comment-form-box .container-box-writer-img, body.mx-article #comment-box .comment-form-box .box-writer-img, body.mx-article #child-comment-box .comment-form-box .container-box-writer-img, body.mx-article #child-comment-box .comment-form-box .box-writer-img { width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.mx-article #comment-box .comment-form-box .box-writer-img img, body.mx-article #child-comment-box .comment-form-box .box-writer-img img { width: 40px !important; height: 40px !important; border-radius: 50%; object-fit: cover; } body.mx-article #comment-box .comment-form-box textarea, body.mx-article #child-comment-box .comment-form-box textarea { height: 40px !important; min-height: 40px !important; padding: 9px 16px !important; border-radius: 20px !important; background: var(--mx-surface-2) !important; font-family: var(--mx-font-ui) !important; font-size: 15px !important; } body.mx-article #comment-box .comment-form-box .comment-button .cancel, body.mx-article #child-comment-box .comment-form-box .comment-button .cancel { display: none !important; } body.mx-article #comment-box .comment-form-box .comment-button .send, body.mx-article #child-comment-box .comment-form-box .comment-button .send { width: 40px !important; height: 40px !important; } body.mx-article #comment-box .comment-form-box .invalid-feedback, body.mx-article #child-comment-box .comment-form-box .invalid-feedback { position: absolute; } /* ===================================================================== Quick composer: a white writing surface, a shorter send button ===================================================================== */ .cx-cmp textarea { padding: 12px 14px !important; border-radius: 14px; background: var(--mx-surface) !important; box-shadow: inset 0 0 0 1px var(--mx-line); } .cx-cmp textarea:focus, .cx-cmp textarea:focus-visible { outline: none !important; box-shadow: inset 0 0 0 1px var(--mx-text-3); } .cx-cmp .cx-cmp__send { height: 44px; font-size: 15px; } /* ===================================================================== «كتاباتي»: drafts and published pieces ===================================================================== */ .cx-stories { max-width: 760px; margin-inline: auto; padding: 0 max(16px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom)); } /* no photo header: the top bar is solid and the page starts under it */ @media (min-width: 1024px) { body.mx-stories .cx-topnav { margin-bottom: 0; color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } body.mx-stories .cx-sthead { padding-top: 32px; } } .cx-sthead { display: grid; gap: 16px; padding-top: 18px; margin-bottom: 18px; } .cx-sthead__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cx-sthead .cx-screen-title { margin: 0; } .cx-sttabs { justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 12px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line); } .cx-sttabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding-inline: 16px; border-radius: 9px; font: 500 15px/1 var(--mx-font-ui); color: var(--mx-text-3) !important; text-decoration: none !important; transition: background-color .2s, color .2s; } .cx-sttabs a span { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: var(--mx-surface); font-size: 12.5px; font-weight: 700; color: var(--mx-text-2); } .cx-sttabs a[aria-current="page"] { background: var(--mx-surface); color: var(--mx-text) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(17, 52, 40, .08); } .cx-sttabs a[aria-current="page"] span { background: var(--mx-btn); color: var(--mx-btn-ink); } .cx-stlist { display: grid; gap: 12px; } .cx-stlist .cx-post { margin: 0; } .cx-draft { transition: opacity .25s, transform .25s; } .cx-draft.is-gone { opacity: 0; transform: scale(.97); } .cx-draft .cx-bm__txt .cx-draft__st { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--mx-surface-2); font-size: 11.5px; font-weight: 700; color: var(--mx-text-2); } .cx-draft .cx-bm__txt .cx-draft__st.is-review { background: rgba(224, 166, 48, .16); color: #8A5D06; } .cx-draft__acts { flex: none; display: flex; align-items: center; gap: 2px; } .cx-draft__btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--mx-text-3) !important; cursor: pointer; transition: background-color .2s, color .2s; } .cx-draft__btn .ic { width: 18px; height: 18px; } .cx-draft__rmq { display: none; } .cx-draft__rm.is-armed { width: auto; padding: 0 14px; border-radius: 10px; background: var(--mx-danger); color: #fff !important; font: 700 13px/1 var(--mx-font-ui); } .cx-draft__rm.is-armed .ic { display: none; } .cx-draft__rm.is-armed .cx-draft__rmq { display: inline; } @media (hover: hover) and (pointer: fine) { .cx-draft__btn:not(.is-armed):hover { background: var(--mx-surface-2); color: var(--mx-text) !important; } .cx-draft__rm:not(.is-armed):hover { color: var(--mx-danger) !important; } } .cx-stmore { display: flex; justify-content: center; margin-top: 18px; } .cx-stories .cx-empty-state { margin-top: 4px; } html:not([data-theme="light"]) body.mx-on .cx-draft .cx-bm__txt .cx-draft__st.is-review { color: #E8B94F; } /* ===================================================================== Onboarding (select-topics), Claudad style: topics as cover tiles, then writers as photo cards, one wide button at the bottom ===================================================================== */ body.mx-onboard { background: var(--mx-bg) !important; } .cx-onb { position: relative; isolation: isolate; min-height: 100dvh; max-width: 920px; margin-inline: auto; padding: 14px max(16px, env(safe-area-inset-left)) calc(120px + env(safe-area-inset-bottom)); font-family: var(--mx-font-ui); color: var(--mx-text); } .cx-onb__glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .cx-onb__glow .cx-orb { opacity: .28; } .cx-onb__glow .cx-orb--a { width: 70vmax; top: -30vmax; right: -20vmax; } .cx-onb__glow .cx-orb--c { width: 40vmax; top: 10vh; left: -20vmax; opacity: .16; } .cx-onb__top { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; } .cx-onb__back { position: absolute; inset-inline-start: -6px; top: 2px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--mx-text); cursor: pointer; } .cx-onb__back[hidden] { display: none; } .cx-onb__back .ic { width: 22px; height: 22px; } .cx-onb__steps { display: flex; gap: 6px; } .cx-onb__steps i { width: 30px; height: 4px; border-radius: 2px; background: var(--mx-line); transition: background-color .3s; } .cx-onb__steps i.is-on { background: var(--mx-emerald); } .cx-onb__step[hidden] { display: none; } .cx-onb__step { animation: mx-onb-in .45s var(--mx-ease) both; } @keyframes mx-onb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .cx-onb__t { margin: 26px 0 8px; font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(32px, 6vw, 46px); line-height: 1.15; color: var(--mx-text); } .cx-onb__lede { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--mx-text-2); } /* topic tiles you can pick */ .cx-bento--pick .cx-tile--pick { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .cx-tile__check { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); transition: background-color .2s, box-shadow .2s, transform .2s var(--mx-ease); } .cx-tile__check .ic { width: 16px; height: 16px; color: #04210E; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--mx-ease); } .cx-tile--pick:has(input:checked) { outline: 3px solid var(--mx-emerald); outline-offset: 2px; } .cx-tile--pick:has(input:checked) .cx-tile__check { background: var(--mx-emerald); box-shadow: none; transform: scale(1.06); } .cx-tile--pick:has(input:checked) .cx-tile__check .ic { opacity: 1; transform: none; } .cx-tile--pick:has(input:focus-visible) { outline: 3px solid var(--mx-emerald); outline-offset: 3px; } .cx-tile--pick .cx-tile__name small { display: block; margin-top: 3px; font-family: var(--mx-font-ui); font-size: 12px; font-weight: 500; line-height: 1.3; opacity: .82; } .cx-tile--pick:active { transform: scale(.98); } /* writers: photo cards, the name over the picture, a follow pill in the corner */ .cx-wpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 600px) { .cx-wpick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 860px) { .cx-wpick { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cx-wcard { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; background: #0B2A20; transition: transform .2s var(--mx-ease); } .cx-wcard:active { transform: scale(.98); } .cx-wcard__link { position: absolute; inset: 0; display: block; color: #F2FBF6 !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .cx-wcard__link img, .cx-wcard__ltr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cx-wcard__ltr { display: grid; place-items: center; padding-bottom: 18%; background: radial-gradient(circle at 30% 20%, #23845A, #0B2A20 70%); font-family: var(--mx-font-display); font-size: 72px; line-height: 1; color: rgba(239, 250, 242, .92); } .cx-wcard__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 14, 10, .85), rgba(4, 14, 10, .1) 55%, rgba(4, 14, 10, 0)); } .cx-wcard__txt { position: absolute; z-index: 1; inset: auto 12px 12px; display: grid; gap: 2px; } .cx-wcard__txt b { font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cx-wcard__txt small { font-size: 11.5px; opacity: .8; } .cx-wcard__btn { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .94); font: 700 12.5px/1 var(--mx-font-ui); color: #0B2A20; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); cursor: pointer; transition: background-color .2s, color .2s; } .cx-wcard:has(.cx-wcard__btn[aria-pressed="true"]) { outline: 3px solid var(--mx-emerald); outline-offset: 2px; } .cx-wcard__btn[aria-pressed="true"] { background: var(--mx-emerald); color: #04210E; } [data-mx-wfollow] .cx-on { display: none; } [data-mx-wfollow][aria-pressed="true"] .cx-on { display: inline; } [data-mx-wfollow][aria-pressed="true"] .cx-off { display: none; } /* one wide button, always in reach */ .cx-onb__cta { position: fixed; inset: auto 0 0; z-index: 5; padding: 18px max(16px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--mx-bg) 62%, transparent); } .cx-onb__cta .cx-btn { display: flex; justify-content: center; width: 100%; max-width: 888px; height: 54px; margin-inline: auto; font-size: 16px; } @media (prefers-reduced-motion: reduce) { .cx-onb__step { animation: none; } } /* password recovery: right-to-left text, the answer inside the dialog */ #forgottenPassword .about-forgotten { text-align: start !important; direction: rtl; line-height: 1.7; } #forgottenPassword .validation-email { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.6; text-align: start; } #forgottenPassword .validation-email.is-bad { background: rgba(194, 58, 58, .08); color: var(--mx-danger); } #forgottenPassword .validation-email.is-ok { background: rgba(43, 182, 90, .1); color: var(--mx-accent-text); } #forgottenPassword button[disabled] { opacity: .8; cursor: progress; } /* حجم خط القراءة: the article text one step smaller or larger */ html[data-fs="sm"] .cx-read { --cx-fs: 19px; } html[data-fs="lg"] .cx-read { --cx-fs: 25px; } @media (min-width: 1024px) { html[data-fs="sm"] .cx-read { --cx-fs: 21px; } html[data-fs="lg"] .cx-read { --cx-fs: 27px; } } .cx-msheet__fs .cx-theme { grid-template-columns: repeat(3, minmax(52px, auto)); } /* account sheet and panel: a white sheet, roomier grey cards, no outlines */ .box-profile-animated-mobile.cx-msheet { background: var(--mx-surface) !important; gap: 10px; } .cx-msheet__me, .cx-msheet__q:not(.cx-msheet__q--primary), .cx-msheet__group, .cx-msheet__theme { background: var(--mx-surface-2) !important; box-shadow: none !important; border-radius: 16px; } .cx-msheet__me { padding: 14px; } .cx-msheet__q { padding: 18px 10px 16px; border-radius: 16px; } .cx-msheet__q--primary { background: var(--mx-btn) !important; color: var(--mx-btn-ink) !important; box-shadow: none !important; } .cx-msheet__q--primary .ic { color: var(--mx-btn-ink) !important; } .cx-msheet__group { padding: 2px 0; } .cx-msheet__row { min-height: 56px; } .cx-msheet__row + .cx-msheet__row { border-top-color: rgba(17, 52, 40, .07); } .cx-msheet__theme { padding: 12px 14px; } .cx-msheet__theme .cx-theme { background: var(--mx-surface); box-shadow: none; } .cx-msheet__out { height: 52px; border-radius: 16px; background: var(--mx-surface-2) !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { .cx-msheet__row:hover { background: rgba(17, 52, 40, .05); } } @media (min-width: 576px) { .box-profile-animated-mobile.cx-msheet { width: 400px !important; padding: 14px !important; max-height: calc(100dvh - 24px); overflow-y: auto; } } html:not([data-theme="light"]) body.mx-on .cx-msheet__row + .cx-msheet__row { border-top-color: var(--mx-line); } .cx-prof__theme + .cx-prof__theme { margin-top: 8px; } /* tabs can be buttons too (اهتماماتك) */ .cx-sttabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding-inline: 16px; border: 0; border-radius: 9px; background: transparent; font: 500 15px/1 var(--mx-font-ui); color: var(--mx-text-3); cursor: pointer; transition: background-color .2s, color .2s; } .cx-sttabs button span { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: var(--mx-surface); font-size: 12.5px; font-weight: 700; color: var(--mx-text-2); } .cx-sttabs button[aria-selected="true"] { background: var(--mx-surface); color: var(--mx-text); font-weight: 700; box-shadow: 0 1px 2px rgba(17, 52, 40, .08); } .cx-sttabs button[aria-selected="true"] span { background: var(--mx-btn); color: var(--mx-btn-ink); } .cx-interests .cx-onb__lede { margin: -6px 0 2px; } .cx-interests .cx-sec-h { margin: 6px 0 12px; } .cx-interests .cx-sec-h--gap { margin-top: 28px; } .cx-interests [data-in-panel][hidden] { display: none; } @media (min-width: 1024px) { body.mx-interests .cx-topnav { margin-bottom: 0; color: var(--mx-text); background: var(--mx-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--mx-line); } body.mx-interests .cx-sthead { padding-top: 32px; } } /* followers / following: a panel on desktop, a full page on phones, tabs and a close button */ .cx-stats__btn { cursor: pointer; border-radius: 12px; transition: background-color .2s; } @media (hover: hover) and (pointer: fine) { .cx-stats__btn:hover { background: var(--mx-surface-2); } } .cx-pl[hidden] { display: none; } .cx-pl { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; font-family: var(--mx-font-ui); } .cx-pl__scrim { position: absolute; inset: 0; background: rgba(4, 12, 9, .5); animation: mx-fade .2s both; } .cx-pl__box { position: relative; display: flex; flex-direction: column; width: min(460px, calc(100% - 32px)); height: min(640px, 80vh); border-radius: 20px; background: var(--mx-surface); box-shadow: 0 30px 80px -30px rgba(4, 12, 9, .6); outline: 1px solid var(--mx-card-edge, transparent); outline-offset: -1px; overflow: hidden; animation: mx-pl-in .3s var(--mx-ease) both; } @keyframes mx-pl-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } } .cx-pl__head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 12px 12px 4px; } .cx-pl__head h2 { margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--mx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-pl__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--mx-text); cursor: pointer; } .cx-pl__x .ic { width: 22px; height: 22px; } .cx-pl__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--mx-line); } .cx-pl__tabs button { position: relative; height: 46px; border: 0; background: transparent; font: 500 15px/1 var(--mx-font-ui); color: var(--mx-text-3); cursor: pointer; } .cx-pl__tabs button span { font-weight: 700; } .cx-pl__tabs button[aria-selected="true"] { color: var(--mx-text); font-weight: 700; } .cx-pl__tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 20% -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--mx-emerald); } .cx-pl__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 16px; } .cx-pl__empty { margin: 40px 0; text-align: center; color: var(--mx-text-3); font-size: 14px; } .cx-pl__list.is-loading { opacity: .5; } .cx-pl__more { display: flex; margin: 10px auto 0; } .cx-person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; } .cx-person__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--mx-text) !important; text-decoration: none !important; } .cx-person .cx-av, .cx-person .cx-av img { width: 46px; height: 46px; flex: none; } .cx-person__txt { min-width: 0; display: grid; gap: 2px; } .cx-person__txt b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-person__txt small { font-size: 12.5px; color: var(--mx-text-3); } .cx-person__btn { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--mx-btn); color: var(--mx-btn-ink); font: 700 13px/1 var(--mx-font-ui); cursor: pointer; } .cx-person__btn[aria-pressed="true"] { background: var(--mx-surface-2); color: var(--mx-text); } @media (hover: hover) and (pointer: fine) { .cx-person:hover { background: var(--mx-surface-2); } } html.mx-pl-open, html.mx-pl-open body { overflow: hidden; } @media (max-width: 767px) { .cx-pl { place-items: stretch; } .cx-pl__scrim { display: none; } .cx-pl__box { width: 100%; height: 100%; border-radius: 0; outline: 0; animation: mx-pl-page .3s var(--mx-ease) both; } .cx-pl__head { padding-top: calc(10px + env(safe-area-inset-top)); } .cx-pl__list { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } @keyframes mx-pl-page { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } } .cx-msheet:focus, .cx-msheet:focus-visible { outline: none !important; }