.elementor-128 .elementor-element.elementor-element-e3aa136{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:24px;--padding-right:24px;}.elementor-128 .elementor-element.elementor-element-b7ec83e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-a268b1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-73f7b36{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-128 .elementor-element.elementor-element-e9b5711 .elementor-menu-toggle{margin:0 auto;}.elementor-128 .elementor-element.elementor-element-2c3ce3b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-128 .elementor-element.elementor-element-381061d{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-128 .elementor-element.elementor-element-381061d .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-128 .elementor-element.elementor-element-e3aa136{--padding-top:8px;--padding-bottom:8px;--padding-left:16px;--padding-right:16px;}.elementor-128 .elementor-element.elementor-element-2c3ce3b{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}}@media(min-width:768px){.elementor-128 .elementor-element.elementor-element-e3aa136{--content-width:1216px;}}/* Start custom CSS */@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600..900;1,9..144,600..700&family=Figtree:wght@400..800&display=swap"); /* The Abbey Lodge design system — standalone copy (fonts via Google Fonts). */ /* ========================================================================== The Abbey Lodge — child theme design system (Astra + Elementor + WooCommerce) HOW TO USE IN ELEMENTOR Colours & fonts come from Elementor Site Settings (Global Colours / Fonts), which the setup screen fills in. The signature motifs are CSS classes you type into Advanced → CSS Classes on any widget or container: Containers al-card · al-blobs (+ al-blobs--right / --left) · al-collage al-stagger (children reveal one after another) · al-tilt al-reviews · al-pillar · al-dish-grid Headings al-eyebrow · al-hero-title · al-h-hero · al-h-xl · al-h-lg al-sticker (+ --coral --teal --paper --round) · al-wobble wrap a word in word Images al-polaroid (+ al-polaroid--1/--2/--3 inside .al-collage, al-tape) Buttons al-btn (+ al-btn--coral --teal --ghost) · al-link-arrow Any element al-reveal (+ al-reveal--left --right --pop) · al-parallax CONTENTS 01 Fonts · 02 Tokens + dark mode (also drives Elementor & Astra colours) 03 Base · 04 Type helpers · 05 Motifs · 06 Buttons & stickers 07 Cards, collage, pillars, reviews · 08 Shortcode components 09 Menu cards · 10 Header/footer helpers · 11 Cookie banner 12 WooCommerce · 13 Motion + reduced motion · 14 Elementor editor ========================================================================== */ /* 01 FONTS (self-hosted, OFL — no Google requests, GDPR friendly) */ /* -------------------------------------------------------------------------- 02 TOKENS Contrast (WCAG 2.2 AA): bright fills always carry ink text; coloured text uses the -deep variants. White text is never used on sun/coral/teal. The --e-global-color-* names match the Global Colours the setup screen creates in Elementor, so dark mode re-maps Elementor too. -------------------------------------------------------------------------- */ :root { --sun: #FFC93C; --sun-soft: #FFE7A3; --coral: #FF6B5B; --coral-soft: #FFD6CF; --coral-deep: #C2382B; --teal: #1FB5AC; --teal-soft: #C8F0EC; --teal-deep: #0E7C76; --ink: #2B2D42; --ink-soft: #4A4D63; --cream: #FFF8EE; --paper: #FFFDF8; --white: #FFFFFF; --bg: var(--cream); --surface: var(--paper); --surface-2: #FFF1DC; --text-theme: #2B2D42; --muted-theme: #4A4D63; --link-theme: #C2382B; --text: var(--text-theme); --text-muted: var(--muted-theme); --on-bright: #2B2D42; --link: var(--link-theme); --link-hover: var(--teal-deep); --border: #2B2D42; --border-soft: #E9DCC8; --focus: #2B2D42; --focus-halo: #FFC93C; --error: #B42318; --success: #0E7C76; --night: #2B2D42; --sticker-shadow: #2B2D42; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --fs-sm: clamp(0.88rem, 0.86rem + 0.12vw, 0.95rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-md: clamp(1.15rem, 1.06rem + 0.4vw, 1.375rem); --fs-lg: clamp(1.4rem, 1.22rem + 0.8vw, 1.9rem); --fs-xl: clamp(1.8rem, 1.45rem + 1.6vw, 2.8rem); --fs-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 4rem); --fs-hero: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem); --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --s-6: clamp(1.5rem, 1.25rem + 1vw, 2rem); --s-7: clamp(2rem, 1.5rem + 2vw, 3rem); --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px; --r-blob: 58% 42% 46% 54% / 48% 56% 44% 52%; --bw: 2.5px; --shadow-pop: 4px 4px 0 var(--sticker-shadow); --shadow-pop-lg: 7px 7px 0 var(--sticker-shadow); --shadow-lg: 0 18px 40px rgb(43 45 66 / 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 320ms; --dur-slow: 700ms; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.18 0 0 0 0 0.26 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-opacity: 0.08; color-scheme: light dark; } /* Elementor Global Colour ids created by the setup screen (keep in sync with inc/setup/setup.php). Light mode: these are only fallbacks — Elementor's Site Settings (on body.elementor-kit-N) win, so colours stay editable in Elementor. Dark mode: remapped below with higher specificity. */ :root { --e-global-color-primary: #2B2D42; --e-global-color-secondary: #FFC93C; --e-global-color-text: #2B2D42; --e-global-color-accent: #FF6B5B; --e-global-color-al00001: #1FB5AC; --e-global-color-al00002: #C2382B; --e-global-color-al00003: #0E7C76; --e-global-color-al00004: #FFF8EE; --e-global-color-al00005: #FFFDF8; --e-global-color-al00006: #FFF1DC; --e-global-color-al00007: #4A4D63; --e-global-color-al00008: #2B2D42; --e-global-color-al00009: #FFE7A3; --e-global-color-al00010: #FFD6CF; --e-global-color-al00011: #C8F0EC; --e-global-color-al00012: #2B2D42; } @media (prefers-color-scheme: dark) { body[class] { --e-global-color-primary: #FFF3E0; --e-global-color-text: #FFF3E0; --e-global-color-al00002: #FF8A7D; --e-global-color-al00003: #7FE3DC; --e-global-color-al00004: #1C1D2E; --e-global-color-al00005: #26283D; --e-global-color-al00006: #2F3149; --e-global-color-al00007: #D9D1C5; --e-global-color-al00008: #2B2D42; --e-global-color-al00012: #121320; /* Astra palette (set to the Lodge colours by the setup screen) */ --ast-global-color-0: #FFC93C; --ast-global-color-1: #7FE3DC; --ast-global-color-2: #FFF3E0; --ast-global-color-3: #FFF3E0; --ast-global-color-4: #1C1D2E; --ast-global-color-5: #26283D; --ast-global-color-6: #2F3149; --ast-global-color-7: #3E4160; --ast-global-color-8: #FFF3E0; } } @media (prefers-color-scheme: dark) { :root { --bg: #1C1D2E; --surface: #26283D; --surface-2: #2F3149; --text-theme: #FFF3E0; --muted-theme: #D9D1C5; --link-theme: #FFC93C; --link-hover: #7FE3DC; --border: #FFF3E0; --border-soft: #3E4160; --focus: #FFF3E0; --focus-halo: #1FB5AC; --error: #FF9C90; --success: #7FE3DC; --coral-deep: #FF8A7D; --teal-deep: #7FE3DC; --night: #121320; --sticker-shadow: #0B0C16; --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.5); --grain-opacity: 0.05; } } /* Bright bands keep ink text in both themes; surfaces placed on them (cards, tables, FAQs, maps) switch back to the page theme's text colours. */ .al-on-bright { --text: #2B2D42; --text-muted: #3A3C52; --link: #2B2D42; color: var(--text); } .al-on-bright .elementor-heading-title, .al-on-bright .elementor-widget-text-editor, .al-on-bright .elementor-icon-list-text { color: var(--text); } .al-card, .al-table table, .al-faq details, .al-dish, .woocommerce ul.products li.product { --text: var(--text-theme); --text-muted: var(--muted-theme); --link: var(--link-theme); color: var(--text); } /* -------------------------------------------------------------------------- 03 BASE (gentle — Astra stays in charge of layout) -------------------------------------------------------------------------- */ html, body { overflow-x: clip; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); } body, button, input, select, textarea { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .entry-title, .elementor-heading-title { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -0.015em; text-wrap: balance; } h1, h2, h3, h4 { color: var(--text); font-weight: 800; line-height: 1.08; } p, li { text-wrap: pretty; } a { color: var(--link); text-underline-offset: 0.18em; } a:hover, a:focus { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: 4px; } body::after { content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: multiply; } @media (prefers-color-scheme: dark) { body::after { mix-blend-mode: screen; } } .ast-separate-container, .ast-plain-container, #page, .site-content { background-color: transparent; } .al-skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100000; padding: .75rem 1.25rem; background: var(--sun); color: var(--on-bright); font-weight: 800; border: var(--bw) solid var(--ink); border-radius: var(--r-pill); } .al-cookie[hidden], .al-cookie [hidden], .al-tabs [hidden], .al-map [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .al-placeholder { display: inline-block; font-size: var(--fs-xs); font-weight: 800; color: #6B2E00; background: #FFE9A8; border: 1.5px dashed #6B2E00; border-radius: var(--r-sm); padding: .15em .55em; } @view-transition { navigation: auto; } /* -------------------------------------------------------------------------- 04 TYPE HELPERS (fluid sizes Elementor can't express natively) -------------------------------------------------------------------------- */ .al-h-hero .elementor-heading-title, h1.al-h-hero, .al-h-hero > h1 { font-size: var(--fs-hero); line-height: .98; } .al-h-2xl .elementor-heading-title { font-size: var(--fs-2xl); line-height: 1.02; } .al-h-xl .elementor-heading-title { font-size: var(--fs-xl); line-height: 1.06; } .al-h-lg .elementor-heading-title { font-size: var(--fs-lg); line-height: 1.2; } .al-h-md .elementor-heading-title { font-size: var(--fs-md); line-height: 1.25; } .al-lead, .al-lead p { font-size: var(--fs-md); color: var(--text-muted); max-width: 60ch; } .al-eyebrow .elementor-heading-title, .al-eyebrow-text { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); } .al-on-bright .al-eyebrow .elementor-heading-title { color: var(--on-bright); } .al-on-bright .al-card .al-eyebrow .elementor-heading-title { color: var(--coral-deep); } /* -------------------------------------------------------------------------- 05 MOTIFS -------------------------------------------------------------------------- */ /* Scribble underline (JS injects the SVG into ) */ .al-scribble { position: relative; display: inline-block; white-space: nowrap; z-index: 0; } .al-scribble svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .42em; z-index: -1; color: var(--coral); overflow: visible; transform-origin: left center; pointer-events: none; } .al-scribble svg path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .al-scribble--teal svg { color: var(--teal); } .al-scribble--sun svg { color: var(--sun); } .al-on-bright .al-scribble svg { color: var(--coral); } /* Blobs: decorative pseudo-elements on a container, slow "morph" via counter-rotation */ .al-blobs { position: relative; isolation: isolate; overflow: clip; } .al-blobs::before, .al-blobs::after { content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1; border-radius: var(--r-blob); opacity: .55; will-change: transform; animation: al-blob 38s linear infinite; } .al-blobs::before { width: clamp(14rem, 34vw, 30rem); top: -12%; right: -6%; background: var(--sun); } .al-blobs::after { width: clamp(8rem, 16vw, 15rem); bottom: 4%; left: -5%; background: var(--teal); animation-duration: 52s; animation-direction: reverse; } .al-blobs--left::before { right: auto; left: -8%; background: var(--coral); } .al-blobs--left::after { left: auto; right: -4%; background: var(--sun); } .al-blobs--coral::before { background: var(--coral); } @keyframes al-blob { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08, .94); } 100% { transform: rotate(360deg) scale(1); } } /* Elementor containers keep their own inner wrapper above the blobs */ .al-blobs > .e-con-inner, .al-blobs > .elementor-element { position: relative; z-index: 1; } /* Sparkle doodle on any container */ .al-sparkle { position: relative; } .al-sparkle::before { content: ""; position: absolute; top: 8%; right: 6%; width: 3rem; aspect-ratio: 1; pointer-events: none; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232B2D42' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 4v12M24 32v12M4 24h12M32 24h12M10 10l7 7M31 31l7 7M38 10l-7 7M17 31l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } @media (prefers-color-scheme: dark) { .al-sparkle:not(.al-on-bright)::before { filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); } } @media (max-width: 767px) { .al-sparkle::before { display: none; } } /* -------------------------------------------------------------------------- 06 BUTTONS & STICKERS -------------------------------------------------------------------------- */ .al-btn .elementor-button, .al-button, .wp-element-button.al-button { --btn-bg: var(--sun); --btn-sweep: var(--coral); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.45em; font-family: var(--font-body); font-weight: 800; font-size: var(--fs-base); line-height: 1.1; color: var(--on-bright); background: var(--btn-bg); text-decoration: none; border: var(--bw) solid #2B2D42; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); } .al-btn .elementor-button::before, .al-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-sweep); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .al-btn .elementor-button:hover, .al-btn .elementor-button:focus-visible, .al-button:hover { color: var(--on-bright); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sticker-shadow); } .al-btn .elementor-button:hover::before, .al-button:hover::before { transform: scaleX(1); } .al-btn .elementor-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sticker-shadow); } .al-btn .elementor-button .elementor-button-text, .al-btn .elementor-button .elementor-button-icon { color: inherit; fill: currentColor; } .al-btn--coral .elementor-button, .al-button--coral { --btn-bg: var(--coral); --btn-sweep: var(--sun); } .al-btn--teal .elementor-button { --btn-bg: var(--teal); --btn-sweep: var(--sun); } .al-btn--ghost .elementor-button, .al-button--ghost { --btn-bg: #FFFDF8; --btn-sweep: var(--teal-soft); } .al-btn--sm .elementor-button { min-height: 40px; font-size: var(--fs-sm); padding: .5em 1em; } .al-link-arrow .elementor-button { background: none; padding: 0; min-height: 32px; color: var(--link); font-weight: 800; border-radius: 0; box-shadow: none; } .al-link-arrow .elementor-button:hover { color: var(--link-hover); background: none; } .al-link-arrow .elementor-button-icon { transition: transform 160ms var(--ease-out); } .al-link-arrow .elementor-button:hover .elementor-button-icon { transform: translateX(4px); } /* Sticker: put .al-sticker on a Heading widget (set HTML tag to span/div/p) */ .al-sticker { --sticker-bg: var(--sun); --rot: -4deg; width: auto !important; max-width: max-content; } .al-sticker .elementor-heading-title, .al-sticker-chip { display: inline-grid; place-items: center; text-align: center; padding: .55em 1.1em; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: #2B2D42; background: var(--sticker-bg); border: var(--bw) solid #2B2D42; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); transform: rotate(var(--rot)); outline: 2px dashed rgb(43 45 66 / .45); outline-offset: -7px; } .al-sticker--coral { --sticker-bg: var(--coral); } .al-sticker--teal { --sticker-bg: var(--teal); } .al-sticker--paper { --sticker-bg: #FFFDF8; } .al-sticker--right { --rot: 6deg; } .al-sticker--round .elementor-heading-title { aspect-ratio: 1; width: 7rem; border-radius: 50%; padding: .8em; } .al-wobble .elementor-heading-title { animation: al-wobble 5s ease-in-out infinite; } @keyframes al-wobble { 0%, 100% { transform: rotate(var(--rot)); } 50% { transform: rotate(calc(var(--rot) * -1)); } } /* -------------------------------------------------------------------------- 07 CARDS, COLLAGE, PILLARS, REVIEWS -------------------------------------------------------------------------- */ .al-card { background-color: var(--surface); color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; } @media (prefers-color-scheme: dark) { .al-card { box-shadow: 4px 4px 0 #0B0C16; } } .al-tilt { transition: transform var(--dur) var(--ease-out); transform-style: preserve-3d; } /* Pillar / dish cards: image flush to the top edge */ .al-pillar { padding: 0 !important; } .al-pillar .elementor-widget-image { margin: 0 !important; width: 100%; } .al-pillar .elementor-widget-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--bw) solid var(--border); transition: transform var(--dur-slow) var(--ease-out); } .al-pillar:hover .elementor-widget-image img { transform: scale(1.04); } .al-pillar > .e-con-inner > :not(.elementor-widget-image), .al-pillar > :not(.elementor-widget-image):not(.e-con-inner) { margin-inline: var(--s-6); } .al-pillar > :last-child, .al-pillar > .e-con-inner > :last-child { margin-bottom: var(--s-6); } /* Polaroids */ .al-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .al-polaroid .wp-caption, .al-polaroid figure, .al-polaroid > .elementor-widget-container:has(img) { margin: 0; } .al-polaroid .elementor-image, .al-polaroid figure, .al-polaroid .elementor-widget-container { background: #fff; padding: .75rem .75rem 0; border: 1.5px solid #E6DCCB; box-shadow: var(--shadow-lg); } .al-polaroid { --rot: -3deg; transform: rotate(var(--rot)); transition: transform var(--dur) var(--ease-spring); } .al-polaroid:hover { transform: rotate(0) scale(1.03); z-index: 5; } .al-polaroid .widget-image-caption, .al-polaroid figcaption { margin: 0; padding: .5rem 0 1.1rem; text-align: center; color: #2B2D42 !important; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--fs-sm); } .al-polaroid:not(:has(figcaption)) .elementor-widget-container { padding-bottom: 1.6rem; } .al-tape { position: relative; } .al-tape::before { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 84px; height: 26px; background: rgb(255 201 60 / .78); transform: translateX(-50%) rotate(-4deg); } .al-rot-r { --rot: 4deg; } .al-rot-0 { --rot: -1deg; } /* Collage: 2–3 polaroids overlapping (container with .al-collage, images .al-polaroid--1/2/3) */ .al-collage { position: relative; min-height: clamp(22rem, 52vw, 34rem); display: block !important; } .al-collage > .e-con-inner { position: static; display: block; } .al-collage .al-polaroid { position: absolute; margin: 0 !important; } .al-collage .al-polaroid--1 { top: 0; left: 0; width: 62% !important; --rot: -5deg; } .al-collage .al-polaroid--2 { top: 18%; right: 0; width: 54% !important; --rot: 4deg; z-index: 2; } .al-collage .al-polaroid--3 { bottom: 0; left: 14%; width: 46% !important; --rot: -1.5deg; z-index: 3; } .al-collage .al-sticker { position: absolute; z-index: 4; top: -2%; right: 6%; } /* Reviews strip */ .al-reviews { scroll-snap-type: x mandatory; } .al-reviews .elementor-widget-testimonial { scroll-snap-align: start; } .al-review { padding: var(--s-6) !important; } .al-review:nth-child(odd) { transform: rotate(-1deg); } .al-review:nth-child(even) { transform: rotate(1deg); } .al-review .elementor-testimonial-content { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--fs-md); line-height: 1.35; color: var(--text); } .al-review .elementor-testimonial-name { font-weight: 800; color: var(--text); } .al-review .elementor-testimonial-job { color: var(--text-muted); } .al-review .elementor-star-rating, .al-review .e-rating { color: var(--coral-deep); } /* Category tiles (Image Box widget + .al-cat-tile) */ .al-cat-tile .elementor-image-box-wrapper { position: relative; border: var(--bw) solid #2B2D42; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .al-cat-tile:hover .elementor-image-box-wrapper { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--shadow-pop-lg); } .al-cat-tile .elementor-image-box-img { width: 100% !important; margin: 0 !important; } .al-cat-tile .elementor-image-box-img img { width: 100%; aspect-ratio: 8 / 9; object-fit: cover; } .al-cat-tile .elementor-image-box-content { position: absolute; left: var(--s-5); bottom: var(--s-5); text-align: left; } .al-cat-tile .elementor-image-box-title { display: inline-block; margin: 0; padding: .35em .9em; background: var(--sun); color: #2B2D42; border: var(--bw) solid #2B2D42; border-radius: var(--r-pill); font-size: var(--fs-md); } .al-cat-tile .elementor-image-box-title a { color: inherit; text-decoration: none; } .al-cat-tile .elementor-image-box-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .al-cat-tile--coral .elementor-image-box-title { background: var(--coral); } .al-cat-tile--teal .elementor-image-box-title { background: var(--teal); } .al-cat-tile--paper .elementor-image-box-title { background: #FFFDF8; } /* Counters */ .al-stat .elementor-counter-number-wrapper { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .al-stat .elementor-counter-title { font-weight: 700; color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); } /* Icon lists as feature lists */ .al-features .elementor-icon-list-icon { width: 2.4rem; height: 2.4rem; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--sun); border: 2px solid #2B2D42; } .al-features .elementor-icon-list-icon i, .al-features .elementor-icon-list-icon svg { color: #2B2D42 !important; fill: #2B2D42 !important; font-size: 1rem; width: 1rem; } .al-features .elementor-icon-list-item { align-items: flex-start !important; gap: .4rem; } .al-features .elementor-icon-list-text { padding-top: .35rem; } /* Tables inside text editor (sport schedule) */ .al-table table { width: 100%; border-collapse: collapse; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-sm); margin: 0; } .al-table th, .al-table td { padding: .8em 1em; text-align: left; border: 0; border-bottom: 1.5px solid var(--border-soft); color: var(--text); } .al-table thead th { background: var(--sun); color: #2B2D42; font-weight: 800; } .al-table .elementor-widget-container, .al-table { overflow-x: auto; } /* -------------------------------------------------------------------------- 08 SHORTCODE COMPONENTS -------------------------------------------------------------------------- */ /* [abbey_marquee] */ .al-marquee { position: relative; display: flex; align-items: center; overflow: hidden; background: #2B2D42; color: var(--sun); border-block: var(--bw) solid #2B2D42; } @media (prefers-color-scheme: dark) { .al-marquee { background: var(--sun); color: #2B2D42; } } .al-marquee__track { display: flex; flex: none; min-width: 100%; animation: al-marquee 32s linear infinite; } .al-marquee__group { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; } .al-marquee__item { padding: .75em 1.25em; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); } .al-marquee__item::after { content: "✦"; margin-left: 1.25em; color: var(--coral); } .al-marquee:hover .al-marquee__track, .al-marquee.is-paused .al-marquee__track { animation-play-state: paused; } .al-marquee__toggle { position: absolute; right: .5rem; z-index: 2; min-width: 40px; height: 40px; padding: 0 .75em; font-size: var(--fs-xs); font-weight: 800; color: #2B2D42; background: var(--sun); border: 2px solid #2B2D42; border-radius: var(--r-pill); cursor: pointer; } @keyframes al-marquee { to { transform: translateX(-50%); } } /* [abbey_hours] */ .al-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0 0 var(--s-5); border: 0; } .al-hours caption { text-align: left; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); padding-bottom: .4rem; color: inherit; } .al-hours th, .al-hours td { padding: .45em 0; border: 0; border-bottom: 1.5px dashed var(--border-soft); text-align: left; vertical-align: top; background: none; color: inherit; font-weight: 700; } .al-on-bright .al-hours th, .al-on-bright .al-hours td { border-bottom-color: rgb(43 45 66 / .25); } .al-hours td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .al-hours--compact { list-style: none; padding: 0; margin: 0; } .al-hours--compact li + li { margin-top: .35rem; } /* [abbey_nap] */ .al-nap { font-style: normal; line-height: 1.6; } .al-nap a { font-weight: 700; } /* [abbey_map] — consent-gated Google Map */ .al-map { position: relative; aspect-ratio: 4 / 3; border: var(--bw) solid #2B2D42; border-radius: var(--r-lg); overflow: hidden; background: var(--teal-soft); box-shadow: var(--shadow-pop); } .al-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .al-map__consent { position: absolute; inset: 0; display: grid; place-content: center; gap: .75rem; padding: var(--s-6); text-align: center; color: #2B2D42; } .al-map__consent p { margin: 0; } .al-map__consent .al-map__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); } /* [abbey_events] */ .al-events { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; } .al-event { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; padding: var(--s-5); } .al-event__date { display: grid; place-items: center; width: 5rem; padding: .5rem 0; text-align: center; line-height: 1; color: #2B2D42; background: var(--sun); border: var(--bw) solid #2B2D42; border-radius: var(--r-md); transform: rotate(-3deg); } .al-event:nth-child(3n+2) .al-event__date { background: var(--coral); transform: rotate(2deg); } .al-event:nth-child(3n) .al-event__date { background: var(--teal); } .al-event__day { font-family: var(--font-display); font-weight: 900; font-size: 2rem; } .al-event__month { font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; } .al-event__title { margin: 0; font-size: var(--fs-md); } .al-event__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); } .al-event__desc { margin: .5rem 0 0; } .al-tag { display: inline-flex; align-items: center; padding: .1em .6em; font-size: var(--fs-xs); font-weight: 800; color: #2B2D42; background: var(--sun-soft); border: 1.5px solid #2B2D42; border-radius: var(--r-pill); } /* [abbey_featured_dishes] */ .al-dishes { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; } .al-dish { display: flex; flex-direction: column; height: 100%; } .al-dish__media { aspect-ratio: 1; overflow: hidden; border-bottom: var(--bw) solid var(--border); background: var(--sun-soft); } .al-dish__media img { width: 100%; height: 100%; object-fit: cover; } .al-dish__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: var(--s-5); } .al-dish__body h3 { margin: 0; font-size: var(--fs-md); } .al-dish__body p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } .al-dish__price { margin-top: auto !important; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); color: var(--coral-deep) !important; } /* [abbey_faq] */ .al-faq { display: grid; gap: .75rem; } .al-faq details { background: var(--surface); color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); } .al-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); cursor: pointer; list-style: none; } .al-faq summary::-webkit-details-marker { display: none; } .al-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sun); color: #2B2D42; border: 2px solid #2B2D42; transition: transform var(--dur) var(--ease-spring); } .al-faq details[open] summary::after { transform: rotate(45deg); } .al-faq details > div { padding: 0 1.25rem 1.25rem; } /* [abbey_free_delivery] + delivery banner */ .al-delivery-banner { margin: 0; padding: .6em 1rem; text-align: center; font-weight: 800; font-size: var(--fs-sm); color: #2B2D42; background: var(--teal); border-bottom: var(--bw) solid #2B2D42; } .al-delivery-banner a { color: #2B2D42; } .al-free-delivery { margin: 0 0 1rem; } .al-free-delivery p { margin: 0 0 .4rem; font-weight: 700; font-size: var(--fs-sm); color: var(--text); } .al-progress { height: 12px; border: 2px solid #2B2D42; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; } .al-progress span { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--teal) 0 8px, #5FD0C8 8px 16px); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-slow) var(--ease-out); } /* -------------------------------------------------------------------------- 09 MENU CARDS ([abbey_menu]) — "printed paper" in both themes -------------------------------------------------------------------------- */ .al-menu-filter { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 0 0 1.25rem; font-weight: 700; } .al-menu-filter label { display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; } .al-menu-filter input { width: 1.2rem; height: 1.2rem; accent-color: var(--teal-deep); } .al-tabs__list { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem .25rem 1rem; margin: 0; } .al-tabs__tab { flex: none; min-height: 44px; padding: .5em 1.2em; font-weight: 800; font-family: var(--font-body); font-size: var(--fs-base); background: var(--surface); color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--r-pill); cursor: pointer; transition: transform 160ms var(--ease-out); } .al-tabs__tab:hover { transform: translateY(-2px); background: var(--surface); color: var(--text); } .al-tabs__tab[aria-selected="true"] { background: var(--coral); color: #2B2D42; box-shadow: var(--shadow-pop); border-color: #2B2D42; } .al-menu-card { position: relative; padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.25rem, 1rem + 1.5vw, 2rem); background: #FFFDF8 radial-gradient(circle at 1px 1px, rgb(43 45 66 / .07) 1px, transparent 0) 0 0 / 14px 14px; color: #2B2D42; border: var(--bw) solid #2B2D42; border-radius: var(--r-md); box-shadow: var(--shadow-pop-lg); } .al-menu-card::before { content: ""; position: absolute; inset: 10px; border: 2px dashed var(--coral); border-radius: 10px; pointer-events: none; } .al-menu-card h2, .al-menu-card h3, .al-menu-card h4 { color: #2B2D42; } .al-menu-card__head { text-align: center; margin-bottom: 1.75rem; } .al-menu-card__head h2 { font-size: var(--fs-xl); margin: 0; } .al-menu-card__head p { margin: .4rem 0 0; color: #4A4D63; font-style: italic; font-family: var(--font-display); } .al-menu-section + .al-menu-section { margin-top: 2.25rem; } .al-menu-section > h3 { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-lg); margin: 0 0 1rem; } .al-menu-section > h3::before, .al-menu-section > h3::after { content: ""; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 16px); } .al-menu-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; } @media (min-width: 900px) { .al-menu-items--2col { grid-template-columns: 1fr 1fr; column-gap: 4rem; } } .al-menu-item__row { display: flex; align-items: baseline; gap: .5rem; } .al-menu-item__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); margin: 0; } .al-menu-item__dots { flex: 1; min-width: 1.5rem; border-bottom: 2.5px dotted rgb(43 45 66 / .4); transform: translateY(-.3em); } .al-menu-item__price { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-md); color: #C2382B; white-space: nowrap; } .al-menu-item__desc { margin: .25rem 0 0; color: #4A4D63; font-size: var(--fs-sm); max-width: 50ch; } .al-menu-item__tags { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .al-menu-item.is-filtered-out { display: none; } .al-diet, .al-allergen { display: inline-grid; place-items: center; font-weight: 900; color: #2B2D42; border: 1.5px solid #2B2D42; text-decoration: none; cursor: help; } .al-diet { min-width: 2.1em; height: 1.7em; padding-inline: .35em; font-size: .7rem; border-radius: var(--r-pill); } .al-diet--v { background: #C8F0EC; } .al-diet--vg { background: #A8E6A1; } .al-diet--gf { background: #FFE7A3; } .al-allergen { width: 1.7em; height: 1.7em; font-size: .72rem; background: #FFD6CF; border-radius: 50%; } .al-allergen-key { display: grid; gap: .5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); } .al-allergen-key li { display: flex; align-items: center; gap: .5rem; } /* -------------------------------------------------------------------------- 10 HEADER / FOOTER HELPERS (Elementor Pro Theme Builder templates) -------------------------------------------------------------------------- */ .elementor-location-header:has(.al-header) { position: sticky; top: 0; z-index: 99; } .admin-bar .elementor-location-header:has(.al-header) { top: 32px; } .al-header { position: relative; } .al-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border-bottom: 2px solid var(--border-soft); } @media (max-width: 782px) { .admin-bar .elementor-location-header:has(.al-header) { top: 46px; } } .al-header .elementor-nav-menu--main .elementor-item { font-weight: 700; border-radius: var(--r-pill); padding: .55em .85em !important; color: var(--text); } .al-header .elementor-nav-menu--main .elementor-item:hover, .al-header .elementor-nav-menu--main .elementor-item.elementor-item-active { background: var(--sun); color: #2B2D42; } .al-header .elementor-nav-menu--dropdown { background: var(--sun) !important; border: var(--bw) solid #2B2D42; border-radius: var(--r-md); } .al-header .elementor-nav-menu--dropdown a { color: #2B2D42 !important; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg) !important; } .al-header .elementor-menu-toggle { border: var(--bw) solid var(--border); border-radius: 50%; width: 48px; height: 48px; background: var(--surface); color: var(--text); } .al-header .elementor-menu-cart__toggle .elementor-button { border: var(--bw) solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); width: 48px; height: 48px; padding: 0; justify-content: center; } .al-header .elementor-menu-cart__toggle .elementor-button-text { display: none; } .al-header .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before { background: var(--coral); color: #2B2D42; border: 2px solid #2B2D42; font-weight: 800; } .is-bouncing { animation: al-bounce 600ms var(--ease-spring); } @keyframes al-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-8deg); } 55% { transform: scale(.92) rotate(5deg); } 100% { transform: scale(1) rotate(0); } } .al-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; line-height: 1; } .al-brand:hover { color: var(--text); } .al-brand svg { width: 2.75rem; height: 2.75rem; flex: none; transition: transform var(--dur) var(--ease-spring); } .al-brand:hover svg { transform: rotate(-10deg) scale(1.05); } .al-brand__name { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); letter-spacing: -.02em; } .al-brand__sub { display: block; margin-top: .25em; font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); } .al-footer { color: #FFF3E0; --text: #FFF3E0; --text-muted: #D9D1C5; --link: #FFC93C; --link-hover: #7FE3DC; --border-soft: rgb(255 243 224 / .25); } .al-footer .elementor-heading-title { color: #FFC93C; } .al-footer a { color: #FFC93C; } .al-footer .al-brand, .al-footer .al-brand__name { color: #FFF3E0; } .al-footer .elementor-icon-list-text { color: #FFC93C; } .al-footer .al-hours th, .al-footer .al-hours td { color: #FFF3E0; } .al-footer .al-small { font-size: var(--fs-sm); color: #D9D1C5; } /* 404 */ .al-404 { text-align: center; padding: clamp(4rem, 3rem + 5vw, 7.5rem) 1rem; } .al-404__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 3rem + 18vw, 16rem); line-height: .9; color: var(--coral); -webkit-text-stroke: 3px #2B2D42; text-shadow: 8px 8px 0 var(--sun); margin: 0; } .al-404 h1 { font-size: var(--fs-2xl); margin: 1rem auto; max-width: 18ch; } .al-404 p { max-width: 50ch; margin-inline: auto; color: var(--text-muted); font-size: var(--fs-md); } .al-404 .al-cluster { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; } .al-404 svg { width: 7rem; margin: 1.25rem auto; display: block; } /* -------------------------------------------------------------------------- 11 COOKIE BANNER (disable in Abbey Lodge → Settings if you use Complianz etc.) -------------------------------------------------------------------------- */ .al-cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 99990; max-width: 40rem; margin-inline: auto; padding: 1.25rem 1.5rem; background: #FFFDF8; color: #2B2D42; border: var(--bw) solid #2B2D42; border-radius: var(--r-lg); box-shadow: var(--shadow-pop-lg); } .al-cookie h2 { font-size: var(--fs-md); margin: 0; color: #2B2D42; } .al-cookie p { font-size: var(--fs-sm); margin: .5rem 0 0; } .al-cookie a, .al-cookie .al-linkbtn { color: #C2382B; } .al-cookie__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; } .al-cookie__prefs { margin-top: 1rem; display: grid; gap: .6rem; font-size: var(--fs-sm); } .al-cookie__prefs label { display: flex; gap: .6rem; align-items: flex-start; } .al-cookie__prefs input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: #0E7C76; } .al-linkbtn { background: none; border: 0; padding: 0; min-height: 24px; font: inherit; font-weight: 800; color: var(--link); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } .al-linkbtn:hover { background: none; color: var(--link-hover); } .al-cookie .al-button { min-height: 40px; font-size: var(--fs-sm); padding: .5em 1em; cursor: pointer; } /* -------------------------------------------------------------------------- 12 WOOCOMMERCE (Astra's Woo markup + core Woo classes + blocks) -------------------------------------------------------------------------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; display: flex; flex-direction: column; padding: 0 0 1.25rem; text-align: left; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; transition: transform var(--dur) var(--ease-out); } .woocommerce ul.products li.product:hover { transform: translate(-2px, -2px); } .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img { margin: 0 0 1rem; aspect-ratio: 1; object-fit: cover; border-bottom: var(--bw) solid var(--border); transition: transform var(--dur-slow) var(--ease-out); } .woocommerce ul.products li.product:hover a img { transform: scale(1.04); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .ast-loop-product__link h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md) !important; color: var(--text); padding: 0 1.25rem; margin: 0 0 .35rem; } .woocommerce ul.products li.product .ast-woo-product-category, .woocommerce ul.products li.product .astra-shop-summary-wrap > span:first-child { display: block; padding: 0 1.25rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); } .woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 0; } .woocommerce ul.products li.product .price { display: block; padding: 0 1.25rem; margin: 0 0 1rem; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-md); color: var(--coral-deep) !important; } .woocommerce ul.products li.product .button { margin: auto 1.25rem 0 !important; align-self: flex-start; } .woocommerce .price small, .woocommerce-price-suffix { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); color: var(--text-muted); } .al-badge { position: absolute; top: .75rem; left: .75rem; z-index: 3; padding: .35em .8em; font-family: var(--font-display); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #2B2D42; background: var(--coral); border: 2px solid #2B2D42; border-radius: var(--r-pill); box-shadow: 3px 3px 0 #2B2D42; transform: rotate(-5deg); pointer-events: none; } .woocommerce span.onsale { background: var(--sun); color: #2B2D42; border: 2px solid #2B2D42; font-weight: 800; } /* Product grid: CSS grid regardless of theme column floats */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(var(--al-cols, 4), minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin: 0 0 var(--s-6); padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products.columns-1 { --al-cols: 1; } .woocommerce ul.products.columns-2 { --al-cols: 2; } .woocommerce ul.products.columns-3 { --al-cols: 3; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; } @media (max-width: 1024px) { .woocommerce ul.products:not(.columns-1):not(.columns-2) { --al-cols: 3; } } @media (max-width: 767px) { .woocommerce ul.products, .woocommerce-page ul.products { --al-cols: 2 !important; gap: 1rem; } } @media (max-width: 420px) { .woocommerce ul.products.columns-2 { --al-cols: 1 !important; } } /* Woo buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .wc-block-components-button:not(.is-link), .wp-block-button__link.wp-element-button, .woocommerce .checkout-button { min-height: 46px; padding: .7em 1.35em !important; font-family: var(--font-body); font-weight: 800 !important; font-size: var(--fs-base) !important; line-height: 1.1; color: #2B2D42 !important; background: var(--sun) !important; border: var(--bw) solid #2B2D42 !important; border-radius: var(--r-pill) !important; box-shadow: var(--shadow-pop); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .single_add_to_cart_button:hover, .wc-block-components-button:not(.is-link):hover, .woocommerce .checkout-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sticker-shadow); background: var(--coral) !important; } .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--coral) !important; } .woocommerce .single_add_to_cart_button:hover, .wc-block-cart__submit-button:hover { background: var(--sun) !important; } .woocommerce a.added_to_cart { font-weight: 800; margin-left: 1.25rem; } .woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); font-weight: 700; font-size: var(--fs-sm); } /* Single product */ .single-product div.product .product_title { font-size: var(--fs-xl); } .single-product div.product p.price, .single-product div.product span.price { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xl); color: var(--coral-deep) !important; } .single-product .woocommerce-product-gallery { border: var(--bw) solid #2B2D42; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop-lg); background: var(--sun-soft); } .single-product .woocommerce-product-gallery .flex-control-thumbs { padding: .75rem !important; display: flex; gap: .5rem; background: var(--surface); } .single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 4.5rem !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--r-sm); border: 2px solid transparent; } .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: #2B2D42; } .woocommerce div.product form.cart .variations { border: 0; margin-bottom: 1rem; } .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0 0 .5rem; border: 0; background: none; text-align: left; } .woocommerce div.product form.cart .variations label { font-weight: 800; } .woocommerce .quantity .qty { min-height: 46px; border: var(--bw) solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 800; width: 4.5em; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--r-pill) var(--r-pill) 0 0; } .al-size-guide-btn { margin: .25rem 0 1rem; } /* Swatches (abbey.js turns variation selects into these) */ .al-swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 .5rem; padding: 0; border: 0; } .al-swatch { position: relative; display: grid; justify-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; color: var(--text); } .al-swatch input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; } .al-swatch__dot { width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid #2B2D42; background: var(--c, var(--surface)); } .al-swatch__chip { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .6em; font-weight: 800; font-size: var(--fs-sm); border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .al-swatch input:checked + .al-swatch__dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--coral); } .al-swatch input:checked + .al-swatch__chip { background: var(--sun); color: #2B2D42; border-color: #2B2D42; box-shadow: var(--shadow-pop); } .al-swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 4px; } .al-swatch input:disabled + span { opacity: .35; text-decoration: line-through; } select.al-swatched, .woocommerce div.product form.cart .variations select.al-swatched { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; clip-path: inset(50%); } .woocommerce div.product form.cart .variations td.value { position: relative; } /* Size guide dialog */ .al-dialog { width: min(100% - 2rem, 40rem); max-height: min(90vh, 52rem); padding: 0; color: var(--text); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop-lg); } .al-dialog::backdrop { background: rgb(27 28 46 / .55); backdrop-filter: blur(3px); } .al-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 2px dashed var(--border-soft); } .al-dialog__head h2 { margin: 0; font-size: var(--fs-lg); } .al-dialog__body { padding: 1.5rem; overflow: auto; } .al-dialog__close { width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--border); background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; } .al-size-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .al-size-table th, .al-size-table td { border: 1.5px solid var(--border-soft); padding: .5em; text-align: center; } .al-size-table thead th { background: var(--sun); color: #2B2D42; } /* Block cart / checkout + classic cart totals */ .wc-block-cart, .wc-block-checkout { --wc-form-border-color: var(--border); } .wc-block-components-totals-wrapper, .wp-block-woocommerce-cart-order-summary-block, .wc-block-components-sidebar .wc-block-components-panel, .cart_totals { background: var(--surface); } .wc-block-components-sidebar, .woocommerce .cart-collaterals .cart_totals { border: var(--bw) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 1.25rem !important; background: var(--surface); } .wc-block-components-text-input input, .wc-block-components-combobox input, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: var(--bw) solid var(--border) !important; border-radius: var(--r-md) !important; background: var(--surface) !important; color: var(--text) !important; } .wc-block-components-product-name, .wc-block-cart-item__product .wc-block-components-product-name { font-weight: 800; color: var(--text); } /* Mini cart (Elementor Pro Menu Cart + classic widget) */ .elementor-menu-cart__main, .widget_shopping_cart_content { color: var(--text); } .elementor-menu-cart__container .elementor-menu-cart__main { background: var(--bg); border-left: var(--bw) solid var(--border); } .elementor-menu-cart__footer-buttons .elementor-button { border-radius: var(--r-pill); border: var(--bw) solid #2B2D42; font-weight: 800; color: #2B2D42; } .elementor-menu-cart__footer-buttons .elementor-button--view-cart { background: #FFFDF8; } .elementor-menu-cart__footer-buttons .elementor-button--checkout { background: var(--coral); } /* Store notices */ .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-success { border: var(--bw) solid #2B2D42 !important; border-radius: var(--r-md); background: var(--teal-soft) !important; color: #2B2D42 !important; } .woocommerce-message::before, .woocommerce-info::before { color: #0E7C76; } .woocommerce-message a, .woocommerce-info a { color: #2B2D42 !important; } /* -------------------------------------------------------------------------- 13 MOTION — armed only when JS adds .al-motion to (never in the Elementor editor, never for reduced-motion users). Transform/opacity only. -------------------------------------------------------------------------- */ .al-motion body:not(.elementor-editor-active) .al-reveal, .al-motion body:not(.elementor-editor-active) .al-stagger > .e-con-inner > *, .al-motion body:not(.elementor-editor-active) .al-stagger > .elementor-element { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--stagger, 0) * 90ms); } .al-motion body:not(.elementor-editor-active) .al-reveal--left { transform: translateX(-40px); } .al-motion body:not(.elementor-editor-active) .al-reveal--right { transform: translateX(40px); } .al-motion body:not(.elementor-editor-active) .al-reveal--pop { transform: scale(.85) rotate(-4deg); } .al-motion body:not(.elementor-editor-active) .is-visible.is-visible { opacity: 1; transform: none; } .al-motion body:not(.elementor-editor-active) .al-polaroid.is-visible { transform: rotate(var(--rot)); } .al-motion body:not(.elementor-editor-active) .al-review.is-visible:nth-child(odd) { transform: rotate(-1deg); } .al-motion body:not(.elementor-editor-active) .al-review.is-visible:nth-child(even) { transform: rotate(1deg); } .al-motion .al-scribble svg { transform: scaleX(0); transition: transform 900ms var(--ease-out) 400ms; } .al-motion .al-scribble.is-drawn svg { transform: scaleX(1); } .al-motion .al-hero-title .al-word { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); animation: al-word 700ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); } @keyframes al-word { to { opacity: 1; transform: none; } } .al-kenburns img { animation: al-kenburns 24s ease-in-out infinite alternate; transform-origin: 60% 40%; } .al-kenburns .elementor-widget-container, .al-kenburns > img, .al-kenburns { overflow: hidden; } @keyframes al-kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } } .al-blob-frame img { border: var(--bw) solid #2B2D42; border-radius: 46% 54% 38% 62% / 42% 38% 62% 58%; box-shadow: var(--shadow-pop-lg); aspect-ratio: 4 / 5; object-fit: cover; } .al-blob-frame .elementor-widget-container, .al-blob-frame { border-radius: 46% 54% 38% 62% / 42% 38% 62% 58%; } [data-al-parallax], .al-parallax { will-change: transform; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .al-blobs::before, .al-blobs::after, .al-kenburns img, .al-marquee__track, .al-wobble .elementor-heading-title { animation: none !important; } .al-marquee__track { flex-wrap: wrap; justify-content: center; min-width: 0; } .al-marquee__group[aria-hidden="true"], .al-marquee__toggle { display: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* -------------------------------------------------------------------------- 14 ELEMENTOR EDITOR — keep everything visible & selectable while editing -------------------------------------------------------------------------- */ .elementor-editor-active .al-collage { min-height: 28rem; } .elementor-editor-active .al-blobs::before, .elementor-editor-active .al-blobs::after { animation: none; } /* Small screens */ @media (max-width: 767px) { .al-collage { min-height: 24rem; } .al-event { grid-template-columns: 1fr; } .al-event__date { width: 4.25rem; } .al-review:nth-child(n) { transform: none; } } /* ---- Standalone additions: colours set as plain hex in Elementor, re-mapped for dark mode here ---- */ .al-bg-cream { background-color: var(--bg) !important; } .al-bg-paper { background-color: var(--surface) !important; } .al-bg-warm { background-color: var(--surface-2) !important; } .al-bg-night { background-color: var(--night) !important; } .al-wave-cream > .elementor-shape .elementor-shape-fill { fill: var(--bg) !important; } .al-wave-warm > .elementor-shape .elementor-shape-fill { fill: var(--surface-2) !important; } .al-wave-night > .elementor-shape .elementor-shape-fill { fill: var(--night) !important; } body:not(.al-on-bright) .elementor-widget-text-editor, body .elementor-heading-title { color: var(--text); } .al-on-bright .elementor-heading-title, .al-on-bright .elementor-widget-text-editor { color: #2B2D42; } .al-dish-price .elementor-heading-title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); color: var(--coral-deep) !important; } .al-event { display: grid !important; grid-template-columns: auto 1fr; } .al-events-list { gap: var(--s-5); } /* FAQ accordion */ .al-faq-acc .elementor-accordion-item { background: var(--surface); border: var(--bw) solid var(--border) !important; border-radius: var(--r-md); box-shadow: var(--shadow-pop); margin-bottom: .75rem; overflow: hidden; } .al-faq-acc .elementor-tab-title { padding: 1rem 1.25rem !important; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); border: 0 !important; } .al-faq-acc .elementor-tab-title a, .al-faq-acc .elementor-accordion-icon { color: var(--text) !important; } .al-faq-acc .elementor-tab-content { padding: 0 1.25rem 1.25rem !important; border: 0 !important; color: var(--text); }/* End custom CSS */