/* ---- variables.css ---- */ :root { --color-primary: #000000; --color-brand: #000000; --color-brand-accent: #ffffff; --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; --color-info: #2563eb; --color-bg: #ffffff; --color-bg-secondary: #f9fafb; --color-border: #e5e7eb; --color-text: #111827; --color-text-secondary: #6b7280; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: var(--font-sans); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); } /* ---- reset.css ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } style { display: none !important; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; } button { cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ---- typography.css ---- */ /* Self-hosted latin subsets (Batch 10, F-03): no third-party font origin on the critical path. */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../assets/fonts/raleway-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/playfair-display-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/lora-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; } body { font-family: var(--font-body, var(--font-sans)); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--color-text); } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); } h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); } h3 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } a { color: inherit; } img { max-width: 100%; display: block; } button { font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ---- layout.css ---- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .announcement-bar { background: var(--color-brand, #000); color: #fff; text-align: center; padding: 0.625rem 1rem; font-size: 0.875rem; position: relative; z-index: 600; } .announcement-bar p { margin: 0; } .countdown-bar { text-align: center; padding: 0.7rem 1.25rem; font-size: 0.875rem; position: relative; z-index: 600; } .countdown-inner { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .countdown-label { font-weight: 600; font-size: 0.9rem; opacity: 0.92; white-space: nowrap; } .countdown-units { display: flex; align-items: center; gap: 0.35rem; } .countdown-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 0.3rem 0.6rem; min-width: 48px; backdrop-filter: blur(4px); } .countdown-num { font-size: 1.35rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .countdown-unit-lbl { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 0.1rem; } .countdown-colon { font-size: 1.2rem; font-weight: 800; opacity: 0.6; line-height: 1; padding-bottom: 0.5rem; } .site-header { background: var(--color-navbar-bg, #111827); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15); } .site-header .container { max-width: var(--navbar-max-width, 100%); padding: 0 3.5rem; } .site-header .site-logo { background: none; -webkit-text-fill-color: #38bdf8; color: #38bdf8; } .site-nav { display: flex; align-items: center; padding: 0.875rem 0; position: relative; } .site-logo { font-weight: 800; font-size: 1.5rem; text-decoration: none; letter-spacing: -0.025em; display: inline-block; background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity 0.2s, transform 0.2s; } .site-nav .site-logo:hover { opacity: 0.8; transform: scale(1.04); } .nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; position: relative; z-index: 10; } .nav-quote-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: #38bdf8 !important; color: #fff !important; } .nav-quote-btn:hover { background: #0ea5e9 !important; color: #fff !important; } .nav-history-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: transparent !important; color: #38bdf8 !important; border: 1.5px solid rgba(56,189,248,0.4) !important; } .nav-history-btn:hover { background: rgba(56,189,248,0.1) !important; border-color: #38bdf8 !important; color: #38bdf8 !important; opacity: 1 !important; transform: none !important; } /* The catalogue CTA is the one thing on this nav that has to be noticed, so it is lit and it flashes five times when the page opens (each a 0.5s blink then 0.5s lit and still, the last blink ending at 4.5s), then stays lit and still. One blink a second is well under three flashes a second, and 4.5 seconds keeps it inside the five-second limit for automatic blinking, so it needs no pause control. box-shadow is deliberately NOT !important here - an !important declaration beats a CSS animation, which would silently kill the blink. The specificity of .site-header is what beats .btn-secondary in components.css, which loads after this file. The hover rule leaves the animation alone: switching it off on hover restarted the whole flash when the pointer left. */ .nav-account-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 44px !important; background: transparent !important; color: #7dd3fc !important; border: 1.5px solid rgba(125,211,252,0.85) !important; } .site-header .nav-account-btn { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); animation: nav-account-blink 4.5s linear 1; } .nav-account-btn:hover { background: rgba(56,189,248,0.12) !important; border-color: #bae6fd !important; color: #e0f2fe !important; opacity: 1 !important; transform: none !important; } .site-header .nav-account-btn:hover { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); } @keyframes nav-account-blink { /* 0.5s steps of 4.5s: blinking 0-0.5s, 1-1.5s, 2-2.5s, 3-3.5s and 4-4.5s, lit and still between */ 0%, 11.111%, 22.222%, 33.333%, 44.444%, 55.556%, 66.667%, 77.778%, 88.889%, 100% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); } 5.556%, 27.778%, 50%, 72.222%, 94.444% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); } } /* The $499 price. ED-498 (Dean): no gold tag any more; it reads as the text around it, on every page and at every size. Kept on one line so "$499" never splits. */ .price-555 { white-space: nowrap; } /* The header button is gold on every page: "$499 Websites" everywhere, and "EZWebee Services" on the $499 page itself (ED-496, Dean). Keyed to the class, not the link: the release rewrites front-ends.html to /designs/, and an href selector silently stopped matching (ED-478). */ .nav-account-btn { background: #fbbf24 !important; color: #0f172a !important; border: 1.5px solid #fde68a !important; font-weight: 800 !important; } .site-header .nav-account-btn { box-shadow: 0 0 16px rgba(251,191,36,0.9), 0 0 34px rgba(251,191,36,0.55); animation: nav-555-blink 4.5s linear 1; } .nav-account-btn:hover { background: #fde68a !important; border-color: #fff !important; color: #0f172a !important; } .site-header .nav-account-btn:hover { box-shadow: 0 0 16px rgba(251,191,36,0.9), 0 0 34px rgba(251,191,36,0.55); } @keyframes nav-555-blink { 0%, 11.111%, 22.222%, 33.333%, 44.444%, 55.556%, 66.667%, 77.778%, 88.889%, 100% { box-shadow: 0 0 16px rgba(251,191,36,0.9), 0 0 34px rgba(251,191,36,0.55); } 5.556%, 27.778%, 50%, 72.222%, 94.444% { box-shadow: 0 0 0 rgba(251,191,36,0); } } @media (prefers-reduced-motion: reduce) { .site-header .nav-account-btn { animation: none; } } /* no blink at all for anyone who asked the OS to stop motion */ @media (prefers-reduced-motion: reduce) { .site-header .nav-account-btn { animation: none; } } .nav-book-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: #0ea5e9 !important; color: #fff !important; box-shadow: 0 2px 10px rgba(14,165,233,0.4) !important; } .nav-book-btn:hover { background: #0284c7 !important; color: #fff !important; box-shadow: 0 4px 16px rgba(14,165,233,0.55) !important; } .nav-menu-book-btn { display: block; text-align: center; background: #0ea5e9 !important; color: #fff !important; font-weight: 700 !important; border-radius: var(--radius-md); box-shadow: 0 2px 10px rgba(14,165,233,0.35); } .nav-menu-book-btn:hover { background: #0284c7 !important; transform: scale(1.04) !important; } .nav-menu { display: none; list-style: none; margin: 0; padding: 0.375rem; gap: 0.1rem; flex-direction: column; position: absolute; top: calc(100% + 0.25rem); right: 0; width: auto; min-width: 184px; background: var(--color-navbar-bg, #111827); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 499; } .nav-menu.nav-open { display: flex; } .nav-menu li { width: 100%; } .nav-menu a { display: block; white-space: nowrap; text-decoration: none; color: #38bdf8; font-size: 1rem; font-weight: 500; padding: 0.52rem 1rem; border-radius: var(--radius-md); transition: all 0.18s ease; } .nav-menu a:hover { background: #38bdf8; color: #fff; transform: scale(1.07); } .nav-menu a.active { font-weight: 800; color: #fff; font-size: 1.08rem; text-decoration: none; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); border-radius: var(--radius-md); box-shadow: 0 0 10px rgba(14,165,233,0.45), 0 0 22px rgba(99,102,241,0.35), 0 0 40px rgba(139,92,246,0.2); } .nav-menu a.active:hover { color: #fff; } @media (min-width: 769px) { .site-header .site-logo { font-size: 2.25rem; } } @media (max-width: 480px) { .site-header .site-logo { font-size: 1.25rem !important; } .container { padding: 0 0.75rem; } .site-header .container { padding: 0 1rem; } .booking-page .container { padding: 0; } } @media (max-width: 380px) { .site-header .container { padding: 0 1rem; } .site-header .site-logo { font-size: 0.82rem !important; } } /* Phones: the two header CTAs have long labels ("See the 21 Sites", "Contact EZWebee"), and side by side they wrapped onto three lines and tripled the header height. The secondary one goes - Front-Ends is in the hamburger menu anyway - and the contact CTA is kept and stopped from wrapping, because it is the whole point of the page. Below 380 there is no room for it either and Contact is in the menu too. Specificity has to beat .btn in components.css, which loads after this file. */ /* 2026-09-26: the catalogue button stays on phones - hiding it left the catalogue reachable only from inside the menu. Contact is the one that goes below 380. 2026-10-12: both labels read one short phrase that fits a phone, so the short label is the same words; since 2026-10-29 it is "$499 Websites" (it was "$350 Websites", the same length). */ .nav-lbl-short { display: none; } @media (max-width: 640px) { .nav-lbl-long { display: none; } .nav-lbl-short { display: inline; } .site-header .nav-account-btn { white-space: nowrap; padding: 0.45rem 0.8rem !important; font-size: 0.8rem !important; min-height: 44px !important; } .site-header .nav-book-btn { white-space: nowrap; padding: 0.55rem 0.9rem; font-size: 0.85rem; } } @media (max-width: 380px) { .site-header .nav-book-btn { display: none; } } /* 2026-10-12: the menu button is an outlined button like the $499 Websites one beside it, with a word that says what it does: "Menu", and "Close" while the menu is open (js/site.js swaps it). The word never hides on a narrow phone; at 380 and below both buttons shrink to fit instead. The label holds the width of "Close" so the button does not jump when it changes. */ .nav-toggle { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.45rem; background: transparent; border: 1.5px solid rgba(125,211,252,0.85); border-radius: var(--radius-md); color: #7dd3fc; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; padding: 0.5rem 0.9rem; min-width: 44px; min-height: 44px; cursor: pointer; transition: background 0.2s; } .nav-toggle:hover { background: rgba(125,211,252,0.12); } .nav-bars { display: flex; flex-direction: column; gap: 3px; align-items: center; } .nav-toggle-label { color: #7dd3fc; user-select: none; min-width: 2.75em; text-align: left; white-space: nowrap; } .bar { display: block; width: 14px; height: 2px; background: #7dd3fc; border-radius: 2px; transition: transform 0.35s ease, opacity 0.25s ease; } .nav-toggle.nav-open .bar-1 { transform: translateY(5px) rotate(45deg); } .nav-toggle.nav-open .bar-2 { opacity: 0; } .nav-toggle.nav-open .bar-3 { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 640px) { .nav-toggle { font-size: 0.8rem; padding: 0.45rem 0.8rem; } } @media (max-width: 380px) { .site-header .nav-right { gap: 0.4rem; } .site-header .nav-account-btn { padding: 0.45rem 0.55rem !important; font-size: 0.75rem !important; } .nav-toggle { padding: 0.45rem 0.55rem; font-size: 0.75rem; gap: 0.35rem; } } /* 2026-10-24 (B5 logo gate): the logo and the two header buttons did not fit in three bands, and in Firefox and WebKit the $499 Websites button covered the end of the logo - 381 to 419 (the 1.25rem logo needs about 398px), 481 to 640 (the 3.5rem header padding came back) and 320 (about 3px short). The header keeps the phone padding up to 640, the logo steps down to 1rem between 381 and 419, and at 380 and below the gaps and button padding shrink a little; the 44px touch targets are unchanged. */ @media (max-width: 640px) { .site-header .container { padding: 0 1rem; } } @media (min-width: 381px) and (max-width: 419px) { .site-header .site-logo { font-size: 1rem !important; } .site-header .nav-right { gap: 0.5rem; } } @media (max-width: 380px) { .site-header .nav-right { gap: 0.25rem; } .site-header .nav-account-btn { padding: 0.45rem 0.45rem !important; } .nav-toggle { padding: 0.45rem 0.45rem; } } .hero { background: #0f172a; padding: 7rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 65%); pointer-events: none; } .hero-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; margin-bottom: 1.25rem; color: #fff; letter-spacing: -0.02em; } .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.2rem); color: rgba(255,255,255,0.6); margin-bottom: 2.5rem; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.7; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .home-hero { background: #fff; padding: 2rem 1rem; } .home-hero-inner { max-width: 1200px; margin: auto; display: grid; gap: 4rem 1rem; } .home-hero-img { position: relative; overflow: visible; } .home-hero-img img { width: 540px; height: 540px; object-fit: cover; margin-inline: auto; border-radius: 9999px; display: flex; box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.3); } .home-hero-text h1 { font-size: 3.5rem; font-weight: 800; line-height: 4rem; color: var(--color-brand); margin-bottom: 1rem; text-align: center; } .home-hero-text p { font-size: 1.15rem; font-weight: 500; line-height: 1.8rem; color: #2a8dba; text-align: center; margin-bottom: 2rem; } .home-hero-text .hero-actions { justify-content: center; margin-bottom: 2rem; } .hero-para { text-align: center; font-size: 1.1rem; font-weight: 600; color: #333; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; } @media (min-width: 800px) { .home-hero-inner { grid-template-columns: repeat(2, 1fr); align-items: center; } .home-hero-text { grid-area: 1/1/2/2; } .home-hero-text h1, .home-hero-text p { text-align: left; } .home-hero-text .hero-actions { justify-content: flex-start; } } .services-ticker { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); padding: 1.35rem 0; overflow: hidden; } @keyframes servicesTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .services-ticker-track { display: flex; gap: 4rem; width: max-content; animation: servicesTicker 30s linear infinite; white-space: nowrap; } .services-ticker-track span { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.9); } .benefits-ticker { background: linear-gradient(135deg, #111827 0%, #1e3a5f 100%); padding: 1.35rem 0; overflow: hidden; } @keyframes benefitsTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .benefits-ticker-track { display: flex; gap: 4rem; width: max-content; animation: benefitsTicker 35s linear infinite; white-space: nowrap; } .benefits-ticker-track span { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.9); } .hero-with-media .hero-content { position: relative; z-index: 2; } .hero-media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 1; } .hero-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-video-bg video { width: 100%; height: 100%; object-fit: cover; } .hero-video-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; pointer-events: none; border: none; } /* Home hero (ED-496, Dean): the slider is gone. Photos of the kinds of business EZWebee builds for drift slowly behind a dark veil, in the style of the old design wall; the words stand still on top. Tiles are small 300x450 WebP copies (images/hw-*.webp), so the whole wall weighs about 140 KB. */ .design-wall-hero { min-height: 84vh; padding: 5rem 1.5rem; display: flex; align-items: center; justify-content: center; background: #060b18; } .design-wall-hero::before { display: none; } .dwh-wall { position: absolute; inset: -8%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; transform: rotate(-4deg) scale(1.14); } .dwh-row { overflow: hidden; } .dwh-track { display: flex; width: max-content; will-change: transform; } .dwh-track img { width: 170px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; flex-shrink: 0; margin-right: 16px; border-radius: 12px; background: #1e293b; box-shadow: 0 12px 30px rgba(0,0,0,0.55); } /* Motion starts only once site.js has shown a working pause button (it adds .dwh-js), so without JavaScript the wall and the pills stay still. These rules must stay ABOVE the .dwh-paused rules: the animation shorthand resets play-state, and the paused rules win only by coming later. */ .dwh-js .dwh-row-a .dwh-track { animation: dwhDrift 72s linear infinite; } .dwh-js .dwh-row-b .dwh-track { animation: dwhDrift 94s linear infinite reverse; } .dwh-js .dwh-row-c .dwh-track { animation: dwhDrift 81s linear infinite; } @keyframes dwhDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .dwh-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 50%, rgba(6,11,24,0.86) 0%, rgba(6,11,24,0.74) 45%, rgba(6,11,24,0.90) 100%); } .dwh-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; } .dwh-eyebrow { display: inline-flex; align-items: center; padding: 0.375rem 1rem; margin-bottom: 1.1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff; font-family: 'Raleway', system-ui, sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .dwh-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(1.9rem, 5.2vw, 3.5rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin: 0 0 1.1rem; } .dwh-text { font-family: 'Raleway', system-ui, sans-serif; font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 500; line-height: 1.7; color: rgba(255,255,255,0.92); margin: 0 auto 0.9rem; max-width: 620px; } .dwh-guarantee { font-family: 'Raleway', system-ui, sans-serif; font-size: clamp(0.98rem, 1.6vw, 1.1rem); line-height: 1.6; color: #fde68a; margin: 0 auto 1.9rem; max-width: 620px; } .dwh-guarantee strong { color: #fbbf24; font-weight: 800; } /* Six pills, two to a row, lit one at a time in a 12s loop (the old wall's pattern, Dean 2026-10-13). The loop stops while the list is hovered or holds focus, and never runs under prefers-reduced-motion. Only box-shadow and transform animate, so text contrast never changes. */ .dwh-links { margin: 0 auto; max-width: 560px; } .dwh-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .dwh-links li { display: flex; min-width: 0; } .dwh-links a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); color: #fff; box-shadow: 0 12px 30px rgba(37,99,235,0.48); font-size: 0.95rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background 0.18s ease; } .dwh-js .dwh-links a { animation: dwhFlash 12s ease-in-out infinite; } .dwh-links li:nth-child(2) a { animation-delay: 2s; } .dwh-links li:nth-child(3) a { animation-delay: 4s; } .dwh-links li:nth-child(4) a { animation-delay: 6s; } .dwh-links li:nth-child(5) a { animation-delay: 8s; } .dwh-links li:nth-child(6) a { animation-delay: 10s; } .dwh-links ul:hover a, .dwh-links ul:focus-within a { animation-play-state: paused; } @keyframes dwhFlash { 0%, 17%, 100% { box-shadow: 0 12px 30px rgba(37,99,235,0.48); transform: none; } 2%, 15% { box-shadow: 0 0 0 3px #fff, 0 0 30px 8px rgba(125,211,252,0.9); transform: scale(1.06); } } .dwh-links a:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); } .dwh-links a:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; } @media (max-width: 760px) { .design-wall-hero { min-height: 78vh; padding: 4rem 1.25rem; } .dwh-track img { width: 104px; margin-right: 10px; border-radius: 9px; } .dwh-wall { gap: 10px; } .dwh-links ul { gap: 0.5rem; } .dwh-links a { min-height: 44px; padding: 0.55rem 0.45rem; border-radius: 22px; font-size: 0.8rem; } } /* Pause control (WCAG 2.2.2: motion lasting over five seconds needs one). site.js reveals it, so a page without JavaScript shows no dead button; under reduced motion nothing moves and it stays hidden. */ .dwh-pause { position: absolute; right: 16px; bottom: 12px; z-index: 3; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(125,211,252,0.85); background: rgba(6,11,24,0.72); color: #e0f2fe; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dwh-pause[hidden] { display: none; } .dwh-pause:hover { background: rgba(30,64,175,0.85); } .dwh-pause:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; } .dwh-pause-icon { display: block; box-sizing: border-box; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; } .dwh-pause[aria-pressed="true"] .dwh-pause-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; } @media (forced-colors: active) { .dwh-pause-icon { forced-color-adjust: none; color: ButtonText; } } .design-wall-hero.dwh-paused .dwh-track { animation-play-state: paused; } .design-wall-hero.dwh-paused .dwh-links a { animation: none; } @media (prefers-reduced-motion: reduce) { .dwh-track, .dwh-links a { animation: none !important; } .dwh-pause { display: none !important; } } /* ED-500 (Dean): text slider in the hero. All slides share one grid cell, so the hero keeps the height of the tallest slide and nothing below it jumps. site.js adds .dwh-sl; without it (no JavaScript) only the first slide is shown. */ .dwh-slides { display: grid; } .dwh-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .design-wall-hero:not(.dwh-sl) .dwh-slide:not(:first-child) { display: none; } .dwh-sl .dwh-slide { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; } .dwh-sl .dwh-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease; } .dwh-slide .dwh-text { margin-bottom: 1.6rem; } /* ED-501 (Dean): bigger slide paragraph in a different family. Lora 400 is already declared in typography.css and hosted locally, so no new font file is added. */ .dwh-slide .dwh-text { font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.45rem); line-height: 1.6; max-width: 680px; } .dwh-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px; padding: 0.75rem 1.6rem; border-radius: 999px; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); color: #fff; box-shadow: 0 12px 30px rgba(37,99,235,0.48); font-size: 0.98rem; font-weight: 700; line-height: 1.25; text-decoration: none; transition: background 0.18s ease; } .dwh-cta:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); color: #fff; } .dwh-cta:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; } .dwh-dots { display: flex; justify-content: center; gap: 4px; margin-top: 1.6rem; } .dwh-dots[hidden] { display: none; } .dwh-dot { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } .dwh-dot::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.5); transition: width 0.3s ease, background 0.3s ease; } .dwh-dot:hover::before { background: #fff; } .dwh-dot[aria-current="true"]::before { width: 26px; background: #38bdf8; } .dwh-dot:focus-visible { outline: 2px solid #fbbf24; outline-offset: 1px; border-radius: 8px; } @media (forced-colors: active) { .dwh-dot::before { forced-color-adjust: none; background: ButtonText; } .dwh-dot[aria-current="true"]::before { background: Highlight; } } @media (prefers-reduced-motion: reduce) { .dwh-sl .dwh-slide, .dwh-sl .dwh-slide.is-active, .dwh-dot::before { transition: none; } } .page-hero h1 { margin-bottom: 0.75rem; color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; } .page-hero p { color: rgba(255,255,255,0.6); margin: 0; font-size: 1rem; } .section { padding: 5rem 0; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .section-header h2 { margin: 0; } main { display: flex; flex-direction: column; } main > *:last-child { margin-bottom: 0 !important; } /* ── FOOTER ── */ .site-footer { background: linear-gradient(180deg, #000000 0%, #060b18 60%, #000000 100%); color: #fff; padding: 0; margin-top: 0; position: relative; } .footer-glow-bar { height: 2px; background: linear-gradient(90deg, transparent 0%, #1d4ed8 25%, #38bdf8 50%, #7c3aed 75%, transparent 100%); box-shadow: 0 0 24px rgba(56,189,248,0.5), 0 0 48px rgba(56,189,248,0.2); } .site-footer .container { padding-top: 4.5rem; padding-bottom: 0; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; } /* Brand column */ .footer-brand { display: flex; flex-direction: column; gap: 1rem; } .footer-logo { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.75rem; text-decoration: none; background: linear-gradient(90deg, #38bdf8, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; letter-spacing: -0.03em; } .footer-tagline { color: rgba(255,255,255,0.65); font-size: 0.875rem; line-height: 1.7; margin: 0; max-width: 280px; } .footer-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); color: #fff; font-size: 0.85rem; font-weight: 700; padding: 0.6rem 1.25rem; border-radius: 999px; text-decoration: none; width: fit-content; transition: opacity 0.2s, transform 0.2s; letter-spacing: 0.01em; } .footer-cta:hover { opacity: 0.88; transform: translateY(-2px); } .footer-socials { display: flex; gap: 0.5rem; margin-top: 0.25rem; } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); font-size: 1rem; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .footer-socials a:hover { background: #0ea5e9; border-color: #0ea5e9; color: #fff; transform: translateY(-3px); } /* Columns */ .footer-col { display: flex; flex-direction: column; } .footer-col-title { font-family: 'Raleway', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.6rem; border-bottom: 1.5px solid #38bdf8; width: fit-content; } .footer-col-title i { color: #38bdf8; font-size: 0.9rem; } /* Footer links are at least 24px tall to tap (ED-485, WCAG 2.2 target size); the gap is 3px less, so the spacing between them looks the same as before. */ .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(0.6rem - 3px); } .footer-col ul li a, .footer-col ul li .footer-contact-item { display: flex; align-items: center; gap: 0.55rem; color: rgba(255,255,255,0.65); font-size: 0.875rem; text-decoration: none; transition: color 0.2s, gap 0.2s; line-height: 1.4; min-height: 24px; } .footer-col ul li a i, .footer-col ul li .footer-contact-item i { color: #38bdf8; font-size: 0.95rem; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; } .footer-col ul li a:hover { color: #fff; gap: 0.75rem; } .footer-col ul li a:hover i { opacity: 1; } .footer-contact-item { cursor: default; } /* Bottom bar */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .footer-bottom p { color: #fff; font-size: 0.78rem; margin: 0; } .footer-legal a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.78rem; transition: color 0.2s; display: inline-block; padding: 4px 0; margin: -4px 0; } .footer-legal a:hover { color: #fff; } /* Mailing-list capture band — sits directly above the footer on every page */ .subscribe-band { background: linear-gradient(135deg, #0a1628 0%, #1e3a8a 50%, #0a1628 100%); border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem 0; } .subscribe-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2.5rem; } .subscribe-copy { flex: 1 1 320px; } .subscribe-title { color: #fff; font-size: 1.5rem; margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.5rem; } .subscribe-title i { color: #38bdf8; } .subscribe-sub { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 0; } .subscribe-form { flex: 1 1 340px; display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 460px; } .subscribe-form .ts-box, .ct-form .ts-box { flex-basis: 100%; } .ts-box:empty { display: none; } .subscribe-input { flex: 1 1 200px; min-width: 0; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.95rem; } .subscribe-input::placeholder { color: rgba(255,255,255,0.7); } .subscribe-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.2); } .subscribe-btn { flex: 0 0 auto; padding: 0.85rem 1.6rem; } /* Sky blue, flat - and written after .btn-primary so it wins on ordinary cascade rather than on !important. The gradient is overridden explicitly because a background shorthand alone would leave background-image behind. */ .subscribe-btn, .subscribe-btn:link, .subscribe-btn:visited { background: #38bdf8; background-image: none; border-color: #38bdf8; color: #06253a; } .subscribe-btn:hover { background: #7dd3fc; border-color: #7dd3fc; color: #06253a; } /* The result sits on its own row just above the email field, where the visitor is looking. It stays in flow on purpose: floated above the form it covered the heading on a phone and rose out of the band on wider screens. The field moves down while it shows and back when site.js clears it. */ .subscribe-msg { flex: 0 0 100%; margin: 0; padding: 0.6rem 0.9rem; border: 1px solid transparent; border-radius: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1.4; transition: opacity 0.4s ease; } /* Empty, it is clipped to 1px rather than display:none, so the live region stays in the accessibility tree and a screen reader is already watching it when say() fills it. */ .subscribe-msg:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .subscribe-msg.is-ok { color: #dcfce7; background: #14532d; border-color: #4ade80; } .subscribe-msg.is-error { color: #fee2e2; background: #7f1d1d; border-color: #fca5a5; } .subscribe-msg.is-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .subscribe-msg { transition: none; } } /* Both children carry a flex-basis for the ROW layout - 320px of copy beside 340px of form. The moment the container turns column, flex-basis stops meaning width and starts meaning HEIGHT, so those two numbers became a 320px-tall paragraph above a 340px-tall input box: roughly 660px of empty band on a phone. Resetting the shorthand is the whole fix - the items size to their content, as a stacked band should. */ @media (max-width: 720px) { .subscribe-inner { flex-direction: column; align-items: stretch; } .subscribe-copy { flex: 0 0 auto; } .subscribe-form { flex: 0 0 auto; max-width: 100%; justify-content: center; } } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; } .footer-tagline { max-width: 100%; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { flex-direction: column; } .footer-bottom { flex-direction: column; text-align: center; } } /* Below 768px every footer block is centred: brand, columns, links and the bottom bar. */ @media (max-width: 767px) { .footer-grid { text-align: center; } .footer-brand { flex-direction: column; align-items: center; } .footer-tagline { margin-left: auto; margin-right: auto; max-width: 420px; } .footer-socials { justify-content: center; } .footer-col { align-items: center; } .footer-col ul { align-items: center; } .footer-col ul li a, .footer-col ul li .footer-contact-item { justify-content: center; } .footer-bottom { flex-direction: column; justify-content: center; text-align: center; } /* two columns above 560px leave the third alone on the left; it takes the full row instead */ .footer-grid > .footer-col:last-child { grid-column: 1 / -1; } } /* ED-497 (Dean): from 600px to 960px the three link groups sit side by side on one line, under the brand, laid out as they are on a laptop. */ @media (min-width: 600px) and (max-width: 960px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } .footer-grid > .footer-col:last-child { grid-column: auto; } } /* ED-497 (Dean): below 600px each link group is a dropdown. site.js wraps each title in a button and hides its list; without JavaScript the lists simply stay open, as before. The [hidden] rule is needed because .footer-col ul sets display:flex, which would otherwise override the attribute. */ @media (max-width: 599px) { .footer-grid { grid-template-columns: 1fr; gap: 0.75rem; } .footer-brand { margin-bottom: 1.75rem; } .footer-col.fc-drop { align-items: stretch; width: 100%; max-width: 420px; margin: 0 auto; } .footer-col.fc-drop .footer-col-title { width: 100%; margin: 0; padding: 0; border-bottom: none; } .fc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 48px; padding: 0.8rem 1.1rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.88); font: inherit; font-size: 0.8rem; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .fc-toggle .fc-label { display: inline-flex; align-items: center; gap: 0.45rem; } .fc-toggle:hover, .fc-toggle[aria-expanded="true"] { border-color: #38bdf8; } .fc-toggle:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; } .fc-chev { font-size: 1.15rem; color: #38bdf8; transition: transform 0.2s; } .fc-toggle[aria-expanded="true"] .fc-chev { transform: rotate(180deg); } .footer-col.fc-drop ul { padding: 0.9rem 0 0.5rem; } .footer-col.fc-drop ul[hidden] { display: none; } } @media (prefers-reduced-motion: reduce) { .fc-chev { transition: none; } } /* ED-499 (Dean): the link icons in each footer group line up in one vertical column at every size. Each icon gets the same width, so narrow and wide glyphs take the same room; where the footer is centred (below 768px) the list is centred as a block and its links start on the same left edge. */ .footer-col ul li a i, .footer-col ul li .footer-contact-item i { width: 1.2em; text-align: center; } /* The plain $499 is its own part of the link, so the link gap would sit between "$499" and "Websites"; this pulls it back to an ordinary word space, also on hover when the gap grows. */ .footer-col ul li a .price-555 { margin-right: -0.3rem; } .footer-col ul li a:hover .price-555 { margin-right: -0.5rem; } @media (max-width: 767px) { .footer-col ul { align-items: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .footer-col ul li a, .footer-col ul li .footer-contact-item { justify-content: flex-start; text-align: left; } } /* EZWebee logo (2026-09-27): the code bee, then "EZWe" sky blue, a "b" that fades from the blue into the yellow, and "ee" yellow. The old text-gradient fill is switched off so each part keeps its own colour. */ .site-header .site-logo, .footer-logo { display: inline-flex; align-items: center; gap: 0.45em; background: none; -webkit-text-fill-color: initial; } .brand-mark { width: 1.4em; height: 1.4em; flex: none; display: block; } .brand-word .bw-a { color: #38bdf8; -webkit-text-fill-color: #38bdf8; } .brand-word .bw-c { color: #fbbf24; -webkit-text-fill-color: #fbbf24; } .brand-word .bw-b { color: #9abe8e; background: linear-gradient(90deg, #38bdf8, #fbbf24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* front-ends cards (Dean 2026-10-12): "Choose this design" became two buttons in its own colour and type, split by a thin line. Hover and focus stay in the page's own