.elementor-kit-11{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */{ "info": { "title": "Webwingz AU — Global Design Kit", "description": "Design system reference for Elementor global colors, typography presets, custom CSS, and setup notes. Paste custom_css into Elementor > Site Settings > Custom CSS. Register google_fonts_url via Elementor > Site Settings > Custom Fonts or enqueue via functions.php.", "version": "1.0.0", "created": "2026-05-06", "studio": "Webwingz Pty Ltd" }, "global_colors": [ { "id": "ww-bg", "title": "BG (Cream)", "color": "#faf7f2" }, { "id": "ww-bg-deep", "title": "BG Deep (Dark)", "color": "#1a1814" }, { "id": "ww-bg-soft", "title": "BG Soft", "color": "#f3ede3" }, { "id": "ww-bg-elev", "title": "BG Elevated", "color": "#ffffff" }, { "id": "ww-ink", "title": "Ink (Primary)", "color": "#1a1814" }, { "id": "ww-ink-2", "title": "Ink 2 (Muted)", "color": "#4a4338" }, { "id": "ww-ink-3", "title": "Ink 3 (Subtle)", "color": "#7a7165" }, { "id": "ww-line", "title": "Line (Border)", "color": "#e7dfd1" }, { "id": "ww-accent", "title": "Accent (Clay)", "color": "#c8553d" }, { "id": "ww-accent-2", "title": "Accent 2 (Forest)","color": "#2f5d4f" }, { "id": "ww-accent-soft","title": "Accent Soft", "color": "#f5e9e3" }, { "id": "ww-gold", "title": "Gold", "color": "#b8893d" } ], "global_typography": [ { "id": "ww-display", "title": "Display", "font_family": "Fraunces", "font_weight": "600", "font_style": "normal", "font_size": { "unit": "px", "size": 56 }, "line_height": { "unit": "em", "size": 1.05 }, "letter_spacing": { "unit": "em", "size": -0.02 }, "usage_note": "Hero headings and section titles. Renders in Fraunces optical 'soft' variable axis." }, { "id": "ww-display-italic", "title": "Display Italic", "font_family": "Fraunces", "font_weight": "300", "font_style": "italic", "font_size": { "unit": "px", "size": 56 }, "line_height": { "unit": "em", "size": 1.05 }, "letter_spacing": { "unit": "em", "size": -0.02 }, "color": "#c8553d", "usage_note": "Italic accent words within Display headings. Clay (#c8553d) color. Wrap target words in ." }, { "id": "ww-body", "title": "Body", "font_family": "Geist", "font_weight": "400", "font_style": "normal", "font_size": { "unit": "px", "size": 16 }, "line_height": { "unit": "em", "size": 1.65 }, "letter_spacing": { "unit": "em", "size": 0 }, "usage_note": "Default paragraph and UI text." }, { "id": "ww-body-large", "title": "Body Large", "font_family": "Geist", "font_weight": "400", "font_style": "normal", "font_size": { "unit": "px", "size": 20 }, "line_height": { "unit": "em", "size": 1.6 }, "letter_spacing": { "unit": "em", "size": -0.01 }, "usage_note": "Lead paragraphs, hero subtitles, pull quotes." }, { "id": "ww-label", "title": "Label / Meta", "font_family": "Geist Mono", "font_weight": "400", "font_style": "normal", "font_size": { "unit": "px", "size": 11 }, "line_height": { "unit": "em", "size": 1.4 }, "letter_spacing": { "unit": "em", "size": 0.08 }, "text_transform": "uppercase", "usage_note": "Eyebrow pills, meta tags, table labels, chip text." }, { "id": "ww-mono", "title": "Mono", "font_family": "Geist Mono", "font_weight": "400", "font_style": "normal", "font_size": { "unit": "px", "size": 13 }, "line_height": { "unit": "em", "size": 1.5 }, "letter_spacing": { "unit": "em", "size": 0 }, "usage_note": "Code snippets, stats, pricing figures, data callouts." } ], "google_fonts_url": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300;1,9..144,600&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap", "custom_css": "/* ============================================================\n WEBWINGZ AU — GLOBAL DESIGN SYSTEM CSS\n Paste into: Elementor > Site Settings > Custom CSS\n ============================================================ */\n\n/* --- CSS Custom Properties (Light Mode) --- */\n:root {\n --bg: #faf7f2;\n --bg-deep: #1a1814;\n --bg-soft: #f3ede3;\n --bg-elev: #ffffff;\n --ink: #1a1814;\n --ink-2: #4a4338;\n --ink-3: #7a7165;\n --line: #e7dfd1;\n --accent: #c8553d;\n --accent-2: #2f5d4f;\n --accent-soft: #f5e9e3;\n --gold: #b8893d;\n\n /* Spacing scale (4px unit) */\n --sp-1: 4px;\n --sp-2: 8px;\n --sp-3: 12px;\n --sp-4: 16px;\n --sp-6: 24px;\n --sp-8: 32px;\n --sp-10: 40px;\n --sp-12: 48px;\n --sp-16: 64px;\n --sp-22: 88px;\n\n /* Border radius */\n --r-sm: 8px;\n --r-md: 14px;\n --r-lg: 22px;\n --r-pill: 999px;\n\n /* Shadows */\n --shadow-md: 0 4px 12px rgba(28,22,12,.06), 0 12px 32px rgba(28,22,12,.08);\n\n /* Motion */\n --ease: cubic-bezier(.2,.8,.2,1);\n --dur-fast: 0.2s;\n --dur-base: 0.3s;\n --dur-slow: 0.4s;\n\n /* Layout */\n --max-w: 1200px;\n --section-y: 88px;\n}\n\n/* --- Dark Mode Overrides --- */\n[data-theme=\"dark\"] {\n --bg: #15130f;\n --bg-deep: #0d0c09;\n --bg-soft: #1e1b16;\n --bg-elev: #252118;\n --ink: #f5efe3;\n --ink-2: #c8bfb0;\n --ink-3: #7a7165;\n --line: #2e2b24;\n --accent: #e87a64;\n --accent-2: #3d7a6a;\n --accent-soft: #2a1f1c;\n --gold: #d4a855;\n}\n\n/* Apply tokens to body in dark mode */\n[data-theme=\"dark\"] body {\n background-color: var(--bg);\n color: var(--ink);\n}\n\n/* --- Base Resets --- */\n*, *::before, *::after { box-sizing: border-box; }\n\nbody {\n background-color: var(--bg);\n color: var(--ink);\n font-family: 'Geist', -apple-system, sans-serif;\n}\n\n/* Fraunces heading fallback */\nh1, h2, h3, h4 {\n font-family: 'Fraunces', Georgia, serif;\n font-weight: 600;\n letter-spacing: -0.02em;\n}\n\n/* Italic accent in headings */\nem.ww-italic-accent,\n.ww-italic-accent {\n font-style: italic;\n font-weight: 300;\n color: var(--accent);\n font-family: 'Fraunces', Georgia, serif;\n}\n\n/* --- Eyebrow Pill --- */\n.eyebrow-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--accent-soft, #f5e9e3);\n color: var(--accent, #c8553d);\n padding: 6px 14px;\n border-radius: 999px;\n font-size: 11px;\n font-family: 'Geist Mono', monospace;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 400;\n line-height: 1.4;\n user-select: none;\n}\n\n.eyebrow-pill::before {\n content: '\\2022';\n font-size: 8px;\n opacity: 0.7;\n}\n\n/* --- Delivers List --- */\n.delivers-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.delivers-list li {\n display: flex;\n gap: 12px;\n padding-bottom:14px;\n border-bottom: 1px dashed var(--line, #e7dfd1);\n margin-bottom: 14px;\n color: var(--ink-2, #4a4338);\n font-family: 'Geist', sans-serif;\n font-size: 16px;\n line-height: 1.5;\n align-items: flex-start;\n}\n\n.delivers-list li:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n}\n\n.delivers-list li::before {\n content: '\\2192';\n color: var(--accent, #c8553d);\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n/* --- Chip / Tag --- */\n.ww-chip {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--bg-elev, #ffffff);\n border: 1px solid var(--line, #e7dfd1);\n border-radius: 999px;\n font-family: 'Geist', sans-serif;\n font-size: 13px;\n color: var(--ink-2, #4a4338);\n cursor: pointer;\n transition: border-color var(--dur-fast) var(--ease),\n color var(--dur-fast) var(--ease);\n text-decoration: none;\n}\n\n.ww-chip:hover {\n border-color: var(--accent, #c8553d);\n color: var(--accent, #c8553d);\n}\n\n/* --- Section Utilities --- */\n.ww-section-bg-deep {\n background: var(--bg-deep, #1a1814);\n color: var(--ink, #f5efe3);\n}\n\n.ww-section-bg-soft {\n background: var(--bg-soft, #f3ede3);\n}\n\n/* --- CTA Glow Block --- */\n.ww-cta-glow {\n position: relative;\n background: var(--bg-deep, #1a1814);\n border-radius: var(--r-lg, 22px);\n overflow: hidden;\n}\n\n.ww-cta-glow::before {\n content: '';\n position: absolute;\n top: -40%;\n left: 50%;\n transform: translateX(-50%);\n width: 70%;\n height: 60%;\n background: radial-gradient(\n ellipse at center,\n rgba(200, 85, 61, 0.22) 0%,\n rgba(200, 85, 61, 0.06) 50%,\n transparent 80%\n );\n pointer-events: none;\n z-index: 0;\n}\n\n.ww-cta-glow > * {\n position: relative;\n z-index: 1;\n}\n\n/* --- Button Primitives --- */\n.ww-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 28px;\n border-radius: 999px;\n font-family: 'Geist', sans-serif;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n transition: transform var(--dur-fast) var(--ease),\n box-shadow var(--dur-fast) var(--ease),\n background var(--dur-fast) var(--ease);\n border: none;\n white-space: nowrap;\n}\n\n.ww-btn:hover {\n transform: translateY(-2px);\n}\n\n.ww-btn-primary {\n background: var(--ink, #1a1814);\n color: #ffffff;\n}\n\n.ww-btn-primary:hover {\n background: #2e2b23;\n box-shadow: var(--shadow-md);\n}\n\n.ww-btn-outline {\n background: transparent;\n color: var(--ink, #1a1814);\n border: 1px solid var(--line, #e7dfd1);\n}\n\n.ww-btn-outline:hover {\n border-color: var(--accent, #c8553d);\n color: var(--accent, #c8553d);\n}\n\n.ww-btn-accent {\n background: var(--accent, #c8553d);\n color: #ffffff;\n}\n\n.ww-btn-accent:hover {\n background: #b34733;\n box-shadow: 0 4px 16px rgba(200,85,61,.28);\n}\n\n/* --- Card --- */\n.ww-card {\n background: var(--bg-elev, #ffffff);\n border: 1px solid var(--line, #e7dfd1);\n border-radius: var(--r-lg, 22px);\n box-shadow: var(--shadow-md);\n overflow: hidden;\n transition: transform var(--dur-base) var(--ease),\n box-shadow var(--dur-base) var(--ease);\n}\n\n.ww-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(28,22,12,.10), 0 24px 48px rgba(28,22,12,.12);\n}\n\n/* --- Theme Toggle --- */\n.ww-theme-toggle {\n width: 40px;\n height: 40px;\n border-radius: 999px;\n border: 1px solid var(--line, #e7dfd1);\n background: transparent;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: border-color var(--dur-fast) var(--ease),\n background var(--dur-fast) var(--ease);\n color: var(--ink-3, #7a7165);\n font-size: 16px;\n line-height: 1;\n}\n\n.ww-theme-toggle:hover {\n border-color: var(--accent, #c8553d);\n color: var(--accent, #c8553d);\n}\n\n[data-theme=\"dark\"] .ww-moon-icon { display: none; }\n[data-theme=\"light\"] .ww-sun-icon,\n:root:not([data-theme=\"dark\"]) .ww-sun-icon { display: none; }\n[data-theme=\"dark\"] .ww-sun-icon { display: block; }\n\n/* --- Responsive Section Padding --- */\n@media (max-width: 1024px) {\n :root { --section-y: 64px; }\n}\n\n@media (max-width: 768px) {\n :root {\n --section-y: 48px;\n --max-w: 100%;\n }\n h1, .ww-display { font-size: 36px; }\n h2 { font-size: 28px; }\n}\n\n/* --- Elementor Section/Column Helpers --- */\n.elementor-section.ww-full {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.elementor-section > .elementor-container {\n max-width: var(--max-w, 1200px);\n}\n\n/* --- Divider Dashed --- */\n.ww-divider-dashed {\n border: none;\n border-top: 1px dashed var(--line, #e7dfd1);\n margin: 0;\n}\n", "theme_toggle_js": "/* ============================================================\n WEBWINGZ AU — Theme Toggle Script\n Add to Elementor > Site Settings > Custom Code > Body End\n OR paste into your child theme footer via wp_footer hook\n ============================================================ */\n(function() {\n 'use strict';\n\n var STORAGE_KEY = 'ww-theme';\n var root = document.documentElement;\n\n /* Apply saved preference before paint to avoid FOUC */\n var saved = localStorage.getItem(STORAGE_KEY);\n var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n var initial = saved || (prefersDark ? 'dark' : 'light');\n root.setAttribute('data-theme', initial);\n\n function setTheme(theme) {\n root.setAttribute('data-theme', theme);\n localStorage.setItem(STORAGE_KEY, theme);\n /* Update ARIA on all toggles */\n document.querySelectorAll('.ww-theme-toggle').forEach(function(btn) {\n btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');\n });\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n /* Bind all toggle buttons */\n document.querySelectorAll('.ww-theme-toggle').forEach(function(btn) {\n btn.addEventListener('click', function() {\n var current = root.getAttribute('data-theme') || 'light';\n setTheme(current === 'dark' ? 'light' : 'dark');\n });\n });\n\n /* Sync with OS changes if no saved preference */\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {\n if (!localStorage.getItem(STORAGE_KEY)) {\n setTheme(e.matches ? 'dark' : 'light');\n }\n });\n });\n})();", "setup_notes": [ "1. FONTS: Add the google_fonts_url to Elementor > Site Settings > Custom Fonts, OR enqueue via wp_enqueue_style in your child theme functions.php. Alternatively, self-host Geist and Geist Mono via Bunny Fonts or Google Fonts download.", "2. CUSTOM CSS: Copy the entire 'custom_css' string and paste into Elementor > Site Settings > Custom CSS. Remove the leading/trailing quotes — paste raw CSS only.", "3. GLOBAL COLORS: Add each entry from global_colors manually via Elementor > Site Settings > Global Colors. Use the exact hex values and IDs shown.", "4. GLOBAL TYPOGRAPHY: Register each entry from global_typography via Elementor > Site Settings > Global Typography. Map to the font_family and weights specified.", "5. THEME TOGGLE JS: Copy the 'theme_toggle_js' string and paste into Elementor > Site Settings > Custom Code > add new code > Body End. This enables the dark mode toggle. Remove JS comment markers when pasting.", "6. ELEMENTOR PRO REQUIRED: The header and footer templates (01-header.json, 02-footer.json) require Elementor Pro for theme builder support.", "7. IMPORT ORDER: Import 01-header.json first, then 02-footer.json. Assign each to the Theme Builder (Header / Footer conditions: All Pages).", "8. COLOR VARIABLE USAGE: In Elementor widget Custom CSS fields, reference design tokens as CSS variables: var(--accent), var(--bg-soft), etc. These are resolved from :root." ] }/* End custom CSS */