/* Theme Name: Natasha Salonen Theme URI: https://natashasalonen.com Author: Rosewood Fundraising Author URI: https://rosewoodfundraising.com Description: Custom editorial theme for the Natasha Salonen personal brand website, with a distinct 2026 election campaign section at /election. Two brand systems in one theme: an ivory/navy/charcoal editorial main site and a Tiffany blue/black/white campaign section. Version: 1.1.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 License: Proprietary — built for Natasha Salonen, not for redistribution Text Domain: natasha-salonen */ /* ========================================================= 1. DESIGN TOKENS ========================================================= */ :root{ /* Main brand palette */ --ns-navy: #14213D; --ns-ivory: #F7F5F0; --ns-black: #17191C; --ns-charcoal: #34373B; --ns-stone: #E5E3DE; --ns-emerald: #174C45; --ns-white: #FFFFFF; /* Semantic aliases (main site) */ --bg: var(--ns-ivory); --bg-alt: var(--ns-stone); --text: var(--ns-black); --text-muted: var(--ns-charcoal); --accent: var(--ns-navy); --accent-soft: var(--ns-emerald); --line: rgba(23,25,28,0.12); /* Typography */ --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Spacing / shape */ --gutter: clamp(1.25rem, 4vw, 4rem); --radius: 2px; --max-width: 1240px; --transition: 220ms ease; } /* Campaign palette — applied when */ body.brand-election{ --bg: #FFFFFF; --bg-alt: #EAFBFA; --text: #111214; --text-muted: #3A3D40; --accent: #0ABAB5; /* Tiffany blue */ --accent-soft: #0ABAB5; --line: rgba(10,186,181,0.35); } /* ========================================================= 2. RESET / BASE ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } img{ max-width:100%; display:block; height:auto; } a{ color: inherit; text-decoration: none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; cursor:pointer; } input, textarea, select{ font-family: inherit; font-size: 1rem; } h1,h2,h3,h4{ font-family: var(--font-serif); font-weight: 500; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; color: var(--text); } h1{ font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 450; } h2{ font-size: clamp(2rem, 3.6vw, 3.25rem); } h3{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); } p{ margin: 0 0 1.25em; color: var(--text-muted); max-width: 62ch; } .eyebrow{ font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; display:inline-block; margin-bottom: 1rem; } /* ========================================================= 3. LAYOUT HELPERS ========================================================= */ .wrap{ max-width: var(--max-width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section{ padding: clamp(3.5rem, 8vw, 7rem) 0; } .section--tight{ padding: clamp(2rem, 5vw, 3.5rem) 0; } .section--alt{ background: var(--bg-alt); } .grid{ display:grid; gap: clamp(1.5rem, 3vw, 3rem); } .grid--2{ grid-template-columns: repeat(2, 1fr); } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px){ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; } } .stack{ display:flex; flex-direction:column; } .center{ text-align:center; } .divider{ border:none; border-top:1px solid var(--line); margin: 3rem 0; } /* ========================================================= 4. BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5em; padding: 0.95em 2.1em; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1; white-space: nowrap; border-radius: var(--radius); border: 1.5px solid var(--accent); transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition); } .btn--primary{ background: var(--accent); color: var(--ns-ivory); } body.brand-election .btn--primary{ color: #06201F; } .btn--primary:hover{ transform: translateY(-1px); opacity:0.92; } .btn--outline{ background: transparent; color: var(--text); } .btn--outline:hover{ background: var(--text); color: var(--bg); border-color: var(--text); } .btn--block{ width:100%; } /* ========================================================= 5. SITE HEADER ========================================================= */ .site-header{ position: sticky; top:0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); } .election-strip{ background: #0ABAB5; /* Tiffany blue */ color: #06201F; font-size: 0.8rem; letter-spacing: 0.04em; } .election-strip a{ font-weight:700; color: #fff; } .election-strip a:hover{ color: #06201F; } .election-strip .wrap{ display:flex; align-items:center; justify-content:center; gap: 0.5rem; padding-top:0.6rem; padding-bottom:0.6rem; text-align:center; } /* On election pages the strip goes near-black, so the base dark text/tiffany link from the main-site strip would be unreadable — flip to ivory body copy with a tiffany "Visit the main site" link for contrast. */ .brand-election .election-strip{ background:#111214; color: var(--ns-ivory); } .brand-election .election-strip a{ color: #0ABAB5; } .brand-election .election-strip a:hover{ color: #fff; } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 1.1rem 0; } .site-logo{ font-family: var(--font-serif); font-size:1.5rem; letter-spacing:0.01em; } .site-logo img{ max-height: 44px; width:auto; } .site-logo .campaign-tag{ font-family: var(--font-sans); font-size: 0.65rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--accent); display:block; margin-top:2px; } .primary-nav{ display:flex; align-items:center; gap: 1.9rem; } .primary-nav ul{ display:flex; align-items:center; gap: 1.9rem; } /* Scoped to menu links only (.primary-nav ul a) — NOT .primary-nav a — so this doesn't also catch the Donate/Volunteer buttons in .nav-cta and strip their button padding / border. That collision was why the header buttons looked cramped with no visible bottom border on Volunteer. */ .primary-nav ul a{ font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight:600; padding: 0.4rem 0; border-bottom: 2px solid transparent; transition: border-color var(--transition), color var(--transition); } .primary-nav ul a:hover, .primary-nav .current-menu-item a{ border-color: var(--accent); } .nav-cta{ display:flex; align-items:center; gap:0.75rem; } .nav-toggle{ display:none; background:none; border:none; width:32px; height:24px; position:relative; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; position:absolute; left:0; right:0; height:2px; background: var(--text); } .nav-toggle span{ top:11px; } .nav-toggle::before{ top:2px; } .nav-toggle::after{ bottom:2px; } @media (max-width: 880px){ .primary-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,85vw); height:100vh; background: var(--bg); transform: translateX(100%); transition: transform var(--transition); padding: 6rem 2rem 2rem; box-shadow: -8px 0 30px rgba(0,0,0,0.12); flex-direction:column; align-items:flex-start; gap:1.4rem; } .primary-nav.is-open{ transform: translateX(0); } .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:1.4rem; } .nav-cta{ flex-direction:column; align-items:stretch; width:100%; margin-top:0.5rem; } .nav-toggle{ display:block; } } /* ========================================================= 6. HERO ========================================================= */ .hero{ display:grid; grid-template-columns: 1.05fr 0.95fr; align-items:center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem,7vw,6rem) 0; } .hero h1{ margin-bottom: 0.4rem; } .hero__statement{ font-size: 1.15rem; max-width: 46ch; } .hero__media{ position:relative; } .hero__media img{ width:100%; aspect-ratio: 4/5; object-fit: cover; } .hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; } @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } .hero__media{ order:-1; } } /* ========================================================= 7. PATHWAY / CARD COMPONENTS ========================================================= */ .pathways{ } .pathway-card{ display:block; padding: 2rem 0; border-top: 1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; gap:1rem; transition: padding-left var(--transition); } .pathway-card:hover{ padding-left: 0.5rem; } .pathway-card h3{ margin:0; } .pathway-card .arrow{ font-family: var(--font-serif); font-size:1.5rem; color:var(--accent); } .pathway-card p{ margin:0.35rem 0 0; } .card{ background: var(--bg); border:1px solid var(--line); overflow:hidden; } .card__media{ aspect-ratio: 4/3; overflow:hidden; background: var(--bg-alt); } .card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 400ms ease; } .card:hover .card__media img{ transform: scale(1.04); } .card__body{ padding: 1.5rem; } .card__meta{ font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; display:block; } .card__body h3{ font-size:1.25rem; margin-bottom:0.5rem; } .card__body p{ font-size:0.95rem; margin-bottom:0.75rem; } .card__source{ font-size:0.8rem; color:var(--text-muted); font-style:italic; } /* ========================================================= 8. TIMELINE (Public Service) ========================================================= */ .timeline-item{ display:grid; grid-template-columns: 140px 1fr; gap:2rem; padding: 2rem 0; border-top:1px solid var(--line); } .timeline-item__years{ font-family:var(--font-serif); font-size:1.1rem; color:var(--accent); } .timeline-item__badge{ display:inline-block; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; background: var(--accent); color: var(--ns-ivory); padding:0.2em 0.6em; margin-bottom:0.6rem; } @media (max-width: 640px){ .timeline-item{ grid-template-columns: 1fr; gap:0.5rem; } } /* ========================================================= 9. CAMPAIGN SPECIFIC ========================================================= */ .campaign-hero{ position:relative; overflow:hidden; text-align:center; padding: clamp(3.5rem,9vw,7rem) 0; /* Flat fill, not a gradient — gradients on a large flat area like this render with visible banding in most browsers (looks like a faint extra line), which is what kept showing up under the eyebrow no matter what the gradient stops were. A solid fill has no banding. */ background: #0ABAB5; color: #06201F; } .campaign-hero .eyebrow{ color:#06201F; opacity:0.9; border-bottom: 2px solid #fff; padding-bottom: 0.5rem; } .campaign-hero h1{ color:#06201F; } .campaign-hero__role{ font-family: var(--font-sans); font-size: 0.95rem; font-weight:700; letter-spacing: 0.14em; text-transform: uppercase; color:#06201F; opacity:0.78; margin: -0.3rem 0 1.25rem; } .campaign-hero__thesis{ color: #0B322F; font-size: 1.2rem; line-height:1.6; max-width: 56ch; margin: 0 auto 2.25rem; } .campaign-hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } /* Donate/Volunteer need their own high-contrast treatment here — the hero's own background is the same Tiffany blue as the default .btn--primary fill, so it would otherwise disappear. Solid white Donate + white-outline Volunteer keep both buttons clearly visible and add more white to the hero per feedback. */ .campaign-hero .btn--primary{ background:#fff; color:#06201F; border-color:#fff; } .campaign-hero .btn--primary:hover{ background:#06201F; color:#fff; border-color:#06201F; opacity:1; } .campaign-hero .btn--outline{ border-color:#fff; color:#06201F; } .campaign-hero .btn--outline:hover{ background:#fff; color:#06201F; border-color:#fff; } /* Split layout — used once a Campaign Hero Photo is uploaded in the Customizer. Photo is expected to be a transparent-background cutout, so it sits directly on the hero's Tiffany-blue gradient with no card/box behind it — the blue runs unbroken across the full width of the section. */ .campaign-hero__grid{ display:flex; flex-direction:column; align-items:center; } /* Split hero runs shorter top/bottom padding — the larger, edge-bled photo below carries the section's visual weight, so it reads as a thinner band. */ .campaign-hero--split{ padding-top: clamp(2rem,5vw,3.5rem); padding-bottom: 0; } .campaign-hero--split .campaign-hero__grid{ display:grid; grid-template-columns: 3fr 2fr; align-items:end; gap: clamp(1.5rem,4vw,3rem); text-align:left; } .campaign-hero--split .campaign-hero__copy{ padding-bottom: clamp(3.5rem,9vw,7rem); } .campaign-hero--split .campaign-hero__thesis{ margin-left:0; margin-right:0; } .campaign-hero--split .campaign-hero__cta{ justify-content:flex-start; } .campaign-hero__media{ align-self:end; display:flex; align-items:flex-end; justify-content:flex-end; height:100%; /* Bleed the image past the wrap's right gutter so it reads as pushed further right and larger, right up against the edge of the section. */ width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .campaign-hero__media img{ width:auto; max-width:100%; height:auto; max-height: clamp(620px, 80vh, 1000px); object-fit:contain; object-position: bottom right; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3)); } @media (max-width: 900px){ .campaign-hero--split{ padding-top: clamp(3.5rem,9vw,7rem); padding-bottom: clamp(3.5rem,9vw,7rem); } .campaign-hero--split .campaign-hero__copy{ padding-bottom: 0; } .campaign-hero--split .campaign-hero__grid{ grid-template-columns: 1fr; text-align:center; } .campaign-hero--split .campaign-hero__cta{ justify-content:center; } .campaign-hero__media{ width:100%; margin:1rem auto 0; justify-content:center; } .campaign-hero__media img{ max-width:320px; max-height:340px; } } /* Priorities / Election Information — was cramped at 70ch with default body copy size, made it feel like an afterthought. Give it more room to breathe and larger type so it reads as a proper section, not a footnote. */ .section--platform{ padding: clamp(4.5rem,10vw,8rem) 0; } .platform-content{ max-width: 1200px; } .platform-content p{ font-size: 1.1rem; line-height:1.75; max-width: none; } .platform-content h2{ font-size: clamp(2.1rem, 3.8vw, 3rem); } .platform-content h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); } .platform-content li{ font-size: 1.1rem; line-height:1.75; margin-bottom:0.5em; } /* About page bio copy — was capped at 78ch, widen to match the campaign platform content treatment. */ .about-content{ max-width: 1200px; } .about-content p{ font-size: 1.1rem; line-height:1.75; max-width: none; } .action-grid{ align-items:stretch; } .action-card{ border:1px solid var(--line); padding:2rem; text-align:center; display:flex; flex-direction:column; align-items:center; transition: border-color var(--transition), transform var(--transition); } .action-card:hover{ border-color: var(--accent); transform: translateY(-3px); } .action-card__icon{ font-size:2rem; margin-bottom:0.75rem; } .action-card h3{ margin-bottom:0.5rem; } .action-card p{ font-size:0.9rem; margin-bottom:1.25rem; flex-grow:1; } .action-card .btn{ margin-top:auto; } .accordion-item{ border-top:1px solid var(--line); } .accordion-item:last-child{ border-bottom:1px solid var(--line); } .accordion-item__trigger{ width:100%; background:none; border:none; text-align:left; display:flex; align-items:center; justify-content:space-between; padding: 1.4rem 0; font-family:var(--font-serif); font-size:1.1rem; color:var(--text); } .accordion-item__panel{ max-height:0; overflow:hidden; transition: max-height 300ms ease; } .accordion-item.is-open .accordion-item__panel{ max-height: 500px; padding-bottom:1.4rem; } .accordion-item__trigger .plus{ transition: transform var(--transition); font-size:1.4rem; color:var(--accent); } .accordion-item.is-open .plus{ transform: rotate(45deg); } /* Sticky mobile campaign bar */ .mobile-cta-bar{ display:none; } @media (max-width: 640px){ body.brand-election{ padding-bottom: 72px; } .mobile-cta-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#111214; padding:0.6rem; gap:0.6rem; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .mobile-cta-bar .btn{ flex:1; padding:0.85em 0.5em; font-size:0.75rem; } } /* ========================================================= 10. FORMS ========================================================= */ .form-wrap{ max-width: 640px; } .jetpack-form-fallback{ border: 1px dashed var(--line); padding: 2rem; text-align:center; color: var(--text-muted); } /* ========================================================= 11. FOOTER ========================================================= */ .site-footer{ background: var(--ns-navy); color: var(--ns-stone); padding: 4rem 0 2rem; } body.brand-election .site-footer{ background:#111214; } .site-footer h4{ color:#fff; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; font-family:var(--font-sans); margin-bottom:1rem; } .site-footer a{ color: var(--ns-stone); opacity:0.85; } .site-footer a:hover{ opacity:1; text-decoration:underline; } .site-footer .grid{ margin-bottom:3rem; } .site-footer__bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:1.5rem; font-size:0.8rem; opacity:0.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; } /* ========================================================= 12. UTILITIES ========================================================= */ .u-muted{ color: var(--text-muted); } .u-serif{ font-family: var(--font-serif); } .u-small{ font-size:0.85rem; } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }