/* Theme Name: ABCD Foods Theme URI: https://www.abcd.com Description: A modern, B2B product showcase theme for ABCD Foods. Version: 1.0.0 Author: ABCD Foods Dev Text Domain: abcd-theme */ /* ─── Google Fonts Import ─── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@600;700&display=swap'); /* ═══════════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } :root { --primary: #1a4731; --primary-lg: #2a6b4a; --accent: #e8a838; --accent-dk: #c78a1e; --bg: #f4f6f2; --card-bg: #ffffff; --text: #2c2c2c; --text-muted: #6b7280; --border: #e2e6df; --radius: 12px; --shadow: 0 4px 24px rgba(26,71,49,.08); --shadow-hover:0 8px 40px rgba(26,71,49,.16); /* Navbar background — kept as a separate var so palette overrides can swap it without touching the rgba in .abcdt-nav */ --nav-bg: rgba(26, 71, 49, .92); } /* ═══════════════════════════════════════════════════════════════ PALETTE COMPARISON OVERRIDES Activate by appending ?palette=1..4 to any URL. The body_class filter in functions.php injects "palette-N" onto . Defaults (no parameter) leave the original green/gold theme intact. ═══════════════════════════════════════════════════════════════ */ /* Palette 1 — Burgundy + cream + warm gold (matches the logo exactly) */ body.palette-1 { --primary: #5a0e10; --primary-lg: #7a1a1d; --accent: #d4a93f; --accent-dk: #b08628; --bg: #faf6ed; --shadow: 0 4px 24px rgba(90,14,16,.10); --shadow-hover:0 8px 40px rgba(90,14,16,.18); --nav-bg: rgba(90, 14, 16, .92); } /* Palette 2 — Burgundy + cream + brass (warmer, vintage signage) */ body.palette-2 { --primary: #6b1a1d; --primary-lg: #8a2426; --accent: #b5895c; --accent-dk: #967048; --bg: #fdf8ec; --shadow: 0 4px 24px rgba(107,26,29,.10); --shadow-hover:0 8px 40px rgba(107,26,29,.18); --nav-bg: rgba(107, 26, 29, .92); } /* Palette 3 — Burgundy + charcoal + champagne (modern luxe) */ body.palette-3 { --primary: #7a1e23; --primary-lg: #1c1c1c; --accent: #c9a558; --accent-dk: #a78840; --bg: #f5f3ee; --shadow: 0 4px 24px rgba(28,28,28,.12); --shadow-hover:0 8px 40px rgba(28,28,28,.22); --nav-bg: rgba(122, 30, 35, .92); } /* Palette 4 — Burgundy + cream + sage (organic, keeps a green note) */ body.palette-4 { --primary: #5a0e10; --primary-lg: #7a1a1d; --accent: #8a9a7e; --accent-dk: #6a7a60; --bg: #f4ebd0; --shadow: 0 4px 24px rgba(90,14,16,.10); --shadow-hover:0 8px 40px rgba(90,14,16,.18); --nav-bg: rgba(90, 14, 16, .92); } html { scroll-behavior:smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration:none; color:inherit; } img { max-width:100%; height:auto; display:block; } ul, ol { list-style:none; } h1, h2, h3, h4 { font-family:'Playfair Display', serif; font-weight:700; } /* ═══════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════ */ .abcdt-nav { position: sticky; top: 0; z-index: 900; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); transition: box-shadow .3s; min-height: 150px; } .abcdt-nav--scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.18); } .abcdt-nav__inner { max-width: 1200px; margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; min-height: 150px; } .abcdt-nav__logo { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700; color: #fff; letter-spacing:-.5px; } .abcdt-nav__logo span { color:var(--accent); } .abcdt-nav__links { display: flex; gap: 32px; } .abcdt-nav__links a { color: rgba(255,255,255,.82); font-size: 0.88rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 4px; transition: color .25s; } .abcdt-nav__links a::after { content: ''; position: absolute; bottom: 0; left:0; width: 0; height:2px; background: var(--accent); transition: width .3s ease; } .abcdt-nav__links a:hover, .abcdt-nav__links a.active { color: #fff; } .abcdt-nav__links a:hover::after, .abcdt-nav__links a.active::after { width: 100%; } /* Mobile hamburger */ .abcdt-nav__toggle { display: none; flex-direction:column; gap: 5px; background:none; border: none; cursor: pointer; padding: 6px; } .abcdt-nav__toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; } /* ═══════════════════════════════════════════════════════════════ HOMEPAGE HERO ═══════════════════════════════════════════════════════════════ */ .abcdt-hero { position: relative; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lg) 60%, #1e5c3a 100%); padding: 120px 24px 100px; overflow: hidden; } /* Decorative circles */ .abcdt-hero__deco { position: absolute; border-radius:50%; opacity: .06; background: #fff; pointer-events:none; } .abcdt-hero__deco--1 { width:500px; height:500px; top:-180px; right:-120px; } .abcdt-hero__deco--2 { width:260px; height:260px; bottom:-80px; left:-60px; background:var(--accent); opacity:.08; } .abcdt-hero__deco--3 { width:140px; height:140px; top:60px; left:15%; } .abcdt-hero__content { position: relative; z-index: 1; max-width:740px; margin: 0 auto; text-align:center; } .abcdt-hero__badge { display: inline-block; background: rgba(232,168,56,.15); color: var(--accent); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 16px; border-radius: 20px; margin-bottom: 24px; border: 1px solid rgba(232,168,56,.25); } .abcdt-hero__title { font-size: 3.2rem; color: #fff; line-height: 1.2; margin-bottom:20px; } .abcdt-hero__title em { font-style: italic; color: var(--accent); } .abcdt-hero__sub { font-size: 1.05rem; color: rgba(255,255,255,.7); max-width: 560px; margin: 0 auto 36px; line-height: 1.7; } .abcdt-hero__ctas { display: flex; gap: 16px; justify-content:center; flex-wrap:wrap; } .abcdt-hero__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 8px; font-size: 0.92rem; font-weight: 600; transition: all .25s; } .abcdt-hero__cta--primary { background: var(--accent); color: var(--primary); } .abcdt-hero__cta--primary:hover { background: var(--accent-dk); box-shadow: 0 4px 20px rgba(232,168,56,.4); } .abcdt-hero__cta--ghost { border: 2px solid rgba(255,255,255,.4); color: #fff; } .abcdt-hero__cta--ghost:hover { background: rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); } /* Stats row */ .abcdt-hero__stats { display: flex; justify-content: center; gap: 48px; margin-top: 56px; flex-wrap: wrap; } .abcdt-hero__stat { text-align: center; } .abcdt-hero__stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--accent); display: block; } .abcdt-hero__stat-label { font-size: 0.78rem; color: rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1px; display: block; margin-top: 4px; } /* ═══════════════════════════════════════════════════════════════ SECTION : WHY US / TRUST PILLARS ═══════════════════════════════════════════════════════════════ */ .abcdt-trust { background: #fff; padding: 72px 24px; } .abcdt-trust__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 32px; } .abcdt-trust__card { text-align: center; padding: 32px 20px; } .abcdt-trust__icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.5rem; color: var(--primary-lg); } .abcdt-trust__card h3 { font-size: 1.05rem; color: var(--primary); margin-bottom:8px; } .abcdt-trust__card p { font-size: 0.85rem; color: var(--text-muted); line-height:1.6; } /* ═══════════════════════════════════════════════════════════════ SECTION : PRODUCTS (categories grid wrapper) ═══════════════════════════════════════════════════════════════ */ .abcdt-products-section { padding: 80px 24px; background:var(--bg); } .abcdt-products-section__inner { max-width: 1100px; margin: 0 auto; } .abcdt-section-header { text-align: center; margin-bottom:48px; } .abcdt-section-header h2 { font-size: 2rem; color: var(--primary); margin-bottom:10px; } .abcdt-section-header p { color: var(--text-muted); font-size: 0.95rem; max-width: 520px; margin: 0 auto; } /* Grid that wraps the shortcode cards */ .abcdt-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } /* ═══════════════════════════════════════════════════════════════ SECTION : CTA BANNER ═══════════════════════════════════════════════════════════════ */ .abcdt-cta-banner { background: linear-gradient(135deg, var(--primary), var(--primary-lg)); padding: 72px 24px; text-align: center; position: relative; overflow: hidden; } .abcdt-cta-banner::before { content: ''; position: absolute; top:-60px; right:-60px; width: 240px; height:240px; border-radius:50%; background: rgba(255,255,255,.04); } .abcdt-cta-banner h2 { font-size: 2.1rem; color: #fff; margin-bottom:12px; position: relative; } .abcdt-cta-banner p { color: rgba(255,255,255,.65); font-size: 1rem; max-width: 500px; margin: 0 auto 28px; position: relative; } .abcdt-cta-banner a { display: inline-block; background: var(--accent); color: var(--primary); font-weight: 600; font-size: 0.92rem; padding: 14px 36px; border-radius: 8px; transition: background .25s, box-shadow .25s; position: relative; } .abcdt-cta-banner a:hover { background: var(--accent-dk); box-shadow: 0 4px 20px rgba(232,168,56,.4); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .abcdt-footer { background: #141e18; color: rgba(255,255,255,.6); padding: 56px 24px 28px; } .abcdt-footer__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; } .abcdt-footer__brand h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #fff; margin-bottom:10px; } .abcdt-footer__brand h3 span { color:var(--accent); } .abcdt-footer__brand p { font-size: 0.82rem; line-height:1.7; max-width: 280px; } .abcdt-footer__col h4 { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #fff; margin-bottom: 16px; } .abcdt-footer__col ul li { margin-bottom:8px; } .abcdt-footer__col ul a { font-size: 0.84rem; color: rgba(255,255,255,.5); transition: color .2s; } .abcdt-footer__col ul a:hover { color:var(--accent); } .abcdt-footer__contact p { font-size: 0.84rem; margin-bottom:6px; display: flex; gap: 8px; align-items:flex-start; } .abcdt-footer__contact i { color:var(--accent); width:14px; flex-shrink:0; margin-top:2px; } .abcdt-footer__bottom { max-width: 1100px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; font-size: 0.76rem; color: rgba(255,255,255,.3); } /* ═══════════════════════════════════════════════════════════════ CONTACT PAGE LAYOUT WRAPPER ═══════════════════════════════════════════════════════════════ */ .abcdt-page-contact { background:var(--bg); min-height: calc(100vh - 68px); } .abcdt-page-contact .entry-content { max-width: 0; /* let the shortcode handle its own max-width */ } /* ═══════════════════════════════════════════════════════════════ WORDPRESS DEFAULTS CLEANUP ═══════════════════════════════════════════════════════════════ */ .entry-title { display:none; } /* hide default WP page title – we use custom heroes */ .entry-content p { margin-bottom:1em; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .abcdt-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .abcdt-nav__links { display:none; } .abcdt-nav__toggle { display:flex; } .abcdt-nav__links.abcdt-nav__links--open { display: flex; flex-direction: column; position: absolute; top: 68px; left:0; right:0; background: rgba(26,71,49,.97); backdrop-filter:blur(12px); padding: 24px; gap: 20px; } .abcdt-hero { padding:80px 20px 60px; } .abcdt-hero__title { font-size:2.1rem; } .abcdt-footer__inner { grid-template-columns: 1fr; gap: 28px; } .abcdt-footer__bottom { flex-direction: column; gap: 6px; text-align: center; } } /* ═══════════════════════════════════════════════════════════════ STACKED LOGO STYLING (Logo on top, Company Name below) ═══════════════════════════════════════════════════════════════ */ /* Logo container - stacked layout */ .abcdt-nav__logo--stacked { display: flex !important; align-items: center; } .abcdt-nav__logo-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; } /* Logo image (signboard-style brand mark in navbar) */ .abcdt-nav__logo-img { height: 120px; width: auto; display: block; max-width: 480px; object-fit: contain; } /* Company name below logo (legacy stacked layout — kept for fallback) */ .abcdt-nav__company-name { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; } /* Adjust for mobile */ @media (max-width: 640px) { .abcdt-nav__logo-img { height: 80px; max-width: 320px; } .abcdt-nav__company-name { font-size: 0.65rem; } } /* ═══════════════════════════════════════════════════════════════ HERO LAYOUT WITH BRAND BADGE Two-column on desktop (text left, badge right); stacked on mobile. ═══════════════════════════════════════════════════════════════ */ .abcdt-hero--with-badge .abcdt-hero__layout { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; } .abcdt-hero--with-badge .abcdt-hero__content { text-align: left; margin: 0; max-width: 640px; } .abcdt-hero--with-badge .abcdt-hero__sub { margin-left: 0; margin-right: 0; } .abcdt-hero--with-badge .abcdt-hero__ctas, .abcdt-hero--with-badge .abcdt-hero__stats { justify-content: flex-start; } .abcdt-hero__brand-badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .abcdt-hero__brand-badge-img { display: block; width: 280px; max-width: 100%; height: auto; filter: drop-shadow(0 12px 32px rgba(0,0,0,.35)); border-radius: 12px; } /* Tablet — keep two columns but shrink badge */ @media (max-width: 1024px) { .abcdt-hero__brand-badge-img { width: 220px; } } /* Mobile — stack badge above text, center everything */ @media (max-width: 768px) { .abcdt-hero--with-badge .abcdt-hero__layout { grid-template-columns: 1fr; gap: 32px; text-align: center; } .abcdt-hero--with-badge .abcdt-hero__content { text-align: center; margin: 0 auto; } .abcdt-hero--with-badge .abcdt-hero__sub { margin: 0 auto 36px; } .abcdt-hero--with-badge .abcdt-hero__ctas, .abcdt-hero--with-badge .abcdt-hero__stats { justify-content: center; } .abcdt-hero__brand-badge { order: -1; /* badge above text on mobile */ } .abcdt-hero__brand-badge-img { width: 180px; } }