diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..7d757f7 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,27 @@ +# Normalise line endings across the repo. +# Text files are stored as LF so editors and tools stay consistent. +* text=auto eol=lf + +# Explicit text formats - always LF +*.php text eol=lf +*.html text eol=lf +*.css text eol=lf +*.js text eol=lf +*.json text eol=lf +*.md text eol=lf +*.txt text eol=lf +*.svg text eol=lf +*.xml text eol=lf + +# Binary formats - leave bytes untouched +*.webp binary +*.png binary +*.jpg binary +*.jpeg binary +*.gif binary +*.ico binary +*.pdf binary +*.woff binary +*.woff2 binary +*.ttf binary +*.eot binary diff --git a/.gitignore b/.gitignore index 70a5219..8208b2c 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,7 @@ public_html/ .gitea/ .tmp/ email-signature.html + +# Cowork session artifacts +backup/ +.claude/ diff --git a/css/style.css b/css/style.css index 9c9d340..075fe43 100644 --- a/css/style.css +++ b/css/style.css @@ -479,6 +479,7 @@ ul { list-style: none; } .service-icon--orange { background: rgba(249,115,22,0.2); color: var(--orange); } .service-icon--purple { background: rgba(167,139,250,0.2); color: #A78BFA; } .service-icon--teal { background: rgba(13,148,136,0.2); color: #2DD4BF; } +.service-icon--gold { background: rgba(251,191,36,0.2); color: var(--gold); } .service-card h3 { font-family: var(--font-head); @@ -494,6 +495,101 @@ ul { list-style: none; } font-size: 0.94rem; } +/* Keep the icon and text above the plant row */ +.service-wide-icon, .service-wide-text { position: relative; z-index: 2; } + +/* Full width feature band - sits below the 3 card grid */ +.service-wide { + margin-top: 28px; + display: flex; + align-items: center; + gap: 32px; + background: linear-gradient(135deg, rgba(13,148,136,0.14), rgba(124,58,237,0.14)); + border: 1px solid rgba(255,255,255,0.12); + border-radius: var(--radius); + padding: 40px 44px; + position: relative; + overflow: hidden; + transition: box-shadow var(--transition), border-color var(--transition), background var(--transition); +} +.service-wide::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--teal), var(--purple-bright)); +} +.service-wide:hover { + border-color: rgba(255,255,255,0.2); + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.service-wide-icon { + flex-shrink: 0; + width: 72px; + height: 72px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + background: rgba(13,148,136,0.2); + color: #2DD4BF; +} +.service-wide-text h3 { + font-family: var(--font-head); + font-size: 1.25rem; + font-weight: 700; + line-height: 1.3; + margin-bottom: 10px; + color: var(--white); +} +.service-wide-text p { + color: rgba(255,255,255,0.7); + line-height: 1.72; + font-size: 0.97rem; + max-width: 70ch; +} + +/* Row of plants that grow up from the bottom edge on hover - themed to the sustainable growth message */ +.service-wide-plants { + position: absolute; + left: 0; right: 0; bottom: 3px; + height: 64px; + display: flex; + align-items: flex-end; + justify-content: space-between; + padding: 0 28px; + gap: 6px; + z-index: 1; + pointer-events: none; +} +.service-wide-plants i { + color: var(--teal); + font-size: 1.1rem; + transform: translateY(120%); + opacity: 0; + transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.35s ease; +} +.service-wide:hover .service-wide-plants i { + transform: translateY(0); + opacity: 0.9; +} +.service-wide-plants i:nth-child(1) { transition-delay: 0.00s; font-size: 1.00rem; } +.service-wide-plants i:nth-child(2) { transition-delay: 0.05s; font-size: 1.30rem; } +.service-wide-plants i:nth-child(3) { transition-delay: 0.10s; font-size: 0.95rem; } +.service-wide-plants i:nth-child(4) { transition-delay: 0.15s; font-size: 1.20rem; } +.service-wide-plants i:nth-child(5) { transition-delay: 0.20s; font-size: 1.05rem; } +.service-wide-plants i:nth-child(6) { transition-delay: 0.25s; font-size: 1.35rem; } +.service-wide-plants i:nth-child(7) { transition-delay: 0.30s; font-size: 1.00rem; } +.service-wide-plants i:nth-child(8) { transition-delay: 0.35s; font-size: 1.20rem; } +.service-wide-plants i:nth-child(9) { transition-delay: 0.40s; font-size: 0.95rem; } +.service-wide-plants i:nth-child(10) { transition-delay: 0.45s; font-size: 1.25rem; } +.service-wide-plants i:nth-child(3n) { color: #34D399; } +.service-wide-plants i:nth-child(3n+1) { color: #5EEAD4; } +@media (prefers-reduced-motion: reduce) { + .service-wide-plants i { transition: opacity 0.25s ease; transform: none; } +} + /* ================================================ ABOUT ================================================ */ @@ -954,6 +1050,8 @@ ul { list-style: none; } } .services-grid { grid-template-columns: 1fr; } + .service-wide { flex-direction: column; text-align: center; gap: 20px; padding: 32px 24px; } + .service-wide-text p { max-width: none; } .project-row { grid-template-columns: 110px 1fr auto; gap: 18px; padding: 20px 0; } .project-row-img { height: 80px; } .project-img-placeholder { font-size: 1.8rem; } diff --git a/estimates.php b/estimates.php index 3146b10..bef5290 100644 --- a/estimates.php +++ b/estimates.php @@ -7,7 +7,7 @@ Spells & Pricing - Fraxle.net - + @@ -596,7 +596,7 @@
  • Mobile-friendly design
  • Contact form
  • Basic SEO setup
    • -
  • WordPress website
    • +
  • WordPress or Squarespace

    • Perfect for businesses taking their first steps into the digital realm.

    @@ -619,7 +619,7 @@
  • Analytics setup
  • Search engine optimisation
    • -

    For businesses ready to expand their reach and establish a stronger online presence.

    +

    For businesses ready to spread their wings and get properly noticed online.

     Enquire about this @@ -663,7 +663,7 @@
  • Customer account features
  • Store management training
    • -

    Everything needed to open your digital marketplace.

    +

    Everything you need to throw open the doors of your digital marketplace.

    Enquire about this @@ -694,6 +694,141 @@ + +
    +
    +
    +

    Custom Builds

    +

    The Spellforge

    +

    When a website alone won't cut it - bespoke web apps and tools, conjured to fit exactly how you work.

    +
    +
    +
    +
    ⚙️
    +
    The Cantrip
    +
    £750 - £2,000
    +
    +

    Includes

    +
      +
    • Single-purpose tool or mini-app
      • +
    • Forms and data capture
      • +
    • Database-backed
      • +
    • Simple admin view
      • +
    • Hosting and setup
      • +
    +

    A small but mighty tool, built to fit your workflow.

    + + Enquire about this + +
    +
    +
    🏗️
    +
    The Grand Working
    +
    £3,000 - £10,000+
    +
    +

    Includes

    +
      +
    • Bespoke functionality
      • +
    • User accounts and roles
      • +
    • Custom database design
      • +
    • Integrations and APIs
      • +
    • Testing and launch
      • +
    • Ongoing support
      • +
    +

    When off-the-shelf simply won't do - a system built around you.

    + + Enquire about this + +
    +
    +
    +
    + + +
    +
    +
    +

    Creative Services

    +

    The Mystic Digital Arts

    +

    Beyond the web - graphics, video, 3D and audio, crafted to make your brand unforgettable.

    +
    +
    +
    +
    🎨
    +
    The Sigil Workshop
    +
    From £150
    +
    +

    Includes

    +
      +
    • Logo design
      • +
    • Brand colour and font palette
      • +
    • Social media templates
      • +
    • Print-ready business cards
      • +
    • Source and web-ready files
      • +
    +

    A brand identity that turns heads and casts a lasting impression.

    + + Enquire about this + +
    +
    +
    🎬
    +
    The Moving Picture
    +
    From £350
    +
    +

    Includes

    +
      +
    • On-location filming
      • +
    • Editing and colour grading
      • +
    • Titles and captions
      • +
    • Licensed music and sound
      • +
    • Social media cut-downs
      • +
    +

    Bring your story to life - lights, camera, enchantment.

    + + Enquire about this + +
    +
    +
    🧊
    +
    The Third Dimension
    +
    From £300
    +
    +

    Includes

    +
      +
    • 3D modelling
      • +
    • Product visualisation
      • +
    • Logo and title animation
      • +
    • Render-ready assets
      • +
    • Short animated clips
      • +
    +

    Objects and ideas, conjured into three dimensions.

    + + Enquire about this + +
    +
    +
    🎙️
    +
    Sonic Alchemy
    +
    From £200
    +
    +

    Includes

    +
      +
    • Audio editing and cleanup
      • +
    • Podcast production
      • +
    • Voiceover mixing
      • +
    • Music and jingles
      • +
    • Mastering for release
      • +
    +

    Sound that casts a spell on the ear.

    + + Enquire about this + +
    +
    +
    +
    +
    @@ -826,7 +961,7 @@ { i: 'fa-file-lines', k: 'Pages', v: 'Up to 5' }, { i: 'fa-rotate', k: 'Revisions', v: '2 rounds' }, { i: 'fa-clock', k: 'Typical turnaround', v: '1–2 weeks' }, - { i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress' } + { i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress or Squarespace' } ] }, 'enchanted-workshop': { @@ -838,7 +973,7 @@ { i: 'fa-file-lines', k: 'Pages', v: '5 – 10' }, { i: 'fa-rotate', k: 'Revisions', v: '3 rounds' }, { i: 'fa-clock', k: 'Typical turnaround', v: '2–4 weeks' }, - { i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress' } + { i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress or Squarespace' } ] }, 'arcane-forge': { @@ -920,6 +1055,79 @@ { i: 'fa-clock', k: 'Support allowance', v: '~1 hour / month' }, { i: 'fa-circle-check', k: 'Best for', v: 'Online stores' } ] + }, + 'the-cantrip': { + emoji: '⚙️', name: 'The Cantrip', price: '£750 – £2,000', + lead: 'A focused web tool or mini-app, built to handle one job brilliantly.', + low: { amt: '£750', desc: 'A single-purpose tool with a form, a database and a simple admin view.' }, + high: { amt: '£2,000', desc: 'A richer tool with several features, user logins and a tidy dashboard.' }, + specs: [ + { i: 'fa-screwdriver-wrench', k: 'Type', v: 'Web app / tool' }, + { i: 'fa-user', k: 'Accounts', v: 'Optional logins' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '2–5 weeks' }, + { i: 'fa-server', k: 'Hosting', v: 'Set up for you' } + ] + }, + 'grand-working': { + emoji: '🏗️', name: 'The Grand Working', price: '£3,000 – £10,000+', + lead: 'A full custom web application, designed and built around your business.', + low: { amt: '£3,000', desc: 'A focused custom app with accounts, a database and your core features.' }, + high: { amt: '£10,000+', desc: 'A larger platform with integrations, user roles and ongoing support.' }, + specs: [ + { i: 'fa-gears', k: 'Type', v: 'Full custom app' }, + { i: 'fa-users-gear', k: 'Accounts', v: 'Roles & permissions' }, + { i: 'fa-plug', k: 'Integrations', v: 'APIs included' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '6–12 weeks' }, + { i: 'fa-headset', k: 'Support', v: 'Available after launch' } + ] + }, + 'sigil-workshop': { + emoji: '🎨', name: 'The Sigil Workshop', price: 'From £150', + lead: 'Logos, brand kits and graphics that make your business instantly recognisable.', + low: { amt: '£150', desc: 'A standalone logo with two concepts and the final files.' }, + high: { amt: '~£900', desc: 'A full brand kit: logo suite, colour and font system, templates and stationery.' }, + specs: [ + { i: 'fa-lightbulb', k: 'Concepts', v: '2 – 3' }, + { i: 'fa-rotate', k: 'Revisions', v: '3 rounds' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '1–2 weeks' }, + { i: 'fa-file-export', k: 'Formats', v: 'Vector, web & print' } + ] + }, + 'moving-picture': { + emoji: '🎬', name: 'The Moving Picture', price: 'From £350', + lead: 'Filming and editing for promos, events and social media.', + low: { amt: '£350', desc: 'A short edit from footage you provide, with titles and music.' }, + high: { amt: '£1,500+', desc: 'A full filming day on location, plus edit, colour grade and social cut-downs.' }, + specs: [ + { i: 'fa-video', k: 'Filming', v: 'Half or full day' }, + { i: 'fa-rotate', k: 'Revisions', v: '2 rounds' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '1–3 weeks' }, + { i: 'fa-share-nodes', k: 'Delivery', v: 'Web & social formats' } + ] + }, + 'third-dimension': { + emoji: '🧊', name: 'The Third Dimension', price: 'From £300', + lead: '3D models, product renders and animation for the web and video.', + low: { amt: '£300', desc: 'A single 3D model or a polished product render.' }, + high: { amt: '£2,000+', desc: 'A set of models with animated sequences and high-resolution renders.' }, + specs: [ + { i: 'fa-cube', k: 'Output', v: 'Models, renders, animation' }, + { i: 'fa-rotate', k: 'Revisions', v: '2 – 3 rounds' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '1–4 weeks' }, + { i: 'fa-file-export', k: 'Formats', v: 'Web, video & print' } + ] + }, + 'sonic-alchemy': { + emoji: '🎙️', name: 'Sonic Alchemy', price: 'From £200', + lead: 'Editing, mixing and mastering for podcasts, video and adverts.', + low: { amt: '£200', desc: 'Editing and cleanup of a single recording or podcast episode.' }, + high: { amt: '£800+', desc: 'Full podcast or advert production with music, mixing and mastering.' }, + specs: [ + { i: 'fa-sliders', k: 'Services', v: 'Edit, mix, master' }, + { i: 'fa-rotate', k: 'Revisions', v: '2 rounds' }, + { i: 'fa-clock', k: 'Typical turnaround', v: '3–7 days' }, + { i: 'fa-music', k: 'Delivery', v: 'Broadcast-ready files' } + ] } }; diff --git a/index.php b/index.php index bf1c5b8..b62670a 100644 --- a/index.php +++ b/index.php @@ -13,7 +13,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1'; Fraxle.net - Web & Tech for Small Businesses - + @@ -62,7 +62,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1'; Danny the tech-wizard and Astro the cosmic cat

    Danny the tech-wizard & Astro the cosmic cat

    -

    Friendly website design, technology support and gadget wizardry - with a touch of enchantment. Based in Oxfordshire.

    +

    Friendly website design, online apps, tech support and creative wizardry - with a touch of enchantment. Based in Oxfordshire.

    wizard@fraxle.net @@ -100,21 +100,42 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';

    Web Design with a Touch of Alchemy

    -

    I conjure websites that don't just look good - they work like magic. Whether you need a simple landing page or an online store, I'll craft a site that's fast, secure, and aligned with your brand.

    +

    I conjure websites that don't just look pretty - they load fast, climb the search rankings and turn curious visitors into customers. From a simple landing page to a full online store - WordPress, Shopify or Squarespace - every site is built to be quick, secure and unmistakably yours. Need something truly bespoke? I build custom online apps too.

    Tech Support & Digital Sorcery

    -

    Need help taming your magical devices? Whether it's setting up your smartphone, syncing your tablet, connecting smart gadgets, or rescuing a misbehaving laptop - I'll help you make the most of your tech.

    +

    Gadgets gone rogue? Whether it's setting up a new smartphone, syncing a stubborn tablet, sorting out office computers and networks, connecting smart-home gadgets or reviving a misbehaving laptop, I'll get your tech behaving - and show you how to keep it that way.

    -
    - +
    +
    -

    Empowering Ethical, Independent Business

    -

    I work especially with small businesses, not-for-profits, charities and farmers who want to grow sustainably in the digital age. Affordable, human-centred, and as easy to use as possible.

    +

    Master of the Mystic Digital Arts

    +

    Beyond the web, I craft the creative magic too - logos and graphics, video filming and editing, 3D modelling and animation, and audio production. Whatever your project conjures up, I can help bring it to life.

    +
    +
    +
    +
    + +
    +
    +

    Magic for Ethical, Independent Business

    +

    I work especially with small businesses, not-for-profits, charities and farmers who want to grow sustainably in the digital age. Affordable, human-centred and as easy to use as a well-cast spell.

    +
    +
    @@ -262,7 +283,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';

    Say Hello

    Get in Touch

    -

    Have a project in mind? Need some tech support? Drop me a message and I'll get back to you as soon as the stars align.

    +

    Have a project in mind? Need some tech support? Drop me a message and I'll get back to you - usually within one working day, as soon as the stars align.

    • diff --git a/js/main.js b/js/main.js index ef09b7a..7974de3 100644 --- a/js/main.js +++ b/js/main.js @@ -31,7 +31,13 @@ if (history.scrollRestoration) { 'wizards-bench': "Hi Danny! I'd like some ad-hoc tech support from The Wizard's Bench (£40/hour). Here's what I need help with:\n\n", 'minor-ward': "Hi Danny! I'm interested in the Minor Ward care plan (£10/month). A little about my website:\n\n", 'greater-ward': "Hi Danny! I'm interested in the Greater Ward care plan (£25/month). A little about my website:\n\n", - 'merchants-ward': "Hi Danny! I'm interested in the Merchant's Ward care plan (£50/month). A little about my store:\n\n" + 'merchants-ward': "Hi Danny! I'm interested in the Merchant's Ward care plan (£50/month). A little about my store:\n\n", + 'the-cantrip': "Hi Danny! I'm interested in The Cantrip web app (£750–£2,000). A little about what I need:\n\n", + 'grand-working': "Hi Danny! I'm interested in The Grand Working custom app (£3,000–£10,000+). A little about my project:\n\n", + 'sigil-workshop': "Hi Danny! I'm interested in The Sigil Workshop graphics & branding (from £150). A little about what I need:\n\n", + 'moving-picture': "Hi Danny! I'm interested in The Moving Picture video production (from £350). A little about my project:\n\n", + 'third-dimension': "Hi Danny! I'm interested in The Third Dimension 3D & animation (from £300). A little about my project:\n\n", + 'sonic-alchemy': "Hi Danny! I'm interested in Sonic Alchemy audio production (from £200). A little about my project:\n\n" }; var field = document.getElementById('message');