.elementor-kit-4{--e-global-color-primary:#8D9AAD;--e-global-color-secondary:#2B2D42;--e-global-color-text:#000000;--e-global-color-accent:#6F8098;--e-global-color-smswhite:#FFFFFF;--e-global-color-smsmist:#EDF3F3;--e-global-color-smsopen:#FAFAFA;--e-global-color-smsplus:#989B9B;--e-global-color-smsdash:#9E9E9E;--e-global-color-smshover:#AFB8C6;--e-global-color-smslargehover:#B3B3B3;--e-global-color-smsquote:#F1F1F1;--e-global-color-smsreview:#202124;--e-global-color-smslist:#1C1E21;--e-global-color-smscontact:#2A2A2A;--e-global-color-smsbadge:#313131;--e-global-color-smsegg:#C80000;--e-global-color-smsrule:rgba(0, 0, 0, 0.13);--e-global-color-smsfootrule:rgba(0, 0, 0, 0.1);--e-global-color-smsheadrule:rgba(0, 0, 0, 0.05);--e-global-color-smsveil:rgba(0, 0, 0, 0.4);--e-global-color-smslightbox:rgba(255, 255, 255, 0.95);--e-global-color-smsunderline:rgba(0, 0, 0, 0.5);--e-global-color-smsink90:rgba(43, 45, 66, 0.9);--e-global-typography-primary-font-family:"Marketing Script";--e-global-typography-primary-font-size:30px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:0.03em;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.75em;--e-global-typography-secondary-letter-spacing:0.02em;--e-global-typography-text-font-family:"Questrial";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:500;--e-global-typography-text-text-transform:uppercase;--e-global-typography-text-line-height:1em;--e-global-typography-text-letter-spacing:0.05em;--e-global-typography-accent-font-family:"Marketing Script";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.15em;--e-global-typography-smshero-font-family:"Questrial";--e-global-typography-smshero-font-size:80px;--e-global-typography-smshero-font-weight:300;--e-global-typography-smshero-text-transform:none;--e-global-typography-smshero-line-height:1.1em;--e-global-typography-smshero-letter-spacing:0.05em;--e-global-typography-smsdisplay-font-family:"Marketing Script";--e-global-typography-smsdisplay-font-size:48px;--e-global-typography-smsdisplay-font-weight:400;--e-global-typography-smsdisplay-text-transform:none;--e-global-typography-smsdisplay-line-height:1.1em;--e-global-typography-smsdisplay-letter-spacing:0.01875em;--e-global-typography-smsfoot-font-family:"Roboto";--e-global-typography-smsfoot-font-size:14px;--e-global-typography-smsfoot-font-weight:400;--e-global-typography-smsfoot-text-transform:none;--e-global-typography-smsfoot-line-height:1.75em;--e-global-typography-smsfoot-letter-spacing:0.02em;--e-global-typography-smsphone-font-family:"Roboto";--e-global-typography-smsphone-font-size:15px;--e-global-typography-smsphone-font-weight:500;--e-global-typography-smsphone-text-transform:lowercase;--e-global-typography-smsphone-line-height:1em;--e-global-typography-smsphone-letter-spacing:0.05em;--e-global-typography-smsquote-font-family:"Roboto";--e-global-typography-smsquote-font-size:16px;--e-global-typography-smsquote-font-weight:400;--e-global-typography-smsquote-text-transform:none;--e-global-typography-smsquote-line-height:1.75em;--e-global-typography-smsquote-letter-spacing:0em;--e-global-typography-smstoggle-font-family:"Roboto";--e-global-typography-smstoggle-font-size:25px;--e-global-typography-smstoggle-font-weight:400;--e-global-typography-smstoggle-text-transform:none;--e-global-typography-smstoggle-line-height:1em;--e-global-typography-smstoggle-letter-spacing:0em;--e-global-typography-smsbadge-font-family:"Arial";--e-global-typography-smsbadge-font-size:16.25px;--e-global-typography-smsbadge-font-weight:500;--e-global-typography-smsbadge-text-transform:uppercase;--e-global-typography-smsbadge-line-height:1.15em;--e-global-typography-smsbadge-letter-spacing:0em;background-color:var( --e-global-color-smswhite );color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-smswhite );border-style:none;border-radius:0px 0px 0px 0px;padding:15px 32px 15px 32px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:var( --e-global-color-smshover );color:var( --e-global-color-smswhite );border-radius:0px 0px 0px 0px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-text );}.elementor-kit-4 a:hover{color:var( --e-global-color-text );}.elementor-kit-4 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h3{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h4{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:var( --e-global-color-smslightbox );--lightbox-ui-color:var( --e-global-color-secondary );--lightbox-ui-color-hover:var( --e-global-color-text );}@media(max-width:1024px){.elementor-kit-4{--e-global-typography-text-font-size:16px;--e-global-typography-smshero-font-size:50px;font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-4 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h3{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h4{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-primary-font-size:28px;--e-global-typography-smshero-font-size:40px;--e-global-typography-smsdisplay-letter-spacing:0.0175em;font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-4 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h3{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 h4{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ---- the sidebar layout --------------------------------------------------- The source's header is a FIXED 260px column on the left; the page body is offset by exactly that. From 1024 down it becomes a fixed 51px top bar and the body is offset by that instead. The header itself is positioned by its own controls; the page offset is the one thing no control can express. */ @media ( min-width: 1025px ) { .site-main, .elementor-location-footer { margin-left: 260px; } } @media ( max-width: 1024px ) { .site-main { padding-top: 51px; } } /* ---- long words in headings ----------------------------------------------- Weebly's stylesheet lets a heading break inside a word that overflows its box (word-wrap: break-word); at 350px "Experience!" is wider than the hero box and the source breaks it before the "!". Same rule, same break. */ .elementor-heading-title { overflow-wrap: break-word; } /* ---- hero video --------------------------------------------------------------- Elementor sizes a background video as if it were 16:9 (a 1180x664 box on a 352px-tall hero at 1440) and then covers that box, so this 32:9 loop showed at twice the source's zoom. The source covers the hero itself: same file, same centre, box = hero. Width and height are written inline by Elementor's script, hence the two !important. */ .sms-hero .elementor-background-video-container .elementor-background-video-hosted { inset: 0; width: 100% !important; height: 100% !important; transform: none; object-fit: cover; object-position: 50% 50%; } /* ---- page floor ----------------------------------------------------------- The source keeps a 400px floor under its content block, so a short page still pushes the footer down. */ .site-main { min-height: 400px; } /* ---- inline links in copy ------------------------------------------------- `div.paragraph a` on the source: 70%, 40% on hover, a 200ms fade. Only the prose widgets carry .sms-copy; the review names sit in blockquotes and stay solid. The footer menu is paragraph links on the source too. It has its own class, because .sms-copy also carries the policy lists' indents, and the nav widget's own `transition: .4s` needs the longer .elementor-kit-4. */ .sms-copy a, .sms-footnav .elementor-nav-menu--main .elementor-nav-menu a { opacity: .7; transition: opacity 200ms ease-in-out; } .sms-copy a:hover, .sms-footnav .elementor-nav-menu--main .elementor-nav-menu a:hover { opacity: .4; } /* The same source rule underlines them: `border-bottom: 1px solid rgba(0,0,0,.5)` at the foot of the text (inside the fade). An inline border never moves the line. The footer menu links carry 14px of touch padding, so a border would sit 14px low; their line is painted at the text's foot. */ .sms-copy a { border-bottom: 1px solid var( --e-global-color-smsunderline ); } .sms-footnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { background-image: linear-gradient( var( --e-global-color-smsunderline ), var( --e-global-color-smsunderline ) ); background-repeat: no-repeat; background-origin: content-box; background-size: 100% 1px; background-position: 0 calc( 100% + 1px ); } /* ---- the footer menu is a paragraph ----------------------------------------- On the source it is one centred 14/24.5 line of links that wraps like text: at 320 "POLICY" drops to a second line, at 327 all three fit. Elementor's flex row of nowrap items moved the whole last item down from 327 and was 43px taller. So the list flows inline in the paragraph's own type (its strut and the space between items come from the ul). */ .sms-footnav .elementor-nav-menu--main .elementor-nav-menu { display: block; text-align: center; font-size: var( --e-global-typography-smsfoot-font-size ); line-height: var( --e-global-typography-smsfoot-line-height ); letter-spacing: var( --e-global-typography-smsfoot-letter-spacing ); } .sms-footnav .elementor-nav-menu--main .elementor-nav-menu > li { display: inline; } .sms-footnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { display: inline; white-space: normal; } /* The links' 1.5px side padding (their touch width) is part of the 14.98px gap between them, but it also sits at both ends of every line. So each line fragment carries it (clone) and the list is 3px wider: every line then holds 3px more in 3px more room and breaks where the source's does — at 327 the three links still fit, at 320 only "POLICY" drops. */ /* (The nav is a flex row and the list its item, centred by auto margins; so the list is sized outright — the full width plus 3px — and centres its lines.) */ .sms-footnav .elementor-nav-menu--main .elementor-nav-menu { flex: 0 0 auto; width: calc( 100% + 3px ); margin-inline: -1.5px; } .sms-footnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* The rest of the gap sits on the list items: clone repeats a link's margin on its second line too, which set "POLICY" 2px right of the source at 320. */ .sms-footnav .elementor-nav-menu--main .elementor-nav-menu > li + li { margin-inline-start: 8.238px; } /* ---- review cards: two inks in one run of text --------------------------- */ .sms-review { color: var( --e-global-color-smsreview ); } .sms-ink { color: var( --e-global-color-secondary ); } .elementor-widget-text-editor .sms-ink a { color: var( --e-global-color-secondary ); } /* ---- one coloured word ----------------------------------------------------- */ .sms-egg { color: var( --e-global-color-smsegg ); } /* ---- the source's small run: inside a 16px paragraph ------- 13px with the unitless 1.75 the source inherits (22.75px); the paragraph's own 28px line box still decides where it sits. */ .sms-small { font-size: 13px; line-height: 1.75; } /* ---- the Contact phone link is drawn in the paragraph's #2A2A2A on the source */ .elementor-widget-text-editor a.sms-ink-contact { color: var( --e-global-color-smscontact ); } /* ---- the Best Pros badge keeps its 320x270 even on a 310px column (350px phones), and the vendor centres the salon's name on the badge, not on the column */ .sms-badge img { max-width: none; } .sms-badge-name .elementor-heading-title { min-width: 320px; } /* ---- mobile menu ----------------------------------------------------------- The source's menu is a fixed white sheet over the WHOLE screen, bar and logo included, with only the close X above it; its links start 50px down, and it grows from 0 to the screen's height in 0.3s while the page stops scrolling. Elementor hangs its panel under the toggle with inline top / left / width (hence !important), scales it in, and opens its max-height to 1000vmax, which would reach full height in a tenth of the time. */ @media ( max-width: 1024px ) { .sms-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh; transform: none; transition: max-height .3s cubic-bezier( 0, .085, .68, .53 ); z-index: 1; } .elementor-widget-nav-menu.sms-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container { max-height: 100vh; } /* Closed too, so the sheet shrinks away as the source's does instead of vanishing (Elementor's closed rule has four classes). */ .elementor-widget-nav-menu.elementor-nav-menu--toggle.sms-nav .elementor-menu-toggle + .elementor-nav-menu__container { transform: none; } /* The 50px lead-in is on the list, never the sheet: padding survives max-height: 0, and a padded closed sheet is a 50px white strip over the logo. The list folds to nothing once the sheet has shrunk (0.3s), so a closed menu has no link boxes at all; opening unfolds it at once. */ .sms-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu { padding-top: 50px; transform-origin: top; transform: scaleY( 0 ); transition: transform 0s linear .3s; } .elementor-widget-nav-menu.elementor-nav-menu--toggle.sms-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container > .elementor-nav-menu { transform: none; transition-delay: 0s; } .sms-nav .elementor-menu-toggle { position: relative; z-index: 2; } .sms-nav .elementor-menu-toggle svg { display: block; } /* an inline SVG sits on the text baseline and rides 3px high */ body:has( .sms-nav .elementor-menu-toggle.elementor-active ) { overflow: hidden; } } .sms-nav .elementor-nav-menu--dropdown a { border: 0; } /* ---- sidebar links on hover ------------------------------------------------ `.nav a:hover { opacity: .6; transition: opacity 200ms ease }` on the source: every link in the sidebar and the phone menu, the active one included, fades in over 200ms and snaps back (the transition lives on the hover state only). */ .elementor-widget-nav-menu.sms-nav .elementor-nav-menu a, .sms-nav-phone .elementor-heading-title a { transition: none; } .elementor-widget-nav-menu.sms-nav .elementor-nav-menu a:hover, .sms-nav-phone .elementor-heading-title a:hover { opacity: .6; transition: opacity 200ms ease; } /* ---- social icons ---------------------------------------------------------- The glyphs are the source's wsocial outlines, which rise 0.5px above the 20px icon box as they do above the source's line; the icons sit 32px apart (Elementor spaces them with word-spacing, and the body's inherited 0.32px letter-spacing made it 32.33); 60% on hover, 300ms, as `.wsite-social-item`. */ .elementor-widget-social-icons .elementor-social-icon svg { overflow: visible; } .elementor-widget-social-icons .elementor-social-icons-wrapper { letter-spacing: normal; } .elementor-widget-social-icons .elementor-grid-item .elementor-social-icon { transition: all 300ms ease; } .elementor-widget-social-icons .elementor-grid-item .elementor-social-icon:hover { opacity: .6; } /* ---- the YouTube frame ----------------------------------------------------- Weebly's video box is 56.25% of the width PLUS a fixed 30px band — 486x303 at 1280 and 350x227 at 390 — so it is not one aspect ratio at all and no aspect option says it. The frame is drawn with the same padding rule, and the player fills it. */ .elementor-widget-video.sms-video .elementor-wrapper { aspect-ratio: auto; position: relative; height: 0; padding-bottom: calc( 56.25% + 30px ); } .elementor-widget-video.sms-video .elementor-wrapper .elementor-video, .elementor-widget-video.sms-video .elementor-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- the empty accordion bars ---------------------------------------------- Weebly's accordion, drawn its way: the #EDF3F3 bar at 75% over a white item, full strength on hover (pointer devices only, the source's `.no-touch`) and while open, when it turns #FAFAFA. The marker is a 25px bold Roboto "+" at 50%, 10px down and 20px in, and an en dash while open. A Font Awesome plus is a different shape in a different place, so the widget has no icon and the marker is the source's own character. The title's 25px line box makes the bar 45 tall. The open colour needs five classes: the widget's own title background is written with four. */ .sms-toggle .elementor-toggle-item { background-color: var( --e-global-color-smswhite ); } .sms-toggle .elementor-tab-title { position: relative; min-height: 45px; box-sizing: border-box; opacity: .75; transition: 250ms ease; cursor: pointer; } .elementor-widget-toggle.sms-toggle .elementor-toggle .elementor-tab-title.elementor-active { opacity: 1; background-color: var( --e-global-color-smsopen ); } @media ( hover: hover ) { .sms-toggle .elementor-tab-title:hover { opacity: 1; } } .sms-toggle .elementor-tab-title::after { content: "+"; position: absolute; top: 10px; right: 20px; font: 700 25px Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; /* the body's 0.32px would widen the glyph box and move the "+" 0.3px left */ color: var( --e-global-color-smsplus ); opacity: .5; } .sms-toggle .elementor-tab-title.elementor-active::after { content: "\2013"; color: var( --e-global-color-smsdash ); } /* ---- footer rule ----------------------------------------------------------- `.footer-wrap .wsite-footer { border-top: 1px solid rgba(0,0,0,.1) }` on the 1200 box — wider than the 1120 column, narrower than a wide screen. A container border is edge to edge; the box between is drawn here. The source's border also takes a row of layout; that 1px is the footer template's top padding (41 / 31), not this line. */ .sms-footer { position: relative; } /* ::after, not ::before: a container's ::before is Elementor's full-size background-overlay layer, and a rule on it inherits that geometry. */ .sms-footer::after { content: ''; position: absolute; top: 0; left: 50%; width: min( 100%, 1200px ); height: 0; transform: translateX( -50% ); border-top: 1px solid var( --e-global-color-smsfootrule ); pointer-events: none; } /* ---- galleries: the final grid from the first frame -------------------------- e-gallery draws its grid from four custom properties it sets on the container, but it adds its grid class ~2s before it sets them. Measured on Portfolio under a throttled load: 0px thumbnails until the class, then a 1px container for another 1.7s, then the real grid — the footer jumped twice (CLS 0.12 before any fix, 0.18 on a phone). So the properties get their final values here; the script's inline values override them with the same numbers. */ .sms-gallery .elementor-gallery__container { --columns: 3; --hgap: 0px; --vgap: 0px; --aspect-ratio: 100%; --sms-columns: 3; --sms-cell: .3328; } .sms-gallery.sms-gallery-gap10 .elementor-gallery__container { --hgap: 10px; --vgap: 10px; } @media ( max-width: 767px ) { /* --sms-columns, not --columns: at exactly 767 e-gallery still writes an inline `--columns: 3` (its phone test is narrower than Elementor's own), and an inline value beats this rule. The source is two-up there. */ .sms-gallery .elementor-gallery__container { --columns: 2; --sms-columns: 2; --sms-cell: .4995; } } /* The track width, in every state. Weebly floats each cell at 33.28% of the gallery (49.95% on phones), not an even share, and insets the photo by the gallery margin (5px on Portfolio): (width + gap) x share - gap is that photo. An even split made each tile up to 0.5px larger, and four rows of them moved the footer 2px. The leftover 0.16% stays empty on the right, as it does there. */ .elementor-widget-gallery.sms-gallery .elementor-gallery__container { grid-template-columns: repeat( var( --sms-columns ), calc( ( 100% + var( --hgap ) ) * var( --sms-cell ) - var( --hgap ) ) ); } /* Two moments when e-gallery's own rules draw no grid: before it adds its class, and for 50ms every time it runs, when it adds `e-gallery--animated`, lays the items out absolutely and sizes the container from a property it has not set yet (a 1px container — the whole footer jumps). These galleries have no filters, so there is nothing to animate: both moments keep the plain grid. */ .sms-gallery .elementor-gallery__container:not(.e-gallery-grid), .sms-gallery .elementor-gallery__container.e-gallery-grid.e-gallery--animated { display: grid; grid-gap: var( --vgap ) var( --hgap ); padding-bottom: 0; } .sms-gallery .elementor-gallery__container:not(.e-gallery-grid) .e-gallery-image { padding-bottom: var( --aspect-ratio ); } .sms-gallery .elementor-gallery__container.e-gallery-grid.e-gallery--animated .e-gallery-item { position: relative; top: auto; left: auto; right: auto; width: auto; } /* ---- gallery lightbox ------------------------------------------------------ Fancybox on the source fits the photo inside 20px margins plus 10px of padding, keeps 85px free below for its thumbnail strip, and draws no shadow: 581x775 at y30 on a 1280x900 screen, 330x440 centred on a 390 phone. Elementor pads its slide 70px (70/0 on phones) and shadows the photo. */ .elementor-lightbox.dialog-type-lightbox .elementor-lightbox-item { padding: 30px 30px 95px; } .elementor-lightbox.dialog-type-lightbox .elementor-lightbox-image { box-shadow: none; border-radius: 0; } /* The arrows ignore Site Settings' UI colour: Elementor's swiper rule (three classes) paints them 93% white, invisible on this veil, so the fill is restated here at (0,4,1) and follows the UI Color control. ALWAYS VISIBLE (Murat, 2026-09-29: "I want them fuckin visible"). They used to be revealed on hover, copying Fancybox on the Weebly source, which showed an arrow only while the pointer was over that half of the photo. The source is retired, and a control nobody can see is not a control. #2B2D42 on the 95% white veil is about 13:1, so no disc is needed here — unlike Hammond, where the glyph and the veil were both light. */ .elementor-lightbox.dialog-type-lightbox .swiper .elementor-swiper-button { color: var( --lightbox-ui-color ); } .elementor-lightbox.dialog-type-lightbox .swiper .elementor-swiper-button:hover { color: var( --lightbox-ui-color-hover ); } .elementor-lightbox.dialog-type-lightbox .swiper .elementor-swiper-button svg { fill: currentColor; } /* ---- review cards ---------------------------------------------------------- The opening quotation mark is a pseudo-element on the source's blockquote. */ .sms-quote > .e-con-inner, .sms-quote { position: relative; } .sms-quote::before { content: "“"; position: absolute; top: 24px; left: 16px; font: 700 32px/1 Roboto, Helvetica, Arial, sans-serif; color: var( --e-global-color-text ); } /* ---- policy lists ---------------------------------------------------------- Real