CUSTOM CSS

Copy CSS

/* ART BY JODIE - Custom CSS
   Paste into: Appearance > Customise > Additional CSS */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');

:root { --off:#f9f8f6; --light:#f5f3f0; --border:#ebebeb; --dark:#1a1a1a; }
body { font-family: 'EB Garamond', Georgia, serif; }

/* Typography */
.ajd-eyebrow { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:#bbb; display:block; margin-bottom:20px; }
.ajd-title { font-family:'Cormorant Garamond',serif; font-weight:300; line-height:1.08; color:var(--dark); }
.ajd-title em { font-style:italic; color:#aaa; }
.ajd-body { font-family:'Jost',sans-serif; font-size:14px; line-height:1.9; color:#999; }
.ajd-rule { width:32px; height:1px; background:var(--border); margin:20px auto 0; }
.ajd-section-sub { font-family:'Jost',sans-serif; font-size:13px; color:#bbb; line-height:1.8; margin-top:16px; }

/* Buttons */
.ajd-btn, .ajd-btn-ghost, .ajd-btn-wh, .ajd-btn-wh-o {
  display:inline-block; padding:15px 38px; font-family:'Jost',sans-serif;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; transition:all .3s; cursor:pointer; border:1px solid;
}
.ajd-btn { background:var(--dark); color:#fff; border-color:var(--dark); }
.ajd-btn:hover { background:#fff; color:var(--dark); }
.ajd-btn-ghost { background:transparent; color:var(--dark); border-color:#ddd; }
.ajd-btn-ghost:hover { border-color:var(--dark); }
.ajd-btn-wh { background:#fff; color:var(--dark); border-color:#fff; }
.ajd-btn-wh:hover { background:transparent; color:#fff; }
.ajd-btn-wh-o { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.ajd-btn-wh-o:hover { background:#fff; color:var(--dark); }

/* Hero - full width landscape with text overlay */
.ajd-hero { position:relative; width:100%; height:88vh; overflow:hidden; }
.ajd-hero img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ajd-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 60%,transparent 100%); }
.ajd-hero-text { position:absolute; top:50%; left:10%; transform:translateY(-50%); max-width:560px; }
.ajd-hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(42px,5.5vw,78px); font-weight:300; line-height:1.05; color:#fff; margin-bottom:28px; }
.ajd-hero-title em { font-style:italic; color:rgba(255,255,255,.8); }
.ajd-hero-sub { font-family:'Jost',sans-serif; font-size:14px; line-height:1.9; color:rgba(255,255,255,.7); margin-bottom:44px; max-width:380px; }
.ajd-hero-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* Section header */
.ajd-section-header { text-align:center; padding:88px 48px 52px; }
.ajd-section-header .ajd-title { font-size:clamp(30px,3.5vw,48px); }

/* Gallery grid - 3 portrait paintings */
.ajd-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin:0 56px 88px; }
.ajd-gallery-item { aspect-ratio:3/4; position:relative; overflow:hidden; cursor:pointer; background:var(--light); }
.ajd-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s; }
.ajd-gallery-item:hover img { transform:scale(1.04); }
.ajd-gallery-overlay { position:absolute; inset:0; background:rgba(26,26,26,0); transition:background .4s; display:flex; align-items:flex-end; padding:28px; }
.ajd-gallery-item:hover .ajd-gallery-overlay { background:rgba(26,26,26,.55); }
.ajd-gallery-info { opacity:0; transform:translateY(10px); transition:all .35s; }
.ajd-gallery-item:hover .ajd-gallery-info { opacity:1; transform:translateY(0); }
.ajd-gallery-info h3 { font-family:'Cormorant Garamond',serif; font-size:19px; font-style:italic; color:#fff; margin-bottom:4px; }
.ajd-gallery-info p { font-family:'Jost',sans-serif; font-size:12px; color:rgba(255,255,255,.65); }

/* About strip */
.ajd-about-strip { display:grid; grid-template-columns:1fr 1fr; background:var(--off); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ajd-about-strip-image { overflow:hidden; max-height:640px; }
.ajd-about-strip-image img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.ajd-about-strip-content { padding:80px 72px; display:flex; flex-direction:column; justify-content:center; }
.ajd-about-strip-content .ajd-title { font-size:clamp(28px,3vw,44px); margin-bottom:24px; }
.ajd-about-strip-content .ajd-body { max-width:420px; margin-bottom:40px; }

/* Pull quote */
.ajd-pull-quote { text-align:center; padding:110px 80px; background:#fff; border-top:1px solid var(--border); }
.ajd-pull-quote blockquote { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.8vw,38px); font-style:italic; font-weight:300; color:var(--dark); line-height:1.45; max-width:760px; margin:0 auto; }
.ajd-pull-quote cite { display:block; margin-top:28px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#ccc; font-style:normal; }

/* Newsletter */
.ajd-newsletter { background:var(--off); padding:80px 48px; text-align:center; border-top:1px solid var(--border); }
.ajd-newsletter-form { display:flex; max-width:440px; margin:36px auto 0; }
.ajd-newsletter-form input { flex:1; padding:15px 18px; border:1px solid #e0e0e0; border-right:none; font-family:'Jost',sans-serif; font-size:13px; outline:none; background:#fff; }
.ajd-newsletter-form button { padding:15px 24px; background:var(--dark); color:#fff; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; border:none; cursor:pointer; }

/* Shop grid */
.ajd-shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; padding:0 56px 88px; }
.ajd-shop-item .ajd-shop-img { aspect-ratio:3/4; background:var(--light); margin-bottom:18px; overflow:hidden; }
.ajd-shop-item .ajd-shop-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; }
.ajd-shop-item:hover .ajd-shop-img img { transform:scale(1.03); }
.ajd-shop-item h3 { font-family:'Cormorant Garamond',serif; font-size:19px; font-style:italic; color:var(--dark); margin-bottom:4px; }
.ajd-shop-item .ajd-meta { font-family:'Jost',sans-serif; font-size:11px; color:#ccc; margin-bottom:8px; }
.ajd-shop-item .ajd-price { font-family:'Jost',sans-serif; font-size:14px; color:var(--dark); }
.ajd-shop-item.sold { opacity:.35; pointer-events:none; }

/* About page hero */
.ajd-about-hero { display:grid; grid-template-columns:1fr 1fr; min-height:85vh; }
.ajd-about-image { overflow:hidden; }
.ajd-about-image img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.ajd-about-content { padding:100px 72px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.ajd-about-content .ajd-title { font-size:clamp(38px,4vw,58px); margin-bottom:36px; }
.ajd-about-body { font-family:'EB Garamond',serif; font-size:19px; line-height:1.85; color:#666; max-width:480px; margin-bottom:20px; }

/* Values */
.ajd-values { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }
.ajd-value { padding:64px 48px; border-right:1px solid var(--border); }
.ajd-value:last-child { border-right:none; }
.ajd-value-num { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#ddd; margin-bottom:20px; }
.ajd-value h3 { font-family:'Cormorant Garamond',serif; font-size:24px; font-style:italic; font-weight:300; color:var(--dark); margin-bottom:14px; }
.ajd-value p { font-family:'Jost',sans-serif; font-size:13px; line-height:1.85; color:#aaa; }

/* Contact */
.ajd-contact { display:grid; grid-template-columns:1fr 1fr; }
.ajd-contact-info { padding:100px 72px; background:var(--off); border-right:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; }
.ajd-contact-info .ajd-title { font-size:clamp(36px,4vw,54px); margin-bottom:24px; }
.ajd-contact-info .ajd-body { max-width:380px; margin-bottom:52px; }
.ajd-contact-label { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#ccc; margin-bottom:6px; }
.ajd-contact-value { font-family:'EB Garamond',serif; font-size:18px; color:var(--dark); margin-bottom:36px; }
.ajd-contact-form { padding:100px 72px; background:#fff; }
.ajd-contact-form h2 { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:300; font-style:italic; color:var(--dark); margin-bottom:44px; }
.ajd-field { margin-bottom:28px; }
.ajd-field label { display:block; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#ccc; margin-bottom:10px; }
.ajd-field input, .ajd-field textarea { width:100%; padding:12px 0; border:none; border-bottom:1px solid #e8e8e8; background:transparent; font-family:'EB Garamond',serif; font-size:17px; color:var(--dark); outline:none; transition:border-color .2s; }
.ajd-field input:focus, .ajd-field textarea:focus { border-color:var(--dark); }
.ajd-field textarea { height:110px; resize:none; }

/* Footer */
.ajd-footer { background:var(--dark); padding:64px 56px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.ajd-footer-brand { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:300; letter-spacing:4px; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.ajd-footer-tagline { font-family:'Jost',sans-serif; font-size:12px; line-height:1.8; color:#444; }
.ajd-footer-heading { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#444; margin-bottom:20px; }
.ajd-footer-links { list-style:none; }
.ajd-footer-links li { margin-bottom:10px; }
.ajd-footer-links a { font-family:'Jost',sans-serif; font-size:12px; color:#555; text-decoration:none; transition:color .2s; }
.ajd-footer-links a:hover { color:#fff; }
.ajd-footer-bottom { background:var(--dark); border-top:1px solid #222; padding:18px 56px; text-align:center; font-family:'Jost',sans-serif; font-size:10px; color:#333; }

/* Responsive */
@media(max-width:900px) {
  .ajd-about-strip, .ajd-about-hero, .ajd-contact { grid-template-columns:1fr; }
  .ajd-about-strip-content, .ajd-about-content, .ajd-contact-info, .ajd-contact-form { padding:60px 32px; }
  .ajd-gallery-grid { margin:0 24px 60px; grid-template-columns:repeat(2,1fr); }
  .ajd-shop-grid { grid-template-columns:repeat(2,1fr); padding:0 24px 60px; }
  .ajd-values { grid-template-columns:1fr; }
  .ajd-value { border-right:none; border-bottom:1px solid var(--border); }
  .ajd-footer { grid-template-columns:1fr; }
  .ajd-hero-text { left:6%; max-width:90%; }
}
@media(max-width:600px) { .ajd-gallery-grid, .ajd-shop-grid { grid-template-columns:1fr; } }

HOME – Block 1: Hero

Copy

<div class="ajd-hero">
  <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/Art-by-Jodie-Cover.jpg" alt="Art by Jodie">
  <div class="ajd-hero-overlay"></div>
  <div class="ajd-hero-text">
    <span class="ajd-eyebrow">Original Acrylic Paintings</span>
    <h1 class="ajd-hero-title">Art that feels like <em>coming home</em></h1>
    <p class="ajd-hero-sub">Each piece is a one-of-a-kind original, painted with care and made to be lived with.</p>
    <div class="ajd-hero-btns">
      <a href="/shop" class="ajd-btn-wh">Shop Originals</a>
      <a href="/about" class="ajd-btn-wh-o">About Jodie</a>
    </div>
  </div>
</div>

HOME – Block 2: Section Header

Copy

<div class="ajd-section-header">
  <span class="ajd-eyebrow">Recent Work</span>
  <h2 class="ajd-title">Original <em>Paintings</em></h2>
  <div class="ajd-rule"></div>
</div>

HOME – Block 3: Gallery Grid

Copy

<div class="ajd-gallery-grid">
  <div class="ajd-gallery-item">
    <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/The-Dance-of-the-Swans-scaled.png" alt="The Dance of the Swans">
    <div class="ajd-gallery-overlay"><div class="ajd-gallery-info"><h3>The Dance of the Swans</h3><p>Original &mdash; Available</p></div></div>
  </div>
  <div class="ajd-gallery-item">
    <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/Andromeda.png" alt="Andromeda">
    <div class="ajd-gallery-overlay"><div class="ajd-gallery-info"><h3>Andromeda</h3><p>Original &mdash; Available</p></div></div>
  </div>
  <div class="ajd-gallery-item">
    <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/The-Calm-Between.png" alt="The Calm Between">
    <div class="ajd-gallery-overlay"><div class="ajd-gallery-info"><h3>The Calm Between</h3><p>Original &mdash; Available</p></div></div>
  </div>
</div>

HOME – Block 4: About Strip

Copy

<div class="ajd-about-strip">
  <div class="ajd-about-strip-image">
    <!-- Upload IMG_5269.heic to WordPress, copy the converted JPG URL from Media Library -->
    <img src="YOUR-PHOTO-URL" alt="Jodie">
  </div>
  <div class="ajd-about-strip-content">
    <span class="ajd-eyebrow">The Artist</span>
    <h2 class="ajd-title">Made with intention, <em>painted with love</em></h2>
    <p class="ajd-body">A short, warm paragraph about you &mdash; your story, what drives your work, what someone can expect when they bring one of your pieces home.</p>
    <a href="/about" class="ajd-btn-ghost" style="align-self:flex-start;">Read My Story</a>
  </div>
</div>

HOME – Block 5: Pull Quote

Copy

<div class="ajd-pull-quote">
  <blockquote>
    "Every painting begins as a feeling. I work until the canvas holds it."
    <cite>&mdash; Jodie</cite>
  </blockquote>
</div>

HOME – Block 6: Newsletter

Copy

<div class="ajd-newsletter">
  <span class="ajd-eyebrow">Stay Connected</span>
  <h2 class="ajd-title" style="font-size:34px;">Be first to see new <em>work</em></h2>
  <p class="ajd-section-sub">New paintings, studio updates, and early access &mdash; straight to your inbox.</p>
  <!-- Replace with your Mailchimp or WPForms embed -->
  <div class="ajd-newsletter-form">
    <input type="email" placeholder="Your email address">
    <button>Subscribe</button>
  </div>
</div>

SHOP – Block 1: Header

Copy

<div class="ajd-section-header" style="padding-top:100px;">
  <span class="ajd-eyebrow">All Work</span>
  <h1 class="ajd-title">Original <em>Paintings</em></h1>
  <div class="ajd-rule"></div>
  <p class="ajd-section-sub" style="max-width:480px;margin:16px auto 0;">Each painting is a unique, one-of-a-kind original. Once it's gone, it's gone.</p>
</div>

SHOP – Block 2: Shop Grid

Copy

<div class="ajd-shop-grid">

  <div class="ajd-shop-item">
    <div class="ajd-shop-img">
      <a href="/shop/the-dance-of-the-swans">
        <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/The-Dance-of-the-Swans-scaled.png" alt="The Dance of the Swans">
      </a>
    </div>
    <h3>The Dance of the Swans</h3>
    <p class="ajd-meta">Original acrylic on canvas</p>
    <p class="ajd-price">&pound;XXX</p>
  </div>

  <div class="ajd-shop-item">
    <div class="ajd-shop-img">
      <a href="/shop/andromeda">
        <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/Andromeda.png" alt="Andromeda">
      </a>
    </div>
    <h3>Andromeda</h3>
    <p class="ajd-meta">Original acrylic on canvas</p>
    <p class="ajd-price">&pound;XXX</p>
  </div>

  <div class="ajd-shop-item">
    <div class="ajd-shop-img">
      <a href="/shop/the-calm-between">
        <img src="https://artbyjodie.co.uk/wp-content/uploads/2026/03/The-Calm-Between.png" alt="The Calm Between">
      </a>
    </div>
    <h3>The Calm Between</h3>
    <p class="ajd-meta">Original acrylic on canvas</p>
    <p class="ajd-price">&pound;XXX</p>
  </div>

  <!-- To mark as sold: add class="sold" to the ajd-shop-item div -->
</div>

ABOUT – Block 1: Hero

Copy

<div class="ajd-about-hero">
  <div class="ajd-about-content">
    <span class="ajd-eyebrow">The Artist</span>
    <h1 class="ajd-title">Hello, I'm <em>Jodie</em></h1>
    <p class="ajd-about-body">Write your story here in your own voice.</p>
    <p class="ajd-about-body">Don't be afraid to be real. People buy from people they connect with.</p>
    <a href="/shop" class="ajd-btn" style="align-self:flex-start;margin-top:16px;">Shop My Work</a>
  </div>
  <div class="ajd-about-image">
    <!-- Upload IMG_5269.heic to WordPress, replace with converted JPG URL -->
    <img src="YOUR-PHOTO-URL" alt="Jodie">
  </div>
</div>

ABOUT – Block 2: Pull Quote

Copy

<div class="ajd-pull-quote">
  <blockquote>"Painting is how I make sense of the world."<cite>&mdash; Jodie</cite></blockquote>
</div>

ABOUT – Block 3: Values

Copy

<div class="ajd-values">
  <div class="ajd-value">
    <p class="ajd-value-num">01</p><h3>The Process</h3>
    <p>Your studio, your materials, your approach to starting and finishing a piece.</p>
  </div>
  <div class="ajd-value">
    <p class="ajd-value-num">02</p><h3>The Work</h3>
    <p>What themes draw you in? What makes your work yours? What do you hope someone feels?</p>
  </div>
  <div class="ajd-value">
    <p class="ajd-value-num">03</p><h3>Owning a Piece</h3>
    <p>All originals are shipped carefully, signed, and come with a certificate of authenticity. I reply to every message personally.</p>
  </div>
</div>

CONTACT – Block 1

Copy

<div class="ajd-contact">
  <div class="ajd-contact-info">
    <span class="ajd-eyebrow">Get in Touch</span>
    <h1 class="ajd-title">Let's <em>talk</em></h1>
    <p class="ajd-body">Whether you have a question about a painting, want to discuss a commission, or just want to say hello &mdash; I read and reply to every message myself.</p>
    <p class="ajd-contact-label">Email</p><p class="ajd-contact-value">[email protected]</p>
    <p class="ajd-contact-label">Follow Along</p><p class="ajd-contact-value">@artbyjodie</p>
  </div>
  <div class="ajd-contact-form">
    <h2>Send a message</h2>
    <!-- Paste your WPForms or CF7 shortcode here, or keep these fields -->
    <div class="ajd-field"><label>Your Name</label><input type="text"></div>
    <div class="ajd-field"><label>Email</label><input type="email"></div>
    <div class="ajd-field"><label>Message</label><textarea></textarea></div>
    <button class="ajd-btn">Send Message</button>
  </div>
</div>

FOOTER – All pages

Copy

<footer class="ajd-footer">
  <div>
    <div class="ajd-footer-brand">Art by Jodie</div>
    <p class="ajd-footer-tagline">Original acrylic paintings, handmade and available to live in your home.</p>
  </div>
  <div>
    <div class="ajd-footer-heading">Navigate</div>
    <ul class="ajd-footer-links">
      <li><a href="/shop">Shop</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <div>
    <div class="ajd-footer-heading">Follow</div>
    <ul class="ajd-footer-links">
      <li><a href="YOUR-INSTAGRAM-URL">Instagram</a></li>
      <li><a href="YOUR-FACEBOOK-URL">Facebook</a></li>
    </ul>
  </div>
</footer>
<div class="ajd-footer-bottom">&copy; 2025 Art by Jodie. All rights reserved.</div>