Cookie Consent Banner

The Cookie Consent Banner is a small, customizable notification that appears at the bottom of your site. It informs users that cookies are being used, and allows them to either accept or decline.

---

1. Consent Duration & Display Behavior

Consent Validity Period: 20 Days

Defines how long the user's cookie preference is remembered. After 20 days, the banner will appear again unless they accept or decline it once more.

---

2. Banner Content & Messaging

Banner Title:

🍪 Cookie Settings The heading shown at the top of the banner.

• Title Alignment: Left Aligned

• Title Color: #222222 – dark grey for readability.

Message Text:

“We use cookies to optimize your browsing experience. Click 'Allow' to consent to our cookie policy.” You can format this message with HTML for links, bolding, etc.

• Body Text Color: #787878

• Message Font Size: 16px

You should keep the message clear and polite, without overwhelming the visitor.

---

3. Banner Appearance – Desktop & Mobile

Maximum Width

• Desktop: 620px

• Mobile: 360px

Gradient Background

• Enable Gradient Background: ✅ Enables a soft, multi-tone background instead of a solid color.

• Primary Gradient Color: #FAFAFA

• Secondary Gradient Color: #F7F7F7

• Tertiary Gradient Color (optional): #FBFBFB

• Gradient Angle: 270° – background fades vertically from top to bottom.

Solid Background Fallback: #FCFCFC

Corner Rounding: 10

Creates subtle rounded corners for the whole banner.

---

4. Desktop Banner Padding & Positioning

• Top Padding: 33px

• Bottom Padding: 13px

• Horizontal Padding: 40px

• Vertical Offset: 30px – distance from the bottom edge of the screen.

• Placement: Bottom Left Appears in the bottom left corner on desktop.

• Activate Desktop Banner Slider: ✅ Enables horizontal repositioning using the setting below.

• Horizontal Offset: -300px Pushes the banner left or right (negative values move left, positive = right).

---

5. Mobile Banner Padding & Positioning

• Vertical Offset: 100px

• Banner Placement: Bottom Center

• Activate Mobile Banner Slider: ✅

• Horizontal Offset: 0 (centered by default)

Padding Inside the Banner (Mobile):

• Top: 20px

• Bottom: 20px

• Left / Right: 51px each Keeps the text visually balanced and easy to read on mobile screens.

---

6. Shadow Effect

Shadow Intensity: Medium Shadow

Adds depth and separation between the banner and the rest of the site content.

---

7. Alternative Layout Options (Desktop Only)

Activate Alternative Desktop Layout: ✅

Moves the accept/decline buttons to the right of the message instead of stacking them below. This creates a sleeker, inline look — ideal for desktop spacing.

---

8. Accept Button Styling

• Label: "Allow"

• Background Color: #3A3A3A

• Text Color: #FFFFFF

• Border Color: #C5C5C5

• Border Thickness: 1px

• Corner Radius: 9px Rounded button with a sleek, minimal design.

---

9. Decline Button Styling (Optional)

• Label: "Decline"

• URL for Decline Action: Paste your link (optional – useful for redirecting to a "Learn more" page or custom policy)

• Background Color: #FFFFFF

• Text Color: #000000

• Border Color: #000000

• Border Thickness: 1px

• Corner Radius: 7px Creates a secondary-style, outlined decline button for balance.

---

Summary

This Cookie Consent Banner system gives you full visual control while ensuring compliance, clarity, and a clean user experience across devices. With:

• Gradient or solid backgrounds

• Glassy shadows and rounded edges

• Adjustable button styling

• Separate mobile + desktop positioning …it’s ideal for modern brands who want to stay compliant without disrupting the design.