/* ============================================================ JW & Co. Solutions — Custom CSS Site by NKWebDesign.com ============================================================ HOW TO USE: To change any color, font, or spacing — edit the values in the :root section below. Changes here apply everywhere on the site automatically. ============================================================ */ /* ── BRAND COLORS ─────────────────────────────────────────── */ :root { --gold: #C4973A; /* Primary gold — buttons, accents, eyebrows */ --gold-light: #D4A84B; /* Lighter gold — hover states, testimonial text */ --gold-pale: #F0DFB8; /* Pale gold — borders, subtle backgrounds */ --cream: #FAF7F2; /* Main page background */ --cream-dark: #F2ECE1; /* Slightly darker cream — alternate sections */ --warm-brown: #3D2B1F; /* Dark brown — headings, dark sections, footer */ --brown-mid: #6B4C3B; /* Mid brown — nav links */ --text: #2C1F14; /* Primary body text */ --text-light: #7A6255; /* Secondary / muted body text */ --white: #FFFFFF; /* Pure white — cards, nav */ --footer-bg: #1E1209; /* Deep dark brown — footer background */ } /* ── TYPOGRAPHY ───────────────────────────────────────────── */ :root { /* To change fonts, update the names below AND update the Google Fonts link in your HTML */ --font-display: 'Cormorant Garamond', serif; /* Headlines, quotes, section titles */ --font-body: 'DM Sans', sans-serif; /* Body text, nav, buttons, captions */ } body { font-family: var(--font-body); } h1, h2, h3, .hero-headline, .intro-title, .serif-h2, .cta-title, .card-title, .testimonial blockquote { font-family: var(--font-display); } /* ── FONT SIZES ───────────────────────────────────────────── */ :root { --text-xs: 0.72rem; /* Eyebrows, labels, footer captions */ --text-sm: 0.85rem; /* Buttons, nav links, small captions */ --text-base: 0.95rem; /* Body paragraphs */ --text-lg: 1.1rem; /* Large body / pull quotes */ --text-xl: 1.25rem; /* Card titles */ --text-2xl: 1.9rem; /* Mobile section headings */ --text-3xl: 2.5rem; /* Desktop section headings */ --text-4xl: 4.2rem; /* Hero headline (desktop) */ } /* ── SPACING ──────────────────────────────────────────────── */ :root { --section-pad-desktop: 100px 80px; /* Desktop section top/bottom & side padding */ --section-pad-mobile: 52px 20px; /* Mobile section top/bottom & side padding */ --card-pad-desktop: 32px 26px; /* Desktop card inner padding */ --card-pad-mobile: 26px 20px; /* Mobile card inner padding */ --nav-pad-desktop: 14px 60px; /* Desktop nav padding */ --nav-pad-mobile: 12px 18px; /* Mobile nav padding */ } /* ── BORDER RADIUS ────────────────────────────────────────── */ :root { --radius-sm: 2px; /* Buttons */ --radius-md: 4px; /* Cards, images, tags */ --radius-lg: 8px; /* CTA box, large containers */ } /* ── BUTTONS ──────────────────────────────────────────────── */ /* Primary gold button */ .btn-gold { background-color: var(--gold); color: var(--white); border-radius: var(--radius-sm); font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: background 0.25s, transform 0.2s; } .btn-gold:hover { background-color: var(--warm-brown); transform: translateY(-2px); } /* Outline/ghost button */ .btn-outline { border: 1.5px solid var(--gold); color: var(--gold); border-radius: var(--radius-sm); font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: all 0.25s; } .btn-outline:hover { background-color: var(--gold); color: var(--white); transform: translateY(-2px); } /* Solid block button (CTA section) */ .btn-block.gold { background-color: var(--gold); color: var(--white); } .btn-block.gold:hover { background-color: var(--warm-brown); } .btn-block.ghost { border: 1.5px solid var(--gold); color: var(--gold); } .btn-block.ghost:hover { background-color: var(--gold); color: var(--white); } /* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */ .announce { background-color: var(--warm-brown); color: var(--gold-pale); } .announce a { color: var(--gold-light); } /* ── NAVIGATION ───────────────────────────────────────────── */ nav { background-color: rgba(250, 247, 242, 0.97); /* matches --cream at 97% opacity */ border-bottom-color: var(--gold-pale); } .nav-links a { color: var(--brown-mid); } .nav-links a:hover { color: var(--gold); } .nav-cta { background-color: var(--gold); color: var(--white); } .nav-cta:hover { background-color: var(--warm-brown); } /* ── HERO SECTION ─────────────────────────────────────────── */ .hero { background: linear-gradient(135deg, var(--cream) 60%, var(--cream-dark) 100%); } .hero-eyebrow { color: var(--gold); } .hero-headline { color: var(--warm-brown); } .hero-headline em { color: var(--gold); } .hero-sub { color: var(--text-light); } .hero-tag { background-color: var(--white); } .hero-tag-dot { background-color: var(--gold); } /* ── INTRO / HEY THERE SECTION ────────────────────────────── */ .intro { background-color: var(--warm-brown); } .intro-title { color: var(--cream); } .intro-title em { color: var(--gold-light); } .intro-body { color: rgba(250, 247, 242, 0.78); } /* ── SERVICES SECTION ─────────────────────────────────────── */ .services { background-color: var(--cream); } .serif-h2 { color: var(--warm-brown); } .serif-h2 em { color: var(--gold); } .services-sub { color: var(--text-light); } /* Service cards */ .card { background-color: var(--white); border-color: var(--cream-dark); } .card::after { background-color: var(--gold); /* Gold underline on hover */ } .card:hover { border-color: var(--gold-pale); } .card-title { color: var(--warm-brown); } .card-desc { color: var(--text-light); } /* ── WHY JW & CO. SECTION ─────────────────────────────────── */ .why { background-color: var(--cream-dark); } .why-float { background-color: var(--gold); color: var(--white); } .why-quote { /* Mobile version of float quote */ background-color: var(--gold); color: var(--white); } .pillar-bar { background-color: var(--gold); } .pillar-text strong { color: var(--warm-brown); } .pillar-text span { color: var(--text-light); } /* ── ABOUT / MEET JADA SECTION ────────────────────────────── */ .about { background-color: var(--cream); } .about-quote { color: var(--gold); } .body-p { color: var(--text-light); } /* ── TESTIMONIAL SECTION ──────────────────────────────────── */ .testimonial { background-color: var(--warm-brown); } .testimonial blockquote { color: var(--cream); } .t-divider { background-color: var(--gold); } .t-author { color: var(--gold-light); } /* ── CTA SECTION ──────────────────────────────────────────── */ /* Desktop */ .cta-content { background-color: var(--cream-dark); } .cta-eyebrow { color: var(--gold); } .cta-title { color: var(--warm-brown); } .cta-title em { color: var(--gold); } .cta-body { color: var(--text-light); } /* Mobile */ .cta-section { background-color: var(--cream-dark); } /* ── FOOTER ───────────────────────────────────────────────── */ footer { background-color: var(--footer-bg); } .footer-tagline { color: rgba(250, 247, 242, 0.5); } .footer-col h4 { color: var(--gold); } .footer-col a { color: rgba(250, 247, 242, 0.6); } .footer-col a:hover { color: var(--gold-light); } .footer-bottom { color: rgba(250, 247, 242, 0.3); border-top-color: rgba(250, 247, 242, 0.08); } .footer-bottom a { color: rgba(250, 247, 242, 0.4); border-bottom-color: rgba(196, 151, 58, 0.4); } .footer-bottom a:hover { color: var(--gold-light); } .footer-social a { color: rgba(250, 247, 242, 0.4); } .footer-social a:hover { color: var(--gold-light); } /* ── EYEBROW LABELS ───────────────────────────────────────── */ .eyebrow { color: var(--gold); font-family: var(--font-body); } /* ── MOBILE DRAWER ────────────────────────────────────────── */ .drawer { background-color: var(--warm-brown); } .drawer a { color: var(--cream); border-bottom-color: rgba(255, 255, 255, 0.1); } .drawer a:hover { color: var(--gold-light); } .drawer .drawer-cta { background-color: var(--gold); color: var(--white); } .drawer-close { color: var(--gold-pale); } .overlay { background-color: rgba(0, 0, 0, 0.55); } /* ============================================================ QUICK THEME SWAPS Uncomment a block below to apply an alternate color scheme ============================================================ */ /* -- DARKER GOLD THEME -- :root { --gold: #A67C2E; --gold-light: #B8902E; --gold-pale: #DFC99A; } */ /* -- COOLER NEUTRAL THEME -- :root { --cream: #F8F5F0; --cream-dark: #EDE8DF; --warm-brown: #2E2318; } */ /* -- ROSE GOLD ACCENT THEME -- :root { --gold: #C8956C; --gold-light: #D4A882; --gold-pale: #EDD5C0; } */