.elementor-kit-149244{--e-global-color-primary:#000000;--e-global-color-secondary:#3B0F00;--e-global-color-text:#444444;--e-global-color-accent:#246B8F;--e-global-color-diwanblue:#246B8F;--e-global-color-diwanwood:#3B0F00;--e-global-color-diwanpapyrus:#E0B070;--e-global-color-diwanpaper:#FAFAFA;--e-global-typography-primary-font-family:"TAY";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"TAY";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Loew";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Loew";--e-global-typography-accent-font-weight:400;font-family:"Loew", Sans-serif;font-weight:400;}.elementor-kit-149244 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ==================== Diwan Core · brand-tokens.css ==================== */ /** * Diwan design tokens. * * Taken from the staging build, where they are owned by the Diwan Brand plugin, * and they match the 2025 brand manual: Paper Canvas, Papyrus, Wood Brown, * Light Taupe and Fenician Blue. * * Declared on :root with no extra specificity so that wherever Diwan Brand is * also installed its own values win and these are simply never used. Nothing * here should be the only definition of a token the mega menu depends on. * * The four brand colours read Elementor's global colours of the same name * (Site Settings → Global Colors → "Diwan · …"), so a colour changed there * changes here too. Elementor prints those on the body, not on :root, which * is why the block is declared on both: a token that refers to another is * worked out where it is declared, and only the body can see the globals. */ :root, body { --diwan-canvas: #faf7db; --diwan-papyrus: var(--e-global-color-diwanpapyrus, #e0b070); /* A sale has to be seen: the one red in the palette. */ --diwan-sale: #c8102e; --diwan-wood: var(--e-global-color-diwanwood, #3b0f00); --diwan-taupe: #ab9169; --diwan-blue: var(--e-global-color-diwanblue, #246b8f); --diwan-band: var(--e-global-color-diwanpaper, #fafafa); --diwan-grey-50: var(--diwan-band); --diwan-white: #ffffff; --diwan-black: #000000; --diwan-btn-bg: var(--diwan-black); --diwan-btn-text: var(--diwan-white); --diwan-btn-border: var(--diwan-black); --diwan-btn-bg-hover: var(--diwan-papyrus); --diwan-btn-text-hover: var(--diwan-wood); --diwan-btn2-bg: transparent; --diwan-btn2-text: var(--diwan-black); --diwan-btn2-border: var(--diwan-black); --diwan-link: var(--diwan-black); --diwan-link-hover: var(--diwan-blue); /* The 2025 manual gives writing three inks: a section is headed in Fenician Blue, the line that explains it is Wood Brown, and Papyrus is the colour a control turns under the pointer. Every heading the plugin draws reads these rather than naming a colour of its own. */ --diwan-heading: var(--diwan-blue); --diwan-subheading: var(--diwan-wood); --diwan-hover: var(--diwan-papyrus); --diwan-hover-text: var(--diwan-wood); --diwan-text: var(--diwan-black); --diwan-text-soft: #444444; --diwan-text-muted: #6e6e6e; --diwan-text-faint: #a0a0a0; --diwan-text-inverse: var(--diwan-white); --diwan-surface: var(--diwan-white); --diwan-surface-alt: #fafaf8; --diwan-surface-sunken: #f4f3f1; --diwan-border: #e6e6e6; --diwan-border-soft: #f0f0f0; --diwan-border-strong: #d5d5d5; --diwan-accent-bg: var(--diwan-black); --diwan-accent-text: var(--diwan-white); --diwan-promo-bg: var(--diwan-black); --diwan-promo-text: var(--diwan-white); --diwan-danger: #c0392b; --diwan-danger-soft: #f0c9c9; --diwan-success: #1f7a3d; --diwan-warning: var(--diwan-papyrus); --diwan-star: var(--diwan-papyrus); --diwan-star-empty: #dddddd; --diwan-radius: 8px; --diwan-radius-sm: 4px; --diwan-radius-lg: 14px; --diwan-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); --diwan-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06); } /* * Hello Elementor's reset paints links AND buttons #cc3366, a placeholder pink * that is nowhere in the brand. It shows through wherever a component has not * named a colour of its own, which is how a pink chevron kept turning up on * one slider or another. Stated here once rather than patched per component: * the brand owns these two colours, and every component built after this one * inherits the fix without having to know about it. * * Kept at a single element's specificity so any component, Elementor kit or * WooCommerce rule that means to set its own colour still wins. */ a { color: var(--diwan-link, #000000); } a:hover, a:focus-visible { color: var(--diwan-link-hover, #246b8f); } /* A control takes the colour of whatever it sits in, which is what every browser did before a theme said otherwise. * * All three of the theme's placeholder pinks are answered here: the border, the * text, and the background it paints on hover and focus. They are stated on the * bare elements, at the weight the theme states them, so anything that means to * look like a button — ours, WooCommerce's, Elementor's — still wins with a * class. What is left is the browser's own button, in the brand's own ink. * * The focus states are not belt and braces: the theme sets a pink BACKGROUND on * :focus, so a button went pink the moment it was clicked. Focus should say * where you are, which the outline below does, without repainting the control. */ button, [type="button"], [type="submit"], [type="reset"] { background-color: transparent; border-color: currentColor; color: inherit; } button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover { background-color: transparent; color: inherit; } button:focus, button:focus-visible, [type="button"]:focus, [type="button"]:focus-visible, [type="submit"]:focus, [type="submit"]:focus-visible, [type="reset"]:focus, [type="reset"]:focus-visible { background-color: transparent; color: inherit; } /* Anything that carries its own background keeps it while focused. Listed by name because "inherit" above would otherwise strip it. */ .diwan-button:focus, .diwan-button:focus-visible { background: var(--diwan-btn-bg, #000); color: var(--diwan-btn-text, #fff); } /* One focus ring for the whole site, in the brand's own colour. */ :focus-visible { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 2px; } /* Papyrus is the site's hover. * * Elementor's own button has no hover state until somebody sets one in the * editor, so half the buttons on the site did not answer the pointer at all. * A hover rule on the bare class is not enough either: the colour of each * button is written by Elementor into the page's own stylesheet, against the * element's ID class — three classes deep and without :hover — and that beat a * single class carrying one. So this is stated at four classes deep, which is * the weight it takes to reach over a colour set in the panel. * * Every button the site draws is included: the ones in a section, the ones in * a card, and any a builder adds later. */ .elementor .elementor-element a.elementor-button:hover, .elementor .elementor-element a.elementor-button:focus-visible, .elementor .elementor-element button.elementor-button:hover, .elementor .elementor-element button.elementor-button:focus-visible, a.elementor-button:hover, a.elementor-button:focus-visible, button.elementor-button:hover, button.elementor-button:focus-visible, .elementor-button:hover, .elementor-button:focus-visible { background-color: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } /* ==================== Diwan Core · fonts.css ==================== */ /** * The brand faces. * * TAY for headings and anything bold that is not a button, Loew for everything * else. Both are bundled rather than fetched, so there is no third party in the * critical path and nothing to fail on a slow connection. * * TAY has no Arabic glyphs. Rather than switching stacks per language, Cairo is * named after TAY in the same stack: a browser picks a face per character, so * an English heading gets TAY, an Arabic one gets Cairo, and a heading with * both in it gets each word in the right face. The body is the same idea with * IBM Plex Sans Arabic after Loew (Diwan, 5 October 2026): Cairo for the * Arabic headings, Plex for the Arabic text under them. Both are loaded only * on the Arabic side, from the stylesheet that enqueues this one. */ @font-face { font-family: "TAY"; src: url("/wp-content/plugins/diwan-core/assets/fonts/TAYBenditos.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Loew"; src: url("/wp-content/plugins/diwan-core/assets/fonts/Loew-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Loew"; src: url("/wp-content/plugins/diwan-core/assets/fonts/Loew-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Loew"; src: url("/wp-content/plugins/diwan-core/assets/fonts/Loew-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Loew"; src: url("/wp-content/plugins/diwan-core/assets/fonts/Loew-Black.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; } :root { --diwan-font-display: "TAY", "Cairo", "Loew", system-ui, sans-serif; --diwan-font-body: "Loew", "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, sans-serif; } body { font-family: var(--diwan-font-body); /* * Lining figures (October 2026). Loew's own figures are old style: they * rise and drop like lowercase letters, so "2026" in the footer, a price * on a card or a date on an event sat at different heights from the * capitals beside them and read as letters that did not belong together. * Inherited by everything, Elementor's widgets included. */ font-variant-numeric: lining-nums; } /* * TAY is a capitals face: its lowercase letters are small capitals. Where it * is set in mixed case (a slide's heading, a card's title) every capital stood * a size above the rest of its word, so it is set in capitals throughout, as * the section headings already are. Named place by place rather than on every * heading: a heading given the body face (a job's title) keeps its case. * Arabic has no case, so this changes nothing on the Arabic side. */ .diwan-display, .elementor-slide-heading, .elementor-slide-description, .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title { text-transform: uppercase; } /* Headings carry the display face everywhere, not only inside the sections this plugin draws: a WooCommerce page heading is a Diwan heading too. */ h1, h2, h3, h4, .diwan-display { font-family: var(--diwan-font-display); letter-spacing: 0.01em; } /* * A heading widget that is not a heading. * * Elementor's heading widget can be set to render as a paragraph, and plenty of * text on this site is: a book's author, a staff recommendation. It puts all of * them in the site's primary face whatever the tag says, and TAY draws its * lowercase as small capitals, so a paragraph in it comes out shouted. * * So the tag decides. Set to p, div or span it is prose and takes the body * face; left as a real heading it keeps the display face like everything else. * Written with the tag in the .elementor-kit-149244, which is what puts it one step above * Elementor's own rule without an !important. */ .elementor-widget-heading p.elementor-heading-title, .elementor-widget-heading div.elementor-heading-title, .elementor-widget-heading span.elementor-heading-title { font-family: var(--diwan-font-body); } /* * The same two faces, under the names Elementor's kit writes. * * Elementor's Site Settings hold one set of global fonts for the whole site, * and this site is one site in two languages. TAY has no Arabic glyphs at all, * so on the Arabic side the four globals are pointed at the Arabic faces * instead, headings at Cairo and text at IBM Plex Sans Arabic: every widget * Elementor draws keeps reading its own variable and gets a face that can * actually draw the words. * * The page's own text takes the body stack too: WooCommerce's basket, * checkout and account pages are not drawn by Elementor's widgets, and * without it their Arabic fell through Loew to whatever the system had. * * Keyed on the body class WordPress adds for a right-to-left page, which is one * class more specific than the kit's own rule, so this wins without !important * and without knowing the kit's ID. */ body.rtl { font-family: var(--diwan-font-body); --e-global-typography-primary-font-family: "Cairo"; --e-global-typography-secondary-font-family: "Cairo"; --e-global-typography-text-font-family: "IBM Plex Sans Arabic"; --e-global-typography-accent-font-family: "IBM Plex Sans Arabic"; } /* ==================== Diwan Core · chrome-site.css ==================== */ /** * The site's own rules, on every page: the box the header and footer are * centred in, Diwan's button, the sale badge, a page's own title, carousels * and icon lists before their scripts, the keyboard's focus ring, and words * for screen readers. Split from chrome.css in 3.6.0. */ .diwan-box { box-sizing: border-box; margin-inline: auto; max-width: min(100%, var(--diwan-content-width, 1400px)); padding-inline: 20px; width: 100%; } /* One class, no scoped copies. The header and footer rules that set a colour on their links exclude this class instead, which is what keeps the button the colour it says it is wherever it is dropped. */ .diwan-button { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; padding: 11px 16px; text-align: center; } .diwan-button:hover { background: var(--diwan-papyrus, #e0b070); border-color: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } .diwan-button--block { display: block; inline-size: 100%; } /* ------------------------------------------------------------ sale badge */ /* WooCommerce draws "Sale!" in its own olive, which reads as decoration. Red says what it is. Written past WooCommerce's and Elementor's own rules for the badge, which carry two classes. */ body[class] span.onsale, body[class] .woocommerce span.onsale, body[class] .elementor-widget-woocommerce-product-images span.onsale { background: var(--diwan-sale, #c8102e); border-radius: 999px; color: #fff; font-weight: 700; letter-spacing: 0.2px; } /* ------------------------------------------------------- a page's own title */ /* * The basket, the checkout and the account pages are WooCommerce's own, and * their title is the theme's rather than one of ours. It is still the head of a * page, so it is the brand's blue like every other head on the site. * * A product's title is left out by name: that is the name of a book, and a book * keeps its own ink wherever it is written. */ .entry-title:not(.product_title), .woocommerce-account .entry-title { color: var(--diwan-heading, #246b8f); } /* ------------------------------------------- the theme's own pages on a phone */ /* * The basket, the checkout and the account are WooCommerce's pages inside the * theme's wrapper, and the theme gives that wrapper a 10px gutter. Everything * this plugin draws uses 20, which is close enough to look like a mistake * rather than a difference. Raised to the site's own gutter on the widths where * the wrapper is the width of the screen; a page built in Elementor is left * alone, because its sections carry their own. */ @media (max-width: 1024px) { body:not(.elementor-page) main.site-main { padding-inline: 20px; } } /* The theme holds that wrapper to 600 pixels on a tablet and 800 on a small laptop, which put the account in a column a third of the screen wide with its own tabs running off the end (Diwan, 5 October 2026: every page between 1300 and 768 looked over). The whole width instead, inside the gutter. */ @media (min-width: 768px) and (max-width: 1199px) { body:not(.elementor-page) main.site-main { max-inline-size: 100%; padding-inline: 20px; } } /* --------------------------------------- a carousel before its script arrives */ /* * Every carousel on the site is a row of slides that a script turns into a * carousel. Until it runs they are what the markup says they are — a stack, one * under the other — so the page opened four times its own height and collapsed * a moment later, in front of the reader. * * So the row is laid out in CSS first, exactly as the script will lay it out: * Elementor already writes how many slides to show and the gap between them * into the page's own stylesheet, as custom properties on the widget, and both * are read here. The slides past the first row are clipped rather than wrapped, * which is where the script puts them anyway. * * Everything here stops applying the instant Swiper marks the carousel as * started, so nothing fights the script once it is running. */ .swiper:not(.swiper-initialized) { overflow: hidden; } .swiper:not(.swiper-initialized) > .swiper-wrapper { display: flex; flex-wrap: nowrap; gap: var(--swiper-slides-gap, 0px); } .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { flex: 0 0 calc( (100% - (var(--swiper-slides-to-display, 1) - 1) * var(--swiper-slides-gap, 0px)) / var(--swiper-slides-to-display, 1) ); } /* Elementor's icon lists, sized before Elementor's own stylesheet for them arrives. Elementor asks for that stylesheet in the middle of the page, just before the first icon list (the event cards have one), and when the page is painted first the icons stand at their file's own size, a few hundred pixels tall, then fold. These are Elementor's own rules, so nothing changes once its stylesheet is read. */ .elementor-widget .elementor-icon-list-items { list-style-type: none; margin: 0; padding: 0; } .elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a { align-items: var(--icon-vertical-align, center); display: flex; } .elementor-icon-list-icon svg { block-size: var(--e-icon-list-icon-size, 1em); inline-size: var(--e-icon-list-icon-size, 1em); } /* Words for screen readers only (the theme's own rule, repeated for a theme that has none): the listing headings and the names in card buttons. */ .screen-reader-text:not(:focus) { block-size: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; word-wrap: normal !important; } /* * WooCommerce's "Show password" eye, on the account, login and checkout forms: * 22 x 22 as WooCommerce draws it, under the 24 x 24 a finger can be asked to * hit (WCAG 2.2 target size). The eye itself stays as it is, centred in it. */ .woocommerce form .show-password-input { align-items: center; display: inline-flex; justify-content: center; min-block-size: 24px; min-inline-size: 24px; } /* "Skip to content", out of sight until a keyboard reaches it, then plain to see over everything at the top of the page. */ .diwan-skip-link:focus { background: var(--diwan-black, #000000); clip: auto; clip-path: none; color: var(--diwan-white, #ffffff); block-size: auto; inline-size: auto; inset-block-start: 8px; inset-inline-start: 8px; outline: 2px solid var(--diwan-hover, #e0b070); outline-offset: 2px; padding: 12px 16px; position: fixed !important; text-decoration: none; z-index: 100000; } /* * Where the keyboard is must always show (WCAG 2.4.7). Some of the site's * links and fields (the header's, the search box) had their focus ring taken * away by a theme or kit rule and nothing put in its place. A ring in the * element's own text colour shows on light grounds and on dark ones, and * :focus-visible keeps it to the keyboard: a click does not draw it. */ html body :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* The header's search field is the exception: a field shows the ring on a click as well, and a heavy black box opened up inside the search box every time it was clicked (Diwan, 5 October 2026). The box itself shows where the keyboard is instead, its edge darkening (.diwan-search:focus-within), and the field does not ease into anything. */ html body .diwan-search .diwan-search__field:focus-visible { outline: none !important; } .diwan-header .diwan-search__field { transition: none; } /* * Diwan's tab buttons (the book page, the collection under it, Diwan Kids): * the line under the chosen one is there from the start, only its colour * changes. Elementor eases the whole border, so a button going from no * border to a line underneath drew a thin box all round it for a moment * first (Diwan, 5 October 2026). Every button now carries the same 2-pixel * line, see-through until it is chosen, and only colours are eased. */ /* !important because Elementor writes every state's border through its own variables, hover included, and those rules outrank a stylesheet's. */ :is(.elementor-widget-n-tabs, .elementor-widget-nested-tabs)[class*="diwan-"] .e-n-tab-title { border-color: transparent !important; border-style: solid !important; border-width: 0 0 2px !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } :is(.elementor-widget-n-tabs, .elementor-widget-nested-tabs)[class*="diwan-"] .e-n-tab-title[aria-selected="true"] { border-color: var(--diwan-text, #000000) !important; } /* ==================== Diwan Core · arrows.css ==================== */ /** * The site's one slider arrow. * * Four runs of things share this page: the offers strip, the hero slider, the * events carousel and the new releases carousel. Two of them are ours and two * are Elementor's, and left alone they looked like two different websites. * Elementor's was the weaker of the pair: its chevron is an icon-font glyph * with a heavy stroke, so beside our own 1.5 stroke it read as bold. * * So the chevron is stated once, here, as a shape rather than as a glyph, and * painted into whichever button needs it. It is the same path at the same * weight as the one the icon set draws inline, which is what makes our buttons * and Elementor's indistinguishable rather than merely similar. * * Loaded site-wide beside the brand tokens, because a carousel can be dropped * on any page and an arrow that only matches on the home page is not a fix. */ :root { /* The chevron from the icon set, as a mask. Stroke 1.5 on a 24 grid with round caps and joins: regular weight, like every other icon here. The colour inside the data URI is irrelevant, a mask reads only its alpha. */ --diwan-arrow-chevron: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9.5 5 7 7-7 7%22/%3E%3C/svg%3E'); /* One square, one size, everywhere. Square because the shelf, the banner and the book are all rectangles, and a disc was the only round thing on the page. */ --diwan-arrow-size: 40px; --diwan-arrow-glyph: 20px; --diwan-arrow-bg: var(--diwan-surface, #fff); --diwan-arrow-color: var(--diwan-black, #000); --diwan-arrow-border: var(--diwan-border-strong, #d5d5d5); --diwan-arrow-bg-hover: var(--diwan-wood, #3b0f00); --diwan-arrow-color-hover: var(--diwan-canvas, #faf7db); /* * The same four colours again, under the names Elementor's own carousel * rules read. Written as variables rather than as rules over the top of * Elementor's, so that anything set in the widget's Navigation panel is * more specific than this and still wins: the panel keeps working, it just * starts from the site's colours instead of a pale grey. * * --arrow-size drives the glyph rather than the button, so an editor * enlarging the arrow in the panel still gets a larger chevron. */ --arrow-normal-color: var(--diwan-arrow-color); --arrow-hover-color: var(--diwan-arrow-color-hover); --arrow-normal-background-color: var(--diwan-arrow-bg); --arrow-hover-background-color: var(--diwan-arrow-bg-hover); --arrow-normal-border-type: solid; --arrow-hover-border-type: solid; --arrow-size: var(--diwan-arrow-glyph); } /* ------------------------------------------------------------ our own buttons */ /* * The frame. Opaque, because a see-through control takes its tint from whatever * happens to be underneath it, and the same arrow read warm over the brown * banner and cold over the blue one. */ .diwan-arrow { align-items: center; background: var(--diwan-arrow-bg); block-size: var(--diwan-arrow-size); border: 1px solid var(--diwan-arrow-border); border-radius: 0; color: var(--diwan-arrow-color); cursor: pointer; display: flex; inline-size: var(--diwan-arrow-size); justify-content: center; padding: 0; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease; } .diwan-arrow:hover { background: var(--diwan-arrow-bg-hover); border-color: var(--diwan-arrow-bg-hover); color: var(--diwan-arrow-color-hover); } .diwan-arrow .diwan-icon { block-size: var(--diwan-arrow-glyph); inline-size: var(--diwan-arrow-glyph); } /* ------------------------------------------------------- Elementor's buttons */ /* * Elementor draws its arrow as an icon-font glyph, or as an SVG, depending on * the build and the widget. Both are put away and the shape above is painted in * their place, so the hero slider and the two loop carousels carry the same * chevron as the offers strip beside them. * * The glyph is a mask filled with currentColor rather than a background image, * which is what lets one declaration serve both the resting state and the * hover: the chevron follows the button's colour the way an inline SVG would. * * Written one class deeper than Elementor writes, and not for the pleasure of * it. Elementor reaches the button through the swiper and paints its colour and * its border there, and its conditional stylesheets are enqueued while the page * renders, so they can arrive after ours. Matching its depth would leave which * arrow you see decided by load order. One class deeper settles it, and every * control in the Navigation panel is deeper still, so the panel keeps winning. */ .elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next), .elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) { align-items: center; background: var(--arrow-normal-background-color); block-size: var(--diwan-arrow-size); border: 1px solid var(--diwan-arrow-border); border-radius: 0; color: var(--arrow-normal-color); display: flex; /* The glyph is sized in em below, so this is the arrow's Size control. */ font-size: var(--arrow-size, 20px); inline-size: var(--diwan-arrow-size); justify-content: center; /* Fully opaque. At 0.9 a black chevron on a white square reads grey, which on a pale slide is barely there at all. */ opacity: 1; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next):hover, .elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next):hover { background: var(--arrow-hover-background-color); border-color: var(--arrow-hover-background-color); color: var(--arrow-hover-color); opacity: 1; } /* The glyph Elementor was going to draw. The screen-reader text beside it is left alone, which is why this names the icon rather than every child. */ .elementor-swiper-button > i, .elementor-swiper-button > svg, .elementor-swiper-button > [class*="eicon-"] { display: none; } .elementor-swiper-button::after { background-color: currentColor; /* 1em, so the widget's own Size control still drives the chevron. */ block-size: 1em; content: ""; display: block; flex: 0 0 auto; inline-size: 1em; -webkit-mask: var(--diwan-arrow-chevron) center / contain no-repeat; mask: var(--diwan-arrow-chevron) center / contain no-repeat; } /* ------------------------------------------------------- beside, not over */ /* * An arrow sitting on top of the first card hides half a book cover, which is * the one thing the card is there to show. With the widget's Position set to * Outside, the room for the pair is taken out of the run instead: the track * gives up an arrow and a gap at each end, and the cards that are left are * whole. * * Elementor's own outside rule takes a flat 60 pixels and leaves the track * against the left edge, which puts both arrows on the same side of it. This * takes the real width of the arrow, centres what is left, and is written a * class deeper so it lands whichever stylesheet loads last. */ .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside { --diwan-arrow-outside: calc(var(--diwan-arrow-size) + 12px); } .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside :is(.swiper, .swiper-container) { inline-size: calc(100% - 2 * var(--diwan-arrow-outside)); margin-inline: auto; } /* * On a phone there is no room to give up: two arrows and their gaps would take * a third of the screen. The run takes the whole width and is swiped instead, * which is what the offers strip above already does at the same width. */ @media (max-width: 767px) { .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside :is(.swiper, .swiper-container) { inline-size: 100%; } .elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next), .elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) { display: none; } } /* ------------------------------------------------------------ which way round */ /* * The chevron is drawn pointing one way, so the other button turns it over. * * Our buttons and Elementor's need opposite treatment in Arabic, and the reason * is where each of them sits. Ours are placed with logical properties, so in a * right-to-left page the previous button moves to the right of the strip and * has to point right: the pair is a mirror of itself. Elementor's stay where * they are, prev on the left and next on the right whichever way the page * reads, because Swiper reverses the run behind them instead. Pressing the * left-hand one in Arabic moves the shelf forwards, and it should point left to * say so, which is exactly what it does in English. * * So the Elementor pair is stated once and not flipped. Flipping it, which * looked like the obvious thing to do, left both chevrons pointing away from * the way they move. */ .diwan-arrow--prev .diwan-icon, .elementor-swiper-button-prev::after { transform: scaleX(-1); } .diwan-arrow--next .diwan-icon, .elementor-swiper-button-next::after { transform: none; } [dir="rtl"] .diwan-arrow--prev .diwan-icon { transform: none; } [dir="rtl"] .diwan-arrow--next .diwan-icon { transform: scaleX(-1); } /* * The one Elementor widget that does move its arrows. The slides widget swaps * them itself in a right-to-left page, putting previous on the right and next * on the left, so its pair mirrors like ours does. The loop carousels above * leave theirs where they are, which is why this is stated for the slides * widget by name rather than for everything. * * The rule underneath it all is the same in every case and worth saying once: * the chevron points the way the shelf moves, which is outwards from the run. * Press the arrow on the left and things go left. */ [dir="rtl"] .elementor-widget-slides .elementor-swiper-button-prev::after { transform: none; } [dir="rtl"] .elementor-widget-slides .elementor-swiper-button-next::after { transform: scaleX(-1); } /* ------------------------------------------------------------- nothing to do */ /* An arrow at the end of a run has nothing to do, so it goes rather than sitting there greyed out and inviting a press. One class deeper than Elementor's own 0.3, which names the button and the disabled state and would otherwise settle the tie by whichever stylesheet loaded last. */ .elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next).swiper-button-disabled, .elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next).swiper-button-disabled, .diwan-arrow[disabled] { opacity: 0; pointer-events: none; } /* * A slider's dots (Elementor's, drawn by Swiper): the same dots, set far * enough apart that a finger aimed at one cannot land on the next. Each is * 6 px here; 18 px between them puts their centres 24 px apart, the room * WCAG 2.2 asks around a target that small. Their colours stay the widget's own. */ .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets { --swiper-pagination-bullet-horizontal-gap: 9px; } .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin-inline: 9px !important; } /* * A run that shows one card at a time on a phone (Upcoming Events, Book * Clubs) says there are more with a row of dots under it, there and only * there: a wider screen shows several cards and its arrows (Diwan, * 5 October 2026). Black on the page's grey, the current one solid. */ .diwan-run--dots .swiper-pagination-bullet { background-color: var(--diwan-text, #000000); opacity: 0.25; } .diwan-run--dots .swiper-pagination-bullet-active { opacity: 1; } @media (min-width: 768px) { .diwan-run--dots .swiper-pagination { display: none; } } /* * Forced colours (Windows contrast themes): the system paints every * background in its own colours, which took away whatever this site draws as * a coloured shape rather than as text, and the dark black logo with it. * Each is given the system's own colours back (WCAG 1.4.11, non-text * contrast): the arrows' chevrons and the dots in its text colour, the dot * that is current in its highlight, and the logo a light plate to stand on. */ @media (forced-colors: active) { .elementor-swiper-button::after, .diwan-offers__arrow::after, .diwan-offers__arrow::before { background-color: ButtonText; forced-color-adjust: none; } /* !important here only: the dots' own colours come later (offers.css) or stronger (the widget's CSS), and in a contrast theme the system's win. */ .swiper-pagination-bullet, .diwan-offers__dot::before { background-color: ButtonText !important; forced-color-adjust: none; opacity: 1 !important; } .swiper-pagination-bullet-active, .diwan-offers__dot.is-current::before { background-color: Highlight !important; } .diwan-logo, .diwan-topbar__icon { background-color: #ffffff; border-radius: 4px; forced-color-adjust: none; padding: 4px; } } /* ==================== Diwan Core · badges.css ==================== */ /** * Book badges: on a card's cover, on the book page's picture, under its title. * * Each badge's colours come in as --diwan-badge-bg and --diwan-badge-ink from * Offers -> Book badges; the corner and the spot are chosen there too. Logical * properties throughout, so "start" is the left in English and the right in * Arabic without a mirrored copy. */ .diwan-badge { align-items: center; background: var(--diwan-badge-bg, #000); border: 1px solid color-mix(in srgb, var(--diwan-badge-ink, #fff) 18%, transparent); box-sizing: border-box; color: var(--diwan-badge-ink, #fff); display: inline-flex; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; max-inline-size: 100%; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } /* Arabic has no capitals, and spacing its letters apart breaks the joins. */ body.rtl .diwan-badge, html[dir="rtl"] .diwan-badge, .diwan-badge:lang(ar) { letter-spacing: 0; text-transform: none; } .diwan-badge--square { border-radius: 0; } .diwan-badge--rounded { border-radius: 4px; } .diwan-badge--pill { border-radius: 999px; padding-inline: 10px; } .diwan-badges { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } /* ------------------------------------------------------- on a card's cover */ /* The cover the badges sit on is the widget they are drawn into, or for a book with no cover yet, the cover's frame. Not the covers on the shop's own cards: those are already pinned to their frame (books.css), which holds the badges just as well, and made relative here a book on sale lost its frame and stood taller than the rest of its row. */ .e-con:has(> .diwan-badges--card), .elementor-widget-theme-post-featured-image:not(.diwan-book-card__cover-widget):not(.diwan-staff-card__cover-widget):not(.diwan-explore-card__cover-widget):has(.diwan-badges--card), .elementor-widget-theme-post-featured-image > .elementor-widget-container:has(> .diwan-badges--card), .elementor-widget-woocommerce-product-images:has(.diwan-badges--gallery), .elementor-widget-woocommerce-product-images > .elementor-widget-container:has(> .diwan-badges--gallery) { position: relative; } .diwan-badges--card, .diwan-badges--gallery { flex-direction: column; max-inline-size: calc(100% - 20px); position: absolute; /* Over the picture and the heart's frame, under the heart itself (4) and the add-to-cart bar, which rises over the foot of the cover (3). */ z-index: 2; } .diwan-badges--card.diwan-badges--top-start, .diwan-badges--gallery.diwan-badges--top-start { align-items: flex-start; inset-block-start: 10px; inset-inline-start: 10px; } .diwan-badges--card.diwan-badges--top-end { align-items: flex-end; /* Below the heart, which holds the top corner on this side. */ inset-block-start: calc(var(--diwan-wish-size, 34px) + 18px); inset-inline-end: 10px; } .diwan-badges--card.diwan-badges--bottom-start { align-items: flex-start; inset-block-end: 10px; inset-inline-start: 10px; } .diwan-badges--card.diwan-badges--bottom-end { align-items: flex-end; inset-block-end: 10px; inset-inline-end: 10px; } /* A bottom badge steps out of the way of the add-to-cart bar as it rises. */ .e-loop-item:hover .diwan-badges--card.diwan-badges--bottom-start, .e-loop-item:hover .diwan-badges--card.diwan-badges--bottom-end, .e-loop-item:focus-within .diwan-badges--card.diwan-badges--bottom-start, .e-loop-item:focus-within .diwan-badges--card.diwan-badges--bottom-end { opacity: 0; transition: opacity 0.16s ease; } .diwan-badges--gallery { z-index: 5; } /* ----------------------------------------------------- under the book title */ .diwan-badges--title { margin-block: 8px 4px; } .diwan-badges--title .diwan-badge { font-size: 12px; padding: 5px 10px; } @media (max-width: 767px) { .diwan-badges--card .diwan-badge { font-size: 10px; padding: 3px 6px; } .diwan-badges--card.diwan-badges--top-start, .diwan-badges--card.diwan-badges--bottom-start { inset-inline-start: 6px; } .diwan-badges--card.diwan-badges--top-start { inset-block-start: 6px; } } /* A staff favourite's jacket is a thumbnail, 80 pixels wide on a tablet where six of them stand three across (Diwan, 5 October 2026): its tags a size smaller there and inside the jacket's edges, so a word is cut short rather than spilling over the picture beside it. */ @media (max-width: 1024px) { .diwan-staff-card .diwan-badges--card { inset-inline: 4px; } .diwan-staff-card .diwan-badges--card .diwan-badge { font-size: 9px; padding: 2px 5px; } } /* ==================== Diwan Core · books.css ==================== */ /** * The book card, and the band of new releases it sits in. * * The card itself is an Elementor loop template, so its spacing, its type and * its colours are all in the builder. What is here is the part a panel control * cannot express: the shape of a cover, the heart pinned to it, and how many * lines a title is allowed before it is cut. */ :root { /* Two by three, the proportions every book site stores covers at. Stated as a unitless ratio because aspect-ratio takes a ratio, not a pair of lengths: 200px / 300px is not a ratio and collapses the box. */ --diwan-book-ratio: 2 / 3; --diwan-book-gap: 24px; --diwan-book-visible: 6; --diwan-wish-size: 34px; /* How wide a book is in a band of covers: one size in every band, smaller than the slide (the client's review of 1 October 2026). Its 2:3 cover is 156 x 234. */ --diwan-card-width: 156px; /* Pale enough to separate the band from the white above and below it without reading as a coloured panel. */ --diwan-book-band: #fafafa; } /* ------------------------------------------------------------------ the card */ .diwan-book-card { block-size: 100%; } /* * One size for every book in a band of covers: the card no wider than * --diwan-card-width, centred in its slide, whichever band it is in (New * Releases had five to a row, the others six, so their covers were 187 to * 230 wide). The Diwan Publishing covers take the same 2:3 shape there. On a * phone, two to a row, the card takes its slide again. */ .elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card), .elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card { /* Never the whole slide: with five to a row on a narrower laptop the slide is the card's width, and the covers stood spine to spine. */ inline-size: min(var(--diwan-card-width, 156px), calc(100% - 16px)) !important; margin-inline: auto; } /* The More to explore card is a box with its words inside it, so it takes its slide, up to 200 (Diwan, 5 October 2026: five across, each card taking the room it has, where six small covers sat in a lot of card). */ .elementor-widget-loop-carousel .e-loop-item > .diwan-explore-card { inline-size: min(var(--diwan-explore-width, 200px), calc(100% - 16px)) !important; } .elementor-widget-loop-carousel .e-loop-item > .diwan-pub-card .diwan-pub-card__cover { --diwan-pub-ratio: 2 / 3; } @media (max-width: 1024px) { .elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card), .elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card { inline-size: min(140px, calc(100% - 16px)) !important; } /* Its slide, as on a computer: held to the 140 of a book card its cover was 112 wide and READ MORE broke over two lines (Diwan, 5 October 2026). */ .elementor-widget-loop-carousel .e-loop-item > .diwan-explore-card { inline-size: min(var(--diwan-explore-width, 200px), calc(100% - 16px)) !important; } } @media (max-width: 767px) { .elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card), .elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card { inline-size: 100% !important; } } /* The currency the size of the price it belongs to. */ .woocommerce-Price-amount .woocommerce-Price-currencySymbol { font-size: inherit; } /* * The cover box. * * The shape is on the box rather than on the artwork, and that is the whole * point of it. A book whose jacket has not been uploaded yet keeps its place in * the row: an empty frame in a shelf of covers reads as a book waiting for its * picture, where a card that has collapsed to the height of its title reads as * a broken page. * * It is also what the heart hangs off. Pinned to the card instead, the heart * would drift down the page every time a title ran to two lines. */ .diwan-book-card__cover { aspect-ratio: var(--diwan-book-ratio, 2 / 3); background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); position: relative; } /* Rounded and clipped on every page. Until 3.6.0 the home page, the authors and Diwan Publishing drew it so, but the shop, the search and an author's page lost both to Elementor's container rule (.e-con), which their stylesheets happened to be read before. One step past that rule, so the order no longer decides. */ .diwan-book-card__cover.e-con, .diwan-book-card__cover:not(.e-con) { border-radius: 4px; overflow: hidden; } /* The image widget and everything Elementor wraps it in fill the frame, so the artwork is measured against the box rather than against itself. */ .diwan-book-card__cover-widget, .diwan-book-card__cover-widget > .elementor-widget-container, .diwan-book-card__cover-widget figure, .diwan-book-card__cover-widget a { block-size: 100%; display: block; inline-size: 100%; } /* * Fitted inside the frame rather than cropped to fill it. Every publisher's * artwork is a slightly different shape, and a cropped cover loses the author's * name off the bottom, which is the one thing a cover is for. */ .diwan-book-card__cover-widget img { block-size: 100%; display: block; inline-size: 100%; object-fit: var(--diwan-fit-book, contain); } /* * The frame is the size; the picture only fills it. A frame whose height comes * from aspect-ratio has no height its children can take a percentage of, so a * cover taller than 2:3 — most publishers' are, a little — used to stretch the * frame and push its title below its neighbours'. Held at the frame's edges, * the picture is measured against the frame and fitted inside it, whole. */ .diwan-book-card__cover .diwan-book-card__cover-widget, .diwan-staff-card__cover .diwan-staff-card__cover-widget, .diwan-explore-card__cover .diwan-explore-card__cover-widget { inset: 0; position: absolute; } .diwan-book-card__cover .diwan-book-card__cover-widget img, .diwan-staff-card__cover .diwan-staff-card__cover-widget img, .diwan-explore-card__cover .diwan-explore-card__cover-widget img { block-size: 100%; inline-size: 100%; max-inline-size: none; object-fit: var(--diwan-fit-book, contain); } /* Two lines, then stop. A title is a label on a shelf here, and the third line of a long one would push the price out of the row it shares with its neighbours. */ .diwan-book-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .diwan-book-card__name a { color: inherit; text-decoration: none; } .diwan-book-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; } /* One line for the author, because two names at most reach here and a third would be a different book. */ .diwan-book-card__author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* An author nobody has recorded yet leaves no gap rather than an empty line between the title and the price. */ .diwan-book-card__author:empty { display: none; } /* WooCommerce prints a price as a paragraph with its own margins, which inside a card fights the gap the container already sets. */ .diwan-book-card__price .price, .diwan-book-card__price p { margin: 0; } /* A book on offer shows what it was beside what it is. The old price is quieter than the new one, which is the whole point of showing it. */ .diwan-book-card__price del { color: var(--diwan-text-muted, #6e6e6e); font-weight: 400; margin-inline-end: 6px; /* Not faded further: inside a book's page WooCommerce sets 0.7 on any old price, and the muted colour at 0.7 is too faint to read (2.8 to 1). */ opacity: 1 !important; /* WooCommerce's own rule is one element stronger */ } .diwan-book-card__price ins { text-decoration: none; } /* ----------------------------------------------------------------- the heart */ /* * The blur is a progressive enhancement. Where a browser cannot do it the * fallback underneath turns the disc solid white. */ /* * Round, and nearly solid white (Diwan, October 2026): the frosted square * all but disappeared into a pale cover. A white disc with a dark ring of * shadow and a black heart stands out on a light jacket and a dark one alike. */ .diwan-wish { align-items: center; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); background: rgba(255, 255, 255, 0.94); block-size: var(--diwan-wish-size, 34px); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.18); color: var(--diwan-black, #000); cursor: pointer; display: flex; inline-size: var(--diwan-wish-size, 34px); justify-content: center; padding: 0; text-decoration: none; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .diwan-wish { background: var(--diwan-white, #fff); } } .diwan-wish:hover, .diwan-wish:focus-visible { background: var(--diwan-wood, #3b0f00); border-color: var(--diwan-wood, #3b0f00); color: var(--diwan-canvas, #faf7db); } /* On the list: the outline fills in. The icon set is outlines throughout, and this is the one place a fill means something rather than being a second style, so the fill is applied here instead of drawing a second heart. */ .diwan-wish.is-on { background: var(--diwan-wood, #3b0f00); border-color: var(--diwan-wood, #3b0f00); color: var(--diwan-canvas, #faf7db); } .diwan-wish.is-on .diwan-icon { fill: currentColor; } /* The editor previews the card against whatever it is pointed at, which need not be a product. A heart that saves nothing should not look pressable. */ .diwan-wish.is-preview { cursor: default; opacity: 0.5; } /* ------------------------------------------------------- the staff favourite */ /* * A cover on the leading edge and the recommendation beside it. The card is * laid out in the builder, which owns the direction and the gap; what is here * is the shape of the jacket and how much of the note fits before it is cut. */ .diwan-staff-card { block-size: 100%; } /* The same proportions as every other cover on the page, on the box rather than the artwork, so a book whose jacket has not been uploaded keeps its place instead of collapsing the row. */ .diwan-staff-card__cover { aspect-ratio: var(--diwan-book-ratio, 2 / 3); background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 4px; overflow: hidden; position: relative; } /* The width set in the builder is the width it keeps. * * A flex item may shrink below the width it was given, and left to it the * jacket gave way to the recommendation beside it and came out a third * narrower than the covers in the run above. * * Said as a floor rather than by switching the shrink off, and that is not a * dodge: Elementor sets the flex shorthand on its own containers, so a rule * here naming flex-shrink would be a fight decided by which stylesheet loads * last. A minimum reads from the same width the panel writes and says what is * actually meant, which is that the jacket has a size below which it stops * being a jacket. * * Named through the card, because Elementor zeroes the minimum on its own * containers and a single class here would be another tie decided by load * order. */ .diwan-staff-card .diwan-staff-card__cover { min-inline-size: var(--width, 26%); } .diwan-staff-card__cover-widget, .diwan-staff-card__cover-widget > .elementor-widget-container, .diwan-staff-card__cover-widget figure, .diwan-staff-card__cover-widget a { block-size: 100%; display: block; inline-size: 100%; } .diwan-staff-card__cover-widget img { block-size: 100%; display: block; inline-size: 100%; object-fit: var(--diwan-fit-book, contain); } .diwan-staff-card__name a { color: inherit; text-decoration: none; } .diwan-staff-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Four lines of the note, then stop. Whoever writes these will write four sentences one day and fourteen the next, and a card that grows with them would leave the one beside it half empty. */ .diwan-staff-card__note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* A book with a note but nobody's name against it takes no room rather than leaving a blank line under the recommendation. */ .diwan-staff-card__by:empty { display: none; } /* The grid is Elementor's and its columns are set in the panel. This only pushes the button clear of the last row. */ .diwan-staff__all { margin-block-start: 32px; } /* --------------------------------------------------------- Diwan Publishing */ :root { /* The house's own covers, at the proportions the staging build uses. Wider than the 2:3 of a trade paperback because these are the hardbacks. */ --diwan-pub-cover: 180px; --diwan-pub-ratio: 180 / 250; } /* The copy sits at the top of its half, level with the top of the portrait, rather than floating in the middle of a column as tall as the picture. */ .diwan-pub__copy > .elementor-column-wrap, .diwan-pub__copy > .elementor-widget-wrap { align-content: flex-start; } .diwan-pub__title { margin-block-start: -6px; } .diwan-pub__button { margin-block-start: 8px; } /* The portrait is a background, so it needs a height of its own: a background has none, and a column holding one short heading is the height of that heading. * * Said on the wrap inside the column rather than on the column, because that is * where Elementor paints a column's background and applies its padding. On the * column itself the rule is inert, and an inert rule is worse than no rule: it * reads as though somebody had already thought about this. */ .diwan-pub__portrait > .elementor-column-wrap, .diwan-pub__portrait > .elementor-widget-wrap { align-content: flex-end; min-block-size: 250px; } /* On a phone the portrait sits under the words rather than beside them, and the band has to stay on one screen with its covers (October 2026). */ @media (max-width: 767px) { .diwan-pub__portrait > .elementor-column-wrap, .diwan-pub__portrait > .elementor-widget-wrap { min-block-size: 150px; } } /* Staff Favourites whole on a tablet's and a phone's screen too (Diwan, October 2026): on a tablet all six, three across and two deep, the card a size smaller (5 October; it was two across, and four of them); on a phone three, one to a row. View All Staff Favorites is under them for the rest. */ @media (max-width: 767px) { .diwan-staff__grid .e-loop-item:nth-child(n+4) { display: none; } } /* A name in white on a photograph is legible until somebody swaps in a photograph with a bright corner. The shadow costs nothing and survives that. */ .diwan-pub__name { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------- the Diwan Publishing card */ /* A cover and the heart on it, and nothing else: the titles are on the jackets and the panel above has already said what they are. */ .diwan-pub-card { margin-inline: auto; max-inline-size: 100%; position: relative; } /* The shape is on the box, not on the artwork, for the same reason it is on every other cover here: a book whose jacket has not been uploaded keeps its place in the row instead of collapsing it. */ .diwan-pub-card .diwan-pub-card__cover { aspect-ratio: var(--diwan-pub-ratio, 180 / 250); background: var(--diwan-surface, #fff); inline-size: 100%; } .diwan-pub-card__cover > .elementor-widget-container, .diwan-pub-card__cover figure, .diwan-pub-card__cover a { block-size: 100%; display: block; inline-size: 100%; } .diwan-pub-card__cover img { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; } /* Smaller than the one on a new release, because the jacket it sits on is smaller. Where it sits is the panel's business: the card is the jacket, so the corner of one is the corner of the other. */ .diwan-pub-card .diwan-wish { --diwan-wish-size: 30px; } /* ------------------------------------------------------------- the author card */ :root { --diwan-author-size: 140px; } /* Centred on every page: until 3.6.0 an author's own page lost the centring to Elementor's container rule (.e-con-full), which the Authors page kept. One step past that rule, so the order no longer decides. */ .diwan-author-card { position: relative; } .diwan-author-card.e-con-full, .diwan-author-card:not(.e-con-full) { text-align: center; } /* * Round, because a rectangle of a face reads as a product and a circle reads as * a person. Cropped to fill rather than fitted, which a portrait can take: a * jacket cannot, which is why the covers on this page do the opposite. */ .diwan-author-card__photo { align-items: center; aspect-ratio: 1; background: var(--diwan-surface-sunken, #f4f3f1); border-radius: 999px; display: flex; inline-size: var(--diwan-author-size, 140px); justify-content: center; max-inline-size: 100%; overflow: hidden; } .diwan-author-card__image { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; } /* * An author with no photograph yet gets their initials rather than an empty * circle or a stock silhouette. A shelf of identical grey heads says the site * is broken; initials say what a name badge says. */ .diwan-author-card__photo--initials { background: var(--diwan-taupe, #ab9169); color: var(--diwan-white, #fff); font-family: var(--diwan-font-display); font-size: calc(var(--diwan-author-size, 140px) / 3); font-weight: 600; letter-spacing: 0.04em; line-height: 1; } .diwan-author-card__name { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; } /* The name underlines when the pointer is anywhere on the card, because the whole card is the link. */ .diwan-author-card:hover .diwan-author-card__name { text-decoration: underline; text-underline-offset: 3px; } .diwan-author-card:has(.diwan-card-link:focus-visible) { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 4px; } /* The photograph field on the author screen. */ .diwan-author-photo-field__preview { border-radius: 4px; display: block; margin-block-end: 8px; object-fit: cover; } /* --------------------------------------------------------- the best sellers */ /* * The picker under the heading. It is a form, so it carries a button for the * reader with no script to press; the script hides that button because for * everybody else the change is the submit. */ .diwan-bestsellers__picker { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 26px; } .diwan-bestsellers__label { color: var(--diwan-text-soft, #444); font-size: 13px; } /* A width of its own. A bare select inherits the full measure from the theme, which on a 1360 page is a category picker a metre wide. */ .diwan-bestsellers__picker .diwan-bestsellers__select { background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border-strong, #d5d5d5); border-radius: 0; color: var(--diwan-black, #000); font-family: inherit; font-size: 14px; inline-size: auto; max-inline-size: 100%; min-inline-size: 220px; padding: 9px 14px; } .diwan-bestsellers__select:focus-visible { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 2px; } .diwan-bestsellers__go { background: var(--diwan-black, #000); border: 0; border-radius: 0; color: var(--diwan-white, #fff); cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 10px 18px; text-transform: uppercase; } /* The button is only there for the reader whose browser is not running the script. The script marks the page the moment it parses, which is before the form is on screen, so the button is never seen flickering away. */ .diwan-js .diwan-bestsellers__go { display: none; } /* While the new shelf is on its way. Not a spinner: the old shelf is still readable and it is about to be replaced, so it only needs to stop looking like it is waiting for a click. */ .diwan-bestsellers__picker.is-busy { opacity: 0.55; pointer-events: none; } /* The picker sits under the heading, so the heading row gives up the margin it would otherwise put between itself and the run. */ .diwan-bestsellers__filter { margin-block-start: -14px; } /* ------------------------------------------------------------- the card link */ /* * The whole card is one click target. * * Laid over the card rather than wrapped around it, because several of these * cards carry a wishlist heart and a link inside a link is markup a browser * pulls apart. It sits under the heart, so the heart still gets its own clicks. */ /* The widget itself is taken out of the flow, not only the link inside it. A widget left in the flow still claims a line and the twenty pixels Elementor puts under every widget, which on six bands added up to a page of empty space nobody could see the cause of. */ .elementor-element.elementor-widget-diwan-card-link { inset: 0; margin: 0; position: absolute; z-index: 1; } .diwan-card-link { block-size: 100%; display: block; inline-size: 100%; } /* It has no content, so a focus ring on the link itself would be a ring around nothing. The card takes it instead, which is what a keyboard reader needs to see: which card they are on. */ .diwan-card-link:focus-visible { outline: none; } .diwan-book-card:has(.diwan-card-link:focus-visible), .diwan-staff-card:has(.diwan-card-link:focus-visible), .diwan-pub-card:has(.diwan-card-link:focus-visible), .diwan-event-card__built:has(.diwan-card-link:focus-visible) { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 3px; } /* The title underlines when the pointer is anywhere on the card, not only on the title, because the whole card is the link now. */ .diwan-book-card:hover .diwan-book-card__name, .diwan-staff-card:hover .diwan-staff-card__name { text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------- the Arabic band */ /* The tagline sits under the heading rather than beside it, and close enough to read as part of it. */ .diwan-band__tagline { margin-block-start: -14px; } /* ------------------------------------------------------------------ the band */ /* * The section is Elementor's: its background, padding and the row that holds * the heading and the link are all set in the builder. This is the run itself, * which needs the cards to be the same height whatever the length of a title, * so the prices line up across the row. */ .diwan-books__run .swiper-slide { block-size: auto; } .diwan-books__run .e-loop-item { block-size: 100%; } /* The heading and the way to the rest sit on one line with the whole measure between them, so they have to sit on the same line: aligned on their baselines rather than on their boxes, because a 28px heading and a 13px link are different heights and lining up their tops or their middles leaves the link visibly adrift. Stated on the row Elementor builds inside the section rather than on the section, which is not the flex container and quietly ignores it. */ .diwan-books__head > .elementor-container { align-items: baseline; } .diwan-books__all .elementor-button { letter-spacing: 0.06em; } /* * The home page's bands set the room between their own pieces (Diwan, * October 2026: as compact as Waterstones'). Elementor adds the kit's "space * between widgets" on top of whatever a widget's own margin says, which put * 20 more pixels under every heading, rule and run of cards; inside a band * that is 0, and the margins written on the widgets are the whole of it. */ .elementor-section.diwan-band .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; } /* A card's title in two lines at most, the rest ellipsed, on the title itself: the rule above, on the widget round it, let a third line through, and on an Arabic page an English title set in Cairo ran to five, one card standing a third taller than the run (Diwan, October 2026: every band and two rows of a shelf on one screen). The whole title is the card's link's name, so nothing is lost to a reader. */ .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } @media (max-width: 767px) { :root { --diwan-book-gap: 16px; } /* * The recommendation stays beside its jacket on a phone rather than under * it, which the card itself says. All that is left here is how much of the * width the jacket takes: two fifths is small, but it is still a book and * the whole card is on screen at once. */ .diwan-staff-card .diwan-staff-card__cover { inline-size: 40%; min-inline-size: 40%; } } /* --------------------------------------------------------- the add to cart */ /* * A bar across the foot of the jacket, and out of sight until somebody looks at * the book. A shelf is covers: a row of six black buttons at rest would be a * row of six buttons with some books behind them. Where it sits is Elementor's * business, set on the widget in the card; all this decides is that it starts * below the edge of the cover and slides up. * * The cover box already clips what hangs off it, which is what hides the bar at * rest without anything here having to say display: none. That matters: a * control that is only moved can still be reached by keyboard, and focus inside * the card brings it up the same way a pointer does. */ .diwan-cart { opacity: 0; transform: translateY(100%); transition: opacity 0.25s ease, transform 0.25s ease; } .diwan-book-card:hover .diwan-cart, .diwan-book-card:focus-within .diwan-cart, .diwan-pub-card:hover .diwan-cart, .diwan-pub-card:focus-within .diwan-cart, .diwan-staff-card:hover .diwan-cart, .diwan-staff-card:focus-within .diwan-cart, .diwan-cart--always { opacity: 1; transform: none; } /* A staff favourite's jacket is a thumbnail beside its quotation (October 2026: Add to cart on it too), so the bar is a size smaller to stay on one line across it, and the jacket clips it at rest as a cover does. */ .diwan-staff-card__cover { overflow: hidden; position: relative; } .diwan-staff-card .diwan-cart__button { font-size: 10.5px; letter-spacing: 0.02em; padding-inline: 4px; white-space: nowrap; } /* A touch screen has no hover to wait for, so the bar is simply there. */ @media (hover: none) { .diwan-cart { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .diwan-cart { transition: none; } } .diwan-cart__button { background: var(--diwan-btn-bg, #000000); color: var(--diwan-btn-text, #ffffff); display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; padding: 10px 8px; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; } /* The book's name in the button, for screen readers (the theme's own rule, repeated for a theme that has none). */ .diwan-cart__button .screen-reader-text, .elementor-button .screen-reader-text { block-size: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; } .diwan-cart__button:hover, .diwan-cart__button:focus-visible { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* WooCommerce marks the link while its request is in the air and again when the book is in the basket. The second state is worth showing: the bar is the only thing the reader is looking at, and the count in the header is at the top of the page. */ .diwan-cart__button.loading { opacity: 0.6; pointer-events: none; } .diwan-cart__button.added { background: var(--diwan-taupe, #ab9169); } /* WooCommerce adds its own "View cart" link after the button. Inside a bar this size it would be a second control on top of the first, and the bag in the header, which has just counted up, is where the cart is on this site. */ .diwan-cart .added_to_cart { display: none; } /* ------------------------------------------------------------- the rating */ .diwan-rating { --diwan-star-size: 15px; align-items: center; display: flex; gap: 6px; line-height: 1; } .diwan-rating__stars { display: inline-block; position: relative; } .diwan-rating__row { display: flex; } .diwan-rating__row--empty { color: var(--diwan-star-empty, #dddddd); } /* The filled stars are the same five stars over the top, clipped to the average. Half a star is half a star rather than a rounded one. */ .diwan-rating__row--full { color: var(--diwan-star, #e0b070); inset-block-start: 0; inset-inline-start: 0; overflow: hidden; position: absolute; } .diwan-rating__row--full .diwan-icon { fill: currentColor; } .diwan-rating .diwan-icon { block-size: var(--diwan-star-size); inline-size: var(--diwan-star-size); } .diwan-rating__count { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; } /* -------------------------------------------------------- more to explore */ /* * The one boxed card on the page. Every other band is jackets on a ground, and * a border round each of those would draw a grid over a shelf. This band has no * argument behind it, so the card is a card: a frame, a cover, a name, what * readers made of it, a price and a way in. */ /* The card carries no ground of its own: the jackets stand on the band's tint, the way they do on every other shelf down the page. A white box on a near-white band is a frame drawn for no reason. */ .diwan-explore-card { background: transparent; block-size: 100%; position: relative; } .diwan-explore-card__cover { aspect-ratio: var(--diwan-book-ratio, 2 / 3); background: transparent; overflow: hidden; position: relative; } .diwan-explore-card__cover-widget, .diwan-explore-card__cover-widget > .elementor-widget-container, .diwan-explore-card__cover-widget figure, .diwan-explore-card__cover-widget a { block-size: 100%; display: block; inline-size: 100%; } .diwan-explore-card__cover-widget img { block-size: 100%; display: block; inline-size: 100%; object-fit: var(--diwan-fit-book, contain); } /* The way in sits on the bottom edge of the card whatever the title above it did, so a row of six cards has six buttons on one line. */ .diwan-explore-card .diwan-explore-card__more { margin-block-start: auto; } .diwan-explore-card__more .elementor-button { inline-size: 100%; transition: background-color 0.2s ease, color 0.2s ease; } .diwan-explore-card__more .elementor-button:hover, .diwan-explore-card__more .elementor-button:focus-visible { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* The card is clickable as well as the button in it, so the frame answers a pointer the way the other cards on this page do. */ .diwan-explore-card:hover { border-color: var(--diwan-border-strong, #d5d5d5); } .diwan-explore-card:has(.diwan-card-link:focus-visible) { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 2px; } /* --------------------------------------------------- the authors directory */ /* * The row over the whole directory: a search, how many names are under it, and * the two alphabets. The letters are links rather than a control, so every * letter is a page somebody can send to somebody else. */ .diwan-authors-find { margin-block-end: 26px; } .diwan-authors-find__form { align-items: center; display: flex; gap: 10px; } .diwan-authors-find__box { align-items: center; background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); display: flex; flex: 1 1 320px; gap: 8px; max-inline-size: 420px; padding-inline: 12px; } .diwan-authors-find__box .diwan-icon { color: var(--diwan-text-muted, #6e6e6e); flex: none; } /* One step deeper than the theme's input rule: the box is the border, so the field inside it has none of its own. */ .diwan-authors-find__form .diwan-authors-find__box input[type="search"] { background: transparent; border: 0; color: var(--diwan-text, #000); font-size: 14px; inline-size: 100%; min-inline-size: 0; outline: 0; padding-block: 10px; } .diwan-authors-find__form .diwan-authors-find__go { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 11px 20px; text-transform: uppercase; } .diwan-authors-find__form .diwan-authors-find__go:hover { background: var(--diwan-blue, #246b8f); border-color: var(--diwan-blue, #246b8f); color: var(--diwan-white, #fff); } .diwan-authors-find__clear { color: var(--diwan-blue, #246b8f); display: inline-block; font-size: 13px; margin-block-start: 10px; text-decoration: underline; text-underline-offset: 3px; } .diwan-authors-find__count { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; margin: 10px 0 0; } /* A search that found nobody is the page's answer, not an aside. */ .diwan-authors-find__count.is-empty { color: var(--diwan-text, #000); font-size: 15px; } .diwan-authors-find__letters { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; } /* Each alphabet is kept together and reads its own way round, so the Arabic letters run right to left inside a page that runs left to right. */ .diwan-authors-find__set { display: flex; flex-wrap: wrap; gap: 6px; } .diwan-authors-find__letter { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-text-soft, #444); display: inline-flex; font-size: 13px; justify-content: center; line-height: 1; min-inline-size: 32px; padding: 8px 8px; text-decoration: none; } .diwan-authors-find__letter:hover { border-color: var(--diwan-black, #000); color: var(--diwan-black, #000); } .diwan-authors-find__letter.is-on, .diwan-authors-find__letter.is-on:hover { background: var(--diwan-blue, #246b8f); border-color: var(--diwan-blue, #246b8f); color: var(--diwan-white, #fff); } /* The way to the next sixty, under the grid. */ .diwan-authors-more { margin-block-start: 34px; text-align: center; } .diwan-authors-more__link { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 12px 28px; text-decoration: none; text-transform: uppercase; } .diwan-authors-more__link:hover { background: var(--diwan-blue, #246b8f); border-color: var(--diwan-blue, #246b8f); color: var(--diwan-white, #fff); } .diwan-authors-more__count { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; margin: 10px 0 0; } /* The grid while the next helping is on its way. */ .diwan-authors__grid.is-loading { opacity: 0.35; pointer-events: none; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { .diwan-authors__grid.is-loading { transition: none; } } @media (max-width: 600px) { .diwan-authors-find__form { flex-wrap: wrap; } .diwan-authors-find__box { flex-basis: 100%; max-inline-size: none; } } /* ------------------------------------------ the way to the rest of a shelf */ /* * "View All" beside a section heading reads as a line of words until the * pointer reaches it, and then it is a button like every other: a whole * Papyrus panel with Wood Brown on it, and room around the words. * * The room is there all the time, so nothing on the row moves when the panel * appears, and the panel ends where the shelf under it ends. * * Written at the weight of Elementor's own rule for the element's padding, * plus the element of the link itself, so this is the one that lands. */ .elementor .elementor-element.diwan-books__all a.elementor-button { border-radius: 0; padding: 9px 14px; transition: background-color 0.18s ease, color 0.18s ease; } .elementor .elementor-element.diwan-books__all a.elementor-button:hover, .elementor .elementor-element.diwan-books__all a.elementor-button:focus-visible { background-color: var(--diwan-papyrus, #e0b070); box-shadow: none; color: var(--diwan-wood, #3b0f00); } /* ------------------------------------------- the things that are not books */ /* * Gifts and stationery are photographed as they are: a mug is square-ish, a * tote is wide, a pen is long and thin. A jacket's two-by-three frame turns a * shelf of them into a row of different-sized objects floating in different * amounts of space. * * So the frame becomes a square and the photograph sits inside it, which is * the one shape that holds all of them: whatever the picture is, the card * beside it is the same size, and the row lines up. * * The mark comes from the product itself — the plugin puts it on the card * through post_class — so one rule covers the shop, the carousels on the home * page and any shelf built later. */ .diwan-not-book .diwan-book-card__cover, .diwan-not-book .diwan-explore-card__cover { aspect-ratio: var(--diwan-thing-ratio, 1 / 1); } /* * A grid with books and things in it together (the whole shop, a search) is a * row of jackets with the odd mug among them. There the square would make the * mug a smaller card than the book beside it, so the things take the jacket's * frame and sit inside it: every card in the row is the same size. A shelf of * things alone keeps the square. */ .elementor-loop-container:has(> .e-loop-item.diwan-not-book):has(> .e-loop-item:not(.diwan-not-book)), .swiper-wrapper:has(> .e-loop-item.diwan-not-book):has(> .e-loop-item:not(.diwan-not-book)) { --diwan-thing-ratio: var(--diwan-book-ratio, 2 / 3); } /* * The picture is laid inside the frame rather than stacked in it. A jacket is * always two by three, so a frame that grows to fit one is the right height by * accident; a photograph of a mug is not, and the frame would grow with it and * take the row out of line. Lifted out of the flow, the frame's height is the * square and nothing else, whatever arrives inside it. */ .diwan-not-book .diwan-book-card__cover-widget, .diwan-not-book .diwan-explore-card__cover-widget { inset: 0; position: absolute; } /* Elementor states height:auto on every picture it draws, at the same weight as a single class, and it is loaded after this file — so the frame is named as well as the picture to keep the height the square's. */ .diwan-not-book .diwan-book-card__cover .diwan-book-card__cover-widget img, .diwan-not-book .diwan-explore-card__cover .diwan-explore-card__cover-widget img { block-size: 100%; inline-size: 100%; object-fit: var(--diwan-fit-thing, contain); padding: 10px; } /* No author, so no line for one: without this the card keeps the empty line's gap and the price sits lower than it does on the card beside it. */ .diwan-not-book .diwan-book-card__author, .diwan-not-book .diwan-staff-card__author { display: none; } /* ------------------------------------------------- room for the descenders */ /* * A box that clips its text cuts at the line box, and an Arabic line box is * taller than the line-height these titles are set in: ـج ـح ـق ـى hang below * the Latin baseline and were being sliced across the bottom on every shelf. * * The room is given as padding and taken straight back as margin, so the text * has somewhere to hang and nothing below it moves. Raising the line-height * instead would have worked too, and would have pushed every price on the page * down ten pixels to fix a handful of letters. * * On every card and in both languages, because an Arabic title turns up on an * English page all day long. */ .diwan-book-card__name, .diwan-book-card__author, .diwan-staff-card__name, .diwan-staff-card__author, .diwan-staff-card__note, .diwan-staff-card__by, .diwan-event-card__name { padding-block-end: 0.3em; margin-block-end: -0.3em; } /* A favourite marked by its tag alone has no note and no name under it: the two lines go, rather than leaving a gap where they would have been. */ .elementor-widget.diwan-staff-card__note:has(.elementor-heading-title:empty), .elementor-widget.diwan-staff-card__by:has(.elementor-heading-title:empty) { display: none; } /* * Every grid of cards keeps its columns equal, whatever is in them. * * Elementor lays a loop grid out in 1fr columns, and 1fr grows to fit the * widest thing in the column that cannot break. One title with a wide glyph — * "نبي الله محمد ﷺ", where ﷺ is a single character drawn as wide as a phrase — * pushed one column to 277px on a 390px phone and the whole shop scrolled * sideways. minmax(0, 1fr) keeps each column to its share; the title is * clipped inside its own card instead. */ .elementor-widget-loop-grid .elementor-loop-container.elementor-grid { grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr)); } .elementor-widget-loop-grid .elementor-loop-container.elementor-grid > .e-loop-item { min-inline-size: 0; } .diwan-book-card__name .elementor-heading-title { overflow-wrap: anywhere; } /* ==================== Diwan Core · shop.css ==================== */ /** * The shop: a column of filters, and five books across beside it. * * The grid itself is Elementor's, and the number of columns is a panel setting * rather than a rule here. What is here is the column beside it, which is a set * of controls rather than content and is the one part of the page the brand's * own styling has to reach: a native select, a native number box and a checkbox * all arrive looking like whatever the browser thinks, and three different * browsers is three different shops. */ /* * The filters follow the reader down a long shelf. The offset clears the * header, which is fixed and would otherwise cut the top off the column. * * Written one class deeper than Elementor writes its own column rule, which * sets position: relative at the same weight and loads after this file. */ .elementor-element.diwan-shop__side { align-self: flex-start; position: sticky; top: calc(var(--diwan-header-height, 122px) + 16px); } .diwan-filters { display: flex; flex-direction: column; gap: 22px; font-size: 14px; } .diwan-filters__form { display: flex; flex-direction: column; gap: 18px; margin: 0; } .diwan-filters__block { display: flex; flex-direction: column; gap: 8px; } .diwan-filters__title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; } .diwan-filters__title label { cursor: pointer; } /* ------------------------------------------------------------- the search */ .diwan-filters__search { align-items: center; background: var(--diwan-surface, #ffffff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); display: flex; gap: 6px; padding-inline: 10px; } /* * The box is the box, and the field inside it is not. * * Written with the element in the .elementor-kit-149244 because the theme paints a border on * every input at the same weight and loads after this file, which is how the * search and the price boxes ended up drawn twice: one border for the control * and one, a few pixels inside it, for the field. */ .diwan-filters input.diwan-filters__field { background: none; border: 0; border-radius: 0; box-shadow: none; flex: 1 1 auto; font: inherit; min-inline-size: 0; outline: none; padding: 10px 0; } .diwan-filters input.diwan-filters__field:focus { border: 0; box-shadow: none; outline: none; } .diwan-filters__search:focus-within { border-color: var(--diwan-black, #000000); } .diwan-filters__go { background: none; border: 0; color: var(--diwan-text, #000000); cursor: pointer; display: flex; padding: 4px; } .diwan-filters__scope { display: flex; gap: 16px; } .diwan-filters__check { align-items: center; cursor: pointer; display: flex; font-size: 13px; gap: 6px; } /* --------------------------------------------------------------- the sort */ .diwan-filters__select { appearance: none; background: var(--diwan-surface, #ffffff); /* The chevron is the site's own, as a data URI: a select cannot hold an element, and the browser's arrow is the one control on the page that would not be ours. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9.5 7 7 7-7'/%3E%3C/svg%3E"); background-position: left 10px center; background-repeat: no-repeat; background-size: 16px 16px; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); color: inherit; font: inherit; inline-size: 100%; padding: 10px 12px; padding-inline-end: 34px; } /* The arrow sits on the far edge, which is the right in English and the left in Arabic. Logical properties do not reach a background position, so the one place in this file that has to know the direction is here. */ body:not(.rtl) .diwan-filters__select { background-position: right 10px center; } .diwan-filters__select:focus-visible { border-color: var(--diwan-black, #000000); } /* -------------------------------------------------------------- the stock */ .diwan-filters__switch { align-items: center; cursor: pointer; display: flex; gap: 10px; } .diwan-filters__switch input { block-size: 1px; inline-size: 1px; opacity: 0; position: absolute; } .diwan-filters__track { background: var(--diwan-border-strong, #d5d5d5); block-size: 20px; border-radius: 999px; flex: 0 0 auto; inline-size: 36px; position: relative; transition: background-color 0.2s ease; } .diwan-filters__track::after { background: var(--diwan-white, #ffffff); block-size: 14px; border-radius: 50%; content: ""; inline-size: 14px; inset-block-start: 3px; inset-inline-start: 3px; position: absolute; transition: inset-inline-start 0.2s ease; } .diwan-filters__switch input:checked + .diwan-filters__track { background: var(--diwan-black, #000000); } .diwan-filters__switch input:checked + .diwan-filters__track::after { inset-inline-start: 19px; } .diwan-filters__switch input:focus-visible + .diwan-filters__track { outline: 2px solid var(--diwan-blue, #246b8f); outline-offset: 2px; } .diwan-filters__switch-label { font-size: 13px; } /* -------------------------------------------------------------- the price */ .diwan-filters__range { align-items: center; display: flex; gap: 8px; } .diwan-filters__money { align-items: center; background: var(--diwan-surface, #ffffff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); display: flex; flex: 1 1 0; gap: 4px; min-inline-size: 0; padding-inline: 8px; } .diwan-filters__money:focus-within { border-color: var(--diwan-black, #000000); } .diwan-filters__currency { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; } .diwan-filters input.diwan-filters__number { background: none; border: 0; border-radius: 0; box-shadow: none; font: inherit; inline-size: 100%; min-inline-size: 0; outline: none; padding: 9px 0; } .diwan-filters input.diwan-filters__number:focus { border: 0; box-shadow: none; outline: none; } /* The spinners are a second control inside a control, and they make a 3-digit box too narrow to read. */ .diwan-filters input.diwan-filters__number::-webkit-outer-spin-button, .diwan-filters input.diwan-filters__number::-webkit-inner-spin-button { appearance: none; margin: 0; } .diwan-filters input.diwan-filters__number { appearance: textfield; } .diwan-filters__dash { color: var(--diwan-text-muted, #6e6e6e); } /* ------------------------------------------------------------ the buttons */ .diwan-filters__apply { background: var(--diwan-btn-bg, #000000); border: 1px solid var(--diwan-btn-border, #000000); color: var(--diwan-btn-text, #ffffff); cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 11px 14px; text-transform: uppercase; } .diwan-filters__apply:hover, .diwan-filters__apply:focus-visible { background: var(--diwan-btn-bg-hover, #ffffff); color: var(--diwan-btn-text-hover, #000000); } /* With the script running, a change sends the form on its own and the button is one press nobody needs. Without it, it is the only way to send anything. */ .diwan-js .diwan-filters__apply { display: none; } /* A control rather than a line of small print: it undoes everything above it, which is the second most consequential thing in the column. */ .diwan-filters__clear { align-items: center; border: 1px solid var(--diwan-border-strong, #d5d5d5); color: var(--diwan-text, #000000); display: flex; font-size: 12px; font-weight: 600; gap: 8px; justify-content: center; letter-spacing: 0.06em; padding: 10px 12px; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Out of sight while nothing is filtered, and the count beside "Filters" while it is nought: both carry the hidden attribute then, and their own display (flex, grid) outranked it, so "Clear all filters" stood under every shelf and a 0 beside the phone's Filters (Ahmad, 7 October 2026). */ .diwan-filters__clear[hidden], .diwan-filters__badge[hidden] { display: none; } .diwan-filters__clear::before { content: "×"; font-size: 16px; line-height: 1; } .diwan-filters__clear:hover, .diwan-filters__clear:focus-visible { background: var(--diwan-black, #000000); border-color: var(--diwan-black, #000000); color: var(--diwan-white, #ffffff); } /* ---------------------------------------------------------------- the sheet */ /* * Beside the books the column is a column: its own head would repeat the page * and its own way out would lead nowhere. Both are drawn all the same, because * the same markup becomes a sheet over the shelf on anything narrower than a * desk, and a sheet has to say what it is and how to leave. */ .diwan-filters__bar, .diwan-filters__done { display: none; } /* ------------------------------------------------------------- the handle */ /* * The whole column folds away on a phone, behind one control that says how many * filters are on. Beside the books there is nothing to fold, so the handle is * not drawn at all. */ .diwan-filters__handle { display: none; } .diwan-filters__handle::-webkit-details-marker { display: none; } @media (max-width: 1024px) { .diwan-filters__handle { align-items: center; border: 1px solid var(--diwan-black, #000000); cursor: pointer; display: flex; font-size: 13px; font-weight: 600; gap: 8px; justify-content: center; letter-spacing: 0.06em; list-style: none; padding: 12px; text-transform: uppercase; } .diwan-filters__handle::after { content: "+"; font-size: 16px; line-height: 1; } .diwan-filters__panel[open] > .diwan-filters__handle { margin-block-end: 18px; } .diwan-filters__panel[open] > .diwan-filters__handle::after { content: "–"; } .diwan-filters__badge { background: var(--diwan-black, #000000); block-size: 20px; border-radius: 999px; color: var(--diwan-white, #ffffff); display: grid; font-size: 11px; inline-size: 20px; place-items: center; } } /* --------------------------------------------------------- the categories */ .diwan-filters__block--cats { border-block-start: 1px solid var(--diwan-border, #e6e6e6); padding-block-start: 4px; } .diwan-cats__list { list-style: none; margin: 0; padding: 0; } /* Every level after the first is stepped in on the reading edge, which is the left in English and the right in Arabic. */ .diwan-cats__sub .diwan-cats__list { border-inline-start: 1px solid var(--diwan-border, #e6e6e6); margin-inline-start: 7px; padding-inline-start: 10px; } .diwan-cats__row { align-items: center; display: flex; gap: 6px; padding-block: 3px; } .diwan-cats__check { align-items: center; cursor: pointer; display: flex; flex: 1 1 auto; gap: 7px; min-inline-size: 0; } .diwan-cats__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diwan-cats__count { color: var(--diwan-text-muted, #6e6e6e); flex: 0 0 auto; font-size: 12px; } /* A category whose parent is already ticked is ticked too and cannot be unticked on its own: it is included by the parent, and saying otherwise would offer a distinction the shelf does not make. */ .diwan-cats__check input:disabled + .diwan-cats__name { color: var(--diwan-text-muted, #6e6e6e); } .diwan-cats__toggle { background: none; border: 0; color: var(--diwan-text-muted, #6e6e6e); cursor: pointer; flex: 0 0 auto; font-size: 15px; line-height: 1; padding: 2px 4px; } .diwan-cats__toggle:hover, .diwan-cats__toggle:focus-visible { color: var(--diwan-text, #000000); } .diwan-cats__sub { display: none; } .diwan-cats__sub.is-open { display: block; } /* The disclosure's own control is only ever used on a narrow screen; beside the books there is nothing to fold away. */ .diwan-filters__summary { cursor: pointer; display: none; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; list-style: none; padding-block: 10px; text-transform: uppercase; } .diwan-filters__summary::-webkit-details-marker { display: none; } .diwan-filters__summary::after { content: " +"; } details[open] > .diwan-filters__summary::after { content: " –"; } @media (max-width: 1024px) { .diwan-filters__summary { border-block-start: 1px solid var(--diwan-border, #e6e6e6); display: block; } .diwan-filters__block--cats { padding-block-start: 0; } /* The column is already behind one control on a phone; a second one in front of the categories would be two doors to the same room. */ .diwan-filters__panel[open] .diwan-filters__block--cats { border-block-start: 1px solid var(--diwan-border, #e6e6e6); } } /* -------------------------------------------------------------- the shelf */ .diwan-shop-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 22px; } .diwan-shop-head__title { color: var(--diwan-heading, #246b8f); font-size: 26px; font-weight: 600; margin: 0; text-transform: uppercase; } .diwan-shop-head__count { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; margin: 0; } /* Elementor lays the grid out; these are the two things it cannot know: that a card should fill the cell it is in, and that the button underneath is the site's button rather than the theme's. */ .diwan-shop__grid .e-loop-item { display: flex; } .diwan-shop__grid .e-loop-item > .e-con, .diwan-shop__grid .e-loop-item > .elementor-section { inline-size: 100%; } /* Two whole rows of a shelf on a laptop's screen (Diwan, October 2026): on a shelf the frame is a little less tall than a jacket's two by three, and the cover sits inside it as Store settings → Pictures says. */ @media (min-width: 1025px) { .diwan-shop__grid { --diwan-book-ratio: 5 / 7; } } /* The Load More button. One class deeper than Elementor's own rule, which paints it the kit's accent colour and loads after this file. */ .elementor-element.diwan-shop__grid .elementor-button { background-color: var(--diwan-btn-bg, #000000); border-radius: 0; color: var(--diwan-btn-text, #ffffff); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 13px 34px; text-transform: uppercase; } .elementor-element.diwan-shop__grid .elementor-button:hover, .elementor-element.diwan-shop__grid .elementor-button:focus-visible { background-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } @media (max-width: 1024px) { .elementor-element.diwan-shop__side { position: static; } /* One column wherever the menu is the phone menu (Diwan, October 2026): two columns side by side read as two separate forms. */ .diwan-filters__form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .diwan-filters__block--search { grid-column: 1 / -1; } } /* ------------------------------------------------- the filters as a sheet */ /* * A shelf narrower than a desk has no room for a column of controls beside it: * at 914px the column was 170px wide and every control in it was folded, which * is a filter nobody uses. So the two stack, the column goes behind one button, * and opening it draws the controls over the shelf at the size of the screen — * the way every shop of this size does it, and the way the phone already did. * * It is the same markup and the same form throughout: a disclosure whose panel * happens to be fixed. Nothing here needs the script, and with the script off * the sheet still opens, still filters, and still closes. */ @media (max-width: 1024px) { /* Elementor writes the column widths at three classes deep in the page's own stylesheet, which loads after this file; the element on the front carries this rule past it without touching the page's data. */ body[class] .elementor-element.diwan-shop__side, body[class] .elementor-element.diwan-shop__main { width: 100%; } body[class] .elementor-element.diwan-shop__side { margin-block-end: 18px; } /* One button, the width of what it says. */ .diwan-filters__handle { inline-size: fit-content; } .diwan-filters__panel[open] > .diwan-filters__handle { margin-block-end: 0; } .diwan-filters__panel[open] > .diwan-filters__form { align-content: start; background: var(--diwan-surface, #ffffff); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 96px; position: fixed; z-index: 100000; } /* The head of the sheet stays where it is while the controls scroll under it: on a long list the way out should never be a scroll away. */ .diwan-filters__panel[open] .diwan-filters__bar { align-items: center; background: var(--diwan-surface, #ffffff); border-block-end: 1px solid var(--diwan-border, #e6e6e6); display: flex; grid-column: 1 / -1; inset-block-start: 0; justify-content: space-between; margin-inline: -18px; padding: 16px 18px; position: sticky; z-index: 1; } .diwan-filters__bar-title { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .diwan-filters__close { align-items: center; background: none; border: 0; color: var(--diwan-text, #000000); cursor: pointer; display: flex; padding: 6px; } .diwan-filters__block--search { grid-column: 1 / -1; } /* The count is the point of the button, so it is on the same line as the words and not under them. */ .diwan-filters__panel[open] .diwan-filters__done { align-items: center; background: var(--diwan-btn-bg, #000000); border: 0; color: var(--diwan-btn-text, #ffffff); cursor: pointer; display: flex; font-size: 13px; font-weight: 600; gap: 8px; inset-block-end: 16px; inset-inline: 18px; justify-content: center; letter-spacing: 0.06em; padding: 15px; position: fixed; text-transform: uppercase; z-index: 2; } .diwan-filters__panel[open] .diwan-filters__done:hover, .diwan-filters__panel[open] .diwan-filters__done:focus-visible { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } .diwan-filters__done-count { opacity: 0.75; } .diwan-filters__panel[open] .diwan-filters__clear { grid-column: 1 / -1; } /* The page behind the sheet does not scroll, and nothing of the site's own furniture floats over it. */ .diwan-filters-open, .diwan-filters-open body { overflow: hidden; } .diwan-filters-open .diwan-wa, .diwan-filters-open .diwan-header { display: none; } } /* -------------------------------------------------------------- the swap */ /* * While the next shelf is on its way the old one stays where it is, inert, and * each card on it becomes the outline of a card: a cover, a title, a name, a * price, shimmering. Emptying the grid first would collapse the page to the * height of the filters and throw the reader's scroll position away for the * sake of half a second; this keeps every card where it is and says plainly * that new ones are coming. */ .diwan-shop__grid.is-loading { pointer-events: none; } .diwan-shop__grid.is-loading .e-loop-item { position: relative; } .diwan-shop__grid.is-loading .e-loop-item::after, .diwan-skeleton { --diwan-skeleton-ink: #eeeeee; animation: diwan-shimmer 1.2s linear infinite; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 70%) 0 0 / 200% 100%, linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 0 / 100% 70% no-repeat, linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 76% / 82% 12px no-repeat, linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 84% / 56% 10px no-repeat, linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 93% / 34% 12px no-repeat, var(--diwan-white, #ffffff); content: ""; } .diwan-shop__grid.is-loading .e-loop-item::after { inset: 0; position: absolute; z-index: 2; } /* The row of empty cards Load More puts where the next books will go. */ .diwan-skeleton { aspect-ratio: 2 / 4.1; inline-size: 100%; } [dir="rtl"] .diwan-shop__grid.is-loading .e-loop-item::after, [dir="rtl"] .diwan-skeleton { background-position: 0 0, 100% 0, 100% 76%, 100% 84%, 100% 93%, 0 0; } @keyframes diwan-shimmer { from { background-position-x: 150%, 0, 0, 0, 0, 0; } to { background-position-x: -50%, 0, 0, 0, 0, 0; } } [dir="rtl"] .diwan-shop__grid.is-loading .e-loop-item::after, [dir="rtl"] .diwan-skeleton { animation-name: diwan-shimmer-rtl; } @keyframes diwan-shimmer-rtl { from { background-position-x: -50%, 100%, 100%, 100%, 100%, 0; } to { background-position-x: 150%, 100%, 100%, 100%, 100%, 0; } } @media (prefers-reduced-motion: reduce) { .diwan-shop__grid.is-loading .e-loop-item::after, .diwan-skeleton { animation: none; } } /* ------------------------------------------------------------ the chips */ /* What the shelf has been asked, above the books, each one a way to undo it. */ .diwan-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; } .diwan-chips li { margin: 0; } .diwan-chip { align-items: center; background: var(--diwan-grey-50, #fafafa); border: 1px solid var(--diwan-border, #e6e6e6); color: var(--diwan-text, #000000); display: inline-flex; font-size: 13px; gap: 8px; line-height: 1.2; padding: 7px 10px 7px 12px; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } [dir="rtl"] .diwan-chip { padding: 7px 12px 7px 10px; } .diwan-chip:hover, .diwan-chip:focus-visible { background: var(--diwan-papyrus, #e0b070); border-color: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } .diwan-chip__x { display: inline-flex; opacity: 0.6; } .diwan-chip:hover .diwan-chip__x { opacity: 1; } .diwan-chips__clear { color: var(--diwan-text, #000000); display: inline-block; font-size: 13px; font-weight: 600; padding: 7px 4px; text-decoration: underline; text-underline-offset: 3px; } .diwan-chips__clear:hover, .diwan-chips__clear:focus-visible { color: var(--diwan-wood, #3b0f00); } .diwan-shop__empty { color: var(--diwan-text-muted, #6e6e6e); padding-block: 40px; } .diwan-shop__empty h2 { color: var(--diwan-text, #000000); font-size: 18px; margin: 0 0 6px; } .diwan-shop__empty p { margin: 0; } /* ==================== Diwan Core · events.css ==================== */ /** * Events: the home page strip, the archive and the event's own page. * * The card is taken from the staging design, which it shares with the home page * strip, the archive grid and the related run at the foot of an event. One card * drawn once, so the three places can never drift apart. * * The cover is 281 by 158, which is 16:9. That matters: of the 345 posters in * the programme, 306 are drawn at 16:9, so this frame crops about 2% off the * average one. The card's own measurements hang off these two numbers, so * changing the cover size moves the card and the track with it. */ /* ------------------------------------------------------------ the section */ /* The card's measurements, declared once at the top rather than inside the home page section: the archive grid and the run at the foot of an event are outside that section and draw the same card. */ :root { --diwan-event-cover-w: 281px; --diwan-event-cover-h: 158px; /* The same two numbers without units. aspect-ratio takes a ratio, not a pair of lengths, so "281px / 158px" is not a value it accepts. */ --diwan-event-cover-ratio: 281 / 158; /* The gap between the card's border and the poster inside it. */ --diwan-event-pad: 12px; /* Between one card and the next. */ --diwan-event-gap: 24px; /* The widest a single card is drawn, for the archive grid and for a run with only one or two cards in it. */ --diwan-event-card-w: calc(var(--diwan-event-cover-w) + 2 * var(--diwan-event-pad) + 24px); } .diwan-events { color: var(--diwan-text, #000); margin-block: 44px; } /* Named on the card link rather than on every link in the section: a blanket ".diwan-events a" outranks a single class and would repaint the View all events button with the section's own text colour, which is black, on a black button. */ .diwan-event-card__link { color: inherit; } .diwan-events__frame { position: relative; } /* No padding here on purpose. The cards have to line up with the header and the offers strip above them, and any padding on this section moves them out of that line. The arrows hang half outside the track instead, into the 20px the site box already reserves either side of its content. */ .diwan-events__head { margin-block-end: 26px; text-align: center; } .diwan-events__title { color: var(--diwan-heading, #246b8f); font-family: var(--diwan-font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; margin: 0; text-transform: uppercase; } /* The short rule under the heading, which is what marks a section on this site rather than a full width border. */ .diwan-events__rule { background: var(--diwan-black, #000); block-size: 3px; display: block; inline-size: 42px; margin: 10px auto 0; } /* What the arrows are positioned against. The section starts at the heading, so measuring from there put them above the cards rather than level with them. */ .diwan-events__run { position: relative; } /* The track scrolls rather than being a slider: it swipes natively on a phone, works with the script absent, and the arrows only move the scroll position. Same engine as the offers strip. */ .diwan-events__track { -ms-overflow-style: none; display: grid; /* Four cards with 24 between them, and the cards take what is left. The cover keeps the proportions it was drawn at, 281 by 158, and grows with the card: at 1360 that comes out around 298 by 168. Fixing the card instead would leave an uneven gap, and the gap is the thing that was asked for. */ gap: var(--diwan-event-gap); grid-auto-columns: calc((100% - 3 * var(--diwan-event-gap)) / 4); grid-auto-flow: column; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .diwan-events__track::-webkit-scrollbar { display: none; } .diwan-events__track > * { scroll-snap-align: start; } /* The square, the chevron and the colours are in arrows.css, shared with the offers strip above and both loop carousels, so all four runs on the page are driven by the same control. What is left here is where this run puts them: either side of the cards rather than underneath, because an arrow under a row of cards is a long way from the thing it moves. */ .diwan-events__arrow { /* Level with the middle of the poster, not the middle of the whole card: the card is taller than its image, so centring on the card would put the arrows down beside the title. */ inset-block-start: calc(var(--diwan-event-pad, 12px) + var(--diwan-event-cover-render, 168px) / 2 + 1px); position: absolute; transform: translateY(-50%); z-index: 2; } /* Named on this carousel's own arrows. The attribute on its own is how every carousel on the site marks its previous button, so a bare [data-diwan-prev] here reached the offers strip on any page that carries both and pulled its arrows twenty pixels off the side of the screen. */ .diwan-events__arrow[data-diwan-prev] { inset-inline-start: -20px; } .diwan-events__arrow[data-diwan-next] { inset-inline-end: -20px; } .diwan-events__all { margin-block: 30px 0; text-align: center; } /* The button reads as a label on this site, not a sentence. */ .diwan-events__all .diwan-button { letter-spacing: 0.06em; padding: 14px 30px; text-transform: uppercase; } .diwan-events.is-single .diwan-events__track { justify-content: center; } /* ---------------------------------------------------------------- the card */ .diwan-event-card { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); overflow: hidden; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .diwan-event-card:hover { border-color: var(--diwan-border-strong, #d5d5d5); box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06)); } .diwan-event-card__link { display: grid; gap: 14px; block-size: 100%; grid-template-rows: auto 1fr; padding: var(--diwan-event-pad, 12px); text-decoration: none; } .diwan-event-card__cover { display: block; position: relative; } /* The ratio is stated rather than left to the image: the cards after the first are lazy loaded, and a box with no shape collapses until its picture lands. Width comes from the card, so a narrow screen shrinks the poster rather than overflowing with it. */ .diwan-event-card__image, .diwan-event-card__placeholder { aspect-ratio: var(--diwan-event-cover-ratio, 281 / 158); border-radius: var(--diwan-radius-sm, 4px); display: block; inline-size: 100%; object-fit: cover; object-position: center; } .diwan-event-card__placeholder { align-items: center; background: var(--diwan-surface-sunken, #f4f3f1); color: var(--diwan-text-faint, #a0a0a0); display: flex; justify-content: center; } /* An event that has been and gone is still worth showing, but it should not look like something you can still come to. */ .diwan-event-card.is-past .diwan-event-card__image { filter: grayscale(1); opacity: 0.55; } .diwan-event-card__flag { background: var(--diwan-wood, #3b0f00); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-canvas, #faf7db); font-size: 11px; inset-block-start: 10px; inset-inline-start: 10px; letter-spacing: 0.08em; padding: 4px 9px; position: absolute; text-transform: uppercase; } .diwan-event-card__body { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 4px; } .diwan-event-card__meta { align-items: center; color: var(--diwan-text-soft, #444); display: flex; font-size: 15px; gap: 8px; line-height: 1.4; } .diwan-event-card__meta .diwan-icon { color: var(--diwan-text-muted, #6e6e6e); flex: none; } .diwan-event-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diwan-event-card__name { color: var(--diwan-text, #000); display: -webkit-box; font-family: var(--diwan-font-display); font-size: 16px; font-weight: 600; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; margin-block-start: 4px; overflow: hidden; text-transform: uppercase; } .diwan-event-card__link:hover .diwan-event-card__name { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------ the run, as an Elementor loop carousel */ /* * The events run on the home page is Elementor's Loop Carousel, drawing each * card from the event card template. Everything about it is set in the builder: * how many cards, how far an arrow moves, the gap, where the arrows sit. Its * arrows are the site's arrows, and that is in arrows.css along with every * other arrow on the page, so there is one place to change them. */ /* ------------------------------------------- the card as an Elementor loop */ /* The card built from the loop template keeps the frame the run gives it: the template draws the inside, the run decides how wide it is. */ .diwan-event-card--built { border: 0; overflow: visible; } .diwan-event-card--built > .elementor { block-size: 100%; } /* A row whose field is empty on this event, an online talk with no branch for instance, takes no room rather than leaving a stray icon on its own line. */ .diwan-event-card--built .elementor-icon-list-item:has(.elementor-icon-list-text:empty) { display: none; } .diwan-event-card--built .elementor-icon-list-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------- the archive */ .diwan-events-archive { padding-block: 30px 60px; } .diwan-events-archive__head { margin-block-end: 24px; text-align: center; } .diwan-events-archive__title { color: var(--diwan-heading, #246b8f); font-family: var(--diwan-font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; } .diwan-events-archive__filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block-end: 32px; } /* The events' own chips, in the archive and on an event drawn without Elementor. Named through their page, so they never meet the shop's chips of the same name (shop.css), whichever is read first (3.6.0). */ :is(.diwan-events-archive, .diwan-event) .diwan-chip { border: 1px solid var(--diwan-border-strong, #d5d5d5); color: var(--diwan-text-soft, #444); font-size: 14px; line-height: 1; padding: 9px 16px; text-decoration: none; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } /* Every hover in the events is the menu's: papyrus behind, wood in front. The chosen chip, page or view keeps its own dark colours. */ :is(.diwan-events-archive, .diwan-event) .diwan-chip:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } :is(.diwan-events-archive, .diwan-event) .diwan-chip.is-current, :is(.diwan-events-archive, .diwan-event) .diwan-chip.is-current:hover { background: var(--diwan-wood, #3b0f00); border-color: var(--diwan-wood, #3b0f00); color: var(--diwan-canvas, #faf7db); } /* Upcoming or past: the two halves of the programme, as a pair of tabs under the categories rather than a third row of chips that would read as one more category. */ .diwan-events-archive__when { border-block-end: 1px solid var(--diwan-border, #e6e6e6); display: flex; gap: 24px; justify-content: center; margin-block-end: 30px; } .diwan-tab { border-block-end: 2px solid transparent; color: var(--diwan-text-muted, #6e6e6e); font-size: 15px; margin-block-end: -1px; padding: 0 2px 12px; text-decoration: none; } .diwan-tab:hover { color: var(--diwan-text, #000); } .diwan-tab.is-current { border-block-end-color: var(--diwan-black, #000); color: var(--diwan-text, #000); font-weight: 600; } /* Four across, the same four as the home page strip, at the same 24 between them. Counted rather than fitted: auto-fill with a fixed maximum decides how many fit from the minimum and then draws them at the maximum, which put three on a row here while the strip beside it had four. */ .diwan-events-grid { display: grid; gap: var(--diwan-event-gap, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); } .diwan-events-archive__empty { color: var(--diwan-text-muted, #6e6e6e); padding-block: 40px; text-align: center; } /* The class WordPress puts on the nav is the one passed to the_posts_pagination, which replaces its default rather than adding to it. */ .diwan-events-archive__pages { display: flex; justify-content: center; margin-block-start: 40px; } .diwan-events-archive .nav-links { display: flex; gap: 6px; } .diwan-events-archive .page-numbers { border: 1px solid var(--diwan-border, #e6e6e6); color: var(--diwan-text, #000); line-height: 1; padding: 10px 14px; text-decoration: none; } .diwan-events-archive .page-numbers.current, .diwan-events-archive .page-numbers:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* ------------------------------------------------------------- one event */ .diwan-event { padding-block: 24px 60px; } .diwan-event__back { font-size: 14px; margin-block-end: 18px; } .diwan-event__back a { color: var(--diwan-text-muted, #6e6e6e); text-decoration: none; } .diwan-event__back a:hover { color: var(--diwan-text, #000); } .diwan-event__head { margin-block-end: 22px; max-inline-size: 820px; } .diwan-event__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .diwan-event__title { font-family: var(--diwan-font-display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; line-height: 1.18; margin: 0; } .diwan-event__closed { background: var(--diwan-surface-sunken, #f4f3f1); border-inline-start: 3px solid var(--diwan-text-muted, #6e6e6e); color: var(--diwan-text-soft, #444); font-size: 15px; margin-block-start: 16px; padding: 10px 14px; } /* The poster is shown whole here, not cropped to a banner. Event artwork carries the date, the venue and the price inside the picture, and a wide crop cuts exactly that off. The card in a grid has to crop because the cards have to line up; this page does not. */ .diwan-event__cover { align-items: center; background: var(--diwan-surface-sunken, #f4f3f1); display: flex; justify-content: center; margin: 0 0 34px; overflow: hidden; } .diwan-event__image { display: block; max-block-size: 520px; max-inline-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; } .diwan-event__layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) 340px; } .diwan-event__subhead { font-family: var(--diwan-font-display); font-size: 20px; font-weight: 600; margin: 0 0 14px; text-transform: uppercase; } .diwan-event__text { font-size: 16px; line-height: 1.75; } .diwan-event__text p { margin-block: 0 1em; } /* The booking button is the point of the page, so it follows the reader down a long description rather than being left at the top. */ .diwan-event__panel { align-self: start; border: 1px solid var(--diwan-border, #e6e6e6); padding: 22px; position: sticky; inset-block-start: calc(var(--diwan-header-h, 0px) + 16px); } .diwan-event__facts { display: grid; gap: 16px; margin: 0; } .diwan-event__fact dt { align-items: center; color: var(--diwan-text-muted, #6e6e6e); display: flex; font-size: 13px; gap: 7px; letter-spacing: 0.06em; margin: 0 0 4px; text-transform: uppercase; } .diwan-event__fact dd { font-size: 16px; line-height: 1.5; margin: 0; } .diwan-event__map { display: block; font-size: 14px; margin-block-start: 4px; } .diwan-event__book { margin-block: 24px 0; } .diwan-event__book .diwan-button { display: block; text-align: center; } .diwan-event__contact { border-block-start: 1px solid var(--diwan-border, #e6e6e6); margin-block-start: 22px; padding-block-start: 18px; } .diwan-event__contact h3 { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; letter-spacing: 0.06em; margin: 0 0 10px; text-transform: uppercase; } .diwan-event__contact p { align-items: center; display: flex; font-size: 15px; gap: 8px; margin: 0 0 7px; word-break: break-word; } .diwan-event__contact .diwan-icon { color: var(--diwan-text-muted, #6e6e6e); flex: none; } .diwan-event__contact-name { font-weight: 600; } .diwan-event__more { border-block-start: 1px solid var(--diwan-border, #e6e6e6); margin-block-start: 56px; padding-block-start: 40px; text-align: center; } .diwan-event__more .diwan-events-grid { margin-block-start: 26px; text-align: start; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .diwan-event__layout { grid-template-columns: minmax(0, 1fr) 300px; } } @media (max-width: 1100px) { /* Three across. The gap holds at 24 the whole way down, so the rhythm of the page does not change with the screen. */ .diwan-events__track { grid-auto-columns: calc((100% - 2 * var(--diwan-event-gap)) / 3); } .diwan-events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .diwan-events__track { grid-auto-columns: calc((100% - var(--diwan-event-gap)) / 2); } .diwan-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diwan-event__layout { gap: 30px; grid-template-columns: minmax(0, 1fr); } /* Nothing to stick to once the panel is a full width block under the text. */ .diwan-event__panel { position: static; } } @media (max-width: 600px) { .diwan-events { margin-block: 32px; } /* A sliver of the next card, so it reads as a run that can be swiped. */ .diwan-events__track { --diwan-event-gap: 16px; grid-auto-columns: 78%; } /* Two on a phone rather than one: the poster is wide, and one per row makes a very long page out of a programme this size. */ .diwan-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .diwan-events__track { scroll-behavior: auto; } } /* ========================================================================== * The built archive, and the built event page. * * Everything below draws the two Elementor documents rather than the PHP * templates above: the programme read three ways, and one event. The rules are * written against our own classes, put on the widgets in the documents, so a * designer moving a widget in Elementor keeps its styling with it. * ========================================================================== */ /* ------------------------------------------------- the archive: the heading */ .diwan-events-head__title .elementor-heading-title { letter-spacing: 0.02em; } /* The rule under the heading is Elementor's divider, which centres itself by default. It belongs at the start of the line, and on the Arabic page the start of the line is the right. */ .diwan-events-head__rule .elementor-divider { justify-content: flex-start; padding-block: 0; } /* ----------------------------------------------- the archive: the whole row */ .diwan-events-bar { align-items: center; background: var(--diwan-surface-alt, #fafaf8); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 14px; } /* The search takes whatever the controls beside it leave, down to a width at which a title still fits in it. */ .diwan-events-bar__search { align-items: center; background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); display: flex; flex: 1 1 220px; gap: 8px; min-inline-size: 180px; padding-inline: 10px; } .diwan-events-bar__search .diwan-icon { color: var(--diwan-text-muted, #6e6e6e); flex: none; } /* One step deeper than the theme's own input rule, and no border of its own: the box around it is the border. */ .diwan-events-bar .diwan-events-bar__search input[type="search"] { background: transparent; border: 0; color: var(--diwan-text, #000); font-size: 14px; inline-size: 100%; min-inline-size: 0; outline: 0; padding-block: 9px; padding-inline: 0; } /* The theme's focus rule gives a focused field a 4px white ring and its own padding. Inside this box the ring drew a second, larger white rectangle over the box's edge. The field stays flat; the box around it shows the focus. */ .diwan-events-bar .diwan-events-bar__search input[type="search"]:focus, .diwan-events-bar .diwan-events-bar__search input[type="search"]:focus-visible { background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; padding-inline: 0; } .diwan-events-bar__search:focus-within { border-color: var(--diwan-text, #000); } .diwan-events-bar__views { background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); display: flex; overflow: hidden; } .diwan-events-bar__view { align-items: center; color: var(--diwan-text-soft, #444); display: flex; font-size: 13px; gap: 6px; line-height: 1; padding: 10px 12px; text-decoration: none; } .diwan-events-bar__view + .diwan-events-bar__view { border-inline-start: 1px solid var(--diwan-border, #e6e6e6); } .diwan-events-bar__view:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* The view being read is the brand blue, and the text on it is white: the same pair as every other selected thing on the site. */ .diwan-events-bar__view.is-on, .diwan-events-bar__view.is-on:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } .diwan-events-bar__dates { display: flex; flex-wrap: wrap; gap: 10px; } .diwan-events-bar__date { align-items: center; color: var(--diwan-text-muted, #6e6e6e); display: flex; font-size: 12px; gap: 6px; text-transform: uppercase; } .diwan-events-bar .diwan-events-bar__date input[type="date"] { background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-text, #000); font-size: 13px; padding: 8px 10px; } .diwan-events-bar__when { color: var(--diwan-blue, #246b8f); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .diwan-events-bar__when:hover { color: var(--diwan-black, #000); } /* The form sends itself when a control changes, so the button is only there for a reader whose browser is not running the script. */ .diwan-js .diwan-events-bar__go { display: none; } .diwan-events-bar .diwan-events-bar__go { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); font-size: 13px; padding: 9px 16px; } /* ------------------------------------------------- the archive: three views */ /* All three are in the document and one is read. Which one is a class on the body, put there by the archive module, so a view is an address rather than a state of a script: a search in the calendar is a link. */ .diwan-events__view { display: none; } body.diwan-events-view-grid .diwan-events__view--grid, body.diwan-events-view-list .diwan-events__view--list, body.diwan-events-view-calendar .diwan-events__view--calendar { display: block; } /* No view on the body at all, which happens if the class filter has not run: the grid is what the archive is by default, so it is what shows. */ body:not(.diwan-events-view-list):not(.diwan-events-view-calendar) .diwan-events__view--grid { display: block; } /* ------------------------------------------------------ the tag on a poster */ /* The one tag used in all three places an event is shown: the home strip, the archive card and the cover of the event's own page. Brand blue on white rather than a red or an amber, because nothing has gone wrong - the event simply happened. */ .diwan-event-tag { background: var(--diwan-blue, #246b8f); border-radius: 999px; color: var(--diwan-white, #fff); display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 6px 12px; text-transform: uppercase; white-space: nowrap; } /* ------------------------------------------------------------ the list card */ .diwan-event-row__built { background: var(--diwan-surface, #fff); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .diwan-event-row__built:hover { border-color: var(--diwan-black, #000); box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06)); } /* The poster keeps the ratio it has everywhere else, so a reader switching from the grid to the list is looking at the same picture. */ .diwan-event-row__cover { flex: none; position: relative; } .diwan-event-row__cover img { aspect-ratio: var(--diwan-event-cover-ratio, 281 / 158); block-size: auto; inline-size: 100%; object-fit: cover; } .diwan-event-row__body { justify-content: center; min-inline-size: 0; } /* The excerpt is the only thing on the row that can run long, so it is the only thing clamped. */ .diwan-event-row__text { color: var(--diwan-text-soft, #444); font-size: 14px; line-height: 1.6; } .diwan-event-row__text .elementor-widget-container { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; } /* Same as the card: a field this event has nothing in leaves no stray icon. */ .diwan-event-row__built .elementor-icon-list-item:has(.elementor-icon-list-text:empty) { display: none; } /* --------------------------------------------------------------- the months */ .diwan-calendar { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); overflow: hidden; } .diwan-calendar__head { align-items: center; background: var(--diwan-surface-alt, #fafaf8); border-block-end: 1px solid var(--diwan-border, #e6e6e6); display: flex; gap: 14px; justify-content: center; padding: 12px; } .diwan-calendar__step { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 50%; block-size: 32px; color: var(--diwan-black, #000); display: inline-flex; font-size: 18px; inline-size: 32px; justify-content: center; line-height: 1; text-decoration: none; } .diwan-calendar__step:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* The chevrons point the way the reader reads, so on the Arabic page the month before is on the right. */ [dir="rtl"] .diwan-calendar__step span { display: inline-block; transform: scaleX(-1); } .diwan-calendar__month { font-size: 16px; font-weight: 700; margin: 0; min-inline-size: 190px; text-align: center; text-transform: uppercase; } .diwan-calendar__grid { background: var(--diwan-border, #e6e6e6); display: grid; gap: 1px; grid-template-columns: repeat(7, minmax(0, 1fr)); } .diwan-calendar__weekday { background: var(--diwan-surface-alt, #fafaf8); color: var(--diwan-text-muted, #6e6e6e); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 8px 6px; text-align: center; text-transform: uppercase; } .diwan-calendar__day { background: var(--diwan-surface, #fff); display: flex; flex-direction: column; gap: 4px; min-block-size: 104px; padding: 6px; } .diwan-calendar__day--empty { background: var(--diwan-surface-alt, #fafaf8); } .diwan-calendar__number { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; font-weight: 600; } .diwan-calendar__day.is-today .diwan-calendar__number { align-items: center; background: var(--diwan-blue, #246b8f); block-size: 22px; border-radius: 50%; color: var(--diwan-white, #fff); display: inline-flex; inline-size: 22px; justify-content: center; } .diwan-calendar__event { background: var(--diwan-surface-sunken, #f4f3f1); border-inline-start: 3px solid var(--diwan-blue, #246b8f); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-black, #000); display: block; font-size: 12px; line-height: 1.35; overflow: hidden; padding: 4px 6px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .diwan-calendar__event:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* An event that has been and gone, in the month it was in. */ .diwan-calendar__event.is-past { border-inline-start-color: var(--diwan-text-faint, #a0a0a0); color: var(--diwan-text-muted, #6e6e6e); } /* ----------------------------------------------- the event page: the poster */ .diwan-event-cover .elementor-widget-theme-post-featured-image { position: relative; } /* The poster is a banner here rather than a card: full measure, and capped so that the bar under it is on the screen with it. */ .diwan-event-cover__image img { aspect-ratio: 16 / 9; inline-size: 100%; max-block-size: 420px; object-fit: cover; object-position: center; } /* -------------------------------------------------- the event page: the bar */ .diwan-event-when__cell { min-inline-size: 0; } .diwan-event-when__label .elementor-heading-title { margin-block-end: 2px; } .diwan-event-when__value .elementor-icon-list-text { font-size: 15px; font-weight: 600; } /* The button sits at the end of the bar, which is the right on the English page and the left on the Arabic one. */ .diwan-event-when__act .elementor-widget-wrap { align-content: center; justify-content: flex-end; } .diwan-event-register { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; padding: 12px 24px; text-decoration: none; text-transform: uppercase; } .diwan-event-register:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); text-decoration: none; } /* Over, and saying so. Not hidden, and not something that can be pressed: the reader can see there was a way in and that it has closed. */ .diwan-event-register.is-closed, .diwan-event-register.is-closed:hover { background: var(--diwan-surface-sunken, #f4f3f1); border-color: var(--diwan-border-strong, #d5d5d5); color: var(--diwan-text-muted, #6e6e6e); cursor: not-allowed; } /* ------------------------------------------------- the event page: the body */ .diwan-event-body__head .elementor-heading-title { letter-spacing: 0.02em; } .diwan-event-body__rule .elementor-divider { padding-block: 0; } .diwan-event-body__text { color: var(--diwan-text-soft, #444); font-size: 15px; line-height: 1.75; } /* The two boxes of practical detail, under the reading. */ .diwan-event-facts { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); margin-block-start: 26px; padding: 18px 20px; } .diwan-event-facts__head { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 10px; text-transform: uppercase; } .diwan-event-facts__name { font-size: 17px; font-weight: 700; margin: 0 0 8px; } .diwan-event-facts__list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .diwan-event-facts__line { align-items: flex-start; color: var(--diwan-text-soft, #444); display: flex; font-size: 14px; gap: 8px; line-height: 1.5; margin: 0; } .diwan-event-facts__line .diwan-icon { color: var(--diwan-blue, #246b8f); flex: none; margin-block-start: 2px; } .diwan-event-facts__line a { color: var(--diwan-link, #000); text-decoration: none; } .diwan-event-facts__line a:hover { color: var(--diwan-hover-text, #3b0f00); text-decoration: underline; } /* The map is the heaviest thing on the page, so it is the last thing on it and it is loaded late. A stated ratio, so nothing jumps when it arrives. */ /* A stated height rather than a ratio: a ratio takes its width from its height in this box and draws a narrow map in a wide card, and the height is the thing that matters anyway — at the width of the reading column 16:9 would be over four hundred pixels of map under two lines of address. */ .diwan-event-facts__map { block-size: 260px; border-radius: var(--diwan-radius-sm, 4px); inline-size: 100%; margin-block-start: 14px; overflow: hidden; } .diwan-event-facts__map-link { font-size: 13px; margin: 10px 0 0; } .diwan-event-facts__map-link a { color: var(--diwan-blue, #246b8f); text-decoration: underline; text-underline-offset: 3px; } .diwan-event-facts__map iframe { block-size: 100%; border: 0; display: block; inline-size: 100%; } /* ------------------------------------------------ the event page: the aside */ /* The column stays with the reader as the description scrolls, because what is in it is what a reader does with an event once they have read about it. */ .diwan-event-body__aside .elementor-widget-wrap { align-content: start; position: sticky; top: 24px; } .diwan-event-save, .diwan-event-share { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); padding: 18px 20px; } .diwan-event-share { margin-block-start: 16px; } .diwan-event-save__head, .diwan-event-share__head { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 12px; text-transform: uppercase; } .diwan-event-save__list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .diwan-event-save__list li { margin: 0; } .diwan-event-save__link { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-black, #000); display: flex; font-size: 14px; gap: 10px; padding: 11px 14px; text-decoration: none; } .diwan-event-save__link .diwan-icon { color: var(--diwan-blue, #246b8f); flex: none; } .diwan-event-save__link:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } .diwan-event-save__link:hover .diwan-icon { color: var(--diwan-hover-text, #3b0f00); } .diwan-event-share__list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .diwan-event-share__list li { margin: 0; } .diwan-event-share__link { align-items: center; block-size: 42px; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 50%; color: var(--diwan-black, #000); display: inline-flex; inline-size: 42px; justify-content: center; } .diwan-event-share__link:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* The band while the next reading is on its way. Faded rather than emptied, so the page does not jump and there is something to look at. */ .diwan-events__view.is-loading { opacity: 0.35; pointer-events: none; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { .diwan-events__view.is-loading { transition: none; } } /* ------------------------------------------- the archive: kinds of event */ /* Under the controls rather than in them: a category is an archive of its own, so these are links, and a row of links reads differently from a form. */ .diwan-events-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; } .diwan-events-cats__chip { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 999px; color: var(--diwan-text-soft, #444); font-size: 13px; line-height: 1; padding: 9px 16px; text-decoration: none; } .diwan-events-cats__chip:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } .diwan-events-cats__chip.is-on, .diwan-events-cats__chip.is-on:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* Nothing coming up is a real answer, and it is said in the middle of the band rather than left as a gap. */ .diwan-events__view .e-loop-nothing-found-message__text { color: var(--diwan-text-muted, #6e6e6e); font-size: 15px; padding-block: 40px; } /* --------------------------------------------------------- narrower screens */ @media (max-width: 1024px) { .diwan-event-when__act .elementor-widget-wrap { justify-content: flex-start; } .diwan-calendar__day { min-block-size: 88px; } } @media (max-width: 767px) { /* Stacked, the three cells of the bar need the room between them that the gutter was giving them side by side. */ .diwan-event-when__cell + .diwan-event-when__cell, .diwan-event-when__act { margin-block-start: 14px; } /* Nothing to stick to once the aside is a block under the reading. */ .diwan-event-body__aside .elementor-widget-wrap { position: static; } .diwan-event-cover__image img { aspect-ratio: 4 / 3; max-block-size: 300px; } /* The list row becomes a card: a 260px poster beside two lines of text is not a row on a phone, it is a squeeze. The width is the one Elementor writes inline on the container, so this is the one place a rule has to shout to be heard. */ .diwan-event-row__built { flex-direction: column; } .diwan-event-row__cover { inline-size: 100% !important; } /* A month of seven columns does not fit a phone, so the days stack and the weekday strip goes with them. */ .diwan-calendar__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .diwan-calendar__weekday, .diwan-calendar__day--empty { display: none; } .diwan-calendar__day { flex-direction: row; gap: 10px; min-block-size: 0; } .diwan-calendar__number { flex: none; min-inline-size: 24px; } .diwan-events-bar { gap: 10px; } .diwan-events-bar__views { inline-size: 100%; } .diwan-events-bar__view { flex: 1 1 0; justify-content: center; } } /* ------------------------------------------ a week with nothing on it */ /* * What stands in the run's place when the programme is empty and the shop has * chosen to say so rather than to take the band away. A line, centred, on the * band's own ground: it is a note, not a card. */ .diwan-events__none { margin: 0; padding-block: 18px 6px; color: var(--diwan-text-muted, #6e6e6e); font-size: 0.95rem; text-align: center; } /* --------------------------------- room for the cards' edges in a carousel */ /* A carousel clips what it holds to its own box, and a card as tall as the box has its bottom border on the very edge: at a height that is not a whole number of pixels the border falls outside and is cut off, and the card looks torn along the bottom. A few pixels of room inside the box keep the whole border, and the shadow a card takes on hover, in sight. */ .elementor-widget-loop-carousel .swiper:has(.diwan-event-card__built, .diwan-event-card) { padding-block: 1px 4px; } /* ==================== Diwan Core · offers.css ==================== */ /** * The offers strip under the header. * * Built on scroll-snap rather than a slider library: the track is a real * horizontally scrolling element, so it swipes natively on a phone, keeps * working with JavaScript off, and the arrows and dots only drive the scroll * position. */ .diwan-offers { color: var(--diwan-text, #000); /* The space around the strip, per screen, is set in Offers -> Banner settings and written onto the strip. */ margin-block: var(--diwan-offers-above, 15px) var(--diwan-offers-below, 24px); position: relative; } /* Named on the one element that needs it rather than on every link in the strip. A blanket ".diwan-offers a" outranks a single class, so it reaches past the banner link and repaints any button that lands in here later. That is how the same black-on-black button keeps coming back. */ .diwan-offers__link { color: inherit; } /* The arrows are positioned against this, so it is here whether or not the strip is also carrying the site's box. */ .diwan-offers__frame { position: relative; } /* Square: the strip runs the full width of the screen, and a rounded corner against the glass reads as a card that did not quite fit. */ .diwan-offers__track { -ms-overflow-style: none; display: flex; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .diwan-offers__track::-webkit-scrollbar { display: none; } .diwan-offers__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; } /* The strip's height lives here, on the slide itself, and the artwork fills it. Putting it on the picture instead does not hold: Elementor's own stylesheet says `.elementor img { height: auto }`, which outranks a single class on the image and leaves it at its natural proportions, overflowing the band. */ .diwan-offers__link { display: block; block-size: var(--diwan-offers-height, 56px); overflow: hidden; } /* A height rather than a ratio, because the strip's height is a decision the shop makes — it sits above the hero and the two share one screen — and a ratio makes that decision differently at every width. Set in Offers → Banner settings and written onto the strip; object-fit centres whatever does not fit rather than squashing it. */ .diwan-offers picture, .diwan-offers .diwan-offers__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; } /* --- arrows --- */ /* The square, the chevron and the colours are in arrows.css, shared with the hero slider and both loop carousels. What is left here is only where this strip puts them and when it shows them, which is the strip's business and nobody else's. */ .diwan-offers__arrow { box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06)); inset-block-start: 50%; opacity: 0; position: absolute; transform: translateY(-50%); z-index: 2; } .diwan-offers__arrow--prev { inset-inline-start: 32px; } .diwan-offers__arrow--next { inset-inline-end: 32px; } /* The arrows stay out of the way of the artwork until the pointer is on the strip; on touch there is no hover, so they are shown there instead. */ .diwan-offers:hover .diwan-offers__arrow, .diwan-offers__arrow:focus-visible { opacity: 1; } /* An arrow at the end of the run has nothing to do. */ .diwan-offers__arrow[disabled] { cursor: default; opacity: 0; } /* --- dots --- */ /* * Each dot is a 24 x 24 button (the least a finger can be asked to hit, * WCAG 2.2 target size) with the small dot drawn in its middle, so the row * looks as it did with dots that were easy to miss on a phone. */ /* Inside the strip, along its foot (Diwan, October 2026), rather than in a row of white under it: the strip ends where the hero begins. */ .diwan-offers__dots { display: flex; gap: 0; inset-block-end: 2px; inset-inline: 0; justify-content: center; pointer-events: none; position: absolute; z-index: 2; } .diwan-offers__dots > * { pointer-events: auto; } .diwan-offers__dot { align-items: center; background: none; border: 0; block-size: 24px; cursor: pointer; display: inline-flex; justify-content: center; min-inline-size: 24px; padding: 0; } /* On the artwork now, so each dot carries its own outline: white with a dark ring reads on a light banner and on a dark one alike. */ .diwan-offers__dot::before { background: rgba(255, 255, 255, 0.72); border-radius: 999px; block-size: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); content: ""; inline-size: 7px; transition: background-color 0.16s ease, inline-size 0.16s ease; } .diwan-offers__dot.is-current::before { background: var(--diwan-white, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); inline-size: 20px; } .diwan-offers__dot:focus-visible { outline: 2px solid var(--diwan-white, #fff); outline-offset: -2px; } .diwan-offers.is-single .diwan-offers__dots { display: none; } /* Below this width the browser has swapped in the editor's taller phone crop, which is drawn to its own proportions, so the band changes shape with it. The breakpoint matches the source element's media attribute exactly. The ratio is stated rather than left to the image: every slide after the first is lazy-loaded, and an image that has not arrived yet has no shape to size its box from. Without this the unloaded slides claimed the full width as height and the strip opened fifteen times too tall before settling. */ @media (max-width: 1024px) { .diwan-offers { margin-block: var(--diwan-offers-above-tablet, 10px) var(--diwan-offers-below-tablet, 17px); } .diwan-offers__link { block-size: var(--diwan-offers-height-tablet, 64px); } } @media (max-width: 720px) { .diwan-offers { margin-block: var(--diwan-offers-above-phone, 10px) var(--diwan-offers-below-phone, 17px); } .diwan-offers__link { block-size: var(--diwan-offers-height-phone, 70px); } } @media (max-width: 900px) { /* Touch swipes the track directly; arrows over a small image are in the way. Named through the frame, so the arrows' own display (arrows.css) does not bring them back on the pages where it happened to be read later (3.6.0: the book page and the shelves showed them, the home page not). */ .diwan-offers__frame .diwan-offers__arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .diwan-offers__track { scroll-behavior: auto; } } /* ==================== Diwan Core · careers.css ==================== */ /* * The Careers page: the open jobs by area, and the form under them. * Logical sides throughout, so the Arabic page is the English one mirrored. */ .diwan-careers { color: var(--diwan-text, #000); font-size: 16px; line-height: 1.7; margin-inline: auto; max-inline-size: 820px; } .diwan-careers__intro, .diwan-careers__empty { color: var(--diwan-text-soft, #444); font-size: 17px; margin: 0 0 32px; text-align: center; } .diwan-careers__empty { background: var(--diwan-surface-alt, #fafaf8); border: 1px solid var(--diwan-border, #e6e6e6); padding: 24px; } .diwan-careers__heading, .diwan-apply__heading { color: var(--diwan-heading, #246b8f); font-size: 24px; font-weight: 700; margin: 0 0 20px; text-transform: uppercase; } .diwan-careers__area { margin-block-end: 32px; } .diwan-careers__area-name { border-block-end: 1px solid var(--diwan-border, #e6e6e6); color: var(--diwan-subheading, #3b0f00); font-size: 18px; margin: 0 0 4px; padding-block-end: 8px; } /* ------------------------------------------------------------- one job */ /* Each job a card of its own: a thin black line round it, square corners as every box on the site has, and under the pointer a black shadow that sets it off the page. The name's link covers the whole card. */ .diwan-job { background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-black, #000); margin-block-start: 20px; padding: 22px 24px; position: relative; transition: box-shadow 0.16s ease, transform 0.16s ease; } .diwan-job:hover, .diwan-job:focus-within { box-shadow: 6px 6px 0 var(--diwan-black, #000); transform: translate(-2px, -2px); } /* The shadow falls the other way on an Arabic page. */ [dir="rtl"] .diwan-job:hover, [dir="rtl"] .diwan-job:focus-within { box-shadow: -6px 6px 0 var(--diwan-black, #000); transform: translate(2px, -2px); } .diwan-job__head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; } /* A job's name as it was typed. The headings' face (TAY) has capitals only, which is right for a section and hard to read for "Bookseller, Zamalek": the name is in the body's face, bold. */ .diwan-job__title { font-family: var(--diwan-font-body, "Loew", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif); font-size: 20px; font-weight: 700; letter-spacing: normal; line-height: 1.35; margin: 0; text-transform: none; } /* Black, under the pointer too: the card's shadow says it is the one. */ .diwan-job .diwan-job__link, .diwan-job .diwan-job__link:hover, .diwan-job .diwan-job__link:focus { color: var(--diwan-black, #000); text-decoration: none; } .diwan-job .diwan-job__apply:hover { color: var(--diwan-black, #000); } /* The whole card answers the pointer and leads to the job's page. */ .diwan-job__link::after { content: ""; inset: 0; position: absolute; } /* The keyboard's ring goes round the card, not the words. */ .diwan-job__link:focus-visible { outline: none !important; } .diwan-job:has(.diwan-job__link:focus-visible) { outline: 2px solid var(--diwan-black, #000); outline-offset: 3px; } /* English words on an Arabic page (dir="ltr") still sit at the page's side. */ [dir="rtl"] .diwan-job__title[dir="ltr"] { text-align: right; } /* The way to the job's page: bold words and an arrow, above the card's link so it can be reached and clicked on its own. */ .diwan-job__apply { color: var(--diwan-black, #000); font-size: 16px; font-weight: 700; min-block-size: 24px; position: relative; text-decoration: none; white-space: nowrap; z-index: 1; } .diwan-job__arrow { display: inline-block; transition: transform 0.16s ease; } .diwan-job:hover .diwan-job__apply, .diwan-job__apply:focus-visible { text-decoration: underline; text-decoration-color: var(--diwan-papyrus, #e0b070); text-decoration-thickness: 3px; text-underline-offset: 5px; } .diwan-job:hover .diwan-job__arrow { transform: translate(2px, -2px); } [dir="rtl"] .diwan-job:hover .diwan-job__arrow { transform: translate(-2px, -2px); } .diwan-job__summary { color: var(--diwan-text-soft, #444); font-size: 15px; line-height: 1.6; margin: 8px 0 0; } /* The facts, each a small rounded label with its icon. */ .diwan-job__meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; } .diwan-job__chip { align-items: center; border: 1px solid var(--diwan-black, #000); border-radius: 999px; color: var(--diwan-black, #000); display: inline-flex; font-size: 13px; font-weight: 600; gap: 6px; line-height: 1.2; padding: 6px 12px; } .diwan-job__icon { flex: none; } /* The site's button: black, gold under the pointer. */ .diwan-apply__send { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: 0; color: var(--diwan-btn-text, #fff); cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; padding: 13px 28px; text-decoration: none; text-transform: uppercase; } .diwan-apply__send:hover, .diwan-apply__send:focus-visible { background: var(--diwan-btn-bg-hover, #e0b070); border-color: var(--diwan-btn-bg-hover, #e0b070); color: var(--diwan-btn-text-hover, #3b0f00); } .diwan-apply__send[disabled] { cursor: progress; opacity: 0.6; } /* ------------------------------------------------------------- the form */ .diwan-apply { background: var(--diwan-surface-alt, #fafaf8); border: 1px solid var(--diwan-border, #e6e6e6); margin-block-start: 40px; padding: 32px; scroll-margin-block-start: 120px; } .diwan-apply__lead { color: var(--diwan-text-muted, #6e6e6e); font-size: 14px; margin: 0 0 20px; } .diwan-apply__field { margin-block-end: 18px; } .diwan-apply__field > label, .diwan-apply__general legend { display: block; font-weight: 600; margin-block-end: 6px; } .diwan-apply__needed { color: var(--diwan-text-muted, #6e6e6e); font-size: 13px; font-weight: 400; } .diwan-apply__hint { color: var(--diwan-text-muted, #6e6e6e); font-size: 14px; margin: -2px 0 6px; } .diwan-apply input[type="text"], .diwan-apply input[type="email"], .diwan-apply input[type="tel"], .diwan-apply input[type="file"], .diwan-apply select, .diwan-apply textarea { background: var(--diwan-surface, #fff); border: 1px solid var(--diwan-border-strong, #d5d5d5); border-radius: 0; box-sizing: border-box; color: inherit; font: inherit; inline-size: 100%; min-block-size: 46px; padding: 10px 12px; } .diwan-apply textarea { min-block-size: 110px; resize: vertical; } /* A number is written left to right on an Arabic page too. */ .diwan-apply input[type="tel"] { text-align: start; } [dir="rtl"] .diwan-apply input[type="tel"] { text-align: end; } .diwan-apply [aria-invalid="true"] { border-color: var(--diwan-danger, #c0392b); box-shadow: inset 0 0 0 1px var(--diwan-danger, #c0392b); } .diwan-apply__error { color: var(--diwan-danger, #c0392b); font-size: 14px; font-weight: 600; margin: 6px 0 0; } .diwan-apply__general { border: 1px solid var(--diwan-border, #e6e6e6); margin: 0 0 18px; padding: 14px 16px 0; } .diwan-apply__general[hidden] { display: none; } .diwan-apply__consent label { align-items: flex-start; display: flex; font-weight: 400; gap: 10px; } .diwan-apply__consent input { block-size: 22px; flex: none; inline-size: 22px; margin: 3px 0 0; } .diwan-apply__actions { margin: 24px 0 0; } .diwan-apply__status:empty { display: none; } .diwan-apply__summary { background: var(--diwan-surface, #fff); border: 2px solid var(--diwan-danger, #c0392b); margin-block-end: 24px; padding: 16px 20px; } .diwan-apply__summary h3 { font-size: 17px; margin: 0 0 8px; } .diwan-apply__summary ul { margin: 0; padding-inline-start: 20px; } .diwan-apply__summary a { color: var(--diwan-danger, #c0392b); font-weight: 600; } .diwan-apply__done { background: var(--diwan-surface, #fff); border: 2px solid var(--diwan-success, #1f7a3d); font-size: 17px; padding: 18px 20px; } .diwan-apply__done p { margin: 0; } .diwan-apply__summary:focus, .diwan-apply__done:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* The trap field, out of sight (the back-in-stock form's rule, for pages without it). */ .diwan-apply .diwan-alert__trap { block-size: 1px; inline-size: 1px; inset-inline-start: -9999px; overflow: hidden; position: absolute; } /* ------------------------------------------------------------- a job's own page */ /* The theme's page, when no Elementor template draws it, on the same measure. */ .diwan-job-page { margin-inline: auto; max-inline-size: 820px; } .diwan-job-page__back { align-items: center; color: var(--diwan-text-soft, #444); display: inline-flex; font-size: 14px; font-weight: 600; gap: 6px; min-block-size: 24px; text-decoration: none; } .diwan-job-page__back:hover, .diwan-job-page__back:focus-visible { color: var(--diwan-link-hover, #246b8f); text-decoration: underline; } .diwan-job-page__title { font-family: var(--diwan-font-body, "Loew", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif); text-transform: none; } .diwan-job-page__facts { color: var(--diwan-text-muted, #6e6e6e); font-size: 15px; margin: 0 0 8px; } .diwan-job-page__body > :first-child { margin-block-start: 0; } .diwan-job-page__body > :last-child { margin-block-end: 0; } /* The page's form sits under the description, not far below a list. */ .diwan-job-page .diwan-apply, .diwan-job-page__apply .diwan-apply { margin-block-start: 24px; } .diwan-apply--closed { background: var(--diwan-surface-alt, #fafaf8); text-align: center; } .diwan-apply__closed { color: var(--diwan-text-soft, #444); font-size: 17px; margin: 0; } @media (max-width: 640px) { .diwan-job { padding: 18px 16px; } .diwan-job__title { font-size: 18px; } .diwan-apply { padding: 22px 16px; } } @media (forced-colors: active) { .diwan-apply__send, .diwan-job, .diwan-job__chip { border-color: CanvasText; } } /* Still under the pointer, for a reader who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .diwan-job, .diwan-job__arrow { transition: none; } .diwan-job:hover, .diwan-job:focus-within, [dir="rtl"] .diwan-job:hover, [dir="rtl"] .diwan-job:focus-within, .diwan-job:hover .diwan-job__arrow, [dir="rtl"] .diwan-job:hover .diwan-job__arrow { transform: none; } } /* ==================== Diwan Core · fit-screen.css ==================== */ /** * "Fill the rest of the screen", for any section that has it switched on. * * The switch is in the section's Layout tab in Elementor, under "Diwan · * Height", and it puts the class diwan-fit-screen-yes on the section. The rule: * the header, the offers strip and this section together fit one screen, so the * section gets whatever height is left rather than a height of its own. * * --diwan-hero-above is the measured distance from the top of the document to * the top of the section, written by fit-screen.js. The three numbers around * it are the section's own, set in the same panel per device; the ones here are * what they are until somebody sets them. */ .diwan-fit-screen-yes { --diwan-hero-min: 260px; --diwan-hero-max: 720px; --diwan-hero-tail: 16px; /* * What sits above the section, before the script has measured it: the * offer bar, the header's three rows and the offers strip, as this site * builds them. An estimate the script replaces as soon as it runs — but a * zero here meant the section opened at its full height and jumped up by a * third a moment later, in front of the reader. */ --diwan-hero-above: 420px; overflow: hidden; } /* Older browsers without svh get the large viewport height, which is only wrong while a mobile address bar is on screen. */ .diwan-fit-screen-yes { block-size: clamp( var(--diwan-hero-min), calc(100vh - var(--diwan-hero-above, 0px) - var(--diwan-hero-tail)), var(--diwan-hero-max) ); } @supports (height: 100svh) { .diwan-fit-screen-yes { block-size: clamp( var(--diwan-hero-min), calc(100svh - var(--diwan-hero-above, 0px) - var(--diwan-hero-tail)), var(--diwan-hero-max) ); } } /* A slider inside carries its own height, set in the widget and written into the page's generated stylesheet. Inside a fitted section that height is not the slider's to decide, so it is overridden here; !important is the only thing that outranks Elementor's own per-element .elementor-kit-149244. */ .diwan-fit-screen-yes > .elementor-container, .diwan-fit-screen-yes > .e-con-inner, .diwan-fit-screen-yes .elementor-column, .diwan-fit-screen-yes .elementor-widget-wrap, .diwan-fit-screen-yes .elementor-widget-slides, .diwan-fit-screen-yes .elementor-widget-container, .diwan-fit-screen-yes .elementor-slides-wrapper, .diwan-fit-screen-yes .elementor-swiper, .diwan-fit-screen-yes .swiper, .diwan-fit-screen-yes .swiper-wrapper, .diwan-fit-screen-yes .swiper-slide, .diwan-fit-screen-yes .swiper-slide-inner { block-size: 100% !important; } @media (max-width: 900px) { /* A phone screen is mostly height, so a section allowed to grow to a desktop ceiling would leave nothing else above the fold. Only the bounds move; the arithmetic above is unchanged. Set them per device in the panel to change them. */ .diwan-fit-screen-yes { --diwan-hero-min: 220px; --diwan-hero-max: 440px; } } /* ==================== Diwan Core · basket.css ==================== */ /** * The basket panel, and the two pages behind it. * * The panel is ours. The pages are WooCommerce's blocks, and what is here for * them is only what the brand has to say over the top: a filled button that * reads as a button, and a form whose fields are not welded together. */ /* -------------------------------------------------------------- the panel */ .diwan-basket { inset: 0; position: fixed; z-index: 9999; } /* The admin bar is fixed too, and it is above everything. */ body.admin-bar .diwan-basket { inset-block-start: 32px; } @media (max-width: 782px) { body.admin-bar .diwan-basket { inset-block-start: 46px; } } .diwan-basket[hidden] { display: none; } .diwan-basket__veil { background: rgba(0, 0, 0, 0.4); inset: 0; position: absolute; } /* * On the reading edge: the basket opens from the side the page is read towards, * which is the right in English and the left in Arabic. One rule, because the * offset and the slide are both logical. */ .diwan-basket__panel { background: var(--diwan-surface, #ffffff); block-size: 100%; box-shadow: var(--diwan-shadow, 0 8px 28px rgba(0, 0, 0, 0.12)); display: flex; flex-direction: column; inline-size: min(420px, 92vw); inset-block: 0; inset-inline-end: 0; position: absolute; transform: translateX(0); transition: transform 0.25s ease; } .diwan-basket.is-closing .diwan-basket__panel, .diwan-basket.is-opening .diwan-basket__panel { transform: translateX(100%); } body.rtl .diwan-basket.is-closing .diwan-basket__panel, body.rtl .diwan-basket.is-opening .diwan-basket__panel { transform: translateX(-100%); } @media (prefers-reduced-motion: reduce) { .diwan-basket__panel { transition: none; } } .diwan-basket__head { align-items: center; border-block-end: 1px solid var(--diwan-border, #e6e6e6); display: flex; justify-content: space-between; padding: 18px 22px; } .diwan-basket__title { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; margin: 0; text-transform: uppercase; } .diwan-basket__close { background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; padding: 0 4px; } .diwan-basket__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; } /* WooCommerce's mini basket, in the brand's type. Its own buttons are left out: the two at the foot of the panel are the same two, in the language of the page and where a thumb can reach them. */ .diwan-basket__body .woocommerce-mini-cart__buttons, .diwan-basket__body .buttons { display: none; } .diwan-basket__body ul.cart_list { list-style: none; margin: 0; padding: 0; } /* * WooCommerce's markup here is a flat list: a remove link, a link holding the * cover and the name, and a quantity line. It is laid out rather than rebuilt, * because the fragment that refreshes it would undo anything rebuilt. */ .diwan-basket__body ul.cart_list li { border-block-end: 1px solid var(--diwan-border-soft, #f0f0f0); display: flex; flex-wrap: wrap; gap: 4px 14px; padding-block: 14px; padding-inline-end: 24px; position: relative; } .diwan-basket__body ul.cart_list li img { border: 1px solid var(--diwan-border, #e6e6e6); float: none; inline-size: 54px; margin: 0; order: -1; } .diwan-basket__body ul.cart_list li a:not(.remove) { align-items: center; color: inherit; display: flex; flex: 1 1 60%; font-size: 14px; gap: 14px; text-decoration: none; } .diwan-basket__body ul.cart_list li .quantity { color: var(--diwan-text-muted, #6e6e6e); flex: 1 1 100%; font-size: 13px; padding-inline-start: 68px; } .diwan-basket__body .remove { color: var(--diwan-text-muted, #6e6e6e); font-size: 18px; inset-block-start: 14px; inset-inline-end: 0; line-height: 1; position: absolute; text-decoration: none; } .diwan-basket__body .remove:hover { color: var(--diwan-danger, #c0392b); } .diwan-basket__body .woocommerce-mini-cart__total { border-block-start: 1px solid var(--diwan-border, #e6e6e6); display: flex; font-weight: 600; justify-content: space-between; margin: 0; padding-block: 16px; } .diwan-basket__body .woocommerce-mini-cart__empty-message { color: var(--diwan-text-muted, #6e6e6e); padding-block: 30px; text-align: center; } .diwan-basket__foot { border-block-start: 1px solid var(--diwan-border, #e6e6e6); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 18px 22px; } .diwan-basket__view, .diwan-basket__pay { border: 1px solid var(--diwan-black, #000000); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 13px 10px; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; } .diwan-basket__view { background: var(--diwan-white, #ffffff); color: var(--diwan-black, #000000); } .diwan-basket__pay { background: var(--diwan-black, #000000); color: var(--diwan-white, #ffffff); } .diwan-basket__view:hover, .diwan-basket__view:focus-visible { background: var(--diwan-black, #000000); color: var(--diwan-white, #ffffff); } .diwan-basket__pay:hover, .diwan-basket__pay:focus-visible { background: var(--diwan-blue, #246b8f); border-color: var(--diwan-blue, #246b8f); color: var(--diwan-white, #ffffff); } /* ------------------------------------------------- the basket and checkout */ /* * WooCommerce's blocks draw their own buttons, and the theme underlines every * link: the checkout button arrived grey with a line through its label and a * dark blue hover. Written at the weight the blocks write themselves, plus the * element, so this wins without an exclamation mark. */ a.wc-block-components-button, button.wc-block-components-button, a.wc-block-cart__submit-button, button.wc-block-cart__submit-button { background-color: var(--diwan-black, #000000); border-radius: 0; color: var(--diwan-white, #ffffff); letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; } a.wc-block-components-button:hover, a.wc-block-components-button:focus, button.wc-block-components-button:hover, button.wc-block-components-button:focus, a.wc-block-cart__submit-button:hover, a.wc-block-cart__submit-button:focus { background-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); text-decoration: none; } a.wc-block-components-button .wc-block-components-button__text, button.wc-block-components-button .wc-block-components-button__text { color: inherit; text-decoration: none; } /* * The blocks give every text field a gap above it, and the country and state * fields are not text fields: they arrived welded to the name above them. * * Three classes deep because that is how deep WooCommerce's own rule is — * .wc-block-components-form .wc-block-components-checkout-step * .wc-block-components-country-input { margin-top: 0 } — and a gap has to win * against it rather than tie. */ .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form > .wc-block-components-country-input, .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form > .wc-block-components-state-input, .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form > .wc-block-components-combobox { margin-block-start: 12px; } /* ------------------------------------------- the basket and checkout pages */ /* * WooCommerce's own templates, in the brand's clothes. Its buttons are written * with two classes, so these are written with three: one deeper than the thing * being answered, which is the same rule the rest of this plugin follows. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: var(--diwan-black, #000000); border-radius: 0; color: var(--diwan-white, #ffffff); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 13px 22px; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible { background-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); text-decoration: none; } /* The one button on the page that is the point of the page. */ .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; font-size: 14px; padding: 16px 22px; text-align: center; } .woocommerce a.button[disabled], .woocommerce button.button[disabled] { background-color: var(--diwan-border-strong, #d5d5d5); color: var(--diwan-white, #ffffff); } .woocommerce table.shop_table { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 0; } .woocommerce table.shop_table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .woocommerce table.shop_table td.product-name a { color: var(--diwan-text, #000000); text-decoration: none; } .woocommerce table.shop_table td.product-name a:hover { text-decoration: underline; text-underline-offset: 3px; } .woocommerce table.shop_table img { inline-size: 54px; } /* * The basket's covers: the whole jacket, big enough to recognise the book by, * in its own two-by-three frame; anything that is not a book in a square with * its photograph fitted inside rather than cut. Written past WooCommerce's own * rule for the thumbnail cell, which fixes the picture at 32px. */ .woocommerce table.shop_table td.product-thumbnail { inline-size: 110px; } .diwan-basket-cover { background: var(--diwan-grey-50, #fafafa); display: block; inline-size: 88px; } .diwan-basket-cover.is-book { aspect-ratio: 2 / 3; } .diwan-basket-cover.is-thing { aspect-ratio: 1 / 1; } /* Whole, not cropped: the same rule as every other cover on the site, so a jacket of a less usual shape keeps its title and its author's name. */ .woocommerce table.shop_table .diwan-basket-cover img, .woocommerce-cart table.cart .diwan-basket-cover img { block-size: 100%; display: block; inline-size: 100%; max-inline-size: none; object-fit: contain; } .woocommerce table.shop_table .diwan-basket-cover.is-thing img { object-fit: contain; } @media (max-width: 768px) { /* On a phone WooCommerce stacks each line into a card, and the picture sits at the top of it. WooCommerce hides that cell on a phone with a rule written through the theme's #content, so this one is too. */ .woocommerce table.shop_table_responsive tr td.product-thumbnail, .woocommerce-page #content table.cart tr td.product-thumbnail { display: block; inline-size: auto; text-align: start; } .woocommerce table.shop_table_responsive tr td.product-thumbnail::before { display: none; } .diwan-basket-cover { inline-size: 72px; } } .woocommerce .quantity input.qty { border: 1px solid var(--diwan-border, #e6e6e6); padding: 8px; } .woocommerce form.woocommerce-checkout input[type="text"], .woocommerce form.woocommerce-checkout input[type="tel"], .woocommerce form.woocommerce-checkout input[type="email"], .woocommerce form.woocommerce-checkout textarea, .woocommerce form.woocommerce-checkout select, .woocommerce form .select2-selection { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 0; font: inherit; padding: 11px 12px; } /* Every field on the checkout stands clear of the one above it, including the ones WooCommerce draws with a select rather than an input. */ .woocommerce form .form-row { margin-block-end: 14px; padding-block: 0; } .woocommerce-billing-fields h3, .woocommerce-checkout h3, .woocommerce .cart_totals h2 { font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; } /* ------------------------------------------------------------ the basket page */ /* * Two columns on a wide screen: the books, and the total beside them, kept in * view while a long basket scrolls. WooCommerce floats the totals into half the * width under the table; here they have their own column. */ @media (min-width: 901px) { .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) { align-items: start; display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* Under the header, measured by chrome.js while it is stuck; 170px only until then. */ .woocommerce-cart .woocommerce > .cart-collaterals { inset-block-start: var(--diwan-sticky-top, 170px); position: sticky; } .woocommerce-cart .cart-collaterals .cart_totals { float: none; inline-size: 100%; } } .woocommerce-cart .cart-collaterals .cart_totals { background: var(--diwan-grey-50, #fafafa); border: 1px solid var(--diwan-border, #e6e6e6); padding: 24px; } .woocommerce-cart .cart-collaterals .cart_totals table.shop_table { background: var(--diwan-white, #fff); } /* Save for later: under the book's name, a quiet line with a heart. */ .diwan-save-later { align-items: center; color: var(--diwan-text-muted, #6e6e6e); display: inline-flex; font-size: 12px; gap: 5px; margin-block-start: 8px; text-decoration: none; } .woocommerce table.shop_table td.product-name .diwan-save-later { color: var(--diwan-text-muted, #6e6e6e); display: flex; inline-size: fit-content; } .woocommerce table.shop_table td.product-name .diwan-save-later:hover, .woocommerce table.shop_table td.product-name .diwan-save-later:focus-visible { color: var(--diwan-wood, #3b0f00); text-decoration: underline; text-underline-offset: 3px; } /* The phone's bar: the total and the way on, at the foot of the screen. */ .diwan-cartbar { display: none; } @media (max-width: 900px) { .diwan-cartbar { align-items: center; background: var(--diwan-white, #fff); border-block-start: 1px solid var(--diwan-border, #e6e6e6); box-sizing: border-box; display: flex; gap: 16px; inset-block-end: 0; inset-inline: 0; justify-content: space-between; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); position: fixed; transition: transform 0.2s ease; z-index: 90; } .diwan-cartbar.is-hidden { transform: translateY(110%); } .diwan-cartbar__total { display: flex; flex-direction: column; line-height: 1.25; } .diwan-cartbar__word { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; } .diwan-cartbar__amount { font-size: 17px; } .diwan-cartbar__go { background: var(--diwan-black, #000); color: var(--diwan-white, #fff); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; padding: 14px 26px; text-decoration: none; text-transform: uppercase; } .diwan-cartbar__go:hover, .diwan-cartbar__go:focus-visible { background: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } /* The WhatsApp button stands clear of the bar rather than on it. */ body.has-diwan-cartbar { --diwan-wa-lift: 72px; padding-block-end: 72px; } } /* A pre-order in the basket (6 October 2026): why only a card is offered. */ .diwan-preorder-notice { background: var(--diwan-canvas, #faf7db); border-inline-start: 3px solid var(--diwan-success, #1f7a3d); color: var(--diwan-text, #000000); font-size: 14px; line-height: 1.5; margin: 0 0 16px; padding: 10px 14px; } /* ==================== Diwan Core · gift-wrap.css ==================== */ /** * The gift wrapping controls. * * Two ticks and a card. They sit inside WooCommerce's own basket table, so the * job here is to make them read as part of it rather than as something bolted * underneath. */ .diwan-wrap__item { align-items: flex-start; color: var(--diwan-text-soft, #444444); cursor: pointer; display: flex; font-size: 13px; gap: 8px; margin-block-start: 8px; } .diwan-wrap__price { color: var(--diwan-text-muted, #6e6e6e); } .diwan-wrap { display: flex; flex-direction: column; gap: 12px; font-weight: 400; padding-block: 6px; } .diwan-wrap.is-busy { opacity: 0.5; pointer-events: none; } .diwan-wrap__parcel { align-items: flex-start; cursor: pointer; display: flex; font-size: 14px; gap: 8px; } .diwan-wrap__note { display: flex; flex-direction: column; font-size: 13px; gap: 6px; } .diwan-wrap__note textarea { border: 1px solid var(--diwan-border, #e6e6e6); font: inherit; inline-size: 100%; padding: 8px 10px; resize: vertical; } .diwan-wrap__note textarea:focus { border-color: var(--diwan-black, #000000); outline: none; } /* The button is only for a reader with no script, and the script says so by marking the page the moment it runs. */ .diwan-wrap__apply { align-self: flex-start; background: var(--diwan-black, #000000); border: 1px solid var(--diwan-black, #000000); color: var(--diwan-white, #ffffff); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 9px 14px; text-transform: uppercase; } .diwan-js .diwan-wrap__apply { display: none; } /* How much of the message is left, under the box. */ .diwan-wrap__count { color: var(--diwan-text-muted, #6e6e6e); display: block; font-size: 11px; letter-spacing: 0.02em; margin-block-start: 4px; text-align: end; text-transform: none; } .diwan-wrap__count.is-near { color: #c62828; } /* ==================== Diwan Core · checkout.css ==================== */ /* * The checkout. * * Two columns: the steps, and the order beside them, kept in view while the * steps are filled in. On a phone the order folds away above the steps and * says only its total until it is opened. * * The steps only hide one another once the script has marked the form: a page * without it is the whole form, open, which is WooCommerce's own checkout in * the site's clothes. */ .woocommerce form.checkout { align-items: start; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } /* WooCommerce puts its notices at the top of the form when it is sent. */ .woocommerce form.checkout > .woocommerce-NoticeGroup, .woocommerce form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* The two halves of the address are one column here. */ .diwan-checkout__main .col2-set, .diwan-checkout__main .col2-set .col-1, .diwan-checkout__main .col2-set .col-2 { float: none; inline-size: 100%; max-inline-size: none; } .diwan-checkout__main .col2-set::before, .diwan-checkout__main .col2-set::after { display: none; } /* The step says what it is; WooCommerce's own heading would say it again. */ .diwan-checkout__main .woocommerce-billing-fields > h3 { display: none; } .diwan-checkout__title { color: var(--diwan-blue, #246b8f); font-size: 22px; letter-spacing: 0.02em; margin: 0 0 20px; text-transform: uppercase; } /* ------------------------------------------------------------- the stepper */ .diwan-checkout__steps { counter-reset: none; display: flex; gap: 0; list-style: none; margin: 0 0 28px; padding: 0; } .diwan-checkout__stepper { flex: 1 1 0; margin: 0; position: relative; } /* The rule between two steps, drawn from the middle of one to the next. */ .diwan-checkout__stepper + .diwan-checkout__stepper::before { background: var(--diwan-border, #e6e6e6); block-size: 2px; content: ""; inset-block-start: 17px; inset-inline-end: calc(50% + 22px); inline-size: calc(100% - 44px); position: absolute; } .diwan-checkout__stepper.is-done + .diwan-checkout__stepper::before, .diwan-checkout__stepper.is-current + .diwan-checkout__stepper.is-done::before { background: var(--diwan-papyrus, #e0b070); } .woocommerce .diwan-checkout__stepper-button { align-items: center; background: none; border: 0; border-radius: 0; color: var(--diwan-text-muted, #6e6e6e); cursor: default; display: flex; flex-direction: column; font: inherit; gap: 8px; inline-size: 100%; padding: 0; } .woocommerce .diwan-checkout__stepper-button:hover { background: none; color: inherit; } .diwan-checkout__stepper-number { align-items: center; background: var(--diwan-white, #fff); border: 2px solid var(--diwan-border, #e6e6e6); border-radius: 50%; block-size: 36px; display: inline-flex; font-size: 14px; font-weight: 700; inline-size: 36px; justify-content: center; position: relative; z-index: 1; } .diwan-checkout__stepper-icon { display: none; } .diwan-checkout__stepper-name { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .diwan-checkout__stepper.is-current .diwan-checkout__stepper-number { background: var(--diwan-black, #000); border-color: var(--diwan-black, #000); color: var(--diwan-white, #fff); } .diwan-checkout__stepper.is-current .diwan-checkout__stepper-name { color: var(--diwan-text, #000); } .diwan-checkout__stepper.is-done .diwan-checkout__stepper-number { background: var(--diwan-papyrus, #e0b070); border-color: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } .diwan-checkout__stepper.is-done .diwan-checkout__stepper-name { color: var(--diwan-wood, #3b0f00); } /* A step already reached can be gone back to. */ .woocommerce .diwan-checkout__stepper.is-reachable:not(.is-current) .diwan-checkout__stepper-button { cursor: pointer; } .woocommerce .diwan-checkout__stepper.is-reachable:not(.is-current) .diwan-checkout__stepper-button:hover .diwan-checkout__stepper-name { text-decoration: underline; text-underline-offset: 3px; } /* Without the script there are no steps to move between. */ form.checkout:not(.diwan-checkout--steps) .diwan-checkout__steps, form.checkout:not(.diwan-checkout--steps) .diwan-checkout__next { display: none; } /* ---------------------------------------------------------------- the steps */ .diwan-checkout--steps .diwan-checkout__step { display: none; } .diwan-checkout--steps .diwan-checkout__step.is-open { animation: diwan-checkout-in 0.2s ease; display: block; } @keyframes diwan-checkout-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .diwan-checkout__step + .diwan-checkout__step { margin-block-start: 28px; } .diwan-checkout--steps .diwan-checkout__step + .diwan-checkout__step { margin-block-start: 0; } .diwan-checkout__next { margin-block-start: 24px; } .woocommerce .diwan-checkout__next-button { background: var(--diwan-black, #000); border-radius: 0; color: var(--diwan-white, #fff); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; padding: 16px 32px; text-transform: uppercase; } .woocommerce .diwan-checkout__next-button:hover, .woocommerce .diwan-checkout__next-button:focus-visible { background: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } /* ---------------------------------------------------------------- the fields */ .diwan-checkout__main .form-row label { font-size: 13px; font-weight: 600; margin-block-end: 6px; } .diwan-checkout__main .form-row .description { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; margin-block-start: 6px; } .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: #c62828; } .diwan-checkout__error { color: #c62828; display: block; font-size: 12px; margin-block-start: 6px; } /* -------------------------------------------------------------- delivery */ .woocommerce .diwan-checkout__delivery ul#shipping_method { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .woocommerce .diwan-checkout__delivery ul#shipping_method li { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); display: flex; gap: 12px; margin: 0; padding: 16px 18px; text-align: start; transition: border-color 0.15s ease, background-color 0.15s ease; } .woocommerce .diwan-checkout__delivery ul#shipping_method li:has(input:checked) { background: var(--diwan-grey-50, #fafafa); border-color: var(--diwan-black, #000); } .woocommerce .diwan-checkout__delivery ul#shipping_method li input { margin: 0; } .woocommerce .diwan-checkout__delivery ul#shipping_method li label { cursor: pointer; flex: 1 1 auto; font-size: 15px; font-weight: 600; margin: 0; } .diwan-checkout__notes { margin-block-start: 24px; } .diwan-checkout__notes .woocommerce-additional-fields h3 { display: none; } /* --------------------------------------------------------------- payment */ .woocommerce-checkout .diwan-checkout__pay #payment { background: none; border-radius: 0; } .woocommerce-checkout .diwan-checkout__pay #payment ul.payment_methods { border: 0; display: grid; gap: 10px; padding: 0; } .woocommerce-checkout .diwan-checkout__pay #payment ul.payment_methods li { border: 1px solid var(--diwan-border, #e6e6e6); line-height: 1.5; margin: 0; padding: 16px 18px; } .woocommerce-checkout .diwan-checkout__pay #payment ul.payment_methods li:has(> input:checked) { background: var(--diwan-grey-50, #fafafa); border-color: var(--diwan-black, #000); } .woocommerce-checkout .diwan-checkout__pay #payment ul.payment_methods li > label { cursor: pointer; font-size: 15px; font-weight: 600; } .woocommerce-checkout .diwan-checkout__pay #payment div.payment_box { background: none; color: var(--diwan-text-muted, #555); font-size: 13px; margin: 8px 0 0; padding: 0 0 0 26px; } [dir="rtl"] .woocommerce-checkout .diwan-checkout__pay #payment div.payment_box { padding: 0 26px 0 0; } .woocommerce-checkout .diwan-checkout__pay #payment div.payment_box::before { display: none; } .woocommerce-checkout .diwan-checkout__pay #payment div.form-row { padding: 20px 0 0; } .woocommerce-checkout .diwan-checkout__pay .woocommerce-privacy-policy-text { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; } .woocommerce-checkout #payment #place_order { background: var(--diwan-black, #000); border-radius: 0; color: var(--diwan-white, #fff); float: none; font-size: 15px; font-weight: 700; inline-size: 100%; letter-spacing: 0.06em; padding: 18px 24px; text-transform: uppercase; } .woocommerce-checkout #payment #place_order:hover, .woocommerce-checkout #payment #place_order:focus-visible { background: var(--diwan-papyrus, #e0b070); color: var(--diwan-wood, #3b0f00); } /* ------------------------------------------------------------- the order */ .diwan-checkout__side { background: var(--diwan-grey-50, #fafafa); border: 1px solid var(--diwan-border, #e6e6e6); /* Under the header, measured by chrome.js while it is stuck. */ inset-block-start: var(--diwan-sticky-top, 170px); padding: 24px; position: sticky; } .diwan-checkout__side #order_review_heading { font-size: 18px; margin: 0 0 16px; } .woocommerce .diwan-checkout__side table.shop_table { background: none; border: 0; margin: 0; } .woocommerce .diwan-checkout__side table.shop_table th, .woocommerce .diwan-checkout__side table.shop_table td { background: none; border: 0; border-block-start: 1px solid var(--diwan-border, #e6e6e6); padding: 12px 0; } .woocommerce .diwan-checkout__side table.shop_table thead { display: none; } .woocommerce .diwan-checkout__side table.shop_table tbody tr:first-child td { border-block-start: 0; } .woocommerce .diwan-checkout__side table.shop_table td:last-child, .woocommerce .diwan-checkout__side table.shop_table th + td { text-align: end; } .woocommerce .diwan-checkout__side table.shop_table tr.order-total th, .woocommerce .diwan-checkout__side table.shop_table tr.order-total td { border-block-start: 2px solid var(--diwan-black, #000); font-size: 18px; padding-block-start: 16px; } .diwan-checkout__chosen { font-weight: 600; } /* The toggle is for a phone only. */ .diwan-checkout__summary-toggle { display: none; } /* A phone, and a tablet held upright: one column, the order folded on top. */ @media (max-width: 900px) { .woocommerce form.checkout { gap: 24px; grid-template-columns: minmax(0, 1fr); } .diwan-checkout__side { order: -1; padding: 0; position: static; } .woocommerce .diwan-checkout__summary-toggle { align-items: center; background: none; border: 0; border-radius: 0; color: var(--diwan-text, #000); display: flex; font: inherit; font-size: 14px; font-weight: 700; inline-size: 100%; justify-content: space-between; padding: 16px 18px; } .woocommerce .diwan-checkout__summary-toggle:hover { background: none; color: inherit; } .diwan-checkout__summary-word { text-decoration: underline; text-underline-offset: 3px; } .diwan-checkout__side:not(.is-open) #order_review_heading, .diwan-checkout__side:not(.is-open) #order_review { display: none; } .diwan-checkout__side.is-open #order_review_heading, .diwan-checkout__side.is-open #order_review { padding-inline: 18px; } .diwan-checkout__side.is-open #order_review { padding-block-end: 18px; } .diwan-checkout__stepper-name { font-size: 11px; } .woocommerce .diwan-checkout__next-button { inline-size: 100%; } } /* ------------------------------------------------------------ the coupon */ /* WooCommerce's note about a coupon, on the same paper as the order. */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--diwan-grey-50, #fafafa); border: 1px solid var(--diwan-border, #e6e6e6); color: var(--diwan-text, #000); font-size: 14px; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { color: var(--diwan-blue, #246b8f); } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--diwan-text, #000); font-weight: 600; } .woocommerce-checkout form.checkout_coupon { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 0; } /* ------------------------------------------------------ the order's lines */ /* Each book in the order with its cover beside it, the way a receipt from a bookshop would picture it: the jacket, the title, how many. */ .diwan-order-line { align-items: center; display: flex; gap: 14px; } .diwan-order-line__cover { background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border, #e6e6e6); display: block; flex: 0 0 64px; inline-size: 64px; overflow: hidden; } .diwan-order-line__cover.is-book { aspect-ratio: 2 / 3; } .diwan-order-line__cover.is-thing { aspect-ratio: 1 / 1; } /* Whole, not cropped, as on the basket and the shelves. */ .woocommerce .diwan-checkout__side .diwan-order-line__cover img { block-size: 100%; display: block; inline-size: 100%; max-inline-size: none; object-fit: contain; } .woocommerce .diwan-checkout__side .diwan-order-line__cover.is-thing img { object-fit: contain; } .diwan-order-line__words { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; } .diwan-order-line__name { font-weight: 600; line-height: 1.35; } .diwan-order-line__qty { color: var(--diwan-text-muted, #6e6e6e); font-size: 12px; } .woocommerce .diwan-checkout__side table.shop_table td.product-total { vertical-align: middle; white-space: nowrap; } /* A pre-order in the basket (6 October 2026): why only a card is offered. */ .diwan-preorder-notice { background: var(--diwan-canvas, #faf7db); border-inline-start: 3px solid var(--diwan-success, #1f7a3d); color: var(--diwan-text, #000000); font-size: 14px; line-height: 1.5; margin: 0 0 16px; padding: 10px 14px; } /* ==================== Diwan Core · thankyou.css ==================== */ /** * The order received page. * * WooCommerce's own record of the order is left where it is and dressed in the * shop's colours; what this file mostly does is the three things around it — the * line at the top, the three steps, and the ways on at the foot. */ /* ------------------------------------------------------------ the top of it */ .diwan-thanks { align-items: center; display: flex; flex-wrap: wrap; gap: 20px 28px; margin-block-end: 28px; } .diwan-thanks__art { flex: none; inline-size: 180px; block-size: auto; } .diwan-thanks__title { color: var(--diwan-heading, #246b8f); font-size: 28px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 6px; text-transform: uppercase; } .diwan-thanks__line { color: var(--diwan-text-soft, #444); font-size: 16px; line-height: 1.6; margin: 0; max-inline-size: 52ch; } /* The picture: the same flat manner as the 404, in the same colours. */ .diwan-thanks__shadow { fill: var(--diwan-black, #000); opacity: 0.1; } .diwan-thanks__book-a { fill: var(--diwan-blue, #246b8f); } .diwan-thanks__book-b { fill: var(--diwan-papyrus, #e0b070); } .diwan-thanks__book-c { fill: var(--diwan-taupe, #ab9169); } .diwan-thanks__ribbon { fill: var(--diwan-wood, #3b0f00); } .diwan-thanks__badge { fill: var(--diwan-success, #1f7a3d); } .diwan-thanks__tick { fill: none; stroke: var(--diwan-white, #fff); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; } /* WooCommerce's own line under ours would say the same thing twice. */ .woocommerce-order .woocommerce-thankyou-order-received { display: none; } /* ------------------------------------------------------- the order's own row */ /* Number, date, email, total, payment method. WooCommerce draws them as a list; this makes them a row of facts, which is what they are. */ .woocommerce-order .woocommerce-order-overview { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 32px; padding: 0; } .woocommerce-order .woocommerce-order-overview li { border-inline-end: 1px solid var(--diwan-border, #e6e6e6); color: var(--diwan-text-muted, #6e6e6e); flex: 1 1 auto; font-size: 12px; letter-spacing: 0.06em; margin: 0; padding: 14px 18px; text-transform: uppercase; } .woocommerce-order .woocommerce-order-overview li:last-child { border-inline-end: 0; } .woocommerce-order .woocommerce-order-overview li strong { color: var(--diwan-text, #000); display: block; font-size: 16px; letter-spacing: 0; margin-block-start: 4px; text-transform: none; } /* --------------------------------------------------------- what happens next */ .diwan-thanks-next { background: var(--diwan-surface-alt, #fafaf8); border-radius: var(--diwan-radius, 8px); margin-block: 32px; padding: 24px 26px; } .diwan-thanks-next__head { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 18px; text-transform: uppercase; } .diwan-thanks-next__steps { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .diwan-thanks-next__step { display: flex; gap: 12px; margin: 0; } /* The icon and the step's number in one mark: the number says the order, the icon says what it is. */ .diwan-thanks-next__mark { align-items: center; background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: 50%; block-size: 44px; color: var(--diwan-blue, #246b8f); display: inline-flex; flex: none; inline-size: 44px; justify-content: center; position: relative; } .diwan-thanks-next__mark b { align-items: center; background: var(--diwan-black, #000); border-radius: 50%; block-size: 20px; color: var(--diwan-white, #fff); display: inline-flex; font-size: 11px; inline-size: 20px; inset-block-start: -6px; inset-inline-start: -6px; justify-content: center; position: absolute; } .diwan-thanks-next__body { display: grid; gap: 4px; } .diwan-thanks-next__body b { font-size: 14px; font-weight: 700; } .diwan-thanks-next__body span { color: var(--diwan-text-soft, #444); font-size: 13px; line-height: 1.55; } /* -------------------------------------------------------------- the ways on */ .diwan-thanks-on { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; } /* Written one step deeper than the theme's rule for links inside shop content, which underlines them. */ .diwan-thanks-on .diwan-thanks-on__go, .diwan-thanks-on .diwan-thanks-on__orders { text-decoration: none; } .diwan-thanks-on__go { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 13px 26px; text-decoration: none; text-transform: uppercase; } .diwan-thanks-on__go:hover { background: var(--diwan-blue, #246b8f); border-color: var(--diwan-blue, #246b8f); color: var(--diwan-white, #fff); } .diwan-thanks-on__orders { border: 1px solid var(--diwan-border-strong, #d5d5d5); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-black, #000); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 13px 26px; text-decoration: none; text-transform: uppercase; } .diwan-thanks-on__orders:hover { border-color: var(--diwan-black, #000); } /* ------------------------------------------------------------ small screens */ @media (max-width: 767px) { .diwan-thanks { gap: 16px; } .diwan-thanks__art { inline-size: 130px; } .diwan-thanks__title { font-size: 22px; } .diwan-thanks-next__steps { grid-template-columns: minmax(0, 1fr); } /* The row of facts becomes a list again, which is what it is on a phone. */ .woocommerce-order .woocommerce-order-overview li { border-block-end: 1px solid var(--diwan-border, #e6e6e6); border-inline-end: 0; flex: 1 1 100%; } .woocommerce-order .woocommerce-order-overview li:last-child { border-block-end: 0; } } /* ==================== Diwan Core · account.css ==================== */ /** * The account pages. * * Two columns: the tabs in a card on one side, whatever tab is open in a card on * the other. Everything inside the second card is WooCommerce's own markup — * tables, forms, addresses — so most of this file is that markup dressed in the * shop's own borders, type and buttons rather than in the theme's. */ /* ----------------------------------------------------------- the two columns */ .woocommerce-account .woocommerce { display: grid; gap: 28px; grid-template-columns: 260px minmax(0, 1fr); margin-block: 8px 64px; } /* Signing in, and the pages that stand on their own, are one column. */ .woocommerce-account:not(.logged-in) .woocommerce, .woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { display: block; max-inline-size: 560px; } /* WooCommerce lays these two out as a pair of floats with percentage widths, which inside a grid leaves the tabs adrift and the page a fifth of the width it was given. Said one step deeper, so the columns above decide. */ .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; inline-size: auto; margin: 0; } /* The floats are cleared the old way, with an empty pseudo-element at each end of the box. In a grid those two are items like any other, and they were taking the first cell and pushing the tabs into the second: the column of tabs came out wide and on the wrong side. Nothing clears a grid, so they can go — here and anywhere else on these pages a grid is used. */ .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { content: none; } .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; } .woocommerce-account .woocommerce .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; } /* ---------------------------------------------------------------- the tabs */ .diwan-account-nav { background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); padding: 8px; } .diwan-account-nav__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .diwan-account-nav__item { margin: 0; } /* Written one step deeper than the theme's rule for links inside content, which underlines them. */ .diwan-account-nav .diwan-account-nav__link { align-items: center; border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-text-soft, #444); display: flex; font-size: 14px; gap: 10px; padding: 12px 14px; text-decoration: none; } /* The menu's colours: papyrus and wood under the pointer, black with white for the page you are on, the icons in the text's own colour as in the header (they were blue, the one place on the site with blue icons). */ .diwan-account-nav .diwan-account-nav__link:hover, .diwan-account-nav .diwan-account-nav__link:focus-visible { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); outline: none; } .diwan-account-nav__item.is-active .diwan-account-nav__link { background: var(--diwan-black, #000); color: var(--diwan-white, #fff); font-weight: 700; } .diwan-account-nav .diwan-account-nav__item.is-active .diwan-account-nav__link:hover { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } .diwan-account-nav__link .diwan-icon { color: currentcolor; flex: none; } .diwan-account-nav__item.is-active .diwan-account-nav__link .diwan-icon { color: currentcolor; } /* The way out is not a place to go; it reads as one in a list of tabs. */ .woocommerce-MyAccount-navigation-link--customer-logout { border-block-start: 1px solid var(--diwan-border, #e6e6e6); margin-block-start: 6px; padding-block-start: 6px; } /* --------------------------------------------------------- what is open */ .woocommerce-MyAccount-content { background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); padding: 28px 30px; } .woocommerce-MyAccount-content > p { color: var(--diwan-text-soft, #444); font-size: 15px; line-height: 1.65; margin-block-start: 0; max-inline-size: 62ch; } .woocommerce-MyAccount-content > p:first-child { color: var(--diwan-black, #000); font-size: 20px; } .woocommerce-MyAccount-content > p:first-child strong { font-weight: 700; } /* ------------------------------------------------------ the dashboard cards */ .diwan-account-cards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 24px; } .diwan-account-cards .diwan-account-card { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); color: inherit; display: flex; gap: 14px; padding: 18px; text-decoration: none; } .diwan-account-cards .diwan-account-card:hover, .diwan-account-cards .diwan-account-card:focus-visible { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); outline: none; } .diwan-account-cards .diwan-account-card:hover .diwan-account-card__body span, .diwan-account-cards .diwan-account-card:hover > .diwan-icon { color: var(--diwan-hover-text, #3b0f00); } .diwan-account-card__mark { align-items: center; background: var(--diwan-surface-alt, #fafaf8); border-radius: 50%; block-size: 42px; color: var(--diwan-black, #000); display: inline-flex; flex: none; inline-size: 42px; justify-content: center; } .diwan-account-card__body { display: grid; flex: 1 1 auto; gap: 3px; } .diwan-account-card__body b { font-size: 14px; font-weight: 700; } .diwan-account-card__body span { color: var(--diwan-text-soft, #444); font-size: 13px; line-height: 1.5; } .diwan-account-card > .diwan-icon { color: var(--diwan-text-muted, #6e6e6e); flex: none; } [dir="rtl"] .diwan-account-card > .diwan-icon { transform: scaleX(-1); } /* ------------------------------------------------------------- the tables */ .woocommerce-account .woocommerce-orders-table, .woocommerce-account .woocommerce-table--order-details, .woocommerce-account .woocommerce-MyAccount-downloads { border: 1px solid var(--diwan-border, #e6e6e6); border-collapse: collapse; border-radius: var(--diwan-radius, 8px); inline-size: 100%; overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-content th { background: var(--diwan-surface-alt, #fafaf8); border-block-end: 1px solid var(--diwan-border, #e6e6e6); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 14px 16px; text-align: start; text-transform: uppercase; } .woocommerce-account .woocommerce-MyAccount-content td { border-block-end: 1px solid var(--diwan-border, #e6e6e6); font-size: 14px; padding: 16px; vertical-align: middle; } .woocommerce-account .woocommerce-MyAccount-content tbody tr:last-child td { border-block-end: 0; } .woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 700; } .woocommerce-account .woocommerce-orders-table__cell-order-date { white-space: nowrap; } /* --------------------------------------------------------- the addresses */ .woocommerce-account .woocommerce-Addresses { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 20px; } .woocommerce-account .woocommerce-Addresses .woocommerce-Address { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); float: none; inline-size: auto; padding: 20px 22px; } .woocommerce-account .woocommerce-Address-title { align-items: baseline; border-block-end: 1px solid var(--diwan-border, #e6e6e6); display: flex; gap: 12px; justify-content: space-between; margin-block-end: 14px; padding-block-end: 12px; } .woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin: 0; text-transform: uppercase; } .woocommerce-account .woocommerce-Address-title a { color: var(--diwan-black, #000); text-decoration: underline; text-underline-offset: 3px; flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .woocommerce-account .woocommerce-Address address { color: var(--diwan-text-soft, #444); font-size: 14px; font-style: normal; line-height: 1.7; } /* ------------------------------------------------------------- the forms */ .woocommerce-account .woocommerce-MyAccount-content form .form-row, .woocommerce-account form.woocommerce-form-login .form-row, .woocommerce-account form.woocommerce-form-register .form-row { display: grid; gap: 6px; margin-block-end: 18px; padding: 0; } .woocommerce-account .woocommerce-MyAccount-content label, .woocommerce-account form.woocommerce-form-login label, .woocommerce-account form.woocommerce-form-register label { color: var(--diwan-text-soft, #444); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .woocommerce-account .woocommerce input.input-text, .woocommerce-account .woocommerce input[type="email"], .woocommerce-account .woocommerce input[type="password"], .woocommerce-account .woocommerce input[type="tel"], .woocommerce-account .woocommerce input[type="text"], .woocommerce-account .woocommerce select, .woocommerce-account .woocommerce textarea { background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border-strong, #d5d5d5); border-radius: var(--diwan-radius-sm, 4px); font-size: 15px; inline-size: 100%; padding: 12px 14px; } .woocommerce-account .woocommerce input.input-text:focus, .woocommerce-account .woocommerce select:focus, .woocommerce-account .woocommerce textarea:focus { border-color: var(--diwan-black, #000); box-shadow: none; outline: 0; } .woocommerce-account .woocommerce fieldset { border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); margin-block: 8px 22px; padding: 18px 20px; } .woocommerce-account .woocommerce fieldset legend { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; padding-inline: 8px; text-transform: uppercase; } .woocommerce-account .woocommerce .woocommerce-form__label-for-checkbox { align-items: center; display: flex; gap: 8px; letter-spacing: 0; text-transform: none; } .woocommerce-account .woocommerce em { color: var(--diwan-text-muted, #6e6e6e); display: block; font-size: 12px; font-style: normal; margin-block-start: 4px; } /* ----------------------------------------------------------- the buttons */ .woocommerce-account .woocommerce .button, .woocommerce-account .woocommerce button.button, .woocommerce-account .woocommerce input.button { background: var(--diwan-btn-bg, #000); border: 1px solid var(--diwan-btn-border, #000); border-radius: var(--diwan-radius-sm, 4px); color: var(--diwan-btn-text, #fff); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 13px 26px; text-decoration: none; text-transform: uppercase; } .woocommerce-account .woocommerce .button:hover, .woocommerce-account .woocommerce button.button:hover, .woocommerce-account .woocommerce input.button:hover { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* An order row can offer three of them — pay, view, cancel — and they arrive as floated links that land on top of each other. */ .woocommerce-account .woocommerce-orders-table__cell-order-actions { display: flex; flex-wrap: wrap; gap: 6px; } .woocommerce-account .woocommerce-orders-table__cell-order-actions .button { float: none; font-size: 12px; margin: 0; padding: 9px 16px; } /* Pay is the one a reader is meant to press; the other two are ways out of it. */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .view, .woocommerce-account .woocommerce-orders-table__cell-order-actions .cancel { background: var(--diwan-white, #fff); border-color: var(--diwan-border-strong, #d5d5d5); color: var(--diwan-black, #000); } .woocommerce-account .woocommerce-orders-table__cell-order-actions .cancel { color: var(--diwan-danger, #b3261e); } /* --------------------------------------------------------- signing in */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { background: var(--diwan-white, #fff); border: 1px solid var(--diwan-border, #e6e6e6); border-radius: var(--diwan-radius, 8px); padding: 28px 30px; } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit { inline-size: 100%; } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { margin-block-end: 16px; } .woocommerce-account .woocommerce-LostPassword { font-size: 13px; margin-block-start: 14px; } /* ------------------------------------------------------------- notices */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-info { align-items: center; border: 1px solid var(--diwan-border, #e6e6e6); border-inline-start: 3px solid var(--diwan-blue, #246b8f); border-radius: var(--diwan-radius-sm, 4px); display: flex; flex-wrap: wrap; font-size: 14px; gap: 10px 16px; justify-content: space-between; list-style: none; margin-block-end: 20px; padding: 14px 18px; } /* WooCommerce sets its own glyph in a font of its own and places it over the text; the line already says what it is. */ .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-error::before, .woocommerce-account .woocommerce-info::before { content: none; } /* And the button in a notice is floated, which takes it out of the row. It is printed before the sentence it belongs to, so it is sent to the end: the sentence says what the button is for. */ .woocommerce-account .woocommerce-message .button, .woocommerce-account .woocommerce-error .button, .woocommerce-account .woocommerce-info .button { float: none; margin: 0; order: 2; } .woocommerce-account .woocommerce-error { border-inline-start-color: var(--diwan-danger, #b3261e); } .woocommerce-account .woocommerce-message { border-inline-start-color: var(--diwan-success, #1f7a3d); } /* -------------------------------------------------------- small screens */ @media (max-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 18px; } /* One column: the tabs on top, the page under them, in that order. */ .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; } .woocommerce-account .woocommerce .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; } /* The tabs become a run across the top, which is what a phone has room for: the column would push the page itself below the fold. */ .diwan-account-nav__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; } .diwan-account-nav__list::-webkit-scrollbar { display: none; } /* A tablet has the room for every tab: they wrap onto a second line rather than run off the end with nothing to say there are more. */ @media (min-width: 600px) { .diwan-account-nav__list { display: flex; flex-wrap: wrap; overflow-x: visible; } } .woocommerce-MyAccount-navigation-link--customer-logout { border-block-start: 0; border-inline-start: 1px solid var(--diwan-border, #e6e6e6); margin: 0 0 0 6px; padding: 0 0 0 6px; } .diwan-account-cards, .woocommerce-account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); } .woocommerce-MyAccount-content { padding: 22px 20px; } /* A table of orders on a phone reads as a list of orders. */ .woocommerce-account .woocommerce-orders-table thead { display: none; } .woocommerce-account .woocommerce-orders-table tr { display: grid; gap: 4px; padding: 14px 16px; } .woocommerce-account .woocommerce-orders-table tr:not(:last-child) { border-block-end: 1px solid var(--diwan-border, #e6e6e6); } /* The order's own number is a th inside the body of the table, and WooCommerce hides it on a phone — which leaves a list of an order with no order on it. It is a row like the rest. Each row is the label on one side and the answer on the other, and the answer is sometimes several things — a price and a count, three buttons — so the label is floated out of the way rather than made a flex item beside them. */ .woocommerce-account .woocommerce .woocommerce-orders-table td, .woocommerce-account .woocommerce table.shop_table_responsive tbody th { background: none; border: 0; display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; padding: 3px 0; text-align: end; text-transform: none; } .woocommerce-account .woocommerce .woocommerce-orders-table td::before, .woocommerce-account .woocommerce table.shop_table_responsive tbody th::before { color: var(--diwan-text-muted, #6e6e6e); content: attr(data-title); float: left; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; } [dir="rtl"] .woocommerce-account .woocommerce .woocommerce-orders-table td::before, [dir="rtl"] .woocommerce-account .woocommerce table.shop_table_responsive tbody th::before { float: right; } .woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions { display: block; padding-block-start: 8px; } .woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button { margin-inline-start: 6px; } } /* ==================== Diwan Core · category-nav.css ==================== */ /* The contextual category sidebar. Logical properties throughout, so the same stylesheet serves the Arabic (RTL) and English (LTR) sides of the shop. */ .diwan-cat-nav { --diwan-paper: #faf7db; --diwan-papyrus: #e0b070; --diwan-wood: #3b0f00; --diwan-taupe: #ab9169; --diwan-blue: #246b8f; font-size: 15px; line-height: 1.5; } .diwan-cat-nav__title { color: var(--diwan-blue); font-size: 1.05rem; margin: 0 0 0.35em; } .diwan-cat-nav__up { color: var(--diwan-wood); display: inline-block; font-size: 0.85em; margin-block-end: 0.75em; text-decoration: none; } .diwan-cat-nav__up:hover, .diwan-cat-nav__up:focus { text-decoration: underline; } .diwan-cat-nav__list { list-style: none; margin: 0; padding: 0; } .diwan-cat-nav__list--level-2 { border-inline-start: 2px solid var(--diwan-paper); margin-block-start: 0.2em; margin-inline-start: 0.5em; padding-inline-start: 0.75em; } .diwan-cat-nav__item > a { border-radius: 4px; color: var(--diwan-wood); display: flex; gap: 0.5em; justify-content: space-between; padding: 0.3em 0.5em; text-decoration: none; } .diwan-cat-nav__item > a:hover, .diwan-cat-nav__item > a:focus { background: var(--diwan-papyrus); color: var(--diwan-wood); } .diwan-cat-nav__item.is-current > a { background: var(--diwan-paper); font-weight: 600; } .diwan-cat-nav__count { color: var(--diwan-taupe); font-size: 0.8em; font-variant-numeric: tabular-nums; } /* Language switcher, printed by [diwan_language_switcher]. */ .diwan-lang-switch { display: flex; gap: 0.75em; margin-block-end: 1em; } .diwan-lang-switch a { border: 1px solid #e0d9b4; border-radius: 4px; color: #3b0f00; padding: 0.25em 0.8em; text-decoration: none; } .diwan-lang-switch a.is-current { background: #246b8f; border-color: #246b8f; color: #fff; } /* ==================== Diwan Core · popups.css ==================== */ /* * The popup. * * Every colour and the width come from the popup itself, written onto the * element as custom properties, so one stylesheet serves every popup anybody * builds. The values below are only what a popup falls back to when a field was * left empty. * * Three shapes: in the middle over a dimmed page, in a bottom corner with the * page still readable, or a bar along the bottom. On a phone all three become * the same thing — a sheet at the foot of the screen — because a small screen * has no corner to spare. */ .diwan-popup { --diwan-popup-width: 560px; --diwan-popup-bg: #ffffff; --diwan-popup-ink: #111111; --diwan-popup-button-bg: var(--diwan-blue, #246b8f); --diwan-popup-button-ink: #ffffff; --diwan-popup-gap: 22px; position: fixed; z-index: 9990; inset: 0; display: flex; pointer-events: none; } .diwan-popup[hidden] { display: none; } /* ------------------------------------------------------------- the dimmed page */ .diwan-popup__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: auto; transition: opacity 0.22s ease; } .diwan-popup.is-open .diwan-popup__veil { opacity: 1; } /* ------------------------------------------------------------------ the panel */ .diwan-popup__panel { position: relative; z-index: 1; box-sizing: border-box; inline-size: min(var(--diwan-popup-width), calc(100vw - 32px)); max-block-size: calc(100vh - 32px); overflow: auto; margin: auto; padding: var(--diwan-popup-gap); background: var(--diwan-popup-bg); color: var(--diwan-popup-ink); border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); pointer-events: auto; opacity: 0; transform: translateY(14px); transition: opacity 0.24s ease, transform 0.24s ease; } .diwan-popup.is-open .diwan-popup__panel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .diwan-popup__veil, .diwan-popup__panel { transition: none; } } /* ------------------------------------------------------------- the three places */ .diwan-popup--at-centre { align-items: center; justify-content: center; padding: 16px; } .diwan-popup--at-corner { align-items: flex-end; justify-content: flex-end; padding: 20px; } .diwan-popup--at-corner .diwan-popup__panel { margin: 0; inline-size: min(var(--diwan-popup-width), 400px, calc(100vw - 40px)); } .diwan-popup--at-bottom { align-items: flex-end; justify-content: center; padding: 0; } .diwan-popup--at-bottom .diwan-popup__panel { margin: 0; inline-size: 100%; max-inline-size: none; border-radius: 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); } .diwan-popup--at-bottom .diwan-popup__words { margin-inline: auto; max-inline-size: 1140px; } /* -------------------------------------------------------------- the close cross */ .diwan-popup__close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: currentColor; cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease, background-color 0.15s ease; } .diwan-popup__close:hover, .diwan-popup__close:focus-visible { opacity: 1; background: rgba(127, 127, 127, 0.16); } /* * With a picture across the top of the panel the cross sits over it, where neither * a dark cross nor a light one can be relied on to read. It gets a chip of its * own there: the same one whatever the photograph turns out to be. */ .diwan-popup--above .diwan-popup__close, .diwan-popup--behind .diwan-popup__close { background: rgba(0, 0, 0, 0.45); color: #ffffff; opacity: 1; } .diwan-popup--above .diwan-popup__close:hover, .diwan-popup--above .diwan-popup__close:focus-visible, .diwan-popup--behind .diwan-popup__close:hover, .diwan-popup--behind .diwan-popup__close:focus-visible { background: rgba(0, 0, 0, 0.7); } .diwan-popup__close svg { display: block; } /* ------------------------------------------------------------ the picture */ .diwan-popup__picture { margin-block-end: 16px; } .diwan-popup__picture:empty { display: none; } .diwan-popup__image { display: block; inline-size: 100%; block-size: auto; border-radius: 3px; } .diwan-popup__video { position: relative; padding-block-end: 56.25%; } .diwan-popup__video iframe, .diwan-popup__video video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; } /* Picture beside the words: two columns, and one under the other on a phone. */ .diwan-popup--beside .diwan-popup__panel { display: flex; gap: var(--diwan-popup-gap); align-items: center; } .diwan-popup--beside .diwan-popup__picture { flex: 0 0 42%; margin-block-end: 0; } .diwan-popup--beside .diwan-popup__words { flex: 1 1 auto; } /* Words over the picture: the picture fills the panel and the words sit on a scrim, so the wording stays readable over a light photograph as well as a dark one. */ .diwan-popup--behind .diwan-popup__panel { position: relative; padding: 0; overflow: hidden; } .diwan-popup--behind .diwan-popup__picture { margin-block-end: 0; } .diwan-popup--behind .diwan-popup__words { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 28px var(--diwan-popup-gap) var(--diwan-popup-gap); background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0)); color: #ffffff; } .diwan-popup--behind .diwan-popup__close { background: rgba(0, 0, 0, 0.4); color: #ffffff; opacity: 1; } /* -------------------------------------------------------------- the wording */ .diwan-popup__title { margin: 0 0 8px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; color: inherit; } .diwan-popup__body { margin: 0; font-size: 0.95rem; line-height: 1.6; color: inherit; } .diwan-popup__body p { margin: 0 0 0.7em; } .diwan-popup__body p:last-child { margin-block-end: 0; } .diwan-popup__button { display: inline-block; margin-block-start: 16px; padding: 11px 26px; background: var(--diwan-popup-button-bg); color: var(--diwan-popup-button-ink); border: 1px solid var(--diwan-popup-button-bg); border-radius: 2px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* The same hover as every other button on the site. */ .diwan-popup__button:hover, .diwan-popup__button:focus-visible { background: var(--diwan-hover, #e0b070); border-color: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); } /* ------------------------------------------------------------------ on a phone */ @media (max-width: 600px) { .diwan-popup--at-corner, .diwan-popup--at-centre { align-items: flex-end; justify-content: center; padding: 0; } .diwan-popup--at-corner .diwan-popup__panel, .diwan-popup--at-centre .diwan-popup__panel, .diwan-popup--at-bottom .diwan-popup__panel { margin: 0; inline-size: 100%; max-inline-size: none; max-block-size: 86vh; border-radius: 10px 10px 0 0; } /* Two columns is one column at this width. */ .diwan-popup--beside .diwan-popup__panel { display: block; } .diwan-popup--beside .diwan-popup__picture { margin-block-end: 16px; } } /* ==================== Diwan Core · top-bar.css ==================== */ /* * The offer bar across the top of the site. * * Emblem at the left, offer in the middle, close at the right. The emblem and * the close button keep those sides in Arabic too, as they do on the existing * site; only the words run right to left. */ .diwan-topbar { background: var(--diwan-topbar-bg, #f9f6db); color: var(--diwan-topbar-text, #806a48); font-family: "Loew", "Loew Font Family", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif; /* The height and the type that fits it are set in Offers → Top bar settings and written onto the bar. */ font-size: var(--diwan-topbar-font, 14px); font-weight: 700; line-height: 1.5; overflow: hidden; position: relative; transition: max-height 0.28s ease, opacity 0.2s ease; z-index: 1001; } .diwan-topbar[hidden] { display: none !important; } .diwan-topbar.is-closing { max-height: 0 !important; opacity: 0; } .diwan-topbar__inner { align-items: center; direction: ltr; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* The height set for the bar, with everything in it centred and sized to fit inside it, so the bar is that height and not a padding taller. */ min-height: var(--diwan-topbar-h, 44px); padding-block: 0; } /* The two outer cells are the same width, so the offer sits in the true middle of the bar however wide the emblem is. */ /* Written one step past WooCommerce's and Elementor's own img rules, which set height: auto and on a shop page drew the emblem at its full 96 pixels, more than doubling the bar. */ .diwan-topbar img.diwan-topbar__icon, .diwan-topbar span.diwan-topbar__icon { /* 24 pixels, or less in a bar too shallow for it: 4 pixels of air a side. */ block-size: min(24px, calc(var(--diwan-topbar-h, 44px) - 8px)) !important; display: block; inline-size: auto !important; justify-self: start; margin: 0; max-block-size: min(24px, calc(var(--diwan-topbar-h, 44px) - 8px)); max-inline-size: 100%; object-fit: contain; } .diwan-topbar .diwan-topbar__close { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--diwan-topbar-close, #5d492b); cursor: pointer; display: inline-flex; block-size: min(32px, var(--diwan-topbar-h, 44px)); inline-size: min(32px, var(--diwan-topbar-h, 44px)); justify-content: center; justify-self: end; padding: 0; transition: background-color 0.16s ease; } .diwan-topbar__close svg { block-size: min(20px, calc(var(--diwan-topbar-h, 44px) - 6px)); inline-size: min(20px, calc(var(--diwan-topbar-h, 44px) - 6px)); } /* ------------------------------------------------------ stays at the top */ /* * The bar holds the top of the screen and the header sticks under it: the * header script reads --diwan-topbar-stick, which top-bar.js keeps at the bar's * height while it is showing and at nothing once a visitor has closed it. One * above the header's own layer, so the header's rows pass under the bar as the * page scrolls and not over it. */ .diwan-topbar--sticky { inset-block-start: 0; position: sticky; z-index: 1002; } body.admin-bar .diwan-topbar--sticky { inset-block-start: 32px; } @media (max-width: 782px) { body.admin-bar .diwan-topbar--sticky { inset-block-start: 46px; } } /* WordPress stops fixing its own bar at this width and lets it scroll away. */ @media (max-width: 600px) { body.admin-bar .diwan-topbar--sticky { inset-block-start: 0; } } /* The menu's hover: papyrus behind, wood in front. Stated with the bar in front, so a theme's rules for every button (Hello Elementor paints them pink, and white on pink when hovered) cannot win over it. */ .diwan-topbar .diwan-topbar__close:hover, .diwan-topbar .diwan-topbar__close:focus-visible { background: var(--diwan-hover, #e0b070); color: var(--diwan-hover-text, #3b0f00); outline: none; } .diwan-topbar__close:focus-visible { box-shadow: 0 0 0 2px var(--diwan-topbar-close, #5d492b); } /* The window the offers pass through: as wide as the bar allows between the emblem and the close button, one line tall. */ .diwan-topbar__window { block-size: 1.5em; inline-size: min(62vw, 820px); overflow: hidden; position: relative; } html[dir="rtl"] .diwan-topbar__window, body.diwan-lang-ar .diwan-topbar__window { direction: rtl; } .diwan-topbar__track { list-style: none; margin: 0; padding: 0; } .diwan-topbar__message { inset: 0; overflow: hidden; position: absolute; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .diwan-topbar__link, .diwan-topbar__text { color: inherit; text-decoration: none; } /* The whole line is the link, not only its letters. */ .diwan-topbar__link { display: block; overflow: hidden; text-overflow: ellipsis; } .diwan-topbar__link::after { content: " \2192"; display: inline-block; margin-inline-start: 6px; transition: transform 0.18s ease; } html[dir="rtl"] .diwan-topbar__link::after, body.diwan-lang-ar .diwan-topbar__link::after { content: " \2190"; } .diwan-topbar__link:hover::after { transform: translateX(3px); } html[dir="rtl"] .diwan-topbar__link:hover::after, body.diwan-lang-ar .diwan-topbar__link:hover::after { transform: translateX(-3px); } .diwan-topbar__link:hover, .diwan-topbar__link:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------- one offer */ .diwan-topbar--still .diwan-topbar__message { position: static; } /* --------------------------------------------------------------- sliding */ .diwan-topbar--slide .diwan-topbar__message { opacity: 0; transform: translateY(100%); transition: transform 0.45s ease, opacity 0.45s ease; } .diwan-topbar--slide .diwan-topbar__message.is-active { opacity: 1; transform: translateY(0); } .diwan-topbar--slide .diwan-topbar__message.is-leaving { opacity: 0; transform: translateY(-100%); } /* ---------------------------------------------------------------- fading */ .diwan-topbar--fade .diwan-topbar__message { opacity: 0; transition: opacity 0.5s ease; visibility: hidden; } .diwan-topbar--fade .diwan-topbar__message.is-active { opacity: 1; visibility: visible; } /* ---------------------------------------------------------------- ticker */ .diwan-topbar--ticker .diwan-topbar__window { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .diwan-topbar--ticker .diwan-topbar__track { animation: diwan-topbar-ticker var(--diwan-topbar-duration, 30s) linear infinite; display: flex; inline-size: max-content; } .diwan-topbar--ticker .diwan-topbar__message { padding-inline-end: 64px; position: static; } .diwan-topbar--ticker:hover .diwan-topbar__track, .diwan-topbar--ticker:focus-within .diwan-topbar__track { animation-play-state: paused; } @keyframes diwan-topbar-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Right to left, the words run the other way. */ @keyframes diwan-topbar-ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } html[dir="rtl"] .diwan-topbar--ticker .diwan-topbar__track, body.diwan-lang-ar .diwan-topbar--ticker .diwan-topbar__track { animation-name: diwan-topbar-ticker-rtl; } /* ----------------------------------------------------------- less motion */ @media (prefers-reduced-motion: reduce) { .diwan-topbar--slide .diwan-topbar__message, .diwan-topbar--fade .diwan-topbar__message { transition: none; } .diwan-topbar--ticker .diwan-topbar__track { animation: none; } .diwan-topbar { transition: none; } } /* ----------------------------------------------------------------- phone */ @media (max-width: 720px) { .diwan-topbar { font-size: var(--diwan-topbar-font-phone, 13px); } .diwan-topbar__inner { gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: var(--diwan-topbar-h-phone, 40px); } .diwan-topbar img.diwan-topbar__icon { block-size: min(18px, calc(var(--diwan-topbar-h-phone, 40px) - 8px)) !important; max-block-size: min(18px, calc(var(--diwan-topbar-h-phone, 40px) - 8px)); } .diwan-topbar__window { inline-size: 100%; } .diwan-topbar .diwan-topbar__close { block-size: min(28px, var(--diwan-topbar-h-phone, 40px)); inline-size: min(28px, var(--diwan-topbar-h-phone, 40px)); } .diwan-topbar__close svg { block-size: min(18px, calc(var(--diwan-topbar-h-phone, 40px) - 6px)); inline-size: min(18px, calc(var(--diwan-topbar-h-phone, 40px) - 6px)); } } /* ------------------------------------------------- an offer on a small phone */ /* * One line and an ellipsis is how "buy 2, get the third free" became "buy 2, get * the thi…" on a 360px screen. The bar is the only place the offer is stated, so * on a narrow phone it is given a second line: the window grows to fit, the * message centres in it whether it takes one line or two, and a third line is * clipped rather than pushing the whole site down the page. * * The ticker is left out on purpose — it scrolls sideways, and a line that wraps * has nothing to scroll. */ @media (max-width: 560px) { .diwan-topbar:not(.diwan-topbar--ticker):not(.diwan-topbar--one-line) .diwan-topbar__window { block-size: 2.8em; } .diwan-topbar:not(.diwan-topbar--ticker):not(.diwan-topbar--one-line) .diwan-topbar__message { align-items: center; display: flex; justify-content: center; text-overflow: clip; white-space: normal; } .diwan-topbar:not(.diwan-topbar--ticker):not(.diwan-topbar--one-line) .diwan-topbar__link, .diwan-topbar:not(.diwan-topbar--ticker):not(.diwan-topbar--one-line) .diwan-topbar__text { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; line-height: 1.35; overflow: hidden; } } /* ==================== Diwan Core · whatsapp.css ==================== */ /* * The WhatsApp button and its card. * * Fixed to a bottom corner: right on English pages, left on Arabic ones. The * card grows up out of the button, so the eye goes from the tap to the answer * without looking anywhere else. */ .diwan-wa { --diwan-wa-color: #25d366; /* The size is set on the WhatsApp settings screen and written onto the button as these two; the numbers here are what it is until it is. */ --diwan-wa-size: var(--diwan-wa-size-desktop, 60px); --diwan-wa-ink: #fff; /* --diwan-wa-lift is room something else at the foot of the screen asks for — the basket's bar on a phone — added to the button's own distance rather than replacing it, which the button's settings would overrule. */ bottom: calc(var(--diwan-wa-bottom, 24px) + var(--diwan-wa-lift, 0px) + env(safe-area-inset-bottom, 0px)); font-family: "Loew", "Loew Font Family", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif; position: fixed; z-index: 9990; } .diwan-wa--right { right: var(--diwan-wa-side, 24px); } .diwan-wa--left { left: var(--diwan-wa-side, 24px); } .diwan-wa.is-offline-hidden { display: none; } /* ------------------------------------------------------------ the button */ .diwan-wa__button { align-items: center; background: var(--diwan-wa-color); border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12); color: var(--diwan-wa-ink); display: flex; block-size: var(--diwan-wa-size); inline-size: var(--diwan-wa-size); justify-content: center; position: relative; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .diwan-wa__button:hover, .diwan-wa__button:focus-visible { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.14); color: var(--diwan-wa-ink); transform: translateY(-2px) scale(1.04); } .diwan-wa__button:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--diwan-wa-color), 0 10px 26px rgba(0, 0, 0, 0.22); } .diwan-wa__button:active { transform: scale(0.96); } .diwan-wa__glyph { display: flex; inset: 0; align-items: center; justify-content: center; position: absolute; transition: opacity 0.2s ease, transform 0.25s ease; } /* The mark at about half the button whatever size the button is set to: drawn at a fixed 30 it filled a 32-pixel button edge to edge. */ .diwan-wa__glyph svg { block-size: calc(var(--diwan-wa-size) * 0.56); inline-size: calc(var(--diwan-wa-size) * 0.56); stroke-width: 1.7; } .diwan-wa__glyph--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .diwan-wa.is-open .diwan-wa__glyph:not(.diwan-wa__glyph--close) { opacity: 0; transform: rotate(90deg) scale(0.6); } .diwan-wa.is-open .diwan-wa__glyph--close { opacity: 1; transform: none; } /* A soft ring, a few times, once the page has settled. */ .diwan-wa.has-pulse .diwan-wa__button::before { animation: diwan-wa-pulse 2s ease-out 1.5s 3; border: 2px solid var(--diwan-wa-color); border-radius: 50%; content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; } @keyframes diwan-wa-pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } } .diwan-wa.is-open .diwan-wa__button::before, .diwan-wa.was-used .diwan-wa__button::before { animation: none; } /* ----------------------------------------------------------- the label */ .diwan-wa__label { background: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); color: #1f1f1f; font-size: 14px; font-weight: 600; opacity: 0; padding: 8px 14px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%) translateX(var(--diwan-wa-label-shift, 8px)); transition: opacity 0.18s ease, transform 0.18s ease; white-space: nowrap; } .diwan-wa--right .diwan-wa__label { right: calc(var(--diwan-wa-size) + 12px); } .diwan-wa--left .diwan-wa__label { --diwan-wa-label-shift: -8px; left: calc(var(--diwan-wa-size) + 12px); } @media (hover: hover) { .diwan-wa:not(.is-open) .diwan-wa__button:hover + .diwan-wa__label, .diwan-wa:not(.is-open) .diwan-wa__button:focus-visible + .diwan-wa__label { opacity: 1; transform: translateY(-50%) translateX(0); } } /* ------------------------------------------------------------- the card */ .diwan-wa__card { background: #fff; border-radius: 18px; bottom: calc(var(--diwan-wa-size) + 16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); inline-size: min(360px, calc(100vw - 32px)); overflow: hidden; position: absolute; transform-origin: bottom right; } .diwan-wa--right .diwan-wa__card { right: 0; } .diwan-wa--left .diwan-wa__card { left: 0; transform-origin: bottom left; } .diwan-wa__card[hidden] { display: none; } .diwan-wa__card.is-entering { animation: diwan-wa-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .diwan-wa__card.is-leaving { animation: diwan-wa-out 0.16s ease-in forwards; } @keyframes diwan-wa-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: none; } } @keyframes diwan-wa-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } } .diwan-wa__head { align-items: center; background: #075e54; color: #fff; display: flex; gap: 12px; padding: 16px 14px 16px 16px; } .diwan-wa__avatar { align-items: center; background: #f9f6db; border-radius: 50%; display: flex; flex: none; block-size: 46px; inline-size: 46px; justify-content: center; position: relative; } .diwan-wa__avatar img { block-size: auto !important; inline-size: 34px !important; max-inline-size: none; } .diwan-wa__dot { background: #25d366; border: 2px solid #075e54; border-radius: 50%; block-size: 12px; bottom: 1px; inline-size: 12px; inset-inline-end: 1px; position: absolute; } .diwan-wa.is-offline .diwan-wa__dot { background: #9aa0a6; } .diwan-wa__who { display: flex; flex: 1; flex-direction: column; gap: 2px; min-inline-size: 0; } .diwan-wa__name { font-size: 16px; font-weight: 700; line-height: 1.25; } .diwan-wa__status { font-size: 12.5px; line-height: 1.35; opacity: 0.85; } .diwan-wa__close { align-items: center; align-self: flex-start; background: transparent; border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; flex: none; block-size: 32px; inline-size: 32px; justify-content: center; padding: 0; transition: background-color 0.16s ease; } .diwan-wa__close:hover, .diwan-wa__close:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; outline: none; } /* The chat itself: the pale patterned ground WhatsApp readers know. */ .diwan-wa__body { background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 14px 14px; padding: 20px 16px 22px; } .diwan-wa__bubble { animation: diwan-wa-bubble 0.3s ease 0.12s both; background: #fff; border-radius: 0 12px 12px 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); color: #111b21; font-size: 14.5px; line-height: 1.55; margin: 0; max-inline-size: 88%; padding: 10px 12px 18px; position: relative; } [dir="rtl"] .diwan-wa__bubble { border-radius: 12px 0 12px 12px; } .diwan-wa__bubble::before { border-block-start: 10px solid #fff; border-inline-start: 10px solid transparent; content: ""; inset-block-start: 0; inset-inline-start: -9px; position: absolute; } .diwan-wa__time { bottom: 4px; color: #667781; font-size: 11px; inset-inline-end: 10px; position: absolute; } @keyframes diwan-wa-bubble { from { opacity: 0; transform: translateY(6px); } } .diwan-wa__foot { padding: 14px 16px 16px; } .diwan-wa__start { align-items: center; background: var(--diwan-wa-color); border-radius: 999px; color: #fff; display: flex; font-size: 15px; font-weight: 700; gap: 10px; justify-content: center; padding: 13px 18px; text-decoration: none; transition: filter 0.16s ease, transform 0.16s ease; } .diwan-wa__start:hover, .diwan-wa__start:focus-visible { color: #fff; filter: brightness(0.94); outline: none; transform: translateY(-1px); } .diwan-wa__start:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--diwan-wa-color); } /* ------------------------------------------------------------ devices */ @media (max-width: 767px) { .diwan-wa { --diwan-wa-size: var(--diwan-wa-size-phone, 54px); bottom: calc(var(--diwan-wa-mobile, 16px) + var(--diwan-wa-lift, 0px) + env(safe-area-inset-bottom, 0px)); } .diwan-wa--right { right: var(--diwan-wa-mobile, 16px); } .diwan-wa--left { left: var(--diwan-wa-mobile, 16px); } .diwan-wa__label { display: none; } /* On a phone the card spans the screen with the same margin both sides, whichever corner the button is in. */ .diwan-wa__card { bottom: calc(var(--diwan-wa-mobile, 16px) + var(--diwan-wa-lift, 0px) + var(--diwan-wa-size) + 12px + env(safe-area-inset-bottom, 0px)); inline-size: auto; left: var(--diwan-wa-mobile, 16px); position: fixed; right: var(--diwan-wa-mobile, 16px); } .diwan-wa--right .diwan-wa__card, .diwan-wa--left .diwan-wa__card { left: var(--diwan-wa-mobile, 16px); right: var(--diwan-wa-mobile, 16px); } .diwan-wa__body { max-block-size: 40vh; overflow: auto; } .diwan-wa--devices-desktop { display: none; } } @media (min-width: 768px) { .diwan-wa--devices-mobile { display: none; } } @media (prefers-reduced-motion: reduce) { .diwan-wa__button, .diwan-wa__glyph, .diwan-wa__label, .diwan-wa__start { transition: none; } .diwan-wa.has-pulse .diwan-wa__button::before, .diwan-wa__card.is-entering, .diwan-wa__card.is-leaving, .diwan-wa__bubble { animation: none; } } @media print { .diwan-wa { display: none; } }/* End custom CSS */