/* ========================================================================== Sadaf Bridal, theme layer Murphys Technology Pty Ltd WHAT THIS FILE IS FOR The design kit this site is built on ships around fifty stylesheets. Rather than editing any of them, every change we make for Sadaf lives here, in one file, loaded last so it wins. Anything we ever want to undo is undone here and nowhere else. Load this AFTER every other stylesheet, immediately before . SECTIONS 1. Fonts 2. Typography 3. Brand tokens 4. Layout bug fixes carried over from the kit 5. Header 6. Mobile action bar 7. Footer 8. Responsive layer 9. Accessibility floor ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts The kit loaded its fonts from Google on every page view. They are now served from our own server instead. Two reasons: the page stops waiting on a third party before it can draw any text, which is the slowest single step on a phone, and no visitor data is handed to Google just for a typeface. -------------------------------------------------------------------------- */ /* The kit's icon font. It ships at 454KB and carries several hundred symbols. This site uses fourteen of them: the accordion plus and cross, the menu arrows, the tick in the pricing lists, and a handful in the icon boxes. Cut down to those, it is 5KB. Same family name, declared after the kit's, so this is the one the browser fetches. */ @font-face { font-family: elementskit; src: url("../fonts/elementskit-subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Typography The kit uses one typeface, Dorsa, for every heading on the site, from the 115px hero down to 14px column labels. Dorsa is an extremely tall, narrow display face. It was drawn to be set large and it falls apart at small sizes, which is what made the footer headings and the small titles look wrong. It also has nothing in common with Sadaf's logo, which is a wide classical serif. Replaced with two faces doing two jobs: Cormorant Garamond large headings only. A fine, high-contrast serif that sits naturally beside the logo. Inter Tight everything else, including all small headings. Already the body face, so labels stay crisp. Cormorant sets much wider than Dorsa at the same point size, so the sizes below are smaller numbers for the same visual weight. That is expected. Signed off on 29 July 2026 as option B of three. If it ever needs to change, the font-family lines in this section are the only place it is set. Nothing else in this file depends on them. -------------------------------------------------------------------------- */ .elementor-kit-3 { /* Large display headings. */ --e-global-typography-primary-font-family: "Cormorant Garamond"; --e-global-typography-secondary-font-family: "Cormorant Garamond"; --e-global-typography-7a6cd34-font-family: "Cormorant Garamond"; --e-global-typography-ad6a06b-font-family: "Cormorant Garamond"; --e-global-typography-e8923f1-font-family: "Cormorant Garamond"; --e-global-typography-primary-font-weight: 300; --e-global-typography-secondary-font-weight: 300; --e-global-typography-7a6cd34-font-weight: 300; --e-global-typography-ad6a06b-font-weight: 400; --e-global-typography-e8923f1-font-weight: 400; /* The kit changed sizes at two fixed points, which left a 115px headline sitting in a 1030px window. clamp() slides between a floor and a ceiling instead, so type is right at every width rather than at three of them. Read clamp(a, b, c) as: never below a, never above c, scaling between. */ --e-global-typography-primary-font-size: clamp(40px, 5.4vw, 74px); --e-global-typography-primary-line-height: 1.08em; --e-global-typography-7a6cd34-font-size: clamp(36px, 4.6vw, 62px); --e-global-typography-secondary-font-size: clamp(30px, 3.6vw, 48px); --e-global-typography-secondary-line-height: 1.14em; --e-global-typography-ad6a06b-font-size: clamp(26px, 2.6vw, 34px); --e-global-typography-e8923f1-font-size: clamp(23px, 2.2vw, 30px); /* Small headings. These are the ones that were unreadable. */ --e-global-typography-9d032af-font-family: "Inter Tight"; --e-global-typography-9d032af-font-size: 19px; --e-global-typography-9d032af-font-weight: 600; --e-global-typography-9d032af-line-height: 1.35em; --e-global-typography-9d032af-letter-spacing: 0px; --e-global-typography-d3bd1ef-font-family: "Inter Tight"; --e-global-typography-d3bd1ef-font-size: 16px; --e-global-typography-d3bd1ef-font-weight: 600; --e-global-typography-d3bd1ef-line-height: 1.4em; --e-global-typography-d3bd1ef-letter-spacing: 0px; } /* Cormorant's hairlines need a touch more room than a sans would. */ .elementor-heading-title { overflow-wrap: break-word; } /* Headings take the colour of the section they sit in. The kit hard sets every bare h1 to h6 to its dark primary colour, with a selector strong enough to beat any single class rule written afterwards. The result was a dark mocha headline on a dark mocha hero, which is why the main heading was invisible. Rather than fight that heading by heading on every page we build, headings now inherit, and colour is set once on the section. Dark section, light headings. Light section, dark headings. Headings placed by the page builder carry their own colour on a stronger selector, so the header and footer are unaffected. */ .elementor-kit-3 h1, .elementor-kit-3 h2, .elementor-kit-3 h3, .elementor-kit-3 h4, .elementor-kit-3 h5, .elementor-kit-3 h6 { color: inherit; } /* -------------------------------------------------------------------------- 3. Brand colours Sadaf supplied a palette on 28 July 2026. It replaces the kit's own colours entirely. The kit's are a red brown; hers are a true mocha, greyer and softer, with champagne gold rather than the kit's sandy tone. #523D2E dark mocha, primary background #5A4333 secondary background #D7B487 champagne gold, the primary metallic #F4E4C9 champagne gold highlight #C89B67 warm gold #8F6643 antique gold, for shadow and depth Two colours are not in her list because a palette for print does not include them: a body text colour and an off white. Both are drawn from her mocha so they belong to the same family. #6E5647 body text, a lighter mocha #F7F4F1 off white, for the clean space she asked for #EAE4DE a warmer off white for alternating sections WHERE EACH GOLD CAN BE USED Measured against the WCAG readability standard, which asks for 4.5 to 1 for normal text: On dark mocha ivory 9.3:1, highlight 8.1:1, champagne 5.2:1 all safe for text On dark mocha warm gold 4.0:1, antique gold 2.0:1 NOT safe for text, decoration only On off white antique gold 4.6:1, safe for links and labels On off white warm gold 2.3:1, decoration only Mocha on champagne 5.2:1, so button text stays dark So: champagne gold carries the accents, the highlight carries anything that has to be read on a dark background, and warm and antique gold are for borders, dividers and gradients rather than words. No bright yellow, orange or rose gold anywhere, as requested. -------------------------------------------------------------------------- */ /* The kit's seven global colours, repointed. Every one of the fifty odd kit stylesheets reads these, so setting them here recolours the whole site without touching any of those files. */ .elementor-kit-3, :root { --e-global-color-primary: #523D2E; --e-global-color-secondary: #8F6643; --e-global-color-text: #6E5647; --e-global-color-accent: #D7B487; --e-global-color-175483c: #F7F4F1; --e-global-color-8ec8dfc: #EAE4DE; --e-global-color-cf4e37a: #523D2E30; } :root { --sadaf-mocha: #523D2E; --sadaf-mocha-2: #5A4333; --sadaf-gold: #D7B487; --sadaf-gold-light: #F4E4C9; --sadaf-gold-warm: #C89B67; --sadaf-gold-deep: #8F6643; --sadaf-body: #6E5647; --sadaf-ivory: #F7F4F1; --sadaf-beige: #EAE4DE; /* kept so older rules in this file keep working */ --sadaf-ink: #523D2E; } /* -------------------------------------------------------------------------- 4. Layout bug fixes carried over from the kit 4a. The icon box widget. The kit sets the text half of an icon box to width:100%. When the icon sits beside the text rather than above it, the icon and the gap are added on top of that full width, so the box is always wider than the space it has. On a wide monitor the surrounding whitespace hides it. Between roughly 1025px and 1300px there is none spare, so the page gains a horizontal scrollbar. Measured at 17px of overflow in a 1100px window. -------------------------------------------------------------------------- */ [class*="elementor-position-inline-"] .elementor-icon-box-content, [class*="position-inline-"] .elementor-icon-box-content { width: auto; min-width: 0; flex: 1 1 0%; } /* 4b. Flex and grid children refuse to shrink below their content by default, which is the root cause of most sideways scrolling. */ .e-con > .e-con-inner > *, .elementor-widget-container { min-width: 0; } /* 4c. Nothing may push the page sideways. */ img, video, iframe, svg, table { max-width: 100%; } img, video { height: auto; } /* -------------------------------------------------------------------------- 5. Header 5a. The header is now solid and stays at the top of the screen. The kit floats a transparent header over the hero image by pulling it up with a negative margin of exactly 67 pixels, a number hand tuned to the height of its own small square logo. Sadaf's logo is a wide wordmark, so the header grew to 97 pixels tall and only 67 of those were pulled up. The remaining 30 sat above the hero, on the cream page background, with pale ivory navigation text on it. That is what was making the top of the page look broken. Rather than hand tune the number again, and again for every screen size and every page whose first section is a different height, the header is now solid and sticks to the top of the screen. Three things follow from that: it is readable no matter what is underneath it, it cannot come apart on a page we have not built yet, and Call and Book stay on screen the whole way down every page. -------------------------------------------------------------------------- */ /* WHY THE STICKY RULE IS ON THE OUTER WRAPPER AND NOT THE BAR ITSELF. A sticky element can only travel inside its own parent's box. It sticks while that parent is passing the top of the screen and lets go the moment the parent has gone by. The rule used to sit on the inner bar, .elementor-element-01a4cb3. Its parent, .elementor-427, is exactly as tall as the bar itself, 108px on a laptop and 62px on a phone, because the bar is the only thing in it. So the bar had no room at all to travel: it stuck for zero pixels and then scrolled away with the page, which is why the menu disappeared and you had to go back to the top to reach it. The rule was there and correct, it was just attached to an element that could not act on it. Moved out to .sadaf-header, which is a direct child of the body. Its parent is now the whole page, so the header has the full document to travel down and stays put. Nothing above it applies a transform, a filter or a clipping overflow, all of which silently switch sticky off; that was checked on the built pages rather than assumed. The scroll offset for jump links was already set to 110px site wide during the homepage round and matches this header, so anchors still land clear of it and no second offset is needed. */ .sadaf-header { position: sticky; top: 0; z-index: 400; background: var(--sadaf-ink); } .sadaf-header .elementor-element-01a4cb3 { margin-bottom: 0 !important; background: var(--sadaf-ink); border-bottom: 1px solid rgba(198, 161, 91, .22); box-shadow: 0 2px 18px rgba(38, 14, 8, .18); } /* The kit set navigation links to 69% opacity because they sat on a dark photograph. On a solid background that just reads as faded. */ .sadaf-header .elementskit-navbar-nav > li > a { color: #F5EFEA !important; font-family: "Inter Tight", sans-serif; } /* 5b. The logo. The kit was built for a small square mark and sizes it at 70px wide. Sadaf's is a wide wordmark at roughly 2.8 to 1, so at 70px the words were unreadable. Sized by width here, with height left to follow. */ /* THE LOGO, ENLARGED 19 AUGUST at Sadaf's request: "The logo is currently quite small, and Sadaf Bridal is difficult to read." Measured before changing: 196px wide on desktop and 111px on a phone, inside a 620x224 file, so the wordmark rendered very small. THE WIDGET CONTAINER HAS TO BE RELEASED AS WELL AS THE IMAGE, and that is why the first line exists. The kit sets its own width on the logo widget, 70px on desktop and 65px on a phone, and an image cannot exceed its parent because everything here inherits max-width:100%. Raising only the image width worked on desktop, where the header is wide enough that the parent never bound it, and did nothing at all on a phone: the logo stayed at 111px while the rule said 165px. Caught by measuring the rendered logo at four widths rather than by reading the rule back. */ .sadaf-header .elementor-widget-image, .sadaf-header .elementskit-nav-logo { width: auto !important; max-width: none !important; flex: 0 0 auto; } /* The logo's COLUMN, not the widget. On a phone the header is a flex row of logo and hamburger, and the kit gives this column a fixed share that came out at 111px, which then bound the image through max-width:100% no matter what the image rule said. Letting the column size to its content is what finally moved the phone logo. */ .sadaf-header .elementor-element-3a100b5 { flex: 0 0 auto !important; width: auto !important; } .sadaf-header .elementor-widget-image img, .sadaf-header .elementskit-nav-logo img { width: 248px !important; height: auto; } /* 5c. Fitting seven items on one line. The kit spaces navigation items 40px apart, which was fine for its own six item menu but pushes seven items plus two buttons off the end of the row. Tightened, and the type stepped down a little, so everything sits on one line down to the point where the menu becomes a hamburger. */ .sadaf-header .elementskit-navbar-nav > li > a { color: #F7F4F1 !important; font-family: "Inter Tight", sans-serif; font-size: 14px !important; font-weight: 400 !important; letter-spacing: .005em !important; padding: 0 0 0 24px !important; white-space: nowrap; } .sadaf-header .elementskit-navbar-nav > li > a:hover, .sadaf-header .elementskit-navbar-nav > li:hover > a { color: var(--sadaf-gold-light) !important; } .sadaf-header .elementskit-submenu-indicator { margin-left: 5px; } /* The Services dropdown panel. */ .sadaf-header .elementskit-submenu-panel { background: var(--sadaf-mocha-2) !important; border-color: rgba(215, 180, 135, .28) !important; } .sadaf-header .elementskit-submenu-panel .dropdown-item { color: #F7F4F1 !important; font-family: "Inter Tight", sans-serif; font-size: 14px; } .sadaf-header .elementskit-submenu-panel .dropdown-item:hover { color: var(--sadaf-gold-light) !important; } /* Call button. Outlined champagne gold, so it reads as secondary to the booking button while still being obvious. On a local service site the phone call is the action most ready-to-book visitors take. */ .sadaf-call { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--sadaf-gold); border-radius: 999px; color: var(--sadaf-gold-light); font-family: "Inter Tight", sans-serif; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .sadaf-call:hover, .sadaf-call:focus-visible { background: var(--sadaf-gold); border-color: var(--sadaf-gold); color: var(--sadaf-mocha); } .sadaf-call i { font-size: 12.5px; } /* Filling the booking button sets a clear order of importance: Book is primary, Call is secondary, everything else is navigation. */ .sadaf-header .elementor-button { background: linear-gradient(135deg, var(--sadaf-gold-light) 0%, var(--sadaf-gold) 100%) !important; color: var(--sadaf-mocha) !important; border: 0; border-radius: 999px; white-space: nowrap; font-size: 13.5px !important; padding: 11px 20px !important; } .sadaf-header .elementor-button:hover, .sadaf-header .elementor-button:focus { background: var(--sadaf-ivory) !important; color: var(--sadaf-mocha) !important; } /* 5d. The slide-out menu. Rebuilt. Three problems with what the kit ships: 1. It slid the panel by animating its `left` position. The browser has to redo the whole page layout on every frame of that, which is what made it feel laggy. It now slides with `transform` instead, which the graphics card handles on its own and the layout never moves. 2. It repeated the logo inside the panel, directly on top of the logo already in the header behind it. Removed. 3. It was a plain list. It now uses the same serif as the headings, with hairline dividers, and the items fade in one after another as the panel arrives. Contact details sit at the foot, because once someone opens the menu on a phone, calling is usually what they are after. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* The panel itself. Pinned left at all times and moved with transform, so nothing in the page has to be recalculated while it animates. */ .sadaf-header .elementskit-menu-container.elementskit-menu-offcanvas-elements { left: 0 !important; width: min(86vw, 380px) !important; max-width: none !important; height: 100% !important; padding: 0 !important; background: var(--sadaf-mocha) !important; border-right: 1px solid rgba(215, 180, 135, .18); box-shadow: 22px 0 60px rgba(30, 21, 15, .45); transform: translateX(-102%); transition: transform .42s cubic-bezier(.32, .72, 0, 1); will-change: transform; overflow-y: auto; overscroll-behavior: contain; } .sadaf-header .elementskit-menu-container.elementskit-menu-offcanvas-elements.active { transform: translateX(0); } /* The dimmed backdrop fades rather than appearing all at once. */ .sadaf-header .elementskit-menu-overlay { background: rgba(35, 25, 18, .55) !important; backdrop-filter: blur(2px); opacity: 0; transition: opacity .42s ease; } .sadaf-header .elementskit-menu-overlay.active { opacity: 1; } /* Order inside the panel. The kit lays the panel out bottom to top, which is why the contact block ended up above the menu rather than below it, and why the close button had a band of empty space under it. Laid out top to bottom instead, with each part given an explicit position: close button, menu, contact. */ .sadaf-header .elementskit-menu-container.elementskit-menu-offcanvas-elements { flex-direction: column !important; justify-content: flex-start !important; } .sadaf-header .elementskit-nav-identity-panel { order: 1; } .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav { order: 2; } .sadaf-header .sadaf-panel-foot { order: 3; margin-top: auto; } /* Close button row. Was 86px tall holding nothing but the button, which is the empty band at the top. Now just tall enough for the button itself. */ .sadaf-header .elementskit-nav-identity-panel { display: flex; justify-content: flex-end; align-items: center; min-height: 0 !important; padding: 10px 14px 4px !important; border: 0 !important; } .sadaf-header button.elementskit-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(215, 180, 135, .34) !important; background: transparent !important; color: var(--sadaf-gold-light) !important; font-size: 15px !important; line-height: 1; transition: background-color .25s ease, color .25s ease; } .sadaf-header button.elementskit-menu-close:hover { background: var(--sadaf-gold) !important; color: var(--sadaf-mocha) !important; } .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav { padding: 2px 0 0 !important; margin: 0 !important; } /* Menu items. The same serif as the headings, which reads as part of the brand rather than as a system menu. */ .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a { display: flex; align-items: center; justify-content: space-between; color: #F7F4F1 !important; font-family: "Cormorant Garamond", serif !important; font-size: 25px !important; font-weight: 400 !important; letter-spacing: .01em !important; padding: 15px 26px !important; border-bottom: 1px solid rgba(215, 180, 135, .12); transition: color .2s ease, padding-left .25s ease; } .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a:hover { color: var(--sadaf-gold-light) !important; padding-left: 32px !important; } /* Submenu items sit quieter and indented under Services. */ .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-submenu-panel { background: rgba(0, 0, 0, .14) !important; border: 0 !important; border-radius: 0 !important; } .sadaf-header .elementskit-menu-offcanvas-elements .dropdown-item { color: #E4D6C7 !important; font-family: "Inter Tight", sans-serif !important; font-size: 15px !important; padding: 11px 26px 11px 44px !important; border-bottom: 1px solid rgba(215, 180, 135, .07); } .sadaf-header .elementskit-menu-offcanvas-elements .dropdown-item:hover { color: var(--sadaf-gold-light) !important; } .sadaf-header .elementskit-submenu-indicator { color: var(--sadaf-gold) !important; font-size: 13px !important; margin: 0 !important; } /* Items arrive one after another rather than all at once. Only while the panel is opening; they are static once it is there. */ .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li, .sadaf-header .sadaf-panel-foot { opacity: 0; transform: translateX(-12px); } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li, .sadaf-header .elementskit-menu-offcanvas-elements.active .sadaf-panel-foot { animation: sadaf-menu-in .42s cubic-bezier(.32, .72, 0, 1) forwards; } @keyframes sadaf-menu-in { to { opacity: 1; transform: translateX(0); } } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(1) { animation-delay: .10s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(2) { animation-delay: .15s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(3) { animation-delay: .20s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(4) { animation-delay: .25s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(5) { animation-delay: .30s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(6) { animation-delay: .35s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .elementskit-navbar-nav > li:nth-child(7) { animation-delay: .40s; } .sadaf-header .elementskit-menu-offcanvas-elements.active .sadaf-panel-foot { animation-delay: .46s; } /* Contact block at the foot of the panel. */ .sadaf-panel-foot { padding: 22px 26px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(215, 180, 135, .16); } .sadaf-panel-call, .sadaf-panel-book { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 999px; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; } .sadaf-panel-call { border: 1px solid var(--sadaf-gold); color: var(--sadaf-gold-light) !important; margin-bottom: 10px; } .sadaf-panel-book { background: linear-gradient(135deg, var(--sadaf-gold-light), var(--sadaf-gold)); color: var(--sadaf-mocha) !important; } .sadaf-panel-social { display: flex; justify-content: center; gap: 14px; margin-top: 22px; } .sadaf-panel-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(215, 180, 135, .3); color: var(--sadaf-gold-light) !important; font-size: 16px; transition: background-color .25s ease, color .25s ease; } .sadaf-panel-social a:hover { background: var(--sadaf-gold); color: var(--sadaf-mocha) !important; } .sadaf-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { background-color: var(--sadaf-gold-light) !important; } } /* The page behind the menu. Scrolling the menu used to scroll the page underneath it as well, so closing the menu left you somewhere else entirely. The class below is put on by the small script that ships with this stylesheet, which also remembers how far down the page you were and puts you back there. The rule is here as well as in the script so the page is held still even in the moment before the script runs. */ body.sadaf-menu-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } body.sadaf-menu-open .sadaf-header .elementskit-menu-offcanvas-elements { touch-action: pan-y; } /* Anchor links land below the sticky header rather than behind it. */ html { scroll-behavior: smooth; scroll-padding-top: 110px; } @media (max-width: 767px) { html { scroll-padding-top: 76px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Reduced motion: the panel appears without sliding, items without staggering. */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .sadaf-header .elementskit-menu-container.elementskit-menu-offcanvas-elements { transition: none; } .sadaf-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li, .sadaf-header .sadaf-panel-foot { opacity: 1; transform: none; animation: none !important; } } /* The panel block is scoped to 1024px and below, but these two need to hold everywhere so the desktop bar is never affected by panel rules. */ .sadaf-panel-foot { display: none; } @media (max-width: 1024px) { .sadaf-panel-foot { display: block; } } /* -------------------------------------------------------------------------- 7. Footer Rebuilt from scratch on 31 July to a reference Saman supplied. This is the only part of the whole site that does not use the design kit's markup, because the kit has nothing that resembles this layout. Everywhere else the rule still holds. Three bands, following the reference. Four columns of links divided by thin vertical rules; the name set very large across the full width; then a quiet bar carrying the tagline, the legal links and the copyright. The footer is light now rather than the dark mocha it used to be, which is what the reference does and what makes it read as clean and modern. Because the sections above it end on the same off white, the top edge is drawn as a rule so the footer still reads as its own thing rather than more page. -------------------------------------------------------------------------- */ .sadaf-footer { /* Saman asked on 31 July for the dark mocha to stay behind this layout. The value is the same #6E5647 that the body text uses elsewhere; here it is the background, and everything on top of it flips to the light end of the palette. The name band and the bottom bar go a step darker again, to the #523D2E primary, which is what gives the footer the same two tone banding as the reference without introducing a colour that is not hers. */ background: #6E5647; color: var(--sadaf-beige); font-family: "Inter Tight", sans-serif; } .sadaf-footer__top { max-width: 1400px; margin: 0 auto; padding: 0 40px; } /* The four columns, with a hairline between each. The rule is drawn as a left border on each column after the first rather than as its own divider element. That way it can never be left hanging under a column that has wrapped away to the next row, which is the usual way this pattern breaks when the screen narrows. */ .sadaf-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); } .sadaf-footer__col { padding: 46px 30px 46px 0; } .sadaf-footer__col + .sadaf-footer__col { padding-left: 34px; border-left: 1px solid rgba(247, 244, 241, 0.18); } /* The column headings. Small, letter spaced and upper case, which is what gives the reference its clean look: the headings read as quiet labels instead of competing with the links underneath them. Named as "h3.sadaf-footer__head" rather than by the class alone. The kit styles bare h1 to h6 with a selector stronger than a single class, so the plain class lost silently and these came out at 34px in the serif, which looked nothing like the reference. Same reason the buttons and the social links below are named with their element type: the kit sets a colour on every link with a selector that beats one class, and it was repainting them gold. This is trap 4 in the handover and it caught this footer twice. */ .sadaf-footer h3.sadaf-footer__head { margin: 0 0 20px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sadaf-gold-light); } .sadaf-footer__list { margin: 0; padding: 0; list-style: none; } .sadaf-footer__list li { margin: 0 0 11px; } .sadaf-footer__list li:last-child { margin-bottom: 0; } .sadaf-footer__list a, .sadaf-footer__detail a { color: var(--sadaf-beige); text-decoration: none; font-size: 14.5px; line-height: 1.5; transition: color 0.2s ease; } /* The hover colour is the champagne highlight rather than the champagne gold. The gold measures 3.49 to 1 against the #6E5647 band, which is under the bar for text this size. The highlight is 7.4 to 1 on the same background. Down in the bottom bar, where the background is the darker #523D2E, the gold itself clears comfortably at 5.21 to 1 and is left alone. */ .sadaf-footer__list a:hover, .sadaf-footer__detail a:hover { color: var(--sadaf-gold-light); } .sadaf-footer__list--plain li { font-size: 14.5px; line-height: 1.5; max-width: 24ch; } /* The contact column. The two small labels above each detail are the one part of the reference that carries real meaning here: they say which number is which before someone taps it. */ .sadaf-footer p.sadaf-footer__label { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sadaf-gold-light); } .sadaf-footer__detail { margin: 0 0 16px; } .sadaf-footer__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .sadaf-footer a.sadaf-footer__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--sadaf-ivory); border-radius: 2px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--sadaf-ivory); background: transparent; transition: background-color 0.25s ease, color 0.25s ease; } .sadaf-footer a.sadaf-footer__btn:hover { background: var(--sadaf-ivory); color: #6E5647; } /* The filled button takes the champagne gold with mocha text, the same pairing used for every other primary button on the site. */ .sadaf-footer a.sadaf-footer__btn--solid { background: var(--sadaf-gold); border-color: var(--sadaf-gold); color: var(--sadaf-mocha); } .sadaf-footer a.sadaf-footer__btn--solid:hover { background: var(--sadaf-gold-light); border-color: var(--sadaf-gold-light); color: var(--sadaf-mocha); } .sadaf-footer__social { display: flex; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .sadaf-footer .sadaf-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(247, 244, 241, 0.18); border-radius: 50%; color: var(--sadaf-beige); font-size: 15px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .sadaf-footer .sadaf-footer__social a:hover { background: var(--sadaf-gold); border-color: var(--sadaf-gold); color: var(--sadaf-mocha); } /* The name, set very large across the full width. This is the part that makes the reference look like it does. It is live text rather than a picture of the words, so it stays sharp on any screen, costs nothing to download, and can be read by a search engine. The size is tied to the width of the window, so the name spans about the same share of the footer on a phone as it does on a wide monitor. Set once at a fixed size it would be either too big or too small nearly everywhere. It is hidden from screen readers because it is decoration; the name is already announced by the page itself. */ .sadaf-footer__wordmark { border-top: 1px solid rgba(247, 244, 241, 0.18); background: var(--sadaf-mocha); padding: 30px 40px 22px; text-align: center; overflow: hidden; } .sadaf-footer__wordmark span { display: block; font-family: "Cormorant Garamond", serif; font-size: clamp(46px, 15.2vw, 226px); line-height: 0.92; letter-spacing: 0.02em; color: var(--sadaf-gold); /* Held well back so the name reads as a watermark behind the footer rather than as something to be read. This is decoration: the element is hidden from screen readers and the name is already given by the page itself, so the usual contrast floor does not apply to it the way it does to the links and the copyright above and below. */ opacity: 0.10; white-space: nowrap; } /* The bar along the bottom: tagline, legal links, copyright. */ .sadaf-footer__bar { border-top: 1px solid rgba(247, 244, 241, 0.18); background: var(--sadaf-mocha); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding: 18px 40px; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; } .sadaf-footer__bar p { margin: 0; } .sadaf-footer__tagline { flex: 1 1 260px; max-width: 42ch; text-transform: none; letter-spacing: 0.01em; font-size: 12.5px; line-height: 1.6; } .sadaf-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 26px; } .sadaf-footer__legal a, .sadaf-footer__copy a { color: var(--sadaf-beige); text-decoration: none; transition: color 0.2s ease; } .sadaf-footer__legal a:hover, .sadaf-footer__copy a:hover { color: var(--sadaf-gold); } .sadaf-footer__copy { text-align: right; } /* The links and the legal row are the smallest tap targets down here, so they are padded out to a thumb's width. The negative margin cancels the padding so none of the text actually moves. */ .sadaf-footer__list a, .sadaf-footer__legal a { display: inline-block; padding: 11px 0; margin: -11px 0; } /* Tablet: four columns become two. The dividing rule has to be redrawn, because the border that separated columns one and two is now separating what have become two rows. */ @media (max-width: 1024px) { .sadaf-footer__top { padding: 0 28px; } .sadaf-footer__cols { grid-template-columns: repeat(2, 1fr); } .sadaf-footer__col { padding: 34px 24px 34px 0; border-left: 0; } .sadaf-footer__col:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(247, 244, 241, 0.18); } .sadaf-footer__col:nth-child(n + 3) { border-top: 1px solid rgba(247, 244, 241, 0.18); } .sadaf-footer__wordmark { padding: 24px 28px 18px; } .sadaf-footer__bar { padding: 16px 28px; } } /* Phone: one column, no vertical rules at all, and the bottom bar stacks and goes left aligned rather than trying to hold three things across 390px. */ @media (max-width: 767px) { .sadaf-footer__top { padding: 0 20px; } /* Stacking all four columns one under another made the footer 1630px tall on a phone, which is most of two screens of nothing but links. The two lists are short enough to sit side by side, which is also how the current site does it. Studio and Contact keep the full width, because the address wraps badly and the buttons need the room. */ .sadaf-footer__cols { grid-template-columns: 1fr 1fr; } .sadaf-footer__col { padding: 24px 0; border-left: 0; } .sadaf-footer__col:nth-child(2) { padding-left: 20px; border-left: 1px solid rgba(247, 244, 241, 0.18); } .sadaf-footer__col:nth-child(n + 3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid rgba(247, 244, 241, 0.18); } .sadaf-footer__list--plain li { max-width: none; } .sadaf-footer__btns { max-width: 320px; } .sadaf-footer__wordmark { padding: 20px 20px 14px; } .sadaf-footer__bar { flex-direction: column; align-items: flex-start; padding: 18px 20px 22px; } /* The tagline is given a flexible starting width up on the wide layout. Once the bar stacks, that measurement stops describing width and starts describing height, and the tagline was reserving 260px of empty space under three lines of text. Reset so it is simply as tall as its words. */ .sadaf-footer__tagline { flex: none; max-width: none; } .sadaf-footer__copy { text-align: left; } } /* -------------------------------------------------------------------------- 8. Responsive layer The kit has three sizes: phone, tablet, and everything above 1024px. That last band runs from a 1025px laptop window to a 27 inch monitor on exactly the same settings. The rules below fill that gap. -------------------------------------------------------------------------- */ /* Laptops and small desktop windows. Seven menu items, a wider logo and two buttons will not fit on one line in this band at full size, so the type steps down, the spacing tightens and the Call button drops to its icon. Measured to leave at least 50px spare at the narrowest point in the band. */ @media (min-width: 1025px) and (max-width: 1279px) { .e-con { --container-max-width: 100%; } .e-con.e-parent { padding-left: 28px; padding-right: 28px; } .sadaf-header .elementor-widget-image img { width: 190px !important; } .sadaf-header .elementskit-navbar-nav > li > a { font-size: 13px !important; padding-left: 15px !important; } .sadaf-call { padding: 9px 13px; } .sadaf-call span { display: none; } .sadaf-call i { font-size: 14px; } .sadaf-header .elementor-button { font-size: 13px !important; padding: 10px 16px !important; } } /* The narrowest part of the laptop band. Seven items still wrap here at the sizes above, so they tighten once more. Below 1025px the menu becomes a hamburger and none of this applies. */ @media (min-width: 1025px) and (max-width: 1129px) { .sadaf-header .elementskit-navbar-nav > li > a { font-size: 12.5px !important; padding-left: 11px !important; } .sadaf-header .elementor-button { font-size: 12.5px !important; padding: 10px 13px !important; } .sadaf-header .elementor-widget-image img { width: 175px !important; } } /* Tablets. The kit drops all four footer columns into a single stack here, which made the footer nearly a full screen taller than it needed to be. Two across instead, with the contact details in their own two by two. */ @media (max-width: 1024px) { .sadaf-header .elementor-widget-image img { width: 190px !important; } /* The old footer's responsive rules lived here. They named the kit elements that the rebuilt footer no longer has, so they matched nothing and were removed. The new footer carries its own breakpoints in section 7. */ } /* Phones. */ @media (max-width: 767px) { .sadaf-header .elementor-widget-image img { width: 142px !important; } /* Book moves to the bottom bar on phones, so it comes out of the header to leave room for the logo and the menu. */ .sadaf-header .sadaf-header__book { display: none; } .sadaf-call { padding: 8px 14px; font-size: 13px; } /* 16px is the smallest size iOS Safari will not zoom in on when a field is focused. Anything smaller makes the page lurch sideways mid form. */ input, select, textarea { font-size: 16px; } } /* Studio and Contact are stacked full width on phones rather than paired. Pairing them saved about 30px of height, but at phone width each column is only ~165px and the address needs 245px, so it broke over two lines. One readable line is worth more than 30px, so they stay stacked. */ /* Small phones, 320px to 360px. */ @media (max-width: 360px) { .sadaf-header .elementor-widget-image img { width: 124px !important; } .sadaf-call span { display: none; } /* icon only, keeps the row on one line */ .sadaf-call { padding: 8px 12px; } } /* -------------------------------------------------------------------------- 9. Accessibility floor -------------------------------------------------------------------------- */ /* The kit removes focus outlines, which leaves anyone navigating by keyboard with no idea where they are on the page. Put back, in gold. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sadaf-gold); outline-offset: 3px; border-radius: 2px; } /* Respect the operating system setting for reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== HERO Real, not placeholder. This becomes the top of the homepage. The client decided against a video, so the banner carries her three photos instead. They are arranged as a trio: a taller lead image in the middle with the other two dropped slightly below it, each in a fine champagne hairline. The trio straddles the line between the mocha band above and the pale section below, which is what makes it read as a designed banner rather than three pictures in a row. The straddle is done with a two tone background on the band itself, so neither section has to know anything about the other. Nothing breaks if we change what comes next. The photos are portrait, so they are cropped to a single 4 by 5 shape and served at three sizes. A phone downloads roughly 70KB of images rather than the 1.3MB of originals. ========================================================================== */ .sadaf-hero { background: linear-gradient(165deg, #3E2D22 0%, #523D2E 58%, #5A4333 100%); color: var(--sadaf-ivory); padding: clamp(56px, 7vw, 92px) 20px clamp(40px, 5vw, 64px); } .sadaf-hero__inner { max-width: 860px; margin: 0 auto; text-align: center; } .sadaf-eyebrow { margin: 0 0 16px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sadaf-gold); } .sadaf-hero__title { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(33px, 5vw, 68px); line-height: 1.09; color: var(--sadaf-ivory); } .sadaf-hero__lede { margin: 0 auto 30px; max-width: 600px; font-family: "Inter Tight", sans-serif; font-size: 16.5px; line-height: 1.7; color: #EADFD4; } .sadaf-hero__btns { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; } /* Both hero buttons are laid out as centring boxes with a fixed height, so the label sits in the middle of the pill rather than riding high in it, and the two match each other exactly. */ .sadaf-hero__btns > a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; font-family: "Inter Tight", sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; } .sadaf-btn-gold { background: linear-gradient(135deg, var(--sadaf-gold-light) 0%, var(--sadaf-gold) 100%); color: var(--sadaf-mocha) !important; border: 0; transition: filter .25s ease; } .sadaf-btn-gold:hover { filter: brightness(1.06); } /* The band the trio sits in. Mocha down to the point the images cross, pale below it, so the photos straddle the join. */ .sadaf-hero__band { padding: 0 20px; background: linear-gradient(to bottom, #5A4333 0%, #5A4333 58%, var(--sadaf-ivory) 58%, var(--sadaf-ivory) 100%); } .sadaf-hero__gallery { display: grid; grid-template-columns: 1fr 1.16fr 1fr; align-items: start; gap: clamp(10px, 1.6vw, 20px); max-width: 1000px; margin: 0 auto; } .sadaf-shot { margin: 0; overflow: hidden; border-radius: 3px; border: 1px solid rgba(215, 180, 135, .34); box-shadow: 0 18px 44px rgba(38, 27, 19, .3); aspect-ratio: 4 / 5; background: #4A372A; } .sadaf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform .8s cubic-bezier(.2, .6, .2, 1); } .sadaf-shot:hover img { transform: scale(1.045); } /* The two outer photos sit lower than the lead, which is what stops the row reading as a flat strip. */ .sadaf-shot--side { margin-top: clamp(26px, 4.4vw, 62px); } @media (max-width: 767px) { /* Three across on a phone leaves each photo about 110px wide, too small for a face. The lead runs full width instead, with the other two beneath it. */ .sadaf-hero__gallery { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; } .sadaf-shot--lead { grid-column: 1 / -1; grid-row: 1; } .sadaf-shot--side { margin-top: 0; } .sadaf-hero__band { background: linear-gradient(to bottom, #5A4333 0%, #5A4333 30%, var(--sadaf-ivory) 30%, var(--sadaf-ivory) 100%); } } /* ========================================================================== THE KIT'S STOCK PHOTOGRAPHY The kit sets its own photographs as CSS backgrounds rather than as images in the page, so swapping the markup alone leaves stock models behind on the service cards, the portfolio panels and two of the section backdrops. Each one is repointed at Sadaf's own work below. If a photo ever needs changing, it is one line here rather than a hunt through the kit's stylesheets. ========================================================================== */ /* Sadaf replaced three of these on 6 August. Her own files are named for the slot they fill rather than kept as bg-N, so the next person can tell from the filename which picture is hers and which is still the kit's. The bg-N files they replaced are still in assets/images and nothing else uses them, so putting one back is one line here. */ .elementor-17 .elementor-element.elementor-element-de5eb46 { background-image: url("../images/card-bridal.webp") !important; } /* Bridal card, replaced 6 Aug (was bg-1) */ .elementor-17 .elementor-element.elementor-element-9015b0c { background-image: url("../images/bg-2.webp") !important; } /* Formal card */ .elementor-17 .elementor-element.elementor-element-02b0567 { background-image: url("../images/bg-3.webp") !important; } /* Special event card*/ .elementor-17 .elementor-element.elementor-element-37b768d { background-image: url("../images/bg-4.webp") !important; } /* Portfolio 1 */ .elementor-17 .elementor-element.elementor-element-26c45f8 { background-image: url("../images/bg-5.webp") !important; } /* Portfolio 2 */ .elementor-17 .elementor-element.elementor-element-12982d6 { background-image: url("../images/bg-6.webp") !important; } /* Portfolio 3 */ .elementor-17 .elementor-element.elementor-element-9955099 { background-image: url("../images/bg-7.webp") !important; } /* Portfolio 4 */ .elementor-17 .elementor-element.elementor-element-01c0710 { background-image: url("../images/bg-8.webp") !important; } /* Portfolio panel */ .elementor-17 .elementor-element.elementor-element-2c8c760 { background-image: url("../images/home-meet-sadaf.webp") !important; } /* Meet Sadaf panel, replaced 6 Aug (was bg-5) */ /* The panel beside the questions at the foot of the homepage. THE PHOTOGRAPH SHE SENT FOR THIS SLOT IS THE SAME FILE AS THE ONE FOR THE MEET SADAF PANEL ABOVE, byte for byte. Built as she marked it, but it puts the same picture twice on one page. It is written as its own file so that replacing it is one file and no change here. Flagged to Saman 6 August. */ .elementor-17 .elementor-element.elementor-element-0d84b8c { background-image: url("../images/home-faq-panel.webp") !important; } /* FAQ panel, replaced 6 Aug (was bg-7) */ .elementor-17 .elementor-element.elementor-element-9cbad85 { background-image: url("../images/bg-4.webp") !important; } /* Process backdrop */ .elementor-17 .elementor-element.elementor-element-cd78e8c { background-image: url("../images/bg-1.webp") !important; } /* Closing backdrop */ /* The enquiry page's four step section, added 2 August. It arrived carrying one of the kit's stock photographs, a stranger in a field, which is trap 2: the kit sets its photographs as CSS backgrounds, so replacing the markup leaves the picture behind. services-cta.webp is used rather than bg-4 itself, even though the homepage process section uses bg-4 for the same kind of block. The reason is trap 13: the kit fades its dark overlay to nothing exactly where the heading sits, so light text over the undarkened photo measured 4.08 to 1 against a 4.5 requirement. services-cta.webp is bg-4 darkened at source, which was made for this same problem and is otherwise unused now that the closing panels have gone. */ /* The two enquiry page repoints were removed on 2 August with the kit's appointment markup. That page no longer claims 542 at all, so these rules could never have matched anything. */ /* ========================================================================== ABOUT PAGE, ROUND TWO Four changes asked for after the first review, plus the responsive tidying that came out of checking them. ========================================================================== */ /* 1. The banner was too tall on a laptop. The kit sets it 500px tall on desktop and steps down to 350 on a tablet and 320 on a phone. On a phone that reads well, which is why it looked right there, but on a laptop half a screen of photograph before the page even starts is a lot. Brought down to 340px, which lines up with the tablet size just below it so the three steps now sit close together. Held behind a min-width so the phone keeps the kit's own 320px, which the client said already looked right. Our stylesheet loads after the kit's, so without that guard this rule would have overridden the phone size too and made the banner taller on a phone rather than shorter, which is the opposite of what was asked for. */ /* Superseded. The banner is now the plain page header at the foot of this file, which sets one height for all six pages. */ /* 2. The two text cards in the introduction were too tall on a phone. The kit gives all three cards in that row a fixed height, 500px on a laptop and 400px on a phone, and pushes their contents to the bottom. Side by side on a laptop that is deliberate: the two text cards match the height of the photograph between them. Stacked on a phone there is nothing left to match, so each card became 400px of mostly empty space with the icon and words pressed against the floor. On a phone they now size to their own content. The photograph keeps a set height, because an image with no height would collapse to nothing. */ @media (max-width: 767px) { .elementor-444 .elementor-element.elementor-element-26aece3, .elementor-444 .elementor-element.elementor-element-94dff67 { --min-height: 0; --justify-content: flex-start; --padding-top: 26px; --padding-bottom: 26px; } .elementor-444 .elementor-element.elementor-element-c00618f { --min-height: 300px; } } /* The same row on a tablet, where the three cards stay side by side but the columns narrow to about 212px. The kit still asks for 400px of height there, which leaves a tall thin panel with a lot of nothing in it. Brought to 360px so the three still match each other without the dead space. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-444 .elementor-element.elementor-element-26aece3, .elementor-444 .elementor-element.elementor-element-c00618f, .elementor-444 .elementor-element.elementor-element-94dff67 { --min-height: 360px; } } /* 3 and 4. The kit's signature block. It sat a small portrait and a name over a handwritten signature reading "Mellisa Lauren", the kit's fictional founder. The client asked for the signature to go. The portrait went with it, because Sadaf's own photograph now fills the large slot directly above and the same picture twice in one section reads as a mistake. What is left is her name and role as a plain line under the photograph. The signature is a background on the container rather than an image in the page, so it has to be switched off here. */ .elementor-444 .elementor-element.elementor-element-c819627::before { background-image: none !important; } .elementor-444 .elementor-element.elementor-element-c819627 { --width: 100%; --min-height: 0; } .elementor-444 .elementor-element-813689a .elementor-image-box-wrapper { display: block; } .elementor-444 .elementor-element-813689a .elementor-image-box-content { padding-top: 6px; } /* Centring her name under the story. With the kit's portrait and signature removed, the block that holds her name stretches the full width of the section, but the words inside it were still set to sit against the left edge. That left "Sadaf" hard against the left margin while the paragraphs above it were centred, which is what the client marked up. Setting the text to centre puts her name on exactly the same centre line as the story above it. The name and the role line are named separately as well as the wrapper, because the kit styles bare headings with a selector that beats a single class, so a rule on the wrapper alone would not reach the h3. */ .elementor-444 .elementor-element-813689a .elementor-image-box-wrapper, .elementor-444 .elementor-element-813689a .elementor-image-box-content, .elementor-444 .elementor-element-813689a .elementor-image-box-title, .elementor-444 .elementor-element-813689a .elementor-image-box-description { text-align: center; } /* The breadcrumb under the About page heading. The kit sets it at a size that gives the Home link a 23px tap target on a phone. Anything under about 44px is hard to hit accurately with a thumb, so the link is padded out to that height without moving the text, which keeps the row looking exactly as the kit drew it. */ .elementor-444 .elementor-element-5ee62af .elementor-icon-list-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } /* The About page's own photographs. The kit keeps these in elementor-post-444.css, which only that page loads, so none of them appear on the homepage. Each is repointed at Sadaf's own work below. The page banner used to be listed here too, in a wide crop and a squarer phone crop. Both are gone: the photographic banner has been replaced site wide by a plain page header, so About no longer needs a banner picture of its own. See "PAGE HEADERS" at the foot of this file. The closing panel still stretches the full width of the window, so it keeps its second, squarer file for phones. On a phone that band is only about one and a quarter times as wide as it is tall, and a landscape crop stretched across it would show almost nothing of the picture. */ .elementor-444 .elementor-element.elementor-element-c00618f { background-image: url("../images/about-panel.webp") !important; /* Intro panel */ } .elementor-444 .elementor-element.elementor-element-de9d0a2 { background-image: url("../images/about-cta-wide.webp") !important; /* Closing band */ } @media (max-width: 767px) { .elementor-444 .elementor-element.elementor-element-de9d0a2 { background-image: url("../images/about-cta-tall.webp") !important; } } /* The kit pins the closing band with background-attachment: fixed. iOS Safari has never supported that properly: it sizes the image to the whole document rather than the section, so the photograph comes out enormously magnified and jitters as you scroll. Released to scroll on touch screens, where the parallax was not doing anything worth having anyway. */ @media (max-width: 1024px), (hover: none) { .elementor-444 .elementor-element.elementor-element-de9d0a2 { background-attachment: scroll !important; } } .elementor-17 .elementor-element.elementor-element-9a33d4b { /* Replaced 31 July with the photograph Saman supplied for the hero, and again on 11 August with the one he supplied that day. THE POSITION MOVED FROM 30% TO 60%, AND THE REASON IS THE NEW RATIO. The old photograph was 1.779 wide to tall. The new one is 1.500, so with background-size: cover there is far more surplus height to distribute and the same 30% left the top half of the frame as empty sky with the bride sitting low, half behind the heading. Measured rather than eyeballed. The surplus is 51px at 1280 and 478px at 1920, so the number has to work at both: 1280 30% cuts 15px off the top 60% cuts 31px 1920 30% cuts 143px off the top 60% cuts 287px At 1280 the choice barely matters. At 1920 it is the difference between a frame of sky and a frame with the bride and the water in it. 60% is right at both. */ background-image: url("../images/hero-banner-wide-1800.webp") !important; background-position: 50% 60% !important; } /* On a phone the hero is taller than it is wide, so a landscape crop would show almost nothing of the face. A portrait crop is used instead. */ @media (max-width: 767px) { /* STILL 30%, DELIBERATELY. The portrait crop replaced on 11 August is the same 0.750 ratio as the one before it, so the surplus has not changed and the number that was right for the old file is still right for this one. Checked at 390 rather than assumed: the bride's face sits clear above the heading, which is the whole reason a separate portrait crop exists. */ .elementor-17 .elementor-element.elementor-element-9a33d4b { background-image: url("../images/hero-banner-tall-1080.webp") !important; background-position: 50% 30% !important; } } /* The big step numbers in the process section. The kit draws them very faint, which measured 2.2 to 1 against their backdrop. They are decorative, but at 62px a reader will try to read them, so they are lifted to the champagne gold, which sits comfortably above the threshold. */ .elementor-17 .elementor-element-5a3f985 .elementor-heading-title, .elementor-17 .elementor-element-339c570 .elementor-heading-title, .elementor-17 .elementor-element-f2152d6 .elementor-heading-title, .elementor-17 .elementor-element-db36c84 .elementor-heading-title { color: var(--sadaf-gold) !important; opacity: 1 !important; } /* Those numbers sit over a photograph, and a photograph is bright in places. Rather than chase the text colour, the section's own overlay is deepened so everything on top of it is readable whatever the picture is doing. Same approach as the hero. */ .elementor-17 .elementor-element.elementor-element-9cbad85::before, .elementor-17 .elementor-element.elementor-element-cd78e8c::before { background: linear-gradient(180deg, rgba(62,45,34,.88) 0%, rgba(82,61,46,.82) 50%, rgba(62,45,34,.90) 100%) !important; opacity: 1 !important; } /* Side gutters on every section. This is the one that made the whole page look wrong at normal zoom. The kit caps its content at 1400px wide and gives it no left or right padding at all. Above 1400px that cap centres the content and the leftover space either side looks like a margin. Below 1400px there is no leftover space, so the content runs flat against both edges of the browser. Almost every laptop reports somewhere between 1280 and 1440 css pixels, so almost every laptop got the broken version. Zooming out to 90 per cent made the window report about 1518 pixels, which cleared the cap, which is why that looked right and 100 per cent did not. Every boxed section now keeps a gutter at any width. The two full width sections, the hero and the counters, already had 20px; they are brought into line so the whole page shares one margin. Scoped to main rather than to the homepage. This rule used to begin .elementor-17, which is the kit's id for the homepage. The About page is .elementor-444, so it inherited none of this and came out flat against both edges at 1280 and 1366, which are the two commonest laptop widths. Every page still to be built would have done the same. Keying it to main instead means it covers every page we build from here, and the extra element in the selector keeps it stronger than the kit's own rules rather than weaker. */ main .elementor .e-con-boxed > .e-con-inner { padding-left: clamp(20px, 3.4vw, 48px); padding-right: clamp(20px, 3.4vw, 48px); } main .elementor > .e-con-full.e-parent { padding-left: clamp(20px, 3.4vw, 48px) !important; padding-right: clamp(20px, 3.4vw, 48px) !important; } /* The hero's height. The kit makes its hero exactly one screen tall. That works when the header floats over the top of it, which is how the kit was built. Ours is solid and sits above it, so a full screen of hero plus a header is taller than the screen, and the bottom of the hero, which is where the buttons are, fell below the fold. The hero is now one screen minus the header. svh rather than vh, because on a phone vh measures the screen with the browser's own bars hidden, which makes the same mistake again by about 60 pixels. The header heights below match section 5: 98px desktop, 61px on a phone. */ .elementor-17 .elementor-element.elementor-element-9a33d4b { min-height: calc(100svh - 98px) !important; } @media (max-width: 767px) { .elementor-17 .elementor-element.elementor-element-9a33d4b { min-height: calc(100svh - 61px) !important; } } /* Older browsers that do not know svh fall back to vh, which is close enough. */ @supports not (height: 100svh) { .elementor-17 .elementor-element.elementor-element-9a33d4b { min-height: calc(100vh - 98px) !important; } } /* The empty row under the service cards. The kit lays that grid out as three columns by two rows because it ships six services. Sadaf has three, so the second row was still reserving its full 500px and showing as a band of empty background. The rows now size to whatever is actually in them. */ .elementor-17 .elementor-element.elementor-element-7b41732 { --e-con-grid-template-rows: auto !important; grid-template-rows: auto !important; } /* The About section's two feature boxes. The kit pins each to 500px with its content at the bottom, so that on a wide screen they line up with the photograph beside them. Once the columns stack on a tablet or a phone there is no photograph to line up with, and all that height became empty space above each icon. Below 1025px they size to their content. */ @media (max-width: 1024px) { .elementor-17 .elementor-element.elementor-element-7ed2d62, .elementor-17 .elementor-element.elementor-element-1704222 { min-height: 0 !important; --min-height: 0 !important; } } /* Review cards. Matched to the kit's own layout, which the reference screenshot shows: a date and a rating across the top, a rule, the review, then a round avatar with the name and role sitting on the base line of the card. Two things had to change to get there. First, the cards were not filling their row. The kit's grid makes every row as tall as its tallest card, but leaves each card sitting at the top of its own row at whatever height its text happens to be. So three cards in a row were 415, 367 and 319 pixels tall with ragged bottoms. They now stretch to fill the row, and because the card already spaces its contents apart, the name and avatar drop to the bottom. Every card in a row now ends on the same line, exactly as the reference does. Second, on a phone there is only one card per row, so making every row as tall as the tallest left a different sized gap under each card. On a phone the rows now size to their own card, which makes every gap identical. -------------------------------------------------------------------------- */ .elementor-17 .elementor-element-b1a389f { align-items: stretch !important; } .elementor-17 .elementor-element-b1a389f > .e-con { align-self: stretch !important; min-height: 0 !important; height: auto !important; } @media (max-width: 767px) { .elementor-17 .elementor-element-b1a389f { --e-con-grid-template-rows: auto !important; grid-template-rows: auto !important; grid-auto-rows: auto !important; } } /* Review card avatars. The kit fills these with stock photographs of models. Presenting those as Sadaf's clients would be misleading, so each is the client's initial set in the brand gold instead. Same circle, same size, same position, so the card reads exactly as the kit designed it. */ .sadaf-initial { display: flex !important; padding: 0 !important; margin: 0 !important; overflow: hidden; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--sadaf-gold-light), var(--sadaf-gold)); color: var(--sadaf-mocha); font-family: "Cormorant Garamond", serif; font-size: 23px; font-weight: 500; line-height: 1; flex: 0 0 auto; } .sadaf-initial span { /* The kit letterspaces the name beside this, and the initial was inheriting it. Letter spacing adds a gap after the last character as well as between them, which pushed the single letter about 7px left of centre. */ letter-spacing: 0 !important; text-indent: 0; transform: translateY(1px); } /* The counters under the hero. The kit spreads each number and its label to opposite ends of a full width row. That works across a wide screen. On a phone it left a number stranded on the left and its label on the right with a hand's width of nothing in between, and four of them stacked made a very tall column. On a phone they now sit two across, with each label directly under its number. The section is a grid in the kit's own markup, so the columns are set on the section itself. */ @media (max-width: 767px) { .elementor-17 .elementor-element.elementor-element-a5ca297 { --e-con-grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important; gap: 22px 18px !important; } .elementor-17 .elementor-element-a5ca297 .elementor-counter { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } .elementor-17 .elementor-element-a5ca297 .elementor-counter-title { order: 2 !important; width: auto !important; text-align: left !important; font-size: 13.5px !important; line-height: 1.35 !important; letter-spacing: .03em; justify-content: flex-start !important; } .elementor-17 .elementor-element-a5ca297 .elementor-counter-number-wrapper { order: 1 !important; width: auto !important; justify-content: flex-start !important; } } /* Very narrow phones get one per row, because two 4.9/5 style figures side by side at 320px wide starts to wrap awkwardly. */ @media (max-width: 420px) { .elementor-17 .elementor-element.elementor-element-a5ca297 { --e-con-grid-template-columns: 1fr !important; grid-template-columns: 1fr !important; gap: 16px !important; } } /* Tap targets. Several links measured 14 to 29 pixels tall on a phone, which is well under what a thumb can hit reliably. The text stays the same size; the clickable area around it grows. */ @media (max-width: 767px) { .elementor-17 .elementor-widget-button .elementor-button, .elementor-17 .elementor-icon-box-title a, .elementor-17 .elementor-icon-list-item > a { display: inline-flex; align-items: center; min-height: 44px; } .elementor-17 .elementor-widget-button .elementor-button { padding-block: 10px; } } /* ========================================================================== HOMEPAGE SECTIONS Hand built rather than assembled from the kit's widgets. The kit's page styles are keyed to its own demo layouts, so reusing them would have meant inheriting a lot of rules written for different content. These are shorter, readable, and every page from here reuses the same handful of classes. The pattern throughout: .sadaf-sec a section, pale or dark .sadaf-wrap the 1140px centred column inside it .sadaf-sechead eyebrow, heading and optional sub ========================================================================== */ .sadaf-sec { padding: clamp(52px, 6.5vw, 96px) 20px; } .sadaf-sec--tight { padding-top: clamp(36px, 4.5vw, 66px); } .sadaf-sec--pale { background: var(--sadaf-ivory); color: var(--sadaf-body); } .sadaf-sec--dark { background: linear-gradient(165deg, #4A372A 0%, #523D2E 60%, #5A4333 100%); color: #EADFD4; } .sadaf-wrap { max-width: 1140px; margin: 0 auto; } .sadaf-wrap--narrow { max-width: 780px; } .sadaf-sechead { max-width: 720px; margin: 0 0 clamp(30px, 3.6vw, 48px); } .sadaf-sechead__sub { margin: 14px 0 0; font-size: 16px; line-height: 1.7; } .sadaf-eyebrow--dark { color: var(--sadaf-gold-deep); } .sadaf-h2 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.16; color: var(--sadaf-mocha); } .sadaf-h2--light { color: var(--sadaf-ivory); } .sadaf-sec p { font-family: "Inter Tight", sans-serif; font-size: 16px; line-height: 1.75; } /* A text link with a rule under it that grows on hover. Used instead of buttons where the action is secondary. */ .sadaf-link { display: inline-block; margin-top: 4px; padding-bottom: 3px; font-family: "Inter Tight", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; color: var(--sadaf-gold-deep); text-decoration: none; border-bottom: 1px solid rgba(143, 102, 67, .4); transition: border-color .25s ease, color .25s ease; } .sadaf-link:hover { color: var(--sadaf-mocha); border-bottom-color: var(--sadaf-mocha); } .sadaf-link--light { color: var(--sadaf-gold-light); border-bottom-color: rgba(244, 228, 201, .4); } .sadaf-link--light:hover { color: #fff; border-bottom-color: #fff; } .sadaf-sec__cta { margin-top: clamp(30px, 3.4vw, 44px); } /* ---------- About ---------- */ .sadaf-about { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 62px); align-items: center; } .sadaf-about__text .sadaf-h2 { margin-bottom: 18px; } .sadaf-about__text p { margin: 0 0 16px; } .sadaf-about__img { margin: 0; border: 1px solid rgba(215, 180, 135, .45); border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 5; } .sadaf-about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; } .sadaf-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin: 26px 0 24px; padding: 22px 0; border-top: 1px solid rgba(143, 102, 67, .22); border-bottom: 1px solid rgba(143, 102, 67, .22); } .sadaf-stat { display: flex; flex-direction: column; gap: 3px; } .sadaf-stat__n { font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.1; color: var(--sadaf-mocha); } .sadaf-stat__l { font-family: "Inter Tight", sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--sadaf-gold-deep); } /* ---------- Service cards ---------- */ .sadaf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: clamp(16px, 2vw, 26px); } .sadaf-card { padding: clamp(26px, 2.6vw, 36px); border: 1px solid rgba(215, 180, 135, .26); border-radius: 4px; background: rgba(247, 244, 241, .035); transition: border-color .3s ease, background-color .3s ease, transform .3s ease; } .sadaf-card:hover { border-color: rgba(215, 180, 135, .6); background: rgba(247, 244, 241, .07); transform: translateY(-3px); } .sadaf-card__num { display: block; margin-bottom: 14px; font-family: "Cormorant Garamond", serif; font-size: 30px; font-weight: 300; color: var(--sadaf-gold); } /* The kit sets every bare h3 with a selector stronger than a single class, so these need the section class in front of them to win. Same reason the hero heading was the wrong colour earlier. */ .sadaf-cards .sadaf-card__t { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--sadaf-ivory); } .sadaf-card p { margin: 0 0 16px; color: #E0D2C5; font-size: 15.5px; } /* ---------- Feature grid ---------- */ .sadaf-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 40px); } .sadaf-feat i { display: block; margin-bottom: 12px; font-size: 21px; color: var(--sadaf-gold-deep); } .sadaf-feats .sadaf-feat h3 { margin: 0 0 8px; font-family: "Inter Tight", sans-serif; font-size: 17.5px; font-weight: 600; line-height: 1.4; color: var(--sadaf-mocha); } .sadaf-feat p { margin: 0; font-size: 15.5px; } /* ---------- Gallery ---------- */ .sadaf-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 14px); } .sadaf-gal__i { display: block; overflow: hidden; border-radius: 3px; aspect-ratio: 1 / 1; background: #EAE4DE; border: 1px solid rgba(215, 180, 135, .3); } .sadaf-gal__i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .6, .2, 1); } .sadaf-gal__i:hover img { transform: scale(1.06); } /* ---------- Service areas ---------- */ .sadaf-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 2.2vw, 30px); } .sadaf-area { padding: clamp(24px, 2.4vw, 32px); text-align: center; border: 1px solid rgba(215, 180, 135, .24); border-radius: 4px; } .sadaf-area i { font-size: 19px; color: var(--sadaf-gold); } .sadaf-areas .sadaf-area h3 { margin: 12px 0 5px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 25px; line-height: 1.25; color: var(--sadaf-ivory); } .sadaf-area p { margin: 0; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--sadaf-gold); } /* ---------- Reviews ---------- */ .sadaf-revs { columns: 3; column-gap: clamp(16px, 2vw, 26px); } .sadaf-rev { break-inside: avoid; margin: 0 0 clamp(16px, 2vw, 26px); padding: clamp(22px, 2.4vw, 30px); background: #fff; border: 1px solid rgba(143, 102, 67, .16); border-radius: 4px; } .sadaf-rev blockquote { margin: 0; } .sadaf-rev p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--sadaf-body); } .sadaf-rev p::before { content: "\201C"; color: var(--sadaf-gold); font-size: 26px; line-height: 0; vertical-align: -6px; margin-right: 3px; } .sadaf-rev figcaption { margin-top: 14px; font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sadaf-gold-deep); } /* ---------- FAQ ---------- Built on
, which the browser opens and closes on its own. No script, it works before JavaScript loads, and it is readable to screen readers and to search engines without any extra markup. */ .sadaf-faq__i { border-bottom: 1px solid rgba(143, 102, 67, .2); } .sadaf-faq__i summary { position: relative; display: block; padding: 19px 44px 19px 0; cursor: pointer; list-style: none; font-family: "Inter Tight", sans-serif; font-size: 16.5px; font-weight: 600; color: var(--sadaf-mocha); transition: color .2s ease; } .sadaf-faq__i summary::-webkit-details-marker { display: none; } .sadaf-faq__i summary:hover { color: var(--sadaf-gold-deep); } .sadaf-faq__i summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border-right: 1.5px solid var(--sadaf-gold-deep); border-bottom: 1.5px solid var(--sadaf-gold-deep); transform: rotate(45deg); transition: transform .3s ease; } .sadaf-faq__i[open] summary::after { transform: rotate(-135deg); margin-top: -3px; } .sadaf-faq__a { padding: 0 20px 20px 0; } .sadaf-faq__a p { margin: 0; font-size: 15.5px; } .sadaf-faq__a a { color: var(--sadaf-gold-deep); } /* ---------- Closing call to action ---------- */ .sadaf-cta { padding: clamp(56px, 6.5vw, 92px) 20px; text-align: center; background: linear-gradient(165deg, #3E2D22 0%, #523D2E 60%, #5A4333 100%); color: #EADFD4; } .sadaf-cta .sadaf-h2 { margin-bottom: 14px; } .sadaf-cta__sub { margin: 0 auto 28px; max-width: 540px; } .sadaf-cta .sadaf-hero__btns { justify-content: center; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .sadaf-revs { columns: 2; } } @media (max-width: 767px) { .sadaf-about { grid-template-columns: 1fr; } .sadaf-about__img { order: -1; max-width: 420px; } .sadaf-gal { grid-template-columns: repeat(2, 1fr); } .sadaf-revs { columns: 1; } .sadaf-stats { gap: 18px 30px; } .sadaf-hero__btns > a { width: 100%; } .sadaf-sec__cta .sadaf-btn-gold { width: 100%; } } /* ========================================================================== SERVICES AND PRICING Built 31 July 2026. Everything this page needs that the kit does not give it, kept together so it can be read as one piece. ========================================================================== */ /* 1. The kit's stock photography on this page. Same reason as the homepage and About: the kit sets its photographs as CSS backgrounds rather than as images in the page, so replacing the markup on its own leaves stock models behind. Seven of them appear on this page, drawn from three different kit stylesheets. The three service cards deliberately use the same three photographs as the matching cards on the homepage, so the same service shows the same picture wherever it appears. */ /* The page banner photograph was removed here: the photographic banner has been replaced site wide by a plain page header. See "PAGE HEADERS" below. */ /* Changed with the homepage bridal card on 6 August, for the reason given immediately above: these two are deliberately the same photograph. Sadaf marked the homepage one only, so if she wants Services left as it was, this line goes back to bg-1.webp on its own. Flagged to Saman 6 August. */ .elementor-708 .elementor-element.elementor-element-24f2a1a { background-image: url("../images/card-bridal.webp") !important; } /* Bridal card */ .elementor-708 .elementor-element.elementor-element-289065d { background-image: url("../images/bg-2.webp") !important; } /* Formal card */ .elementor-708 .elementor-element.elementor-element-dcef076 { background-image: url("../images/bg-3.webp") !important; } /* Special event card */ /* THE TWO SERVICES SIDE PANELS, 11 August. THESE TWO SECTIONS SHARE AN ELEMENTOR ID. The kit repeats the same block for Bridal and for Special Event, so both the container and the picture panel inside it are called 4f6fcb7 and 8dd9a5f on both. Until today one rule on .elementor-element-8dd9a5f painted both, which is why the client's two screenshots showed the same photograph twice. The only thing that tells them apart is the HTML id on the parent, #bridal and #special-event, which build_services_body.py writes so the menu anchors work. Scoping through that id is therefore the only way to give them different pictures without touching the kit's markup. A NOTE FOR WHOEVER EDITS THIS NEXT: an unscoped .elementor-709 .elementor-element-8dd9a5f rule added below these two would have equal specificity and later source order, so it would silently take over BOTH panels again. If a third section is ever added, scope it the same way rather than adding a general rule. */ #bridal .elementor-element.elementor-element-8dd9a5f { /* Portrait source, 900x1200. The panel is a landscape box, so cover crops top and bottom; the position is set below after measuring in the browser rather than being guessed at. */ background-image: url("../images/services-bridal-panel.webp") !important; } #special-event .elementor-element.elementor-element-8dd9a5f { background-image: url("../images/services-special-event-panel.webp") !important; } .elementor-732 .elementor-element.elementor-element-bd83d32 { background-image: url("../images/bg-8.webp") !important; } /* Studio side panel */ .elementor-732 .elementor-element.elementor-element-3cd1719 { background-image: url("../images/services-cta.webp") !important; } /* Closing backdrop */ /* 2. Anchor links landing underneath the sticky header. Four links in the menu, three "Learn More" buttons and every link to this page from the homepage and the footer point at a place partway down it. The header stays fixed to the top of the window, so a browser told to jump to a section would normally scroll it to the very top and the header would then cover it. The handover expected this to need fixing here. It does not. The homepage work already set scroll-padding-top on the page itself, 110px on a laptop and 76px on a phone, and that applies to every jump on every page rather than to particular sections. Adding a second offset on these five sections was measured doing exactly what you would expect: the two added together and each section stopped 228px down instead of 110px, leaving an odd gap under the header. The extra rule was removed and the existing one left to do the job. The one thing still needed is the marker that lets one section answer to two addresses. The live site sends people to "#formal" and the menu sends them to "#pricing", and both mean the packages. An element can only carry one address, so this is an empty one sitting immediately above the section. It takes up no space and is hidden from screen readers. */ .sadaf-anchor { display: block; height: 0; } /* 3. Tap targets under 44px. Anything much under about 44px square is hard to hit accurately with a thumb. Three things on this page came in under it. In each case the room is added around the text without moving the text itself, so nothing looks different on a laptop. */ /* The breadcrumb under the page heading, 23px. */ .elementor-708 .elementor-element-37646fa .elementor-icon-list-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } /* The three "Learn More" buttons on the service cards, 13px. */ .elementor-708 :is(.elementor-element-ec34fdf, .elementor-element-5f69e95, .elementor-element-f3dfe6a) .elementor-button { display: inline-flex; align-items: center; min-height: 44px; } /* The link to the booking policies inside the deposit note, 19px. This one sits in the middle of a sentence, so it cannot simply be made taller or it would push the lines of that paragraph apart. The padding that grows the target is cancelled by an equal negative margin, which leaves the text exactly where it was while the area that responds to a thumb is much larger. */ .sadaf-deposit a { display: inline-block; padding: 12px 6px; margin: -12px -6px; } /* 4. The "Most Popular" badge on the Gold package. The live site marks Gold as the most popular package and the kit's cards have no badge, so this is the kit's own small label element reused. It is given the champagne gold from the palette, which reads at 5.2 to 1 against the mocha behind it and so is safe to read. */ .elementor-732 .elementor-element.sadaf-popular { align-self: flex-start; margin: 0 0 4px; } .elementor-732 .sadaf-popular p { display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--sadaf-gold); color: var(--sadaf-mocha) !important; font-family: "Inter Tight", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; } /* 5. The deposit terms under the price cards. A quieter line than the body copy around it, because it is the small print rather than something to be read first. Centred to sit under the row of three cards. */ /* The borrowed widget brings a 50px bottom margin with it, which sat on top of the section's own 100px and left this one join 254px deep against the 203px used everywhere else on the site. The kit sets that margin with three classes, so a rule written on our single class lost to it silently and the spacing did not move. Named here with the page class in front so ours is the more specific of the two. This is the same trap as the bare heading rules: on this theme, check that a spacing change actually moved something rather than assuming it did. */ .elementor-708 .elementor-element.sadaf-deposit { width: 100%; margin-top: 26px; margin-bottom: 0; } .sadaf-deposit p { margin: 0; text-align: center; font-size: 14px; line-height: 1.7; opacity: 0.85; } .sadaf-deposit a { color: var(--sadaf-gold-deep); text-decoration: underline; text-underline-offset: 3px; } /* 6. The borrowed paragraph widgets. Four places on this page have a paragraph on the live site where the kit has no slot for one: under the page heading, under the packages heading, the deposit terms, and above the add on rows. Rather than write a bare

, which would not carry the kit's own size, spacing and line height, a text widget is borrowed from a section that is being dropped. It comes with the colour that section used, a near white meant to sit on a dark background. Here it sits on the off white body, where it measured 1.01 to 1 against its background, which is to say invisible. Put back to the body mocha, which is what every other paragraph on the page uses. */ .sadaf-para p { color: var(--sadaf-body) !important; } /* 7. Button height on a phone. The kit's buttons come out 37px tall on a phone. That clears the check's own bar, which is set at 32px, but it is under the 44px that is the usual guide for something a thumb has to hit, and the homepage's buttons are already 44px, so on this page they would have been visibly smaller than the ones on the page before it. Held behind a max-width so it only applies to phones. Our stylesheet loads after the kit's, so an unguarded rule here would override the kit at every screen size at once and change the buttons on a laptop too. */ @media (max-width: 767px) { .elementor-708 main .elementor-button, main .elementor-708 .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* 8. The 723px of empty space under the three service cards. The kit's services page ships six cards laid out as a grid of three across and two down, and it names both of those rows explicitly. We keep three of the six, because the other three are makeup classes, photoshoot makeup and beauty consultations, none of which she offers. Removing the cards does not remove the row they sat in. The grid was still being told to make two rows 500px tall, so the second one stayed there, empty, and the page carried 520px of blank floor between the cards and the packages below. Measured as one unbroken 723px band of background once the section spacing either side was counted in. Setting the rows to size themselves means the grid makes exactly as many rows as there are cards to put in them: one row on a laptop, two on a tablet where the grid drops to two columns, three on a phone where it drops to one. The cards keep their own height, so nothing about them changes. */ .elementor-708 .elementor-element.elementor-element-6af5c2c { --e-con-grid-template-rows: auto; } /* 9. The icons beside the bridal points and the occasions. Each line now carries its own icon rather than the same tick repeated, so these read as a service being described rather than as a checklist. Two things are set here. The icon is sized and coloured to the champagne gold so the eight of them sit as a quiet column of gold down the left rather than competing with the words. And the icon is stopped from being squashed when the text beside it wraps onto a second line, which is what made these look broken on a phone: a flex item will give up its own width before it lets a neighbour wrap, so without this the icon narrowed to a sliver. */ .elementor-709 :is(.elementor-element-8955000, .elementor-element-aedffd7) .elementor-icon-box-icon { flex: 0 0 auto; } .elementor-709 :is(.elementor-element-8955000, .elementor-element-aedffd7) .elementor-icon { color: var(--sadaf-gold); font-size: 17px; line-height: 1; } /* On a phone the icon sits beside the words rather than above them, which is the kit's own inline option, swapped in on the widget itself. The row is aligned to the top so a point that runs to two lines keeps its icon level with the first line rather than floating to the middle. */ @media (max-width: 767px) { .elementor-709 :is(.elementor-element-8955000, .elementor-element-aedffd7) .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 12px; text-align: left; } .elementor-709 :is(.elementor-element-8955000, .elementor-element-aedffd7) .elementor-icon-box-icon { margin: 0; } .elementor-709 :is(.elementor-element-8955000, .elementor-element-aedffd7) .elementor-icon-box-content { text-align: left; } } /* ========================================================================== PORTFOLIO Built 31 July 2026. The kit gives the banner, the heading, the gallery and the closing panel. The filter row and the lightbox are ours, because the kit ships neither. ========================================================================== */ /* 1. The kit's stock photography on this page. */ /* Page banner photograph removed, replaced by the plain page header below. */ .elementor-735 .elementor-element.elementor-element-66612bb { background-image: url("../images/services-cta.webp") !important; } /* closing backdrop */ /* The breadcrumb under the page heading came in at 23px, the same as on the other pages. Padded out to 44px without moving the text. */ .elementor-734 .elementor-element-93d7578 .elementor-icon-list-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } /* 2. The filter row. The buttons are the kit's own, cloned once per category, so their shape, padding and hover all come from the kit. What is set here is only how the row behaves as a row, and how the chosen one is marked. The unchosen buttons are outlined rather than filled, so the row reads as one selected item among several rather than five competing buttons. The chosen one fills with champagne gold and takes mocha text, which measures 5.2 to 1 and is the same pairing used on every other button on the site. */ .sadaf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 0 44px; } .sadaf-filters .elementor-widget { margin: 0 !important; width: auto; } .sadaf-filters .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--sadaf-gold); background: transparent; color: var(--sadaf-body); font-size: 13px; letter-spacing: 0.06em; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .sadaf-filters .elementor-button:hover { background: var(--sadaf-gold-light); color: var(--sadaf-mocha); } .sadaf-filters .elementor-button[aria-pressed="true"] { background: var(--sadaf-gold); color: var(--sadaf-mocha); border-color: var(--sadaf-gold); } /* 3. The gallery grid. The kit's gallery is a two column float layout, which is what a written case study wants beside its text. A portfolio of twelve wants a proper grid, so it is set to one here: three across on a laptop, two on a phone. Every photograph is held to the same upright shape and cropped to fill it. Sadaf's pictures come from a phone and a camera in a mix of shapes, and a grid of mixed shapes reads as untidy however good the photographs are. The crop is centred, which suits portraits. */ .elementor-734 .elementor-image-gallery .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 !important; /* THE LAST ROW IS CENTRED, added 13 August 2026 with the Bridal tab. Bridal has eleven photographs. Eleven into five columns is five, five and then one tile stranded in the bottom left corner, and into three columns it is a row of two. A single orphan reads as a mistake rather than as a gallery, and Sadaf chose all eleven, so the row is centred rather than a photograph being dropped to make the arithmetic tidy. THIS IS FLEX AND NOT GRID, AND THE FIRST ATTEMPT AT IT FAILED. Adding justify-content: center to the grid did nothing at all, measured: the orphan stayed hard left at 68px, exactly where it had been. A 1fr track always consumes the whole row, so there is no free space for justify-content to distribute and the property has nothing to act on. Flex items sized to a width do leave free space on a short row. The column count and gap are variables because they change at four breakpoints further down this file. Those rules keep their grid-template-columns, now inert but left in place as the record of what each breakpoint does, and set --cols and --gap alongside it. Hair at fifteen and Makeup at ten divide evenly at 5, 4, 3 and 2 columns, so neither ever has a short row and neither moves. Verified by measuring the first and last row of all three tabs at every breakpoint. */ display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; --cols: 3; --gap: 16px; gap: var(--gap); } .elementor-734 .elementor-image-gallery .gallery-item { width: auto !important; /* WordPress's own gallery styling caps each item at a third of its width, which is how it makes three columns out of floats. With the row already a grid, that third was being taken of the grid cell rather than of the row, so every photograph came out at 138px on a laptop, a third of the size it should be. The cap has to be lifted, not just the width. */ max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; /* The width the grid used to work out for itself. !important because WordPress's own gallery CSS also sets a width on this element. */ width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)) !important; flex: 0 0 auto; } .elementor-734 .elementor-image-gallery .gallery-icon { margin: 0; overflow: hidden; border-radius: 4px; } .elementor-734 .elementor-image-gallery .gallery-item a { display: block; cursor: zoom-in; } .elementor-734 .elementor-image-gallery .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border: 0 !important; transition: transform 0.5s ease; } .elementor-734 .elementor-image-gallery .gallery-item a:hover img { transform: scale(1.04); } .elementor-734 .elementor-image-gallery .gallery-item[hidden] { display: none; } @media (max-width: 767px) { .elementor-734 .elementor-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); --cols: 2; --gap: 10px; gap: var(--gap); } } /* The line shown when a filter turns up no photographs. */ .sadaf-empty { width: 100%; margin: 30px 0 0 !important; } .sadaf-empty p { text-align: center; opacity: 0.8; } .sadaf-empty[hidden] { display: none; } /* 4. The lightbox. The kit's gallery is wired to Elementor's own lightbox, which needs a piece of WordPress that is not here, so tapping a photograph did nothing at all. This is the replacement. The panel sits above everything, and the page behind is stopped from scrolling while it is open, which is the thing phones get wrong most often: without it, dragging on the picture scrolls the page underneath instead. */ .sadaf-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: rgba(46, 34, 26, 0.94); } .sadaf-lightbox[hidden] { display: none; } /* Holding the page still while a photograph is open. Simply hiding the page's overflow is not enough: a browser forgets its scrolling position when you do that, so the page came back hundreds of pixels from where the reader left it. Pinning the page in place and offsetting it by exactly how far down it was scrolled keeps it looking untouched, and the position is put back by hand on close. */ body.sadaf-lightbox-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .sadaf-lightbox__stage { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; align-items: center; justify-content: center; } .sadaf-lightbox__stage img { display: block; max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; border-radius: 4px; } /* The two class names are doubled up here, which looks odd but is deliberate. The kit styles every button on the site with ".elementor-kit-3 button", which counts one class and one element name. A rule written on a single class of ours counts one class and nothing else, so the kit's rule was the more specific of the two and won regardless of which file loaded last. Its 26px of side padding was forcing the button to 52px wide, which is why the round border was drawing a pill rather than a circle. Repeating the class is the plainest way to outrank it without resorting to !important, which would then have to be repeated on every property below. */ .sadaf-lightbox__close.sadaf-lightbox__close, .sadaf-lightbox__nav.sadaf-lightbox__nav { flex: 0 0 auto; width: 44px; height: 44px; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(215, 180, 135, 0.5); border-radius: 999px; background: transparent; color: var(--sadaf-gold-light); font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .sadaf-lightbox__close:hover, .sadaf-lightbox__nav:hover { background: rgba(215, 180, 135, 0.16); border-color: var(--sadaf-gold); } /* The multiplication sign used as the close symbol does not sit in the middle of its own line box: the font leaves more room under it than over it, so centring the box still left the mark riding high. Setting the line height to zero takes the font's own spacing out of it and leaves the glyph centred on the button's true middle. */ .sadaf-lightbox__close.sadaf-lightbox__close { position: absolute; top: 18px; right: 18px; font-size: 26px; line-height: 0; } .sadaf-lightbox__nav.sadaf-lightbox__nav { font-size: 24px; line-height: 0; } .sadaf-lightbox__nav[hidden] { display: none; } /* On a phone the arrows sit under the picture rather than either side of it, where they would leave the photograph about a thumb wide. */ @media (max-width: 640px) { .sadaf-lightbox { flex-wrap: wrap; align-content: center; padding: 16px; } .sadaf-lightbox__stage { order: 1; flex: 1 0 100%; } .sadaf-lightbox__stage img { max-height: calc(100vh - 180px); } .sadaf-lightbox__nav--prev { order: 2; } .sadaf-lightbox__nav--next { order: 3; } .sadaf-lightbox__nav { margin-top: 18px; } } /* ========================================================================== LEGAL AND POLICY PAGES Booking Policies, Privacy Policy, Terms and Conditions. Built 31 July 2026 from one shared template, so all three read and behave identically. ========================================================================== */ /* The banner photograph the three shared was removed, replaced by the plain page header at the foot of this file. */ /* The breadcrumb under the page heading, 23px, same as every other page. */ .elementor-706 .elementor-element-5f38a35 .elementor-icon-list-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } /* The column of text is held to a comfortable reading measure rather than the full width of the page. Long lines of legal text running the whole way across a monitor are genuinely hard to follow: the eye loses its place coming back to the start of the next line. */ .sadaf-legal { max-width: 1190px; margin: 0 auto; width: 100%; } /* 3. The two column layout. The contents list sits on the left and stays put as the sections scroll past on the right. On a laptop it is fixed at 250px and the reading column takes what is left, up to 760px, which keeps the lines of legal text at a length the eye can follow. min-width: 0 on the reading column matters: without it a flex item will not shrink below the width of its widest contents, and a long web address in the privacy policy would push the whole layout wider than the screen. */ .sadaf-legal__cols { display: flex; align-items: flex-start; gap: 60px; margin-top: 30px; } .sadaf-legal__side { /* Wide enough for the longest entry on any of the three pages to hold its line. "13. Client Responsibility & Waiver" on the terms page is the one that sets it. */ flex: 0 0 310px; position: sticky; top: 118px; /* -- Why this margin exists, 2 August ---------------------------------- The client reported the contents box touching the footer at the bottom of the page. Measured, and he was right: on all three pages, at 1366, 1440 and 1920, the gap between the bottom of this box and the top of the footer was exactly 0px. A sticky element travels until its MARGIN box reaches the bottom of its containing block's padding box, and this box's containing block is .sadaf-legal__cols, whose bottom edge is exactly where the footer starts. So with no margin it comes to rest flush against the footer every time. Padding on .sadaf-legal__cols does not fix this and was tried first: it makes that box taller, which pushes the footer down by the same amount, and the two stay flush. The margin has to be on the sticky element itself. It costs no height anywhere, because the reading column beside it is several thousand pixels taller and is what sets the row's height. */ margin-bottom: 90px; /* -- Why the height is capped ------------------------------------------ The second half of the same report. The terms list is 15 entries and 551px tall; held at 118px from the top of the window, it needs about 670px of window to show all of it. On a laptop reporting 600px of usable height the last three entries sat below the fold and, because the box is stuck, no amount of scrolling would ever bring them up. They were unreachable rather than merely awkward. Capped to the window and allowed to scroll inside itself, so the list is always complete. On any window tall enough to hold the list, which is most of them, the cap never applies and nothing appears to change. */ max-height: calc(100vh - 148px); overflow-y: auto; /* Reaching the end of the list inside the box does not then start scrolling the page behind it. */ overscroll-behavior: contain; /* Room for the scrollbar on the rare window that needs one, so it does not sit on top of the words. */ padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(198, 161, 91, .55) transparent; } /* The same slim scrollbar in the browsers that do not read scrollbar-width. */ .sadaf-legal__side::-webkit-scrollbar { width: 6px; } .sadaf-legal__side::-webkit-scrollbar-track { background: transparent; } .sadaf-legal__side::-webkit-scrollbar-thumb { background: rgba(198, 161, 91, .55); border-radius: 3px; } .sadaf-legal__main { flex: 1 1 auto; min-width: 0; max-width: 760px; } .sadaf-legal .elementor-widget { margin-bottom: 0 !important; } .sadaf-legal__intro p { font-size: 17px; line-height: 1.75; } .sadaf-legal__updated p { margin-top: 14px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sadaf-gold-deep); } /* The index at the top, which is the live site's own "On This Page" list rebuilt as jump links. */ .sadaf-legal .sadaf-legal__indexhead { margin-top: 44px; } .sadaf-legal h2.elementor-heading-title { font-size: 27px; } .sadaf-legal .sadaf-legal__indexhead h2.elementor-heading-title { font-size: 20px; } .sadaf-legal__index { margin-top: 16px !important; padding: 18px 20px; background: var(--sadaf-beige); border-radius: 4px; } /* Named with the wrapper in front. The bullet list rule further down sets these same items to a single stacked column, and being written later it was winning, so the contents list never became a grid and every entry wrapped onto two lines. This is the same specificity trap as the headings in the footer. */ .sadaf-legal .sadaf-legal__index .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-item { align-items: flex-start; gap: 8px; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-icon { margin-top: 13px; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-icon i { font-size: 9px; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-text { font-size: 13px; line-height: 1.45; } .sadaf-legal__index a { color: var(--sadaf-body); text-decoration: none; transition: color 0.2s ease; /* Padded to a thumb's width, cancelled by the margin so nothing moves. 13px rather than 11px, changed 2 August. The entries measured 41px at 320px and 43px everywhere else, which is one to three pixels under the 44px a finger needs. The comment above already said "a thumb's width" and it was very nearly true, which is the kind of miss that survives a reading and only turns up in a measurement. 19px of text plus 26px of padding is 45px. */ display: inline-block; padding: 13px 0; margin: -13px 0; } .sadaf-legal__index a:hover { color: var(--sadaf-gold-deep); } /* The section you are currently reading, marked as you scroll by the scroll spy in sadaf-theme.js. Without this the box follows you down the page without ever telling you where you are, which is most of the value of having it there at all. The marker is a gold rule down the left of the entry rather than a filled background, which would make one row of a quiet list suddenly heavy. The row keeps its position exactly: the border is drawn on a transparent left edge that every entry already carries, so nothing shifts sideways as the marker moves down the list. */ .sadaf-legal .sadaf-legal__index .elementor-icon-list-item { border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; transition: border-color .25s ease; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-item.is-current { border-left-color: var(--sadaf-gold); } .sadaf-legal .sadaf-legal__index .elementor-icon-list-item.is-current a { color: var(--sadaf-gold-deep); font-weight: 500; } /* These entries were coming out on two lines however wide the sidebar was, and the cause was not the sidebar at all. The rule further up that lets a long web address break mid-word uses overflow-wrap: anywhere, and that setting also changes how a browser works out the narrowest a box could possibly be. The entry is an inline-block, which sizes itself to that narrowest figure, so every one of them collapsed to about 110px and wrapped, in a 310px column with room to spare. Set back to normal wrapping here, and made a block so it takes the width of its column rather than shrinking to its contents. THE PADDING IS ALSO SET HERE, AND THIS IS THE RULE THAT WINS. There is a second, shorter rule further up on `.sadaf-legal__index a` which also sets it. That one is (0,2,0) and this one is (0,3,0), so this is the value that reaches the page. Changing the other one on 2 August did nothing at all and the measurement came back identical, which is how it was found. 13px, giving 19px of text plus 26px of padding, is 45px. The entries were 43px, and 41px at 320px, which is under the 44px a finger needs. Both rules now carry the same figure so the next person to change one does not get the same surprise. */ .sadaf-legal .sadaf-legal__index a { display: block; overflow-wrap: normal; padding: 13px 0; margin: -13px 0; } /* The tap height, settled at the fourth attempt on 2 August. Three rules set padding on these links and each one I changed was outranked by another I had not found: .sadaf-legal__index a (0,2,0) 11px .sadaf-legal .sadaf-legal__index a (0,3,0) 13px .sadaf-legal .elementor-icon-list-text a (0,3,1) 12px <- won The last one is shared with the inline links inside paragraphs, so it is not safe to simply raise: those sit between lines of running text and 26px of vertical padding on them would overlap the lines above and below. This rule is (0,4,1) and reaches only the contents entries. 13px of padding on an 18.85px line is 44.85px, which clears the 44px a finger needs at every width including 320. Read back from the browser, not assumed, three times now. */ .sadaf-legal .sadaf-legal__index .elementor-icon-list-text a { padding: 13px 0; margin: -13px 0; } /* At 320px the type steps down and the line becomes about 17px rather than 18.85px, which took the same 13px of padding back to 43px. One pixel more each side. Measured at 320, 360 and 390 rather than assumed from the arithmetic, because the line height is set by the kit and not by us. */ @media (max-width: 374px) { .sadaf-legal .sadaf-legal__index .elementor-icon-list-text a { padding: 14px 0; margin: -14px 0; } } .sadaf-legal .sadaf-legal__index .elementor-icon-list-text { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; } /* Each numbered section. The rule above it does the work a lot of legal pages try to do with extra blank space, which is to say it separates one section from the next without costing 80px of height every time. */ .sadaf-legal__section { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(82, 61, 46, 0.14); /* The index links jump here, and the header is fixed to the top of the window, so the page already carries a global scroll offset. Nothing extra is needed; see the note on the Services anchors. */ } .sadaf-legal__section .sadaf-legal__num p { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1; /* The champagne gold measures 1.78 to 1 on the off white body, which is not readable. These numbers are not decoration, they are how the index at the top of the page refers to each section, so they use the antique gold at 5.02 to 1 instead. */ color: var(--sadaf-gold-deep); margin: 0 0 4px; } .sadaf-legal__section h2.elementor-heading-title { margin-bottom: 14px; } /* The privacy policy quotes a full web address, and a web address is one long word with nothing in it a browser is willing to break. At 320px it ran 6px past the edge of the screen and gave the whole page a sideways scroll. This lets long words break mid-word when there is genuinely no other way to fit them, which affects nothing else because ordinary words always have a space to break at first. */ .sadaf-legal p, .sadaf-legal .elementor-icon-list-text { overflow-wrap: anywhere; } .sadaf-legal p { margin: 0 0 14px; } .sadaf-legal p:last-child { margin-bottom: 0; } .sadaf-legal strong { color: var(--sadaf-mocha); font-weight: 600; } .sadaf-legal a { color: var(--sadaf-gold-deep); text-decoration: underline; text-underline-offset: 3px; } /* Links sitting inside a sentence came out between 19px and 23px tall, well under the 44px a thumb needs. They cannot simply be made taller or they would push the lines of the paragraph apart, so the padding that grows the target is cancelled by an equal negative margin. The text stays exactly where it was and the area that responds to a tap is more than twice the size. */ .sadaf-legal p a, .sadaf-legal .elementor-icon-list-text a { display: inline-block; padding: 12px 4px; margin: -12px -4px; } /* The bullet lists. The kit's list is built for a price card, where the items are short and each gets a tick. Here the items are full sentences that wrap, so the marker is pinned to the top of the item rather than centred against a block of text, and the tick is swapped for a small dot: a tick reads as "included", which is wrong on a line saying a deposit is non-refundable. */ .sadaf-legal__list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; } .sadaf-legal__list .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 12px; } .sadaf-legal__list .elementor-icon-list-icon { flex: 0 0 auto; margin-top: 8px; } .sadaf-legal__list .elementor-icon-list-icon i { font-size: 6px; color: var(--sadaf-gold); } .sadaf-legal__list .elementor-icon-list-text { font-size: 15.5px; line-height: 1.7; color: var(--sadaf-body); } .sadaf-legal__list + .sadaf-para { margin-top: 14px !important; } /* The two blocks that close every one of these pages. */ /* The last of these two blocks was finishing hard against the top edge of the footer with nothing between them, so the two ran together as one dark and light slab. The section now carries a proper gap underneath it. */ .sadaf-legal__main > .sadaf-legal__close:last-child { margin-bottom: 70px; } .sadaf-legal__close { margin-top: 40px; padding: 30px 32px; background: var(--sadaf-beige); border-radius: 4px; } .sadaf-legal__close h2.elementor-heading-title { font-size: 24px; margin-bottom: 10px; } .sadaf-legal__close .elementor-widget-button { margin-top: 18px !important; } /* Below a laptop the sidebar stops being a sidebar: there is not enough width for two columns and something has to give. The contents list goes back on top, full width and two across, which is short enough to scan without scrolling past it. */ @media (max-width: 1024px) { .sadaf-legal__cols { flex-direction: column; gap: 0; } .sadaf-legal__side { position: static; flex: 1 1 auto; width: 100%; max-width: 760px; /* The three sticky settings above are undone here. Left in place they would cap a full width block to the height of the window and put a scrollbar inside it, on a layout that is not sticky and has no reason to scroll separately from the page. */ max-height: none; overflow-y: visible; margin-bottom: 0; padding-right: 0; } .sadaf-legal .sadaf-legal__index .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .sadaf-legal__main { max-width: 760px; } } @media (max-width: 767px) { .sadaf-legal__index { padding: 18px 20px; } /* Two columns of contents at 390px gives about 150px per entry, which wraps every one of them and costs more height than it saves. */ .sadaf-legal .sadaf-legal__index .elementor-icon-list-items { grid-template-columns: 1fr; } /* On the narrowest phones the longest entries, such as "12. Access, Correction and Deletion", still cannot hold their line at 13px. Tied to the width of the window below 380px so they stay on one line at 320px without being made smaller than they need to be on a normal phone. */ .sadaf-legal .sadaf-legal__index .elementor-icon-list-text { font-size: min(13px, 3.75vw); } /* Two columns of contents at 390px gives about 150px per link, which wraps every one of them onto two lines and costs more height than it saves. */ .sadaf-legal__index .elementor-icon-list-items { grid-template-columns: 1fr; } .sadaf-legal__section { margin-top: 26px; padding-top: 24px; } .sadaf-legal__close { padding: 24px 20px; } .sadaf-legal h2.elementor-heading-title { font-size: 23px; } } /* ========================================================================== ROUND OF FIXES, 31 JULY Eleven items raised after the legal pages went across. Each numbered here the way Saman numbered them. ========================================================================== */ /* 1. One banner size for the whole site. The About page banner was brought down to 340px in an earlier round and Saman asked for the rest to match it. Every other page was still on the kit's own 500px, so the five pages built since then each carried 160px more empty band than About did. Held behind a min-width, same as the About rule, because our stylesheet loads after the kit's and an unguarded rule here would push the phone banner the wrong way. Phones keep the kit's 320px, which was already signed off. */ /* Superseded by the page header block at the foot of this file, which sets one height for all six pages rather than matching About to the others. */ /* 7. The four booking steps dropping onto two rows. The four cards and the three little rules between them add up to 1300px. The row they sit in is 1273px wide on a 1366px screen, so the fourth card had nowhere to go and wrapped, leaving three across and one hanging beneath. It only fitted at all above about 1450px. The cards are told to share the row instead of holding a fixed width, so they shrink together to whatever is going and stay on one line. min-width:0 is what actually lets them shrink: without it a flex item refuses to go narrower than its content. */ @media (min-width: 1025px) { .elementor-17 .elementor-element.elementor-element-351d7ef { flex-wrap: nowrap; } .elementor-17 .elementor-element.elementor-element-351d7ef > .e-con { flex: 1 1 0; min-width: 0; } } /* Between 768px and 1024px four across would give each card about 150px, which is too narrow to read. Two by two instead, and the little rules between them are hidden because they no longer separate anything. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-17 .elementor-element.elementor-element-351d7ef { flex-wrap: wrap; } .elementor-17 .elementor-element.elementor-element-351d7ef > .e-con { flex: 0 0 calc(50% - 15px); min-width: 0; } .elementor-17 .elementor-element.elementor-element-351d7ef > .elementor-widget-divider { display: none; } } /* 10. The hero heading running to four lines. The kit sets this at 73px and holds the text to a 600px column, which put "Luxury Hair & Makeup for Bridal, Formal & Special Events" on four lines. Two changes: the column is widened so there is somewhere for the words to go, and the type comes down enough to fit them. It is still the largest thing on the page by a distance. The size is tied to the width of the window between the two ends, so it scales smoothly instead of jumping at each breakpoint. */ @media (min-width: 1025px) { .elementor-17 .elementor-element-c36c25b h1.elementor-heading-title { font-size: clamp(44px, 3.7vw, 54px) !important; line-height: 1.16 !important; } /* The kit sets this column's width through a custom property, not through max-width, so a max-width here was simply ignored. The property is what has to change. */ .elementor-17 .elementor-element.elementor-element-7b88929 { --width: 800px; } } /* On a tablet the kit holds the same heading to a 380px column, which put it on four lines. The column is released to the full width of the section and the type comes down to suit. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-17 .elementor-element-c36c25b h1.elementor-heading-title { font-size: 36px !important; line-height: 1.2 !important; } .elementor-17 .elementor-element.elementor-element-7b88929 { --width: 100%; } } /* And on a phone, where four lines of 40px filled most of the first screen before the reader saw anything else. */ @media (max-width: 767px) { .elementor-17 .elementor-element-c36c25b h1.elementor-heading-title { font-size: 32px !important; line-height: 1.22 !important; } } /* 11. Headings breaking onto a second line. On the homepage's services row, "Bridal Hair & Makeup" and "Formal Hair & Makeup" both sat on one line and "Special Event Hair & Makeup" broke onto two, so the three cards no longer lined up with each other. The three are the same widget, so the size comes down for all three rather than singling one out, which would have left them mismatched in a different way. The longest of the three now fits with room to spare. */ .elementor-17 .elementor-element:is(.elementor-element-d72ff49, .elementor-element-8df37cb, .elementor-element-517f730) .elementor-heading-title { font-size: 27px; } /* The card gets narrower in two places and the longest of the three headings, "Special Event Hair & Makeup", is the one that decides the size. Between 1025px and 1279px the three are still side by side but in a narrower page, which is the tightest the card ever gets. Below 1025px they go two across and there is more room again, and below 400px there is less. */ @media (min-width: 1025px) and (max-width: 1279px) { .elementor-17 .elementor-element:is(.elementor-element-d72ff49, .elementor-element-8df37cb, .elementor-element-517f730) .elementor-heading-title { font-size: 18px; } } @media (min-width: 401px) and (max-width: 1024px) { .elementor-17 .elementor-element:is(.elementor-element-d72ff49, .elementor-element-8df37cb, .elementor-element-517f730) .elementor-heading-title { font-size: 23px; } } @media (max-width: 400px) { .elementor-17 .elementor-element:is(.elementor-element-d72ff49, .elementor-element-8df37cb, .elementor-element-517f730) .elementor-heading-title { font-size: 18px; } } /* The narrowest phones still have a card too small for the longest of the three, so the last step down is tied to the width of the window rather than set flat, which keeps it on one line right down to 320px without making it needlessly small on a normal phone. */ @media (max-width: 360px) { .elementor-17 .elementor-element:is(.elementor-element-d72ff49, .elementor-element-8df37cb, .elementor-element-517f730) .elementor-heading-title { font-size: 5.1vw; } } /* 7b. The four cards were sitting at slightly different heights because the kit lets each one find its own vertical position. Levelled off so the row reads as a row. */ @media (min-width: 768px) { .elementor-17 .elementor-element.elementor-element-351d7ef { align-items: stretch; } } /* ========================================================================== PAGE HEADERS Added 2 August 2026, replacing the photographic breadcrumb banners. -------------------------------------------------------------------------- WHAT CHANGED AND WHY Every page except the homepage opened with a full width photograph behind the page title. Six pages meant six banner photographs to find, crop twice (once wide for desktop, once squarer for phones, because the band is nearly square on a phone and a landscape crop shows almost nothing of the picture), darken enough for white text to stay readable over them, and then re-check for contrast every time one was swapped. Saman asked for that upkeep to stop, so the photographs are gone and the band is now drawn in CSS. THE DESIGN A pale champagne band that warms at the top and settles into the page's own off white at the bottom, so the header dissolves into the content instead of stopping against it. The title is set in the site's serif in dark mocha, and a single champagne hairline closes the band off. Light rather than dark on purpose. The header above it is solid dark mocha and now sticks to the top of the screen, so a dark band underneath it would have read as one tall slab of brown with no clear edge between the menu and the page. Pale underneath dark gives the header a crisp edge, lets the title carry the page on its own, and puts dark text on a light ground, which is the safest contrast on the site: mocha on this band measures about 11 to 1, well past the 4.5 the standard asks for, and it cannot drift the way text over a photograph does. HOW IT IS SCOPED Four page and element pairs rather than one class, because adding a class would mean editing four build scripts to change markup, and the rule here needs no markup change at all. .elementor-444 / 559a2a8 About .elementor-708 / 639fff8 Services .elementor-734 / e962d47 Portfolio .elementor-706 / c627413 Booking Policies, Privacy, Terms The kit sets its own stock photograph on each of these through a selector carrying a :not() clause, which outranks a plain rule here, so the background is set with !important. Without it the kit's stock women in fields come straight back. Written phone first, with the larger sizes behind a min-width. This stylesheet loads after the kit's, so an unguarded rule would land on every screen size at once and override the phone step as well. ========================================================================== */ .elementor-444 .elementor-element.elementor-element-559a2a8, .elementor-708 .elementor-element.elementor-element-639fff8, .elementor-734 .elementor-element.elementor-element-e962d47, .elementor-706 .elementor-element.elementor-element-c627413 { /* The band itself. A soft warm wash across the top, dropping into the page's own off white, so there is no hard line where the header ends. */ background-image: radial-gradient(120% 140% at 78% 0%, rgba(215, 180, 135, .30) 0%, rgba(215, 180, 135, 0) 62%), linear-gradient(180deg, #EFE7DE 0%, #F3EDE7 46%, var(--sadaf-ivory) 100%) !important; background-color: var(--sadaf-ivory) !important; background-size: auto, auto !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; border-bottom: 1px solid rgba(198, 161, 91, .38); --min-height: 168px; --padding-top: 30px; --padding-bottom: 26px; min-height: 168px; } /* The kit lays a mocha overlay at 80% opacity over each of these bands, drawn as a ::before, so that white text stayed readable over its stock photographs. With the photographs gone that overlay is the only thing left on top of the new band, and it turned the pale champagne into flat brown. Switched off here. This is the reason the band rendered dark on the first attempt: the background rule above was applying correctly the whole time, it was simply being painted over. */ .elementor-444 .elementor-element.elementor-element-559a2a8::before, .elementor-708 .elementor-element.elementor-element-639fff8::before, .elementor-734 .elementor-element.elementor-element-e962d47::before, .elementor-706 .elementor-element.elementor-element-c627413::before { display: none !important; } /* The title. The kit sets it ivory for white-on-photograph, which would be invisible now, so it comes back to mocha. */ .elementor-444 .elementor-element.elementor-element-559a2a8 h1, .elementor-708 .elementor-element.elementor-element-639fff8 h1, .elementor-734 .elementor-element.elementor-element-e962d47 h1, .elementor-706 .elementor-element.elementor-element-c627413 h1 { color: var(--sadaf-mocha) !important; font-size: clamp(31px, 8.4vw, 44px) !important; line-height: 1.1 !important; margin-bottom: 10px !important; text-shadow: none !important; } /* The breadcrumb. Small, letterspaced and set in the antique gold, which is the one gold that is readable as words on a light ground at 4.6 to 1. The page you are on is the darker mocha so the trail reads left to right. */ .elementor-444 .elementor-element.elementor-element-559a2a8 .elementor-icon-list-text, .elementor-708 .elementor-element.elementor-element-639fff8 .elementor-icon-list-text, .elementor-734 .elementor-element.elementor-element-e962d47 .elementor-icon-list-text, .elementor-706 .elementor-element.elementor-element-c627413 .elementor-icon-list-text { color: var(--sadaf-mocha) !important; font-family: "Inter Tight", sans-serif !important; font-size: 12px !important; letter-spacing: .07em !important; text-transform: uppercase !important; } .elementor-444 .elementor-element.elementor-element-559a2a8 a .elementor-icon-list-text, .elementor-708 .elementor-element.elementor-element-639fff8 a .elementor-icon-list-text, .elementor-734 .elementor-element.elementor-element-e962d47 a .elementor-icon-list-text, .elementor-706 .elementor-element.elementor-element-c627413 a .elementor-icon-list-text { color: var(--sadaf-gold-deep) !important; transition: color .2s ease; } .elementor-444 .elementor-element.elementor-element-559a2a8 a:hover .elementor-icon-list-text, .elementor-708 .elementor-element.elementor-element-639fff8 a:hover .elementor-icon-list-text, .elementor-734 .elementor-element.elementor-element-e962d47 a:hover .elementor-icon-list-text, .elementor-706 .elementor-element.elementor-element-c627413 a:hover .elementor-icon-list-text { color: var(--sadaf-mocha) !important; } /* The little arrow between the crumbs, decoration rather than words, so the softer warm gold is fine here. */ .elementor-444 .elementor-element.elementor-element-559a2a8 .elementor-icon-list-icon i, .elementor-708 .elementor-element.elementor-element-639fff8 .elementor-icon-list-icon i, .elementor-734 .elementor-element.elementor-element-e962d47 .elementor-icon-list-icon i, .elementor-706 .elementor-element.elementor-element-c627413 .elementor-icon-list-icon i { color: var(--sadaf-gold-warm) !important; font-size: 10px !important; } /* Tablet and up. */ @media (min-width: 768px) { .elementor-444 .elementor-element.elementor-element-559a2a8, .elementor-708 .elementor-element.elementor-element-639fff8, .elementor-734 .elementor-element.elementor-element-e962d47, .elementor-706 .elementor-element.elementor-element-c627413 { --min-height: 208px; --padding-top: 48px; --padding-bottom: 34px; min-height: 208px; } .elementor-444 .elementor-element.elementor-element-559a2a8 h1, .elementor-708 .elementor-element.elementor-element-639fff8 h1, .elementor-734 .elementor-element.elementor-element-e962d47 h1, .elementor-706 .elementor-element.elementor-element-c627413 h1 { font-size: 58px !important; margin-bottom: 14px !important; } .elementor-444 .elementor-element.elementor-element-559a2a8 .elementor-icon-list-text, .elementor-708 .elementor-element.elementor-element-639fff8 .elementor-icon-list-text, .elementor-734 .elementor-element.elementor-element-e962d47 .elementor-icon-list-text, .elementor-706 .elementor-element.elementor-element-c627413 .elementor-icon-list-text { font-size: 13px !important; } } /* The breadcrumb sat 7.5px left of centre on all six pages. The kit gives the breadcrumb widget 15px of padding on its right and none on its left, so the words inside it end up half that distance left of the middle while the heading above stays centred. It is small enough to read as nothing in particular and just makes the two lines look slightly out of true with each other, which is what the arrows on the screenshots were pointing at. Evened up so the trail centres under the title. Four ids because Portfolio and Services each carry their own copy of the widget and the three legal pages share one. */ .elementor-444 .elementor-element.elementor-element-5ee62af, .elementor-708 .elementor-element.elementor-element-37646fa, .elementor-734 .elementor-element.elementor-element-93d7578, .elementor-706 .elementor-element.elementor-element-5f38a35 { padding-right: 0 !important; padding-left: 0 !important; } /* ========================================================================== LOCATION PAGES Jordan Springs, St Marys, Penrith. Rebuilt 2 August 2026. The first version dropped our own semantics inside the kit's containers. It worked, but it produced long unbroken runs of text on one flat colour: the Jordan Springs page ran to nearly seven thousand pixels of stacked headings, paragraphs and bullets with almost nothing to break it up. The client asked for a complete redesign. What changed is the shape, not the words. Every heading, paragraph and bullet is still the live site's own copy. An h3 and everything under it is now one card rather than another run of text, sections alternate between two backgrounds so a reader can see where one subject ends, and the FAQ is a native accordion. WRITTEN PHONE FIRST. This stylesheet loads after the kit's, so an unguarded rule lands on every screen size at once. THE ELEMENT TYPE IS NAMED IN FRONT OF THE CLASS on every heading and every link that needs it. The kit styles bare h1 to h6 with a selector stronger than one class. That is trap 4, and it has now cost this project time four times. ========================================================================== */ .sadaf-loc__wrap { width: 100%; max-width: 1290px; margin: 0 auto; /* Trap 3: below 1400px the kit gives its containers no side padding, so every section we write needs its own gutter. */ padding: 0 24px; } /* -- Shared type ---------------------------------------------------------- */ p.sadaf-loc__eyebrow { margin: 0 0 12px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sadaf-gold-deep); } h2.sadaf-loc__h2 { margin: 0 0 12px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--sadaf-ink); } h2.sadaf-loc__h2--light { color: var(--sadaf-gold-light); } p.sadaf-loc__section-lead { margin: 0; max-width: 680px; font-family: "Inter Tight", sans-serif; font-size: 15.5px; line-height: 1.75; color: var(--sadaf-body); } p.sadaf-loc__section-lead--light { color: rgba(244, 228, 201, .86); } .sadaf-loc__head { margin-bottom: 26px; } /* -- Buttons -------------------------------------------------------------- */ .sadaf-loc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .sadaf-loc__actions--centre { justify-content: center; } a.sadaf-loc__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; /* 48px, comfortably over the 44px a finger needs. The About page's 37px buttons are the standing example of what this avoids. */ min-height: 48px; padding: 13px 28px; border-radius: 3px; font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; } a.sadaf-loc__btn i { font-size: 11px; } a.sadaf-loc__btn--primary { background: var(--sadaf-mocha); color: var(--sadaf-gold-light); border: 1px solid var(--sadaf-mocha); } a.sadaf-loc__btn--primary:hover, a.sadaf-loc__btn--primary:focus-visible { background: var(--sadaf-gold-deep); border-color: var(--sadaf-gold-deep); color: #fff; } a.sadaf-loc__btn--ghost { background: transparent; color: var(--sadaf-ink); border: 1px solid rgba(198, 161, 91, .60); } a.sadaf-loc__btn--ghost:hover, a.sadaf-loc__btn--ghost:focus-visible { border-color: var(--sadaf-gold-deep); color: var(--sadaf-gold-deep); } /* On the dark closing band. The champagne gold measures 3.49 to 1 against the mocha and fails for text this size, so the highlight is used instead. Same swap the footer column links needed on 31 July. */ a.sadaf-loc__btn--onDark { background: transparent; color: var(--sadaf-gold-light); border: 1px solid rgba(215, 180, 135, .55); } a.sadaf-loc__btn--onDark:hover, a.sadaf-loc__btn--onDark:focus-visible { background: var(--sadaf-gold-light); color: var(--sadaf-mocha); border-color: var(--sadaf-gold-light); } a.sadaf-loc__btn:focus-visible { outline: 2px solid var(--sadaf-gold-warm); outline-offset: 3px; } /* -- Intro ---------------------------------------------------------------- */ .sadaf-loc__intro { background: var(--sadaf-ivory); padding: 38px 0 34px; } p.sadaf-loc__lead { margin: 0; max-width: 760px; font-family: "Inter Tight", sans-serif; font-size: 17px; line-height: 1.75; color: var(--sadaf-body); } /* -- The content sections ------------------------------------------------- Alternating backgrounds. Every section used to sit on the same flat colour and the page read as one continuous wall of writing. */ .sadaf-loc__section { padding: 40px 0 44px; } .sadaf-loc__section.is-plain { background: var(--sadaf-ivory); } .sadaf-loc__section.is-tinted { background: var(--sadaf-beige); } .sadaf-loc__split { display: grid; grid-template-columns: 1fr; gap: 24px; } .sadaf-loc__figure { margin: 0; border-radius: 3px; overflow: hidden; } .sadaf-loc__figure img { display: block; width: 100%; height: auto; /* A fixed shape, so the section below does not jump as the photograph arrives. */ aspect-ratio: 3 / 4; object-fit: cover; } ul.sadaf-loc__cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .sadaf-loc__card { padding: 22px 22px 24px; background: #fff; border: 1px solid rgba(198, 161, 91, .28); border-radius: 4px; } /* On the tinted sections a white card would be the only white on the band and would read as a pop-up. A hairline and a lighter tint instead. */ .is-tinted .sadaf-loc__card { background: rgba(255, 255, 255, .62); border-color: rgba(143, 102, 67, .22); } h3.sadaf-loc__card-head { margin: 0 0 9px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--sadaf-ink); } p.sadaf-loc__card-text { margin: 0 0 12px; font-family: "Inter Tight", sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--sadaf-body); } p.sadaf-loc__card-text:last-child { margin-bottom: 0; } ul.sadaf-loc__ticks { display: grid; grid-template-columns: 1fr; gap: 6px 18px; margin: 0; padding: 0; list-style: none; } .sadaf-loc__ticks li { display: flex; align-items: flex-start; gap: 9px; font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.6; color: var(--sadaf-body); } .sadaf-loc__ticks i { flex: 0 0 auto; margin-top: 5px; font-size: 10px; color: var(--sadaf-gold-deep); } /* -- Why choose ----------------------------------------------------------- The dark band. It sits about two thirds down every one of these pages and is the one place the brand colour carries a whole section, which stops the page reading as an unbroken run of pale bands. */ .sadaf-loc__why { background: var(--sadaf-mocha); padding: 46px 0 50px; } ul.sadaf-loc__why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .sadaf-loc__why-item { padding: 22px 22px 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(215, 180, 135, .24); border-radius: 4px; } .sadaf-loc__why-num { display: block; margin-bottom: 8px; font-family: "Cormorant Garamond", serif; font-size: 25px; line-height: 1; color: var(--sadaf-gold); } h3.sadaf-loc__why-head { margin: 0 0 8px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--sadaf-gold-light); } p.sadaf-loc__why-text { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.7; color: rgba(244, 228, 201, .84); } /* -- Suburbs -------------------------------------------------------------- */ .sadaf-loc__suburbs { background: var(--sadaf-ivory); padding: 42px 0 46px; } ul.sadaf-loc__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .sadaf-loc__chip { display: inline-flex; align-items: center; /* 44px, because three of these are links and a finger has to land on them. */ min-height: 44px; padding: 10px 18px; border: 1px solid rgba(198, 161, 91, .40); border-radius: 999px; background: #fff; font-family: "Inter Tight", sans-serif; font-size: 14px; color: var(--sadaf-body); text-decoration: none; } /* A suburb with a page of its own looks like a link. The rest do not, so nothing appears clickable that is not. */ a.sadaf-loc__chip--link { border-color: var(--sadaf-gold-warm); color: var(--sadaf-gold-deep); font-weight: 500; transition: background .25s ease, color .25s ease; } a.sadaf-loc__chip--link:hover, a.sadaf-loc__chip--link:focus-visible { background: var(--sadaf-gold-deep); color: #fff; } /* -- FAQ ----------------------------------------------------------------- Native details and summary. It needs no JavaScript, it still opens if a script fails to load, the browser's own find searches inside a closed panel, and it prints. The kit's accordion also reuses its panel ids across pages, which had to be worked around when these pages were first built. */ .sadaf-loc__faq { background: var(--sadaf-beige); padding: 42px 0 46px; } ul.sadaf-loc__faq-list { margin: 0; padding: 0; list-style: none; max-width: 900px; } .sadaf-loc__faq-item { margin-bottom: 10px; } .sadaf-loc__faq-details { background: #fff; border: 1px solid rgba(198, 161, 91, .28); border-radius: 4px; overflow: hidden; } summary.sadaf-loc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Comfortably over 44px, and the whole row is the target rather than just the words. */ min-height: 56px; padding: 14px 20px; cursor: pointer; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--sadaf-ink); list-style: none; } /* Safari draws its own triangle and ignores list-style. */ summary.sadaf-loc__faq-q::-webkit-details-marker { display: none; } summary.sadaf-loc__faq-q:hover { color: var(--sadaf-gold-deep); } summary.sadaf-loc__faq-q:focus-visible { outline: 2px solid var(--sadaf-gold-warm); outline-offset: -2px; } .sadaf-loc__faq-q i { flex: 0 0 auto; font-size: 12px; color: var(--sadaf-gold-deep); transition: transform .25s ease; } .sadaf-loc__faq-details[open] .sadaf-loc__faq-q i { transform: rotate(45deg); } .sadaf-loc__faq-a { padding: 0 20px 18px; border-top: 1px solid rgba(198, 161, 91, .22); } .sadaf-loc__faq-a p { margin: 14px 0 0; font-family: "Inter Tight", sans-serif; font-size: 14.5px; line-height: 1.75; color: var(--sadaf-body); } /* -- Closing band --------------------------------------------------------- */ .sadaf-loc__cta { background: var(--sadaf-mocha); padding: 46px 0 50px; text-align: center; } h2.sadaf-loc__cta-head { margin: 0 0 12px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--sadaf-gold-light); } p.sadaf-loc__cta-text { margin: 0 auto; max-width: 620px; font-family: "Inter Tight", sans-serif; font-size: 15px; line-height: 1.75; color: rgba(244, 228, 201, .86); } /* -- Tablet, 768px and up ------------------------------------------------- */ @media (min-width: 768px) { .sadaf-loc__wrap { padding: 0 32px; } .sadaf-loc__intro { padding: 46px 0 42px; } .sadaf-loc__section { padding: 52px 0 56px; } .sadaf-loc__why, .sadaf-loc__cta { padding: 58px 0 62px; } .sadaf-loc__suburbs, .sadaf-loc__faq { padding: 52px 0 56px; } h2.sadaf-loc__h2, h2.sadaf-loc__cta-head { font-size: 36px; } /* Two across once there is room. This is what stops a text-only section becoming the single tall column the client objected to. */ .no-photo ul.sadaf-loc__cards { grid-template-columns: 1fr 1fr; gap: 18px; } ul.sadaf-loc__why-grid { grid-template-columns: 1fr 1fr; gap: 18px; } ul.sadaf-loc__ticks { grid-template-columns: 1fr 1fr; } } /* -- Laptop and up, 1025px ------------------------------------------------ */ @media (min-width: 1025px) { .sadaf-loc__intro { padding: 54px 0 50px; } .sadaf-loc__section { padding: 62px 0 66px; } .sadaf-loc__why, .sadaf-loc__cta { padding: 70px 0 74px; } .sadaf-loc__suburbs, .sadaf-loc__faq { padding: 60px 0 64px; } /* Beside the photograph the cards take a single column, and the photograph stays with them as they scroll. Without one they spread to three. */ .sadaf-loc__split.has-photo { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; } .has-photo .sadaf-loc__figure { position: sticky; top: 118px; } .has-photo ul.sadaf-loc__cards { grid-template-columns: 1fr 1fr; gap: 18px; } .no-photo ul.sadaf-loc__cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } ul.sadaf-loc__why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (min-width: 1400px) { .sadaf-loc__wrap { padding: 0 40px; } } @media (prefers-reduced-motion: reduce) { a.sadaf-loc__btn, a.sadaf-loc__chip--link, .sadaf-loc__faq-q i { transition: none; } } /* ========================================================================== ENQUIRY AND AGREEMENT FORMS WHAT THIS COVERS Two forms, both posting to enquiry.php: enquiry.php the main enquiry form, built from the kit's appointment page termsandconditions.html the short agreement form at the foot The enquiry page loads the kit's own form stylesheet, elementor-post-557, so its fields arrive already styled and only the pieces the kit has no equivalent for are added here: the confirmation and error messages, the hidden honeypot box, and the booking policy note. The terms page does NOT load 557, because it has no reason to claim a kit page it borrows nothing else from. Its three fields are therefore styled here from nothing, deliberately matching the enquiry form so the two read as the same thing in two places. Written phone first, larger sizes behind a min-width, because this stylesheet loads after the kit's and an unguarded rule would land on every screen size at once. ========================================================================== */ /* -- The honeypot --------------------------------------------------------- A real visitor never sees this and never fills it in, so anything arriving in it came from software. It is moved off screen rather than set to display:none, because some automated form fillers skip anything hidden the obvious way and this catches more of them. It is out of the tab order and hidden from screen readers, so nobody using a keyboard or a screen reader ever lands on it. */ .sadaf-form__hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* -- What the page says after sending ------------------------------------- */ .sadaf-form__msg:empty { display: none; } .sadaf-form__ok, .sadaf-form__bad { border-radius: 10px; padding: 16px 18px; margin: 0 0 22px; font-family: "Inter Tight", sans-serif; font-size: 15px; line-height: 1.6; } .sadaf-form__ok { background: #EDF3EC; border: 1px solid #B7CDB4; color: #2F4A2C; } .sadaf-form__ok a { color: #2F4A2C; text-decoration: underline; } .sadaf-form__bad { background: #FBEDE9; border: 1px solid #E2B4A6; color: #7A2E18; } /* The kit's own per-field error line was styled here. It went with the kit's form markup on 2 August; the enquiry page now writes its own error lines, styled under ENQUIRY PAGE below. */ /* -- The booking policy line above the button ----------------------------- */ p.sadaf-form__note { margin: 4px 0 18px; font-family: "Inter Tight", sans-serif; /* 14.5px rather than 13.5px, and a taller line, so the booking policies link inside it clears a usable tap height on a phone. At 13.5px the link measured 16px tall and the layout check flagged it, which was correct: it was the smallest tap target on the page. */ font-size: 14.5px; line-height: 1.8; color: var(--sadaf-body); } p.sadaf-form__note a { color: var(--sadaf-gold-deep); text-decoration: underline; text-underline-offset: 2px; /* Padding on an inline link grows the area a finger can hit without pushing the surrounding words apart. inline-block is avoided on purpose: it would stop the phrase wrapping and can push a narrow phone layout sideways. */ padding: 6px 2px; margin: 0 -2px; } /* -- The agreement form on the terms page --------------------------------- REMOVED 10 AUGUST, along with the form itself. The rules here styled a name, email and phone block at the foot of the terms page from nothing, because that page does not load the kit's form stylesheet. See build_legal_body.py for why the form went. Nothing else on the site used these selectors, so they are gone rather than left orphaned. */ /* ========================================================================== SERVICE AREAS, HOMEPAGE Added 2 August 2026. Three cards under the services block, pointing at the three location pages. Those pages existed and had nothing linking to them from anywhere on the site, so the only way to reach one was from a search engine. Phone first, larger sizes behind a min-width. ========================================================================== */ .sadaf-areas { background: var(--sadaf-ivory); padding: 46px 0 50px; } .sadaf-areas__inner { width: 100%; max-width: 1290px; margin: 0 auto; /* Trap 3: below 1400px the kit gives its containers no side padding at all, so every section we write needs its own. */ padding: 0 24px; text-align: center; } .sadaf-areas__eyebrow { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sadaf-gold-deep); } /* The element type is named in front of the class throughout this block. The kit styles bare h1 to h6 with a selector stronger than one class, and its field rules beat a single class on specificity as well. That is trap 4, and the enquiry form hit it again on 2 August. */ h2.sadaf-areas__head { margin: 0 0 12px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--sadaf-ink); } p.sadaf-areas__lead { margin: 0 auto 30px; max-width: 620px; font-family: "Inter Tight", sans-serif; font-size: 15.5px; line-height: 1.75; color: var(--sadaf-body); } ul.sadaf-areas__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; text-align: left; } a.sadaf-areas__card { display: block; height: 100%; background: #fff; border: 1px solid rgba(198, 161, 91, .30); border-radius: 4px; overflow: hidden; text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } a.sadaf-areas__card:hover, a.sadaf-areas__card:focus-visible { border-color: var(--sadaf-gold-warm); box-shadow: 0 20px 44px -30px rgba(82, 61, 46, .55); transform: translateY(-3px); } a.sadaf-areas__card:focus-visible { outline: 2px solid var(--sadaf-gold-warm); outline-offset: 3px; } .sadaf-areas__media { display: block; overflow: hidden; } .sadaf-areas__media img { display: block; width: 100%; height: auto; /* A fixed shape so the row does not jump as each photograph arrives, and so the three cards line up whatever the source images measure. */ aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; } a.sadaf-areas__card:hover .sadaf-areas__media img { transform: scale(1.04); } .sadaf-areas__body { display: block; padding: 20px 22px 22px; } .sadaf-areas__name { display: block; margin-bottom: 7px; font-family: "Cormorant Garamond", serif; font-size: 25px; line-height: 1.2; color: var(--sadaf-ink); } .sadaf-areas__line { display: block; margin-bottom: 14px; font-family: "Inter Tight", sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--sadaf-body); } .sadaf-areas__more { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sadaf-gold-deep); } .sadaf-areas__more i { font-size: 10px; transition: transform .25s ease; } a.sadaf-areas__card:hover .sadaf-areas__more i { transform: translateX(4px); } @media (min-width: 768px) { .sadaf-areas { padding: 58px 0 62px; } .sadaf-areas__inner { padding: 0 32px; } h2.sadaf-areas__head { font-size: 38px; } /* Two across on a tablet. Three would give each card about 220px, which is narrower than the words in "The private, women-only studio" want. */ ul.sadaf-areas__grid { grid-template-columns: 1fr 1fr; gap: 22px; } } @media (min-width: 1025px) { .sadaf-areas { padding: 66px 0 70px; } ul.sadaf-areas__grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } } @media (min-width: 1400px) { .sadaf-areas__inner { padding: 0 40px; } } @media (prefers-reduced-motion: reduce) { a.sadaf-areas__card, .sadaf-areas__media img, .sadaf-areas__more i { transition: none; } a.sadaf-areas__card:hover { transform: none; } a.sadaf-areas__card:hover .sadaf-areas__media img { transform: none; } a.sadaf-areas__card:hover .sadaf-areas__more i { transform: none; } } /* ========================================================================== BUTTON TAP HEIGHT Added 2 August 2026. The kit's own button widget renders at 37px on a phone and 38px on a laptop. That is under the 44px a finger reliably hits, and it applies to every kit button on the site: the three on About, ten on Services, the pricing cards, the legal pages' closing panels. It has been an open question since 31 July. It was raised twice and never answered, and About was left alone because it had been signed off. This round asked for responsiveness across every page as a requirement, and a tap target is part of that, so it is set here rather than asked about a third time. Scoped to main. The header and footer buttons are sized deliberately against a fixed bar height and are left as they are. min-height rather than padding, so a button only ever grows to the floor and nothing that already clears it moves. The flex centring is what keeps the label in the middle of the taller box; without it the words sit at the top and the button looks broken rather than bigger. ========================================================================== */ main a.elementor-button, main button.elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== ABOUT: THE BIOGRAPHY Added 3 August 2026. The client's own biography, 9 paragraphs and 401 words, set as one continuous read rather than chopped into cards. The layout bends to the text: there are no slots here that need filling, so nothing has to be written to fill them. A portrait sits beside it and stays there while the biography scrolls, so the reading column keeps a comfortable measure on a wide screen instead of running the full width of the page. Phone first. The element type is named in front of the class on the heading and the buttons, because the kit outranks a single class (trap 4). ========================================================================== */ .sadaf-bio { background: var(--sadaf-ivory); padding: 40px 0 46px; } .sadaf-bio__wrap { width: 100%; max-width: 1290px; margin: 0 auto; /* Trap 3: the kit gives its containers no side padding below 1400px. */ padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 30px; } .sadaf-bio__figure { margin: 0; } .sadaf-bio__figure img { display: block; width: 100%; height: auto; /* NO aspect-ratio AND NO object-fit, CHANGED 17 AUGUST 2026. This used to force a 1/1 square with object-fit: cover, which cropped a full length portrait down to roughly a headshot. Sadaf asked in writing for the opposite: the photograph vertically framed, showing her whole outfit, and specifically not cropped into a square or a close up. So the picture is now shown at its own shape, 0.470, and nothing is cut off. The square was there to stop the biography jumping as the photograph loaded. That job is now done by the width and height attributes on the itself, which let the browser reserve the right box before the file arrives. It is the better fix anyway, because it reserves the RIGHT shape rather than a convenient one. */ border-radius: 3px; } p.sadaf-bio__caption { margin: 14px 0 0; font-family: "Cormorant Garamond", serif; font-size: 21px; line-height: 1.3; color: var(--sadaf-ink); } .sadaf-bio__caption span { display: block; margin-top: 3px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sadaf-gold-deep); } p.sadaf-bio__eyebrow { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sadaf-gold-deep); } h2.sadaf-bio__head { margin: 0 0 18px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--sadaf-ink); } /* The opening paragraph, set larger as a standfirst. This is a type size and nothing else: the words are untouched and it is still one paragraph. */ p.sadaf-bio__lead { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 22px; line-height: 1.55; color: var(--sadaf-ink); } p.sadaf-bio__p { margin: 0 0 17px; font-family: "Inter Tight", sans-serif; font-size: 15.5px; /* Generous for a 400 word read. This is the one page on the site somebody sits and reads rather than scans. */ line-height: 1.85; color: var(--sadaf-body); } p.sadaf-bio__p:last-of-type { margin-bottom: 0; } .sadaf-bio__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(198, 161, 91, .28); } a.sadaf-bio__btn { display: inline-flex; align-items: center; justify-content: center; /* 48px, over the 44px a finger needs. */ min-height: 48px; padding: 13px 28px; border: 1px solid var(--sadaf-mocha); border-radius: 3px; background: var(--sadaf-mocha); color: var(--sadaf-gold-light); font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; } a.sadaf-bio__btn:hover, a.sadaf-bio__btn:focus-visible { background: var(--sadaf-gold-deep); border-color: var(--sadaf-gold-deep); color: #fff; } a.sadaf-bio__btn--ghost { background: transparent; border-color: rgba(198, 161, 91, .60); color: var(--sadaf-ink); } a.sadaf-bio__btn--ghost:hover, a.sadaf-bio__btn--ghost:focus-visible { background: transparent; border-color: var(--sadaf-gold-deep); color: var(--sadaf-gold-deep); } a.sadaf-bio__btn:focus-visible { outline: 2px solid var(--sadaf-gold-warm); outline-offset: 3px; } @media (min-width: 768px) { .sadaf-bio { padding: 52px 0 58px; } .sadaf-bio__wrap { padding: 0 32px; gap: 36px; } h2.sadaf-bio__head { font-size: 40px; } p.sadaf-bio__lead { font-size: 24px; } } @media (min-width: 1025px) { .sadaf-bio { padding: 62px 0 68px; } /* THE PORTRAIT MOVED TO THE RIGHT ON 17 AUGUST 2026, at Sadaf's request: "The tall portrait positioned on the right-hand side, the complete About Sadaf copy positioned on the left-hand side." THE ORDER IS SET HERE AND NOT IN THE MARKUP, ON PURPOSE. The figure is still first in the HTML, so on a phone, where this stacks, the photograph still appears above the biography exactly as it did before. Reordering the markup instead would have quietly changed the phone layout as a side effect of a desktop request. The reading column is the wider of the two so the biography keeps a comfortable measure of roughly 70 characters. 400px against a 1290px wrap gives the portrait real presence without letting nine paragraphs run the full width of a large screen. */ .sadaf-bio__wrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 60px; align-items: start; } .sadaf-bio__text { grid-column: 1; grid-row: 1; } .sadaf-bio__figure { grid-column: 2; grid-row: 1; } /* NOT sticky any more. The portrait is 0.470, so at 400px wide it stands 851px tall, which is taller than most laptop viewports. A sticky element taller than the viewport pins its TOP and then never scrolls, so the bottom of the photograph could never be reached. Left to scroll normally the whole picture is seen, which is the point of using a full length portrait at all. */ p.sadaf-bio__p { font-size: 16px; } } @media (min-width: 1400px) { .sadaf-bio__wrap { padding: 0 40px; gap: 68px; } } @media (prefers-reduced-motion: reduce) { a.sadaf-bio__btn { transition: none; } } /* -------------------------------------------------------------------------- THE ENQUIRY SUCCESS PANEL Rebuilt 12 August 2026, second pass, after the client's screenshot. IT IS OPEN BECAUSE IT EXISTS. There is no open or closed state and no class a script has to add. PHP prints this markup only when an enquiry has actually been accepted, so if it is on the page it is meant to be on screen. That is what keeps it working with JavaScript switched off, which the form has always done on purpose. WHY IT WAS REBUILT RATHER THAN ADJUSTED. The client said it read as a collection of text blocks rather than a designed confirmation. Measuring it showed he was describing something structural, not a spacing value: card 620 x 478 at 1440 mark 74 x 74 finishing 111px down title 452 x 32 lead 452 x 52 aside 452 x 23 photos 452 x 43 note 452 x 104 the tallest element in the card actions 452 x 64 Two faults follow from those numbers. The mark sat in a fixed 74px column with the text in a second column, so about 370px of that column was empty and the text ran to 452px inside a 620px card. That is the empty area he circled. And the record of consent, at 104px, was the tallest thing in the panel and the only bordered box in a card with no other boxes, which is why it read as bolted on. WHAT THE COMPOSITION IS NOW. Three groups, not seven loose elements: 1. the head, centred: tick, heading, lead 2. the two next steps, side by side on a wide screen, stacked on a phone 3. the close: record of consent, then the two buttons Each boundary is a hairline rule, never a gap. Section 5 of the kickoff records that two groups separated only by space read as one group, and this project has learnt that three times already. FOUR LEVELS OF TYPE, so the hierarchy answers itself: the serif heading, the lead at 15.5px, the step text at 13.5px under a 10.5px gold label, and the record at 11.5px. Nothing else competes with the heading. THIS BLOCK IS THE ONLY PLACE THE PANEL IS STYLED. The rules used to be in four separate blocks in this file, added on 10, 11 and 12 August, each overriding the last, with a photograph box that was still being styled after the markup for it had gone. They are now one block, and the three old ones were deleted rather than left in place. Dead CSS describing an approach we abandoned is how a future session revives it. Z-INDEX. 9000, which is above the sticky header at 400 and deliberately below the gallery lightbox at 10000. The two can never be on screen together but leaving a gap costs nothing and stops a future third thing landing between them by accident. -------------------------------------------------------------------------- */ .sadaf-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; /* Room for the card to breathe on a small screen, and the safe area inset so it clears the notch and the home indicator on an iPhone. */ padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); } .sadaf-modal__backdrop { position: absolute; inset: 0; background: rgba(46, 34, 26, .62); /* Progressive: where it is unsupported the flat colour above still reads. */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sadaf-modal-fade .28s ease-out both; } /* Stops the page behind scrolling underneath the panel. Done with :has() rather than a class on the body, because the body tag is written by mkpage.py and shared by every page on the site, and this is the only page that has a panel. Where :has() is unsupported the page behind can still be scrolled, which is untidy rather than broken. */ body:has(.sadaf-modal) { overflow: hidden; } /* Focused by the script on arrival, so a screen reader lands on the panel rather than at the top of the page. outline:none is safe here only because the element is never reached by tabbing: it is given focus once, programmatically, and the Tab order then runs through the real controls inside it, which keep their own focus rings. */ .sadaf-modal__card:focus { outline: none; } /* THE CARD IS NARROWER THAN IT WAS, 540px against 620px. The old width existed only to hold the tick's column. With the tick back in the flow the words set better at 540: the lead comes out at two lines rather than one long one, and a centred heading in a narrower measure reads as composed rather than stranded. */ .sadaf-modal__card { position: relative; width: 100%; max-width: 540px; /* Never taller than the screen. On a short window the card scrolls inside itself rather than growing a bottom edge that cannot be reached, which is the fault that had to be fixed on the legal pages' contents box and is worth not repeating here. */ max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--sadaf-ivory); border: 1px solid rgba(215, 180, 135, .55); border-radius: 18px; box-shadow: 0 24px 60px rgba(46, 34, 26, .34); padding: 34px 34px 24px; text-align: center; animation: sadaf-modal-rise .34s cubic-bezier(.2, .7, .3, 1) both; } /* -- The close control ---------------------------------------------------- An anchor, not a button, so it needs no script. It reloads the page, which also empties the form. QUIETER THAN IT WAS, BUT NOT FADED. The glyph is 21px rather than 26px, on its own with no background until it is hovered. It is a way out of a message somebody is pleased to be reading, not a control they are looking for. IT DOES NOT CARRY AN OPACITY. The first pass set .55, which measured 2.12 against the 4.5 a glyph this size needs. Size is what makes it recede; gold deep at full strength on ivory measures 4.62. The 44px box is unchanged, because the tap target was never what was too loud. */ a.sadaf-modal__close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 21px; line-height: 1; text-decoration: none; color: var(--sadaf-gold-deep); background: transparent; transition: background .18s ease, color .18s ease; } a.sadaf-modal__close:hover, a.sadaf-modal__close:focus-visible { background: var(--sadaf-beige); color: var(--sadaf-mocha); } /* -- Group one, the head -------------------------------------------------- Padding-right on the wide layout keeps the heading clear of the close control, which is absolutely positioned and so takes no space of its own. */ .sadaf-modal__head { margin: 0 0 20px; padding: 0 6px; } .sadaf-modal__mark { width: 56px; height: 56px; margin: 0 auto 14px; } .sadaf-modal__mark svg { width: 100%; height: 100%; display: block; overflow: visible; } .sadaf-modal__mark-ring { fill: none; stroke: var(--sadaf-gold); stroke-width: 2; /* 2 * pi * 24, the circumference, so the stroke can be drawn on. */ stroke-dasharray: 151; stroke-dashoffset: 151; animation: sadaf-modal-draw .6s ease-out .1s forwards; } .sadaf-modal__mark-tick { fill: none; stroke: var(--sadaf-gold-deep); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sadaf-modal-draw .38s ease-out .52s forwards; } h2.sadaf-modal__title { margin: 0 0 10px; /* The kit exposes the display serif as an Elementor global rather than as a variable of ours, so it is named directly here with a real fallback. */ font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--sadaf-mocha); letter-spacing: .01em; } /* The one paragraph that is allowed to be the size it is. Everything below it is smaller, so this reads as the answer and the rest as detail. */ p.sadaf-modal__lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sadaf-body); } /* -- Group two, the two next steps ---------------------------------------- Stacked first, because our stylesheet loads after the kit's and an unguarded two column value would otherwise land on every screen size at once. The rule above the group is the boundary between it and the head. When the pair is stacked the second one carries a rule of its own, so the boundary between the two is an edge rather than the 18px of space between them. */ .sadaf-modal__next { margin: 0 0 18px; padding-top: 18px; border-top: 1px solid rgba(215, 180, 135, .5); display: grid; grid-template-columns: 1fr; text-align: left; } .sadaf-modal__step + .sadaf-modal__step { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(215, 180, 135, .5); } .sadaf-modal__step-label { display: block; margin-bottom: 5px; font-family: "Inter Tight", sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sadaf-gold-deep); } p.sadaf-modal__step-text { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--sadaf-body); } p.sadaf-modal__step-text a { position: relative; color: var(--sadaf-gold-deep); text-decoration: underline; text-underline-offset: 2px; /* The email address is the longest unbroken string in the panel and would push a narrow phone sideways without this. */ overflow-wrap: anywhere; } /* THE TAP TARGET IS AN OVERLAY, NOT PADDING. Vertical padding on an inline link overflows its line box and inflates the parent. Measured here: 14px of it took the photograph step from three lines of text to a 112px block and dragged the step beside it up to match, because grid items stretch. That is the same fault the policy tick row hit on 12 August, and it was solved there the same way. An absolutely positioned pseudo-element takes the finger without taking any space. It is safe on this link specifically because the address is one unbroken token and so never wraps across two lines, which is the case an overlay cannot serve. 21.6px of line box plus 12px either side is 45.6px, above the 44px a finger needs. NOTE FOR sweepall.js: it will report this link at about 22px, as it already does for the two policy links. That is the checker measuring the element box and being unable to see a pseudo-element. It is a false positive, and it is the same one already recorded in section 7 of the kickoff. */ p.sadaf-modal__step-text a::after { content: ""; position: absolute; left: -2px; right: -2px; /* MEASURED, NOT CALCULATED. -12px on a 21.6px line box should give 45.6px and hit-tested at 40. -15px hit-tests at 44 and over at every width this panel reaches. The arithmetic was wrong because the line box is not the same height as the inline box the overlay is anchored to. */ top: -15px; bottom: -15px; } /* -- Group three, the record and the buttons ------------------------------ The record of consent. Small, quiet, no fill and no border. It is a statement of what happened, and it belongs to the panel rather than sitting in the panel, which is what the bordered box it replaces did not manage. THE WORDING IS UNCHANGED and must stay so: the same acceptance is written to the consent log and to sadaf_booking_events, and the three have to agree. */ /* NO OPACITY HERE. It carried opacity .78 on the first pass, which measured 3.78 against the 4.5 small text needs. Quietness comes from size and from the hairline above it, never from fading text until it fails. Full body colour on ivory measures 6.21. */ p.sadaf-modal__record { margin: 0 0 14px; padding-top: 16px; border-top: 1px solid rgba(215, 180, 135, .5); text-align: left; font-family: "Inter Tight", sans-serif; font-size: 11.5px; line-height: 1.6; color: var(--sadaf-body); } p.sadaf-modal__record a { color: var(--sadaf-gold-deep); text-decoration: underline; text-underline-offset: 2px; } /* THE BUTTONS STAY ON SCREEN. The card scrolls inside itself when the content is taller than the window, which is right, but the two buttons are the point of the panel and they were the thing scrolled out of sight. Making the row sticky pins it to the bottom edge of the card, so it is visible at every size without the visitor having to discover that the card scrolls. Where nothing overflows, sticky does nothing at all, so the normal layout is unchanged. bottom:-1px rather than 0 closes a hairline gap that some browsers leave against a rounded, scrolling parent. SIDE BY SIDE FROM THE START. Both labels are short and the pair fits at 288px of card, which is the narrowest this panel ever gets. Two full width buttons stacked read as a list of two things to decide between; a pair reads as one closing row, which is what it is. */ .sadaf-modal__actions { position: sticky; bottom: -1px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 2px; background: var(--sadaf-ivory); } /* A short fade above the pinned row, so text scrolling underneath it stops softly rather than being cut off mid line. Decoration only. */ .sadaf-modal__actions::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; pointer-events: none; background: linear-gradient(to bottom, rgba(247, 244, 241, 0), var(--sadaf-ivory)); } /* The element type is named in front of the class throughout this block. A single class loses to the kit's own selectors, which style bare anchors and headings, and this panel sits inside the same document. */ a.sadaf-modal__btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; /* MEASURED: without this the pair wrapped to two lines below about 400px and the row came out 81px instead of 52px, which is most of the overflow at 320x568. Both labels are short enough to hold one line at every width this panel reaches, once the padding below comes down to suit. */ white-space: nowrap; padding: 12px 18px; border-radius: 11px; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-decoration: none; border: 1px solid var(--sadaf-mocha); transition: background .18s ease, color .18s ease, transform .18s ease; } a.sadaf-modal__btn i { font-size: 13px; } /* -webkit-text-fill-color is set as well as color, because the kit sets it on buttons and it beats color outright where it is present. */ a.sadaf-modal__btn--solid { background: var(--sadaf-mocha); color: var(--sadaf-gold-light); -webkit-text-fill-color: var(--sadaf-gold-light); } a.sadaf-modal__btn--solid:hover, a.sadaf-modal__btn--solid:focus-visible { background: #3F2E22; color: var(--sadaf-gold-light); -webkit-text-fill-color: var(--sadaf-gold-light); } a.sadaf-modal__btn--ghost { background: transparent; color: var(--sadaf-mocha); -webkit-text-fill-color: var(--sadaf-mocha); } a.sadaf-modal__btn--ghost:hover, a.sadaf-modal__btn--ghost:focus-visible { background: var(--sadaf-beige); color: var(--sadaf-mocha); -webkit-text-fill-color: var(--sadaf-mocha); } /* -- Wide enough for the two steps to sit side by side --------------------- 600px, not 768px. At 620px of viewport the card is already 540px wide and two columns of about 240px hold three lines each, which is comfortable. The old 768px breakpoint was chosen when the card had a tick column to fit. THE DIVIDER IS A REAL EDGE. A vertical hairline between the pair, with equal padding either side of it. The stacked horizontal rule is turned off here, or the layout would carry both. */ @media (min-width: 600px) { .sadaf-modal__card { max-width: 600px; padding: 34px 40px 24px; } /* 29px in a 520px measure, which is one line for this heading. Measured: 31px in the 424px measure a 540px card gave wrapped it to two lines and put 41px back into the card, which is more than the two column steps below had just saved. The heading staying on one line is worth more to this composition than the extra two points of size. */ h2.sadaf-modal__title { font-size: 29px; } .sadaf-modal__head { margin-bottom: 22px; padding: 0; } .sadaf-modal__next { grid-template-columns: 1fr 1fr; padding-top: 20px; margin-bottom: 20px; } .sadaf-modal__step { padding-right: 22px; } .sadaf-modal__step + .sadaf-modal__step { margin-top: 0; padding-top: 0; padding-right: 0; padding-left: 22px; border-top: 0; border-left: 1px solid rgba(215, 180, 135, .5); } .sadaf-modal__actions { gap: 12px; } } /* -- Phones --------------------------------------------------------------- The record and the button row were the two costs of the new composition on a narrow screen. Measured at 320x568 before this block: the record ran to four lines at 83px and the buttons wrapped to 81px, and the card overflowed its window by 34px. The record drops a point and a half. It is a note of what was recorded, read once if at all, and 10.5px is the size the site already uses for its other record labels. The wording is untouched. */ @media (max-width: 599px) { p.sadaf-modal__record { padding-top: 13px; margin-bottom: 12px; font-size: 10.5px; line-height: 1.55; } a.sadaf-modal__btn { min-height: 48px; padding: 11px 12px; font-size: 14px; gap: 7px; } } /* -- Short screens, which are not the same as narrow ones ------------------ A wide but short laptop window hits this and a tall narrow phone does not, which is why it is keyed on height. Nothing is removed: the type comes down a step and the padding tightens. */ @media (max-height: 700px) { .sadaf-modal__card { padding: 24px 24px 18px; } .sadaf-modal__mark { width: 46px; height: 46px; margin-bottom: 10px; } h2.sadaf-modal__title { font-size: 24px; margin-bottom: 8px; } p.sadaf-modal__lead { font-size: 14.5px; } .sadaf-modal__head { margin-bottom: 16px; } .sadaf-modal__next { padding-top: 14px; margin-bottom: 14px; } .sadaf-modal__step + .sadaf-modal__step { margin-top: 11px; padding-top: 11px; } p.sadaf-modal__record { padding-top: 12px; margin-bottom: 10px; } a.sadaf-modal__btn { min-height: 46px; font-size: 14.5px; } } @media (min-width: 600px) and (max-height: 700px) { .sadaf-modal__card { padding: 28px 32px 20px; } h2.sadaf-modal__title { font-size: 27px; } .sadaf-modal__head { padding: 0 12px; } } /* -- The smallest phones, 360px and under --------------------------------- 320 x 568 is the oldest iPhone SE and the shortest screen anyone is likely to use. Nothing is removed here either. */ /* OUR OWN LATER RULE WAS BEATING US, which is trap 8 in the kickoff and it caught this block on the first pass. The phone rules above set the record to 10.5px; this block sat further down the file at the same specificity and put it back to 11px, so the record stayed at 81px and 320x568 kept overflowing by 7px. Every value here is now either absent or lower than the block above, never a value that quietly undoes it. */ @media (max-width: 360px) { .sadaf-modal__card { padding: 20px 16px 16px; } .sadaf-modal__mark { width: 42px; height: 42px; margin-bottom: 8px; } .sadaf-modal__head { margin-bottom: 14px; } h2.sadaf-modal__title { font-size: 21px; } p.sadaf-modal__lead { font-size: 13.5px; } .sadaf-modal__next { padding-top: 14px; margin-bottom: 14px; } p.sadaf-modal__step-text { font-size: 13px; } p.sadaf-modal__record { font-size: 10.5px; line-height: 1.5; padding-top: 12px; } .sadaf-modal__actions { gap: 8px; } a.sadaf-modal__btn { padding-left: 8px; padding-right: 8px; font-size: 13.5px; } } @keyframes sadaf-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sadaf-modal-rise { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: none; } } @keyframes sadaf-modal-draw { to { stroke-dashoffset: 0; } } /* Somebody who has asked their device for less movement still sees the whole panel and the whole tick. They simply arrive rather than being drawn. */ @media (prefers-reduced-motion: reduce) { .sadaf-modal__card, .sadaf-modal__backdrop { animation: none; } .sadaf-modal__mark-ring, .sadaf-modal__mark-tick { animation: none; stroke-dashoffset: 0; } a.sadaf-modal__btn { transition: none; } } /* The line under a successful enquiry confirming the policy acceptance was recorded. Quieter than the thank you above it: it is reassurance, not the headline. MOVED HERE ON 18 AUGUST, and the reason is worth reading. It used to sit at the foot of the "fields added on 3 August" block, which was one of five enquiry blocks replaced wholesale by the redesign. It is not an enquiry FORM rule at all, it belongs to the success panel, so it went out with the block it happened to be filed under and the confirmation lost its divider. Nothing would have failed: the note still renders, just unstyled, and only on a page you have to submit the form to reach. It now sits with the rest of the panel it belongs to. */ .sadaf-form__ok-note { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(198, 161, 91, .30); font-size: 13.5px; line-height: 1.6; opacity: .9; } /* -------------------------------------------------------------------------- THE HOMEPAGE HERO NOTE. Sadaf asked on 15 August for the counters to go, for the invented 4.9/5 satisfaction score to go with them, and for the 1,500 figure to be qualified in her own words. What is left is a single sentence, so it is set as a sentence rather than dressed up as a statistic. The measure is capped so the line does not run the full width of a large screen, which would leave it looking like a stray caption in a wide band. MOVED HERE ON 18 AUGUST. This is a HOMEPAGE rule and it had been filed at the foot of the party table block, which the enquiry redesign replaced. It went out with that block, which would have shipped a homepage regression from a session that was only allowed to touch enquiry.php. Caught by comparing every selector in the old stylesheet against every selector in the new one, rather than by trusting the check that said no enquiry rules were left behind: that check could only ever find rules wrongly LEFT, never rules wrongly TAKEN. -------------------------------------------------------------------------- */ .sadaf-hero-note { margin: 0; max-width: 66ch; font-family: var(--sadaf-font-body, "Jost", sans-serif); font-size: 16px; line-height: 1.75; color: var(--sadaf-highlight, #F4E4C9); } @media (min-width: 1025px) { .sadaf-hero-note { font-size: 17px; } } @media (max-width: 767px) { .sadaf-hero-note { font-size: 15px; line-height: 1.7; } } /* ========================================================================== PORTFOLIO, VERSION 2 11 August 2026, from the reference layout Sadaf sent. WHAT SHE ASKED FOR: a premium gallery, less scrolling, better use of the screen, more photographs visible at once. WHAT WAS ACTUALLY WRONG, MEASURED ON THE BUILD SHE IS LOOKING AT: 1440px page 4402px gallery 2714px 3 columns tiles 424 x 530 1280px page 4091px gallery 2483px 3 columns tiles 387 x 484 Three columns of 22 photographs is eight rows, and each tile is over 500px tall on a laptop, so the gallery alone is nearly three screens. That is the scrolling she is complaining about, and it is a column count problem rather than a styling one. WHAT THE REFERENCE ACTUALLY DOES, past the first impression: five tight columns, small gaps, and a dark surround so the photographs are the only bright thing on the screen. The density is what makes it feel like a portfolio rather than a list, and the darkness is what makes it feel expensive. HOW IT IS ADAPTED RATHER THAN COPIED. The reference is near black. This site is warm mocha and champagne, and a near black band would look like a different website bolted on. The band below is Dark Mocha, the same colour as the header that is already at the top of every page, so the gallery reads as part of this site while getting the same effect: the photographs are the only light in the frame. ========================================================================== */ /* -- The band ------------------------------------------------------------ Scoped to the portfolio page's own container id, so no other page picks it up. The negative margin and matching padding pull the colour out to the full width of the window while leaving the content on its normal measure. */ .elementor-734 .elementor-element-2cb72ca { background: var(--sadaf-mocha); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); padding-top: 54px; padding-bottom: 60px; } /* The heading and lead sit on the band now, so they have to invert. */ /* THE HEADING WAS INVISIBLE ON THE FIRST ATTEMPT, and the screenshot is how it was caught: a 48px h2 reading "Recent Hair & Makeup Work" was still rgb(82, 61, 46), the same mocha as the band it now sits on. The rule below was being outranked by the kit's own heading selector, which carries the widget class as well. The lead was also too dim at .82. On a mocha band that measured under the 4.5:1 a body size needs, so it is now .92, and the eyebrow is full strength gold. Both measured with contrast.js rather than judged by eye. */ .elementor-734 .elementor-element-2cb72ca h2, .elementor-734 .elementor-element-2cb72ca .elementor-heading-title, .elementor-734 .elementor-element-2cb72ca .elementor-widget-heading .elementor-heading-title { color: var(--sadaf-gold-light) !important; } /* THE LEAD NEEDED THE SAME TREATMENT AS THE TABS, for the same reason. It measured rgb(110, 86, 71) against the mocha band, which is 1.6:1 and effectively unreadable. A bare `p` selector is 0-0-1 and the kit's own text-editor widget rule beats it comfortably. Going through .elementor-widget matches the kit's shape and wins on source order. */ .elementor-734 .elementor-element-2cb72ca .elementor-widget-text-editor p, .elementor-734 .elementor-element-2cb72ca .elementor-widget p, .elementor-734 .elementor-element-2cb72ca p { /* !important HERE IS OVERRIDING OUR OWN EARLIER RULE, NOT THE KIT'S. Tracing the matched rules showed the winner was `.sadaf-para p { color: var(--sadaf-body) !important }`, written earlier in this same stylesheet. Nothing beats an !important except another one, so raising specificity had no effect at all and the lead stayed at rgb(110, 86, 71) on mocha, about 1.6:1 and effectively unreadable. Worth recording as a cost rather than a fix: that earlier !important was added to win one argument with the kit, and it has now forced a second !important to win an argument with itself. Anything that later needs this paragraph a third colour will have to do the same. */ color: rgba(244, 228, 201, .92) !important; } .elementor-734 .elementor-element-2cb72ca .sadaf-eyebrow, .elementor-734 .elementor-element-2cb72ca .elementor-widget-text-editor p:first-child { color: var(--sadaf-gold-light); } /* -- The Hair and Makeup switch ------------------------------------------ Was three separate outlined buttons with a 10px gap, which is the same "several loose boxes" pattern the enquiry form was pulled up on: nothing said the three belonged together. Now one pill shaped group on a single translucent bed, so the switch is visibly one control. The chosen tab is a filled champagne pill against the mocha, which is the strongest contrast available on this band and needs no underline or tick to be read at a glance. */ .elementor-734 .sadaf-filters { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin: 28px auto 34px; padding: 5px; border: 1px solid rgba(215, 180, 135, .34); border-radius: 999px; background: rgba(0, 0, 0, .16); /* The row is a flex child of a column, so it would stretch the full width without this and the pill would be a bar. */ align-self: center; } /* .elementor-element IS IN THIS SELECTOR ON PURPOSE, AND IT IS NOT PADDING. The tab label came out mocha on mocha, invisible, and the cause was not the inner span as first assumed. Asking the browser which rules actually matched the button gave it exactly: .elementor-735 .elementor-element.elementor-element-2f71a62 .elementor-button { color: var(--e-global-color-primary) } [elementor-post-735.css] That is four classes, 0-4-0. The obvious `.elementor-734 .sadaf-filters .elementor-button` is three, 0-3-0, so every other property in this block applied and colour alone silently lost. The background, the radius and the padding all worked, which is what made it look like a deliberate styling choice rather than a defeat. Adding .elementor-element brings this to 0-4-0, and sadaf-theme.css is the last stylesheet on the page, so an equal score is settled by source order in our favour. !important would also have worked and would have taught nobody anything. NOTE THE 735. The portfolio page carries more than one elementor post id; the gallery rules use 734 and this widget's own sheet is 735. Anything that looks like it should work here and does not is worth checking against the real matched rules rather than assumed. */ .elementor-734 .sadaf-filters .elementor-element .elementor-button { min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: transparent; color: rgba(244, 228, 201, .78); font-family: "Inter Tight", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background-color .28s ease, color .28s ease; } /* THE LABEL IS AN INNER SPAN, AND SETTING COLOUR ON THE BUTTON DOES NOT REACH IT. The kit wraps every button label in .elementor-button-text and paints that span directly, so the first version of this left the unselected tab reading mocha on mocha: invisible, on the control the whole section is steered by. Found by dumping the computed colour of every text node on the band, not by looking at it, because "Makeup" was faintly visible enough in a screenshot to be mistaken for a styling choice. */ .elementor-734 .sadaf-filters .elementor-element .elementor-button .elementor-button-text, .elementor-734 .sadaf-filters .elementor-element .elementor-button span { color: inherit; } .elementor-734 .sadaf-filters .elementor-element .elementor-button:hover { background: rgba(215, 180, 135, .16); color: var(--sadaf-gold-light); } .elementor-734 .sadaf-filters .elementor-element .elementor-button[aria-pressed="true"] { background: var(--sadaf-gold-light); color: var(--sadaf-mocha); font-weight: 500; } /* The focus ring has to be visible against the mocha, which the default browser outline is not. */ .elementor-734 .sadaf-filters .elementor-element .elementor-button:focus-visible { outline: 2px solid var(--sadaf-gold-light); outline-offset: 3px; } /* -- The grid ------------------------------------------------------------ FIVE COLUMNS, WHICH IS THE WHOLE FIX. Twenty two photographs across five columns is five rows rather than eight, and each tile is narrower so each row is shorter as well. Both effects work in the same direction. The tile shape stays 4/5. Her photographs are portraits of faces and hair, and a squarer crop cuts the top of a hairstyle or the bottom of a neckline. The height comes out of the column count, not out of squashing the pictures. The gap drops from 16px to 10px. On a dark band a tight gap reads as one sheet of photographs, which is what the reference is doing. */ .elementor-734 .elementor-image-gallery .gallery { grid-template-columns: repeat(5, 1fr); --cols: 5; --gap: 10px; gap: var(--gap); } .elementor-734 .elementor-image-gallery .gallery-icon { border-radius: 3px; /* Lifts each photograph off the dark band very slightly, so a dark image does not bleed into the background and lose its edge. */ box-shadow: 0 1px 0 rgba(215, 180, 135, .14); } .elementor-734 .elementor-image-gallery .gallery-item a { position: relative; display: block; overflow: hidden; border-radius: 3px; } /* A slow warm wash on hover, so the whole sheet reads as interactive without anything jumping. The scale on the image itself is the kit's, kept. */ .elementor-734 .elementor-image-gallery .gallery-item a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(82, 61, 46, .34), transparent 55%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .elementor-734 .elementor-image-gallery .gallery-item a:hover::after, .elementor-734 .elementor-image-gallery .gallery-item a:focus-visible::after { opacity: 1; } .elementor-734 .elementor-image-gallery .gallery-item a:focus-visible { outline: 2px solid var(--sadaf-gold-light); outline-offset: 2px; } /* The empty line, when a filter finds nothing, is on the dark band too. */ .elementor-734 .sadaf-empty p { color: rgba(244, 228, 201, .8); } /* -- Column counts by width ---------------------------------------------- Five is only right when there is room for it. A 250px tile is a good size for a face; a 150px one is a thumbnail. The counts below keep the tile between roughly 210px and 280px at every desktop width. */ /* FIVE COLUMNS HOLDS DOWN TO 1200px, NOT 1440. The first attempt dropped to four below 1440, which meant the common 1280 and 1366 laptops got four columns and a 291px tile: larger than it needs to be, and an extra row of scrolling for nothing. At 1200 the five column tile is still about 220px, which is a comfortable size for a face. Measured at 1200, 1280, 1366 and 1440 rather than picked. */ @media (max-width: 1199px) { .elementor-734 .elementor-image-gallery .gallery { grid-template-columns: repeat(4, 1fr); --cols: 4; } } @media (max-width: 1024px) { .elementor-734 .elementor-image-gallery .gallery { grid-template-columns: repeat(3, 1fr); --cols: 3; } } @media (max-width: 767px) { .elementor-734 .elementor-element-2cb72ca { padding-top: 38px; padding-bottom: 42px; } .elementor-734 .elementor-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); --cols: 2; --gap: 8px; gap: var(--gap); } /* THE SWITCH STAYS ONE PILL ON A PHONE and does not wrap to three rows. 26px of padding a side does not fit three tabs at 320px, so the padding shrinks rather than the group breaking apart. The whole point of the pill is that the three are visibly one control, and that is worth more than a roomy tap target here: 44px of height is kept either way. */ .elementor-734 .sadaf-filters { display: flex; width: 100%; padding: 4px; } .elementor-734 .sadaf-filters .elementor-widget { flex: 1 1 0; } .elementor-734 .sadaf-filters .elementor-element .elementor-button { width: 100%; padding: 0 8px; font-size: 12px; letter-spacing: .04em; } } @media (prefers-reduced-motion: reduce) { .elementor-734 .elementor-image-gallery .gallery-item a::after, .elementor-734 .sadaf-filters .elementor-element .elementor-button { transition: none; } } /* ========================================================================== PORTFOLIO SPACING, 12 August 2026. MEASURED BEFORE TOUCHING ANYTHING, because "too much space" can come from several places at once and guessing at one of them moves the problem rather than fixing it. At 1440px the gallery began 871px down the page, 763px below the header, and it was four separate things stacked: 209px the page title block, its own 48px top and 34px bottom padding around an h1 that says "Portfolio" over a breadcrumb that also says Portfolio 200px the kit's .e-con-inner, 100px of padding top AND bottom, which is the single biggest contributor and was invisible because it is the kit's default rather than anything written for this site 54px the band padding added yesterday with the dark background 50px the margin under the heading, then 28px more above the switch The kit's 100px is the one worth knowing about. It is applied to every boxed container on every page, so this is not a portfolio problem, it is a portfolio symptom. The survey of the other pages is below. WHAT IS NOT CHANGED: nothing is removed, no font sizes shrink, and the heading keeps its scale. This is the gap between elements, not the elements. ========================================================================== */ /* The kit's 100px block padding on the gallery band. 28px is still a clear separation from the title above it, and it is the change that does most of the work. */ .elementor-734 .elementor-element-2cb72ca > .e-con-inner { padding-top: 28px; padding-bottom: 28px; } /* The band's own padding, added with the dark background. Reduced now that it is no longer sitting on top of the kit's 100. */ .elementor-734 .elementor-element-2cb72ca { padding-top: 30px; padding-bottom: 44px; } /* THE PAGE TITLE BLOCK, and the selector took two attempts. The first guessed at `main > .e-con:first-of-type > .e-con-inner` and missed entirely. Asking the browser which rules actually matched that element returned NOTHING for padding-top, which is the clue: Elementor does not set padding on .e-con-inner directly, it sets custom properties on the container and the inner reads them. So the padding is real, 48px of it, but no rule mentioning padding-top matches the inner at all. Going through the container's own element id is what reaches it. e962d47 is the block holding the h1 and the breadcrumb. */ .elementor-734 .elementor-element-e962d47 > .e-con-inner { padding-top: 18px !important; padding-bottom: 10px !important; } /* The h1 sits over a breadcrumb that says the same word. Nothing is removed, but the gap between them does not need to be 14px on top of the block padding. */ .elementor-734 .elementor-element-e962d47 h1 { margin-bottom: 6px; } /* Under the heading, and around the switch. 50px and 28px were both set when this column had far more room above it than it needs. */ .elementor-734 .elementor-element-3a61320 { margin-bottom: 20px; } .elementor-734 .sadaf-filters { margin-top: 18px; margin-bottom: 24px; } @media (max-width: 767px) { /* THE SAME FIX ON A PHONE, WHICH THE BRIEF ASKED FOR EXPLICITLY. The kit's 100px does not shrink on its own at any width, so a phone was carrying the same 200px of dead space in a viewport a third as tall. It is worth proportionally more here than on a desktop. */ .elementor-734 .elementor-element-2cb72ca > .e-con-inner { padding-top: 20px; padding-bottom: 20px; } .elementor-734 .elementor-element-2cb72ca { padding-top: 22px; padding-bottom: 30px; } .elementor-734 .elementor-element-3a61320 { margin-bottom: 14px; } .elementor-734 .sadaf-filters { margin-top: 14px; margin-bottom: 18px; } } /* -- The two things padding could not reach ------------------------------- After the padding was reduced the title block still measured 207px, barely two pixels less than before. Measuring the real boxes rather than the declared padding gave the reason: title container min-height: 208px The kit sets a minimum height on that block, so trimming its padding only moved the content around inside a box that was never going to shrink. This is the second time on this page that a declared value and the rendered result disagreed, and both times the declared value was the misleading one. 116px still holds the page title comfortably on one line with its breadcrumb, measured at 320 through 1920. */ .elementor-734 .elementor-element-e962d47 { min-height: 116px !important; } /* The gap between the heading and the lead measured 70px, and between the lead and the switch 38px. Both were set when this column had a great deal more room above it. Targeted through the widget wrapper because the same element id appears more than once on the page, so the plain class rule was landing on a different node than the one being measured. */ .elementor-734 .elementor-element-2cb72ca .elementor-element-3a61320 { margin-bottom: 16px !important; } .elementor-734 .elementor-element-2cb72ca .elementor-widget-text-editor { margin-bottom: 0 !important; } .elementor-734 .elementor-element-2cb72ca .elementor-widget-heading { margin-bottom: 0 !important; } @media (max-width: 767px) { .elementor-734 .elementor-element-e962d47 { min-height: 84px !important; } .elementor-734 .elementor-element-e962d47 > .e-con-inner { padding-top: 18px !important; padding-bottom: 12px !important; } .elementor-734 .elementor-element-2cb72ca .elementor-element-3a61320 { margin-bottom: 12px !important; } } /* -- The last 40px, which was the kit's widget rhythm --------------------- Two gaps stayed stubbornly 20px larger than anything written for them: above the switch and above the gallery. The cause is the kit's own `.elementor-widget:not(:last-child) { margin-bottom: 20px }`, which puts a fixed gap under every widget on the page regardless of what sits either side. It is zeroed inside this band only, and the spacing between these four elements is then set explicitly below. Scoped to the band so the rhythm on every other page is untouched. */ .elementor-734 .elementor-element-2cb72ca .elementor-widget:not(:last-child) { margin-bottom: 0; } .elementor-734 .elementor-element-2cb72ca > .e-con-inner { padding-top: 18px; padding-bottom: 24px; } .elementor-734 .elementor-element-2cb72ca { padding-top: 22px; } .elementor-734 .sadaf-filters { margin-top: 20px; margin-bottom: 22px; } @media (max-width: 767px) { .elementor-734 .elementor-element-2cb72ca > .e-con-inner { padding-top: 14px; padding-bottom: 18px; } .elementor-734 .elementor-element-2cb72ca { padding-top: 16px; } .elementor-734 .sadaf-filters { margin-top: 14px; margin-bottom: 16px; } } /* The residual 20px above the switch and above the gallery survived the rule above, because the kit hangs that margin on .elementor-element rather than on .elementor-widget. Targeting both is what actually closes it. */ .elementor-734 .elementor-element-2cb72ca .elementor-element:not(:last-child) { margin-bottom: 0; } .elementor-734 .elementor-element-e962d47 { min-height: 96px !important; } @media (max-width: 767px) { .elementor-734 .elementor-element-e962d47 { min-height: 72px !important; } } /* ========================================================================== SITE WIDE SPACING, 12 August 2026. The portfolio was not a portfolio problem. Surveying every page turned up the same two blocks of dead space on all of them: 209px the page title block, min-height 208px, on services, about, enquiry, booking policies, privacy and terms 200px the kit's .e-con-inner default of 100px padding top and bottom on the first content block Together that is about 400px on every inner page before the content starts, none of it written for this site. THE SELECTOR IS DELIBERATELY STRUCTURAL, NOT A LIST OF IDS. Every page uses a different element id for the same block: e962d47, 639fff8, 559a2a8, c627413. Listing them would work today and quietly miss the next page anyone adds. `main .e-con:first-of-type` is the same block on all of them, checked on six pages. IT CORRECTLY SKIPS THE HOMEPAGE. index.html has no page title block, its first container is the hero, and the check confirmed the title block is not the first .e-con there. The hero keeps its full height, which is right: it is the one place on the site where a tall opening is the design. NOTHING IS REMOVED. No headings go, no breadcrumbs go, no font sizes change. ========================================================================== */ main > .e-con:first-of-type { min-height: 0 !important; } main > .e-con:first-of-type > .e-con-inner { padding-top: 26px !important; padding-bottom: 16px !important; } main > .e-con:first-of-type h1 { margin-bottom: 6px; } /* The kit's 100px on the first content block below the title. Halved rather than removed: this is the seam between the page title and the content, and it is the one gap on these pages that is doing real work. */ main > .e-con:nth-of-type(2) > .e-con-inner { padding-top: 52px; padding-bottom: 52px; } @media (max-width: 767px) { main > .e-con:first-of-type > .e-con-inner { padding-top: 18px !important; padding-bottom: 10px !important; } main > .e-con:nth-of-type(2) > .e-con-inner { padding-top: 32px; padding-bottom: 32px; } } /* -------------------------------------------------------------------------- THE FOLLOW ALONG GALLERY, homepage and About page. 13 August 2026. Eight tiles, four across on a laptop and two on a phone. IT WAS NEVER A GRID. It is WordPress's own gallery markup, which lays figures out as inline-block at a percentage width taken from the gallery-columns-3 class on the wrapper. That is why nine tiles came out three across on a laptop and then went to ONE per row on a phone, which made this section about 18,000px tall on a 390px screen. Measured on the deployed build as well as this one, so it was not something the image swap introduced. SCOPED TO THE TWO WIDGETS BY ID. There is a third gallery on this site, the portfolio on elementor-734, and it is a real grid with its own column counts and a filter. An unscoped .gallery rule would land on it as well and undo all of that. These two ids are the homepage and the About page. The inline-block width the kit sets has to be overridden with !important, because WordPress's own gallery CSS carries it at a higher specificity than a plain class selector here. -------------------------------------------------------------------------- */ .elementor-element-83a5f3b .elementor-image-gallery .gallery, .elementor-element-f3cf486 .elementor-image-gallery .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 !important; } .elementor-element-83a5f3b .elementor-image-gallery .gallery-item, .elementor-element-f3cf486 .elementor-image-gallery .gallery-item { width: auto !important; max-width: 100% !important; float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; vertical-align: top; } .elementor-element-83a5f3b .elementor-image-gallery .gallery-icon, .elementor-element-f3cf486 .elementor-image-gallery .gallery-icon { margin: 0 !important; overflow: hidden; border-radius: 4px; /* Lifts each tile off the dark band very slightly, the same treatment the portfolio grid uses, so a dark photograph keeps its edge. */ box-shadow: 0 1px 0 rgba(215, 180, 135, .14); } /* The tiles are square and the photographs are not, so the crop is done in the file by make_follow_images.py with a focal point chosen per photograph. aspect-ratio here is the guarantee that the tile is square whatever the file turns out to be, not the thing doing the cropping. */ .elementor-element-83a5f3b .elementor-image-gallery .gallery-item img, .elementor-element-f3cf486 .elementor-image-gallery .gallery-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: 0 !important; } @media (max-width: 1024px) { .elementor-element-83a5f3b .elementor-image-gallery .gallery, .elementor-element-f3cf486 .elementor-image-gallery .gallery { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media (max-width: 767px) { .elementor-element-83a5f3b .elementor-image-gallery .gallery, .elementor-element-f3cf486 .elementor-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* -------------------------------------------------------------------------- THE INSTAGRAM BUTTON, under the Follow Along tiles. 13 August 2026. The tiles stopped being links, so this is the one way out of the section to her profile. Gold on the dark mocha band, which is the same pairing the hero's "Request Your Date" uses on a dark ground, so it reads as the site's own button rather than a new kind of thing. -------------------------------------------------------------------------- */ .sadaf-ig { display: flex; justify-content: center; margin-top: 28px; } a.sadaf-ig__btn { display: inline-flex; align-items: center; gap: 10px; /* 52px, comfortably past the 44px a finger needs, and the padding is on the anchor itself rather than an overlay because this is a block level control with nothing sitting over it. */ min-height: 52px; padding: 14px 30px; border-radius: 999px; border: 1px solid var(--sadaf-gold); background: var(--sadaf-gold); color: var(--sadaf-mocha); -webkit-text-fill-color: var(--sadaf-mocha); font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } a.sadaf-ig__btn i { font-size: 17px; line-height: 1; } a.sadaf-ig__btn:hover, a.sadaf-ig__btn:focus-visible { background: var(--sadaf-gold-light); border-color: var(--sadaf-gold-light); color: var(--sadaf-mocha); -webkit-text-fill-color: var(--sadaf-mocha); transform: translateY(-1px); } @media (max-width: 767px) { .sadaf-ig { margin-top: 20px; } a.sadaf-ig__btn { padding: 13px 22px; font-size: 14.5px; } } /* -------------------------------------------------------------------------- THE BRAND STRIP. The professional products Sadaf uses. 13 August 2026. A marquee, but a quiet one. The brief asked for something modern that did not distract, and a fast or bouncing strip is the opposite of premium, so this moves at roughly 28px a second, in one direction, with no easing and no pause between loops. At that speed it reads as drift rather than as motion competing with the words above it. HOW THE LOOP IS SEAMLESS. The generator prints the eleven logos twice into one flex track, and the animation translates the track by exactly -50%. At the moment the first copy has fully left, the second copy is sitting where the first began, so the reset is invisible. This only holds while both copies are identical and the gap between items is the same everywhere, which is why the gap lives on the track and not on the items. VERTICAL SPACE IS DELIBERATELY TIGHT. The brief was explicit about not leaving large empty bands. Every other section on this page runs 100px of padding top and bottom; this one runs 60px, because it is a strip rather than a section with content to read, and it has hairlines above and below instead of empty space to separate it from its neighbours. Section 5 of the kickoff: an edge, not a gap. THE LOGOS ARE ONE COLOUR, set by make_brand_logos.py, not by a CSS filter. A filter would have to guess at eleven different source colours and would leave the gold and the pink ones looking washed out. -------------------------------------------------------------------------- */ .sadaf-brands { /* Hairlines rather than empty space, so it separates from what is above and below without adding height. */ border-top: 1px solid rgba(215, 180, 135, .4); border-bottom: 1px solid rgba(215, 180, 135, .4); padding: 60px 0 56px; } /* THE MASK IS ON A WRAPPER, NOT ON THE SECTION. Fading the section itself would fade the heading with it. This element exists only to clip the track and soften both ends, so a logo dissolves as it leaves instead of being sliced off against the edge of the screen, which is the difference between a designed strip and a row that happens to be cut off. -webkit-mask-image as well as mask-image: Safari still wants the prefix for this, and Safari is the browser this site is least tested in. Where neither is supported the strip simply has hard edges, which is what it had before. */ .sadaf-brands__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } .sadaf-brands__head { max-width: 1400px; margin: 0 auto 34px; padding: 0 48px; text-align: center; } .sadaf-brands__eyebrow { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 500; color: var(--sadaf-mocha); } h2.sadaf-brands__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 48px; font-weight: 300; letter-spacing: .6px; line-height: 1.15; color: var(--sadaf-mocha); } /* The track holds both copies side by side and is what actually moves. width: max-content stops flex from squashing the items to fit the screen, which would break the 50% arithmetic the loop depends on. */ .sadaf-brands__track { display: flex; width: max-content; animation: sadaf-brands-scroll 46s linear infinite; } /* A hover pause, so somebody who wants to read a name can stop it. */ .sadaf-brands:hover .sadaf-brands__track { animation-play-state: paused; } .sadaf-brands__run { display: flex; align-items: center; gap: 64px; /* This is a ul, and the kit puts padding and bullets on those. */ margin: 0; padding: 0 32px 0 0; list-style: none; } .sadaf-brands__item { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; } /* THE ELEMENT TYPE AND THE SECTION ARE BOTH NAMED, and that is not decoration. The kit carries `.elementor img { height: auto; max-width: 100% }`, which at 0,1,1 beats a bare `.sadaf-brands__logo` at 0,1,0. The first version of this rule set a height and a max-width and neither applied: measured, every logo rendered at its full 300px intrinsic width. This selector is 0,2,1. NO HEIGHT IS SET HERE. make_brand_logos.py already fits every mark into one 300x76 box, so MAC lands at 300x32 and NARS at 179x76 and both are right. The generator writes half of each file's real size onto the tag, so they render at 2x density in the proportions the box already gave them. Forcing a common height here would stretch the wide ones and undo that. */ .sadaf-brands img.sadaf-brands__logo { display: block; /* --w is written inline per logo by the generator and is half the file's real width, so the mark renders at 2x density. --brand-scale is how the breakpoints shrink all eleven together without touching the proportions each one was fitted to. */ width: calc(var(--w) * var(--brand-scale, 1)); height: auto; max-width: none; opacity: .82; transition: opacity .2s ease; } .sadaf-brands__item:hover img.sadaf-brands__logo { opacity: 1; } @keyframes sadaf-brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 1024px) { .sadaf-brands { padding: 48px 0 44px; } .sadaf-brands__head { margin-bottom: 26px; padding: 0 32px; } h2.sadaf-brands__title { font-size: 38px; } .sadaf-brands__run { gap: 52px; padding-right: 26px; } } @media (max-width: 767px) { .sadaf-brands { padding: 38px 0 34px; } .sadaf-brands__head { margin-bottom: 22px; padding: 0 20px; } .sadaf-brands__eyebrow { font-size: 13px; margin-bottom: 8px; } h2.sadaf-brands__title { font-size: 28px; } .sadaf-brands__run { gap: 38px; padding-right: 19px; } /* 0.78 of the desktop size. Set on the section so it reaches every logo, and applied to the width rather than to a height, so the proportions each mark was fitted to survive the breakpoint and the layout box shrinks with the image instead of leaving a hole where the full size one was. */ .sadaf-brands { --brand-scale: .78; } /* Faster in absolute terms would feel frantic on a small screen, but the track is shorter here, so the duration comes down to keep the apparent speed the same. */ .sadaf-brands__track { animation-duration: 34s; } } /* Somebody who has asked for less movement gets the whole strip standing still, wrapped onto as many lines as it needs, with nothing hidden. */ @media (prefers-reduced-motion: reduce) { /* With the strip standing still nothing runs off the edge, so the fade has nothing to soften and would only dim the outermost logos. */ .sadaf-brands__viewport { -webkit-mask-image: none; mask-image: none; } .sadaf-brands__track { animation: none; width: auto; justify-content: center; } .sadaf-brands__run { flex-wrap: wrap; justify-content: center; gap: 34px 44px; padding-right: 0; } /* The duplicate exists only to make the loop seamless. With no loop it is eleven logos printed twice. */ .sadaf-brands__run[aria-hidden="true"] { display: none; } } /* ========================================================================== ENQUIRY PAGE Redesigned 18 August 2026. This block REPLACES five earlier ones. WHAT WAS REMOVED AND WHY IT WAS REMOVED RATHER THAN ADDED TO The enquiry page had accumulated 1,605 lines of stylesheet across five blocks written on five different days: the 2 August rebuild, the 3 August fields, the 11 August "version 2" pass scoped to .sadaf-enq--v2, the 12 August policy tick, and the 17 August party table. Each later block overrode the one before it rather than replacing it, so a single control could be styled in three places and the winner decided by specificity. One comment in the old file spent a paragraph explaining why a rule needed a 0-2-0 selector to beat a 0-1-0 one further up the same file. Saman asked on 18 August for the form to be redesigned rather than patched, and a sixth override layer is the definition of patching. So all five went and this is written once, in one place, in order. THE TWO FAULTS IN HIS SCREENSHOTS, MEASURED BEFORE ANYTHING WAS TOUCHED 1. THE FORM WAS 587px WIDE ON A 1920px SCREEN, and 587px at 1440 too. It stopped growing at 1280 because the container was capped at 1290px and the aside took a fixed slice of it. Everything he described as broken in the party table followed from that one number: four columns in 587px gave the service dropdown 161px, and at 161px "Please choose" runs under the chevron. It was never a table bug, it was a width bug one level up. It is now 892px at 1440 and 984px at 1920, measured on the built page. 2. THE GRID KNEW TWO WIDTHS, HALF AND FULL, so anything odd left a hole one column wide. The clip-in extensions card was half a row with nothing beside it, which is the blank space he circled, and the people count did the same thing a section earlier. The grid is twelve columns now, so a row can hold two, three or four things and there is no arrangement of the current fields that leaves a hole. THE STRUCTURE, WHICH IS THE ACTUAL REDESIGN Before: one white panel, holding six tinted panels, holding tinted fields, all three layers carrying a champagne border. On 11 August the middle layer's border was taken off to fix that, which left the sections hard to tell apart, which is Saman's third complaint. Now there are two layers, not three, and each one means exactly one thing: ivory the page white sheet one section of the form hairline box something you fill in The outer panel is gone. The six sections ARE the cards. A seventh block, the only dark one on the page, holds the tick and the only button. WHY THE PARTY TABLE SWITCHES ON A CONTAINER QUERY AND NOT A MEDIA QUERY Whether that table has room to be a table depends on the width of the FORM, not the width of the window, and the two come apart badly here: at 1024 the aside sits above the form and the form has 968px, while at 1100 the aside sits beside it and the form has 764px. A media query would have to pick one and be wrong at the other. A container query asks the only question that matters, which is how wide the form actually is. A browser without container query support never matches the rule and gets the stacked card layout, which is the mobile layout: taller, never broken. ========================================================================== */ .sadaf-enq { /* The page's own off white, so the section reads as part of the page rather than as a card floating on it. */ background: var(--sadaf-ivory); padding: 44px 0 52px; } /* -- The two containers. ------------------------------------------------- THE MAX WIDTH GROWS IN THREE STEPS, which is the fix for fault 1. It used to be a flat 1290px at every size above 1290, so a 2560px monitor showed exactly what a 1290px laptop showed and the extra 1,270px did nothing. */ .sadaf-enq__intro, .sadaf-enq__grid { width: 100%; max-width: 1180px; margin: 0 auto; /* The site's standard gutter. Below 1400px the kit gives its containers no side padding at all, which is trap 3, so every section we write needs its own. */ padding: 0 24px; } .sadaf-enq__intro { margin-bottom: 30px; } p.sadaf-enq__intro-lead { max-width: 760px; } .sadaf-enq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; } /* -- Shared small type ---------------------------------------------------- */ .sadaf-enq__eyebrow { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sadaf-gold-deep); } .sadaf-enq__eyebrow--light { color: var(--sadaf-gold); } h2.sadaf-enq__intro-head, h2.sadaf-enq__head { margin: 0 0 14px; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.16; font-weight: 600; letter-spacing: .005em; color: var(--sadaf-mocha); } .sadaf-enq__intro-lead, .sadaf-enq__lead { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 15px; line-height: 1.7; color: var(--sadaf-body); } /* Visually hidden, but read aloud. Every control inside the party table has one of these, so a screen reader names the control even when the visible column heading is several rows away. */ .sadaf-enq__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== THE COLUMN BESIDE THE FORM ========================================================================== */ .sadaf-enq__aside-inner { display: grid; gap: 22px; } /* -- The index, added 18 August. ------------------------------------------ Six anchor links, one per section. No script, no scroll spy. The form is long because Sadaf asked for it to be long, so the answer to "it is hard to scan" is to show its shape rather than to cut it down. */ .sadaf-enq__index { padding: 20px 20px 14px; background: #fff; border: 1px solid rgba(198, 161, 91, .28); border-radius: 3px; } p.sadaf-enq__index-head { margin: 0 0 12px; font-family: "Inter Tight", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sadaf-gold-deep); } ol.sadaf-enq__index-list { margin: 0; padding: 0; list-style: none; } .sadaf-enq__index-item + .sadaf-enq__index-item { border-top: 1px solid rgba(198, 161, 91, .20); } a.sadaf-enq__index-link { display: flex; align-items: baseline; gap: 10px; /* 40px tall including the padding, so it clears the 24px tap target minimum with room to spare. Checked with a hit test, not by adding up the numbers. */ padding: 10px 2px; font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--sadaf-body); transition: color .25s ease; } a.sadaf-enq__index-link:hover, a.sadaf-enq__index-link:focus-visible { color: var(--sadaf-mocha); } .sadaf-enq__index-num { flex: 0 0 auto; font-family: "Cormorant Garamond", Georgia, serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--sadaf-gold-warm); } /* -- Worth having ready ---------------------------------------------------- */ .sadaf-enq__ready-block { padding: 20px 20px 6px; background: #fff; border: 1px solid rgba(198, 161, 91, .28); border-radius: 3px; } h3.sadaf-enq__ready-head { margin: 0 0 12px; font-family: "Inter Tight", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sadaf-gold-deep); } ul.sadaf-enq__ready { margin: 0; padding: 0; list-style: none; } .sadaf-enq__ready-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(198, 161, 91, .20); font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.5; color: var(--sadaf-body); } .sadaf-enq__ready-item:last-child { border-bottom: 0; } .sadaf-enq__ready-item i { flex: 0 0 auto; margin-top: 3px; font-size: 13px; color: var(--sadaf-gold-warm); } /* -- Her contact details --------------------------------------------------- */ .sadaf-enq__contact { padding: 20px 20px 22px; background: #fff; border: 1px solid rgba(198, 161, 91, .28); border-radius: 3px; } p.sadaf-enq__contact-head { margin: 0 0 14px; font-family: "Inter Tight", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sadaf-gold-deep); } a.sadaf-enq__contact-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-family: "Inter Tight", sans-serif; font-size: 15px; line-height: 1.5; text-decoration: none; color: var(--sadaf-mocha); transition: color .25s ease; word-break: break-word; } a.sadaf-enq__contact-row:hover, a.sadaf-enq__contact-row:focus-visible { color: var(--sadaf-gold-deep); } .sadaf-enq__contact-row i { flex: 0 0 auto; font-size: 13px; color: var(--sadaf-gold-warm); } p.sadaf-enq__contact-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(198, 161, 91, .22); font-family: "Inter Tight", sans-serif; font-size: 13px; line-height: 1.65; color: var(--sadaf-body); } /* ========================================================================== THE FORM ========================================================================== */ /* The container query lives here. See the note at the top of this block for why the party table asks the form how wide it is rather than asking the window. */ .sadaf-enq__main { min-width: 0; container-type: inline-size; container-name: enqmain; } .sadaf-enq__panel-head { margin: 0 0 26px; } .sadaf-enq__panel-head p.sadaf-enq__lead { margin: 0; max-width: 68ch; } .sadaf-enq__form { display: block; } /* -- One section, one sheet of paper --------------------------------------- */ .sadaf-enq__sheet { /* A fieldset carries browser defaults that have to be cleared before it can be styled at all. */ margin: 0 0 20px; padding: 24px 22px 26px; border: 0; border-radius: 3px; background: #fff; min-width: 0; /* Raised paper, not a dialog box. Two shadows: a tight one that draws the edge and a wide soft one that lifts it off the ivory. */ box-shadow: 0 1px 2px rgba(82, 61, 46, .05), 0 14px 34px -26px rgba(82, 61, 46, .45); /* So a jump from the index does not land the heading underneath the site header. */ scroll-margin-top: 96px; } /* A legend sits in the border by default and will not take a background or full width. Floating it turns it into an ordinary block that spans the sheet, which every current browser handles, and it keeps the element a real so screen readers still announce it with each field in the section. */ legend.sadaf-enq__sheet-head { float: left; width: 100%; margin: 0; padding: 0 0 14px; border-bottom: 1px solid rgba(198, 161, 91, .30); display: flex; align-items: baseline; gap: 12px; } /* Clears the float above so the fields start below the heading rather than beside it. */ legend.sadaf-enq__sheet-head + * { clear: both; } .sadaf-enq__sheet-num { flex: 0 0 auto; font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--sadaf-gold-warm); /* Sits on the baseline of the title, so the pair reads as one line of type rather than as a badge with a heading next to it. */ padding-bottom: 1px; } .sadaf-enq__sheet-title { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: .005em; color: var(--sadaf-mocha); } .sadaf-enq__sheet-note { clear: both; margin: 14px 0 0; font-family: "Inter Tight", sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--sadaf-body); max-width: 70ch; } /* The same words, sitting beside the fields instead of under the heading. Section 03 uses this so its first row is not a third full. */ p.sadaf-enq__sheet-beside { margin: 0; align-self: center; font-family: "Inter Tight", sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--sadaf-body); } /* -- The twelve column field grid ------------------------------------------ FAULT 2 IN THE SCREENSHOTS IS FIXED HERE AND NOWHERE ELSE. Every field declares how many twelfths it wants. Below 700px they all collapse to full width, because a third of a phone is not a field, it is a stripe. */ .sadaf-enq__fields { clear: both; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 18px; padding-top: 20px; } .sadaf-enq__field { min-width: 0; grid-column: 1 / -1; } /* -- Labels, hints and the optional tag ------------------------------------ */ label.sadaf-enq__label { display: block; margin: 0 0 7px; font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .005em; color: var(--sadaf-mocha); } .sadaf-enq__req { color: var(--sadaf-gold-deep); } .sadaf-enq__opt { margin-left: 5px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sadaf-gold-warm); } .sadaf-enq__hint { display: block; margin: -3px 0 8px; font-family: "Inter Tight", sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--sadaf-body); } /* -- The controls ---------------------------------------------------------- Element selectors are included so these beat the kit's own form styling, which is loaded on this page for the header band and would otherwise draw its heavy focus box. That box was the client's second screenshot on 2 August. */ .sadaf-enq input.sadaf-enq__input, .sadaf-enq select.sadaf-enq__input, .sadaf-enq textarea.sadaf-enq__input { display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 15px; font-family: "Inter Tight", sans-serif; /* 16px, not 15. Anything under 16 makes iOS Safari zoom the page when the field is focused, and the page then stays zoomed for the rest of the form. */ font-size: 16px; line-height: 1.45; color: var(--sadaf-mocha); background: #fff; border: 1px solid rgba(198, 161, 91, .48); border-radius: 2px; box-shadow: none; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .25s ease, box-shadow .25s ease; } .sadaf-enq input.sadaf-enq__input::placeholder, .sadaf-enq textarea.sadaf-enq__input::placeholder { color: rgba(110, 86, 71, .55); } .sadaf-enq input.sadaf-enq__input:hover, .sadaf-enq select.sadaf-enq__input:hover, .sadaf-enq textarea.sadaf-enq__input:hover { border-color: rgba(198, 161, 91, .82); } .sadaf-enq input.sadaf-enq__input:focus, .sadaf-enq select.sadaf-enq__input:focus, .sadaf-enq textarea.sadaf-enq__input:focus, .sadaf-enq input.sadaf-enq__input:focus-visible, .sadaf-enq select.sadaf-enq__input:focus-visible, .sadaf-enq textarea.sadaf-enq__input:focus-visible { border-color: var(--sadaf-gold-deep); /* A ring rather than a box. The kit drew a 2px hard outline offset from the field, which is what read as heavy. */ box-shadow: 0 0 0 3px rgba(215, 180, 135, .32); } .sadaf-enq textarea.sadaf-enq__textarea { min-height: 132px; padding: 14px 15px; line-height: 1.6; resize: vertical; } .sadaf-enq textarea.sadaf-enq__textarea--short { min-height: 96px; } /* -- Dropdowns ------------------------------------------------------------- THE PADDING ON THE RIGHT IS THE FIX FOR THE CLIPPED WORDS in Saman's first screenshot, together with the width fix above it. The chevron is drawn 16px from the right edge and is 12px wide, so anything under 40px of padding lets a long option run underneath it. It was 34px. */ .sadaf-enq__select-wrap { position: relative; } .sadaf-enq select.sadaf-enq__select { padding-right: 42px; cursor: pointer; text-overflow: ellipsis; } .sadaf-enq__select-wrap i { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 11px; color: var(--sadaf-gold-deep); pointer-events: none; } /* An unanswered dropdown reads as a placeholder, not as an answer. */ .sadaf-enq__select:has(option[value=""]:checked) { color: rgba(110, 86, 71, .55); } .sadaf-enq__select option { color: var(--sadaf-mocha); } /* The date and time pickers. The native indicator is left in place, because removing it removes the only way to open the picker with the mouse, but it is toned down to match the chevrons. */ .sadaf-enq input.sadaf-enq__input[type="date"]::-webkit-calendar-picker-indicator, .sadaf-enq input.sadaf-enq__input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; } .sadaf-enq input.sadaf-enq__input[type="date"]::-webkit-calendar-picker-indicator:hover, .sadaf-enq input.sadaf-enq__input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* -- Errors ---------------------------------------------------------------- */ .sadaf-enq input.sadaf-enq__input[aria-invalid="true"], .sadaf-enq select.sadaf-enq__input[aria-invalid="true"], .sadaf-enq textarea.sadaf-enq__input[aria-invalid="true"] { border-color: #A8412B; background: #FDF7F5; } .sadaf-enq input.sadaf-enq__input[aria-invalid="true"]:focus, .sadaf-enq select.sadaf-enq__input[aria-invalid="true"]:focus, .sadaf-enq textarea.sadaf-enq__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(168, 65, 43, .18); } p.sadaf-enq__error { margin: 7px 0 0; font-family: "Inter Tight", sans-serif; font-size: 13px; line-height: 1.5; color: #A8412B; } /* -- Question cards -------------------------------------------------------- A question whose answer is a set of choices gets an edge of its own, so what separates it from its neighbour is a boundary rather than a slightly wider gap. That distinction was learnt the hard way on 11 August. */ .sadaf-enq fieldset.sadaf-enq__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .sadaf-enq fieldset.sadaf-enq__qcard { height: 100%; padding: 16px 17px 18px; border: 1px solid rgba(198, 161, 91, .40); border-radius: 3px; background: #FDFBF7; } .sadaf-enq legend.sadaf-enq__qcard-head { float: left; width: 100%; margin: 0 0 8px; padding: 0; } .sadaf-enq legend.sadaf-enq__qcard-head + * { clear: both; } /* -- Studio, mobile or not sure -------------------------------------------- */ .sadaf-enq__radios { clear: both; display: grid; grid-template-columns: 1fr; gap: 10px; } label.sadaf-enq__radio { position: relative; display: block; margin: 0; cursor: pointer; } /* Transparent rather than display:none, so the control keeps its place in the tab order and a keyboard can still reach it. */ .sadaf-enq__radio input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sadaf-enq__radio-box { display: block; height: 100%; padding: 13px 15px; background: #fff; border: 1px solid rgba(198, 161, 91, .45); border-radius: 2px; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .sadaf-enq__radio-name { display: block; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sadaf-mocha); } .sadaf-enq__radio-note { display: block; margin-top: 3px; font-family: "Inter Tight", sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--sadaf-body); } .sadaf-enq__radio:hover .sadaf-enq__radio-box { border-color: rgba(198, 161, 91, .85); } .sadaf-enq__radio input:checked + .sadaf-enq__radio-box { border-color: var(--sadaf-gold-deep); background: #FBF4E9; box-shadow: inset 3px 0 0 var(--sadaf-gold-warm); } .sadaf-enq__radio input:focus-visible + .sadaf-enq__radio-box { border-color: var(--sadaf-gold-deep); box-shadow: 0 0 0 3px rgba(215, 180, 135, .32); } /* -- The segmented control, for clip-in extensions ------------------------- */ .sadaf-enq__seg { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(198, 161, 91, .45); border-radius: 2px; overflow: hidden; background: #fff; } .sadaf-enq__seg-opt { position: relative; display: block; margin: 0; cursor: pointer; } .sadaf-enq__seg-opt + .sadaf-enq__seg-opt { border-left: 1px solid rgba(198, 161, 91, .40); } .sadaf-enq__seg-opt input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sadaf-enq__seg-box { display: flex; align-items: center; justify-content: center; /* 44px tall, which clears the tap target minimum on a phone. */ min-height: 44px; padding: 9px 6px; text-align: center; font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--sadaf-body); transition: background-color .25s ease, color .25s ease; } .sadaf-enq__seg-opt:hover .sadaf-enq__seg-box { background: #FBF6EE; } .sadaf-enq__seg-opt input:checked + .sadaf-enq__seg-box { background: var(--sadaf-gold-deep); color: #fff; font-weight: 600; } .sadaf-enq__seg-opt input:focus-visible + .sadaf-enq__seg-box { box-shadow: inset 0 0 0 2px rgba(215, 180, 135, .75); } /* The conditional travel field. Hidden by markup, revealed by the script. */ .sadaf-enq__conditional[hidden] { display: none; } /* THE CONDITIONAL BRANCHES, ADDED 23 AUGUST FOR PART B. WRITTEN OUT EXPLICITLY, AND IT IS NOT REDUNDANT. The `hidden` attribute is only a default of `display: none`, and this page carries a kit stylesheet that sets display on plain elements. A default loses to a rule. That is exactly why the line above this one exists, and a branch that stayed visible would show a bride the Formal questions and the Special Occasion questions at the same time, which is the precise complaint Part B was commissioned to fix. THE ADD PERSON BUTTON GOES THE OTHER WAY. It is hidden in the markup and revealed by the script, because it cannot do anything without the script that clones the row. A button that does nothing when pressed is worse than no button. */ .sadaf-enq__branch[hidden] { display: none; } /* ON A PHONE THE FORM COMES FIRST. Added 24 August. Measured before this rule: the first field, "Your name", sat 1745px down the page. A bride on a phone had to scroll past the intro and then the whole 837px sidebar, the section index, the what-to-have-ready list and the contact card, before she could type a single character. That is the opposite of what Sadaf asked for. Her words on 19 August were that a client "may see the amount of information required and decide not to complete it", and 1745px of preamble is precisely that impression, delivered before the form has even begun. THE SECTION INDEX IS HIDDEN HERE, not merely moved. It exists to say where you are in a column that travels beside the form, and on a phone there is no such column: it would be a list of links pointing back up a page you have already scrolled past. The what-to-have-ready list and her contact details keep their place below the form, where they read as a footer to it rather than a barrier in front of it. Nothing changes above 1080px, where the two-column layout and the travelling sidebar do their job. */ @media (max-width: 1079px) { .sadaf-enq__main { order: 1; } .sadaf-enq__aside { order: 2; } .sadaf-enq__index { display: none; } } /* THE EMPTY STATE FOR SECTION 03. Added 24 August. A panel with a heading and nothing under it reads as a page that failed to load. One quiet line turns it into a question waiting for an answer. It is deliberately understated: this is guidance, not an error. */ .sadaf-enq__empty { grid-column: 1 / -1; margin: 0; padding: 4px 0 2px; color: var(--sadaf-ink-soft, #6B5A48); font-size: 16px; font-style: italic; } .sadaf-enq__empty[hidden] { display: none; } /* WHERE YOU ARE IN THE FORM, shown in the sidebar as you scroll. This is the closest thing to a progress indicator that suits Sadaf's brief. She was worried that a client would see how much was being asked and give up, so a "step 3 of 5" counter is the wrong instrument: it advertises the length. Quietly marking the section you are currently in gives the same sense of place without ever telling a bride how much is left. The whole effect degrades to nothing without JavaScript, which is correct: it is orientation, not function. */ .sadaf-enq__index-item.is-current a.sadaf-enq__index-link { color: var(--sadaf-mocha, #523D2E); } .sadaf-enq__index-item.is-current .sadaf-enq__index-num { color: var(--sadaf-gold-warm, #C89B67); font-weight: 700; } .sadaf-enq__index-item.is-current .sadaf-enq__index-text { font-weight: 600; } /* A hairline that grows down the list beside the section you are in. Its position is set by the script, so with no script it never appears. */ .sadaf-enq__index-item { position: relative; } .sadaf-enq__index-item.is-current::before { content: ""; position: absolute; left: -14px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--sadaf-gold-warm, #C89B67); } .sadaf-enq__index-item.is-done .sadaf-enq__index-num { opacity: .55; } .sadaf-party__actions[hidden] { display: none; } /* A BRANCH IS A FULL WIDTH GRID OF ITS OWN, AND THIS IS A BUG FIX. * * .sadaf-enq__fields is a twelve column grid and .sadaf-enq__field carries * grid-column: 1 / -1 so that every field spans it. The branch wrappers were * added without that rule, so each one became a plain grid item occupying a * SINGLE column: the bride entry measured 37 pixels wide at 768px and 57 at * 1920px, with every select crushed to 59 pixels. * * Caught by measuring the rendered page at eight widths. It is invisible in * the markup and invisible in a logic test, and it would have been the first * thing Sadaf saw. * * IT IS ALSO A GRID ITSELF, repeating the parent's twelve columns and gap, * because the fields inside a branch carry their own span classes: the people * count is a four column field and the rows below it span twelve. Without * re-establishing the grid, those spans would have nothing to span. */ /* ONE NAME, EVERY WRAPPER THAT HOLDS FIELDS. Renamed 24 August. * * This was .sadaf-enq__branch alone, and that was too narrow twice over: * * 1. The occasion field is a branch AND a half-width field. Turning it into * a grid made its own label and input into grid items, so they took one * column each: a 13px label beside a 32px text box. * 2. #f-location-wrap holds the suburb and postcode but is not a branch, so * it never got `grid-column: 1 / -1` and collapsed to a single 49px * track with both fields crushed inside it. * * Both were reported from the live site after upload. Neither was caught by * the responsive sweep, because that sweep only ever opened the BRIDAL * branch: it never chose Special Occasion and never clicked Mobile, so the * two broken wrappers were never on screen while it measured. The sweep now * walks all three booking types and both getting-ready options. * * A wrapper that holds fields needs the full width AND its own twelve * columns. A wrapper that IS a field needs neither. Keeping those two ideas * in separate class names is what stops this happening a third time. */ .sadaf-enq__subgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 18px; min-width: 0; } /* ========================================================================== THE PARTY BREAKDOWN, ONE PERSON AT A TIME Rebuilt 23 August 2026 for Part B. WHAT THIS REPLACED, AND WHY THE OLD RULES ARE GONE RATHER THAN AMENDED. Until today this was a real : eight rows, one per role, each with a headcount. About two hundred and fifty lines of CSS existed to make that table not look like a spreadsheet, including a whole second layout for phones where each cell became its own labelled row. Sadaf replaced the table itself, in writing, on 21 August: "the essential requirement is that each person's role and service must be recorded separately". There is no table any more, so rules describing one are not worth keeping. They are deleted rather than left in place, because dead CSS that still matches nothing is how a stylesheet becomes impossible to reason about. WHAT THE THEME FIGHTS US ON, WHICH IS THE PART WORTH KNOWING. The kit's stylesheet sets, on any table: table td, table th border: 1px solid ... table tbody > tr:nth-child(2n+1) > td, th background-color: ... Both were inherited and neither was ever ours, and the first attempt at the old redesign set padding and colour but never declared a border, so the theme kept winning and the rebuilt table still had its grid. Caught by looking at the rendered page rather than at this file. THAT IS NOW MOOT, AND DELIBERATELY SO. A person entry is a grid of divs, so none of those table selectors can reach it at all. The fight is not won, it is avoided, which is why there are no !important declarations below. THE LAYOUT. One row per person: who they are, what they need, and an age range that appears only for the two roles Sadaf named. Container queries rather than viewport media queries, so a row reflows on the width it has actually been given rather than on the size of the window, which is what the rest of this form already does. ========================================================================== */ .sadaf-party { container-type: inline-size; display: block; width: 100%; } .sadaf-party__people { display: block; } /* A PERSON. The bride and an added member share this shape on purpose: she is the first line of the same list, not a different kind of thing. */ .sadaf-party__bride, .sadaf-party__person { position: relative; display: grid; gap: 10px 14px; grid-template-columns: 1fr; align-items: end; margin: 0; padding: 14px 0; border-top: 1px solid rgba(198, 161, 91, .24); } /* The first entry sits under the section heading, which is already a boundary, so it does not need a second line above it. */ .sadaf-party__people > .sadaf-party__person:first-child, .sadaf-party__bride { border-top: 0; } .sadaf-party__bride + .sadaf-party__people > .sadaf-party__person:first-child { border-top: 1px solid rgba(198, 161, 91, .24); } /* THE BRIDE IS TINTED, because she is the one row that is always there and always required, and because it makes the "no quantity" row read as deliberate rather than as a row somebody forgot to finish. */ .sadaf-party__bride { margin-bottom: 4px; padding: 16px 16px 18px; border-radius: 10px; background: #FBF4E9; box-shadow: inset 3px 0 0 var(--sadaf-gold-warm); } .sadaf-party__cell { min-width: 0; } .sadaf-party__cell-label { display: block; margin: 0 0 6px; color: var(--sadaf-ink-soft, #6B5A48); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* The bride's role, which is a statement rather than a choice. Sized to sit on the same baseline as the select beside it. */ .sadaf-party__fixed { margin: 0; /* THE BOTTOM PADDING IS WHAT ALIGNS THIS, NOT THE TOP. Corrected 24 August. The row is `align-items: end`, so every cell's BOTTOM edge is what lines up. A padding on the top therefore only makes the box taller and moves the text not at all, which is why the original `12px 0 0` looked about right beside the bride's select and was measurably 9px low on every Formal row, where the label above it is hidden. Measured, not eyeballed: label centre 957 against select centre 948 on all four rows. Padding the BOTTOM lifts the text off the row's baseline by exactly that much, so the name and the box beside it read as one line rather than two things that nearly agree. */ padding: 12px 0 13px; font-size: 17px; font-weight: 600; line-height: 1.3; } .sadaf-party__cell--age[hidden] { display: none; } /* REMOVE. Sadaf asked to "add or remove bridal party members as required", 19 August, so this is her requirement and not a convenience. IT IS NOT A TINY X IN A CORNER. Forty by forty is the smallest thing worth asking a thumb to hit, and it sits at the end of the row rather than floating over it, so nothing is ever covered up. */ /* THE PAGE CLASS IS PREPENDED, AND IT IS NOT DECORATION. The kit ships `.elementor-kit-3 button { background-color: ...; border: 0 }`, which is specificity (0,1,1). A single class is (0,1,0) and LOSES to it, so the first version of this rule was overridden entirely: both new buttons rendered as solid mocha discs with no border and the wrong font size, while this file plainly said `background: transparent`. Measured with Chrome's own matched-rules list rather than guessed at, which is the only way to see which of two rules actually won. Prepending `.sadaf-enq` makes it (0,2,0), which beats (0,1,1) on class count. No !important anywhere: the same trick is already used a few hundred lines above for `.sadaf-enq select.sadaf-enq__select`, for the same reason, and the next person should find one consistent technique rather than a mystery. */ .sadaf-enq .sadaf-party__remove { justify-self: start; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(198, 161, 91, .45); border-radius: 50%; background: transparent; color: var(--sadaf-ink-soft, #6B5A48); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .sadaf-enq .sadaf-party__remove:hover, .sadaf-enq .sadaf-party__remove:focus-visible { border-color: var(--sadaf-gold-warm); background: #FBF4E9; color: var(--sadaf-mocha, #523D2E); } .sadaf-party__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 18px 0 0; } /* ADD PERSON. Her button, in her words, including the plus. A GHOST BUTTON RATHER THAN A SOLID ONE. The Send button at the foot of the form is the only solid gold control on the page, and it should stay that way: two solid buttons and a bride has to work out which one submits. */ .sadaf-enq .sadaf-party__add { display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border: 1px solid var(--sadaf-gold-warm, #C89B67); border-radius: 999px; background: transparent; color: var(--sadaf-mocha, #523D2E); font-size: 15px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .sadaf-enq .sadaf-party__add:hover, .sadaf-enq .sadaf-party__add:focus-visible { border-color: var(--sadaf-mocha, #523D2E); background: #FBF4E9; } .sadaf-enq .sadaf-party__add[disabled] { opacity: .45; cursor: not-allowed; } .sadaf-party__actions-note { margin: 0; color: var(--sadaf-ink-soft, #6B5A48); font-size: 14px; } /* THE LABELS STOP REPEATING ONCE THE ROW SHAPE IS ESTABLISHED. Added 24 August. A four person party printed "WHO IS THIS" and "WHAT DO THEY NEED" four times each, in uppercase, which was the last real noise in this section and pulled the eye away from the answers, which are the part Sadaf actually reads. THE FIRST PERSON ROW KEEPS ITS LABELS. The bride's row above says "what do YOU need" and a party row says "what do THEY need", so the first row is doing real work rather than repeating: it is where the wording changes from the bride to everybody else. THE AGE LABEL IS NEVER HIDDEN, and that is the whole reason this is a rule about labels rather than a header row across the top. The age range appears only for a Junior Bridesmaid or a Flower Girl, so the column shows up on unpredictable rows: a header row could not align with rows of three columns and rows of four at the same time, and if the FIRST person happens to be an adult then a header would leave the age column that appears three rows down with nothing above it. HIDDEN FROM THE EYE, NOT FROM A SCREEN READER. The labels stay in the document and stay attached to their controls. Someone listening to this form hears every field named, every time, which is exactly what they need and exactly what a sighted person does not. Only inside the container query below, because on a phone every row stacks into a single column and the labels are then the only thing telling one control from the next. */ /* WIDE ENOUGH FOR A ROW. Below this the cells stack, which is what a phone gets: three labelled controls one under the other, no horizontal scroll and nothing shrunk to fit. */ @container (min-width: 520px) { /* A NAME NEEDS A NAME'S WIDTH, NOT HALF THE ROW. Added 24 August. On Formal and Special Occasion the left column holds nothing but the words "Person 1", and it was being given 400px to do it, the same half of the row that a bridal row needs for its role dropdown. The result was a wide empty gap down the middle of the section on exactly the two booking types that are supposed to feel the shortest. Bridal rows are untouched: they have a real dropdown in that column and genuinely need the space. This only narrows the column on rows whose left side is a fixed label, which is what [data-person-label] marks. */ .sadaf-party__person:has([data-person-label]) { grid-template-columns: minmax(110px, auto) minmax(0, 1fr); } .sadaf-party__person:not(:first-of-type) .sadaf-party__cell:not([data-age-wrap]) .sadaf-party__cell-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sadaf-party__bride, .sadaf-party__person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .sadaf-party__person:has(.sadaf-party__cell--age:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto; } /* The bride has no remove button and no age, so her two cells should not be stretched across a four column track. */ .sadaf-party__bride { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* A BROWSER WITHOUT :has() SIMPLY SHOWS THE PLAIN ROW, which is why the age column is declared as an addition above rather than as the default. The old table made the same choice for the same reason. */ /* ========================================================================== THE CLOSING BLOCK. The tick and the button. The only dark block on the page, so the end of the form does not look like a seventh question. ========================================================================== */ .sadaf-enq__close { margin: 26px 0 0; padding: 24px 22px 26px; border-radius: 3px; background: var(--sadaf-mocha); box-shadow: 0 14px 34px -26px rgba(82, 61, 46, .55); } /* THE CONSENT ROW, AND A BUG THIS REDESIGN FIXED BY ACCIDENT. The label wraps two links, to the booking policies and to the terms. That is correct: those links must be clickable. But it means whatever sits at the middle of the row decides what a tap in the middle of the row does. On the design currently on staging, the row is three lines tall and its centre lands on "terms and conditions". Clicking the middle of the consent row therefore NAVIGATES TO THE TERMS PAGE instead of ticking the box, at 390, 768, 1440 and 1920. Measured at all four, not inferred from one. A bride who taps the row to agree loses the whole form and has to start again. Nobody had reported it, and it was found only because an end-to-end test drove the real control instead of posting a handmade body: the test failed looking for the submit button, because the browser had left the page. On this design the row is shorter and the centre lands on plain text, so the same click ticks the box at all four widths. That is a better outcome by luck rather than by design, so it is written down here: IF THIS ROW EVER GETS TALLER OR THE WORDING GETS LONGER, RE-TEST IT. The check is a click on label.sadaf-enq__check followed by reading the URL. */ label.sadaf-enq__check { display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 0; cursor: pointer; } .sadaf-enq__check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .sadaf-enq__check-box { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 2px; border: 1px solid rgba(215, 180, 135, .60); border-radius: 2px; background: rgba(255, 255, 255, .06); transition: background-color .2s ease, border-color .2s ease; } .sadaf-enq__check-box i { font-size: 11px; color: var(--sadaf-mocha); opacity: 0; transition: opacity .2s ease; } .sadaf-enq__check input:checked + .sadaf-enq__check-box { background: var(--sadaf-gold); border-color: var(--sadaf-gold); } .sadaf-enq__check input:checked + .sadaf-enq__check-box i { opacity: 1; } .sadaf-enq__check input:focus-visible + .sadaf-enq__check-box { box-shadow: 0 0 0 3px rgba(215, 180, 135, .45); } .sadaf-enq__check input[aria-invalid="true"] + .sadaf-enq__check-box { border-color: #E9A08C; } .sadaf-enq__check-text { font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .88); } .sadaf-enq__check-text .sadaf-enq__req { color: var(--sadaf-gold); } .sadaf-enq__check-text a { color: #fff; text-decoration: underline; text-decoration-color: rgba(215, 180, 135, .70); text-underline-offset: 3px; } .sadaf-enq__check-text a:hover, .sadaf-enq__check-text a:focus-visible { text-decoration-color: var(--sadaf-gold); } .sadaf-enq__close p.sadaf-enq__error { margin-top: 10px; color: #F0B4A2; } .sadaf-enq__submit-row { display: grid; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(215, 180, 135, .28); } button.sadaf-enq__submit { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 54px; padding: 15px 30px; font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--sadaf-mocha); background: var(--sadaf-gold); border: 1px solid var(--sadaf-gold); border-radius: 2px; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; } button.sadaf-enq__submit i { font-size: 11px; transition: transform .3s ease; } button.sadaf-enq__submit:hover, button.sadaf-enq__submit:focus-visible { background: var(--sadaf-gold-light); border-color: var(--sadaf-gold-light); } button.sadaf-enq__submit:hover i { transform: translateX(4px); } button.sadaf-enq__submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(215, 180, 135, .45); } .sadaf-enq__close p.sadaf-form__note { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .74); } /* ========================================================================== WHAT HAPPENS NEXT. Four steps on the mocha band. ========================================================================== */ .sadaf-enq-steps { background: var(--sadaf-mocha); padding: 52px 0 58px; } .sadaf-enq-steps__inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; text-align: center; } h2.sadaf-enq-steps__head { margin: 0 0 10px; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.16; font-weight: 600; color: #fff; } .sadaf-enq-steps__lead { margin: 0 auto 30px; max-width: 560px; font-family: "Inter Tight", sans-serif; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .78); } ol.sadaf-enq-steps__list { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; text-align: left; } .sadaf-enq__step { padding: 22px 20px 24px; border: 1px solid rgba(215, 180, 135, .28); border-radius: 3px; background: rgba(255, 255, 255, .035); } .sadaf-enq__step-num { display: block; margin-bottom: 10px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--sadaf-gold); } h3.sadaf-enq__step-head { margin: 0 0 8px; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--sadaf-gold-light); } p.sadaf-enq__step-body { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); } /* ========================================================================== THE BREAKPOINTS Four of them, and each one exists because something was measured at that width rather than because it is a round number. ========================================================================== */ /* -- 560px. The segmented control has room for three across. --------------- */ @media (max-width: 559px) { .sadaf-enq__seg { grid-template-columns: 1fr; } .sadaf-enq__seg-opt + .sadaf-enq__seg-opt { border-left: 0; border-top: 1px solid rgba(198, 161, 91, .40); } .sadaf-enq__seg-box { justify-content: flex-start; padding-left: 15px; } } /* -- 700px. The twelve column grid starts doing anything. ----------------- Below this every field is full width, which is why the span classes only appear here. A third of a 390px phone is 120px and that is not a field. */ @media (min-width: 700px) { .sadaf-enq { padding: 52px 0 60px; } .sadaf-enq__intro, .sadaf-enq__grid { padding: 0 28px; } .sadaf-enq__field--12 { grid-column: span 12; } .sadaf-enq__field--8 { grid-column: span 8; } .sadaf-enq__field--6 { grid-column: span 6; } .sadaf-enq__field--4 { grid-column: span 4; } .sadaf-enq__sheet { padding: 28px 26px 30px; } .sadaf-enq__fields, .sadaf-enq__subgrid { gap: 22px 20px; } .sadaf-enq__radios { grid-template-columns: repeat(3, minmax(0, 1fr)); } h2.sadaf-enq__intro-head, h2.sadaf-enq__head, h2.sadaf-enq-steps__head { font-size: 36px; } .sadaf-enq__sheet-title { font-size: 27px; } ol.sadaf-enq-steps__list { grid-template-columns: 1fr 1fr; gap: 18px; } .sadaf-enq__close { padding: 28px 26px 30px; } .sadaf-enq__submit-row { grid-template-columns: auto 1fr; align-items: center; gap: 22px; } button.sadaf-enq__submit { width: auto; } } /* -- 1080px. The aside moves beside the form. ------------------------------ Chosen by measuring, not by convention. The aside needs 260px to hold the index without the section titles wrapping, and the form needs about 700px before the party table has room to be a table. 260 + 700 + a 36px gap and two 28px gutters is 1052, so 1080 is the first common width where both fit without either being squeezed. */ @media (min-width: 1080px) { .sadaf-enq__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; } /* Sticky ONLY on a window tall enough to hold the column. On a short laptop screen a sticky element taller than the viewport pins its top and hides its bottom for ever, which is worse than not sticking at all. The column measures about 620px, so the query asks for a little more than that. */ /* THE STICKY COLUMN NEEDS A RUNWAY, AND IT DID NOT HAVE ONE. Fixed 24 August. `position: sticky` was already set below and computed correctly in the browser, and it still scrolled away: measured travelling from 585px to 333px from the top of the window during a 900px scroll, which is not sticking at all, it is just sitting there. The reason is that a sticky element can only travel inside ITS OWN PARENT'S box. .sadaf-enq__grid sets `align-items: start`, so this aside shrank to the height of its content, about 880px, inside a row that is 1800px tall. A sticky child of an 880px parent has 0px of runway. Stretching the aside to the full height of the row is what gives it somewhere to go. The visible result is the ~930px of dead column beside the form filling with the sidebar as you scroll, which is most of the blank space complaint on desktop, and it was a bug rather than a design decision. Only at this breakpoint: below it the sidebar sits above the form in one column and must keep its natural height. */ .sadaf-enq__aside { align-self: stretch; } @media (min-height: 760px) { .sadaf-enq__aside-inner { position: sticky; /* 143px, NOT 96px. Corrected 24 August. The sticky header's bottom edge measures 127px at 1280, 1440 and 1920. Pinning the column at 96 put its first 31px underneath that header, so "The form, in 5 parts" was permanently half hidden. This offset has been wrong since it was written, and nobody could have seen it: the column never actually stuck, because it had no runway inside its parent, so it never reached the header to be cut off by it. Fixing the runway is what made the second fault visible. Two bugs, one symptom, and the first was hiding the second. 143 is the measured 127 plus a 16px breath, so the heading clears the header rather than touching it. */ top: 143px; max-height: calc(100vh - 167px); overflow-y: auto; /* Room for the scrollbar so the cards do not sit under it. */ padding-right: 4px; scrollbar-width: thin; } .sadaf-enq__aside-inner::-webkit-scrollbar { width: 5px; } .sadaf-enq__aside-inner::-webkit-scrollbar-thumb { background: rgba(198, 161, 91, .45); border-radius: 3px; } } ol.sadaf-enq-steps__list { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* -- 1400px and 1700px. The form keeps growing. ---------------------------- THIS IS THE FIX FOR THE FIRST FAULT. The container used to stop at 1290px for ever, so every screen wider than a laptop showed the same 587px form with the rest of the monitor unused. Measured on the built page: the form is 892px at 1440 and 984px at 1920. */ @media (min-width: 1400px) { .sadaf-enq__intro, .sadaf-enq__grid, .sadaf-enq-steps__inner { max-width: 1320px; padding: 0 40px; } .sadaf-enq__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } .sadaf-enq__sheet { padding: 32px 32px 34px; } .sadaf-enq__close { padding: 32px 32px 34px; } .sadaf-enq__fields, .sadaf-enq__subgrid { gap: 24px 22px; } } @media (min-width: 1700px) { .sadaf-enq__intro, .sadaf-enq__grid, .sadaf-enq-steps__inner { max-width: 1440px; } .sadaf-enq__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; } } /* -- Reduced motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sadaf-enq__input, .sadaf-enq__radio-box, .sadaf-enq__seg-box, .sadaf-enq__check-box, .sadaf-enq__check-box i, .sadaf-party__remove, .sadaf-party__add, a.sadaf-enq__contact-row, a.sadaf-enq__index-link, button.sadaf-enq__submit, button.sadaf-enq__submit i { transition: none; } button.sadaf-enq__submit:hover i { transform: none; } }