/* ========================================================================== Campaign Connect — Demo campaign website styles Shared base for all fictional sample sites. Each demo sets a theme class on (theme-school / theme-county / theme-judge) to give it its own personality while staying connected to the Campaign Connect brand. ========================================================================== */ :root { --navy: #0b2347; --navy-2: #143b70; --red: #c9342f; --ink: #1d2433; --muted: #5a6679; --line: #e2e8f1; --bg: #f7f8fb; --white: #ffffff; --shadow: 0 20px 60px rgba(11, 35, 71, .10); --radius: 22px; /* Theme hooks — overridden per demo */ --accent: #c9342f; --accent-dark: #a92522; --accent-soft: rgba(201, 52, 47, .10); --heading-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --body-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --hero-bg: linear-gradient(150deg, var(--navy), var(--navy-2)); --hero-tint: linear-gradient(150deg, rgba(11, 35, 71, .84), rgba(20, 59, 112, .74)); --surface-tint: #f4f7fc; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body-font); color: var(--ink); background: var(--bg); line-height: 1.55; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; color: var(--navy); font-family: var(--heading-font); letter-spacing: -.02em; line-height: 1.05; } /* --- Fictional sample banner -------------------------------------------- */ .demo-banner { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 9px 16px; } .demo-banner span { opacity: .85; } /* --- Top navigation ----------------------------------------------------- */ .demo-header { position: sticky; top: 36px; z-index: 25; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .demo-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 14px clamp(18px, 4vw, 32px); } .demo-nav .wordmark { display: flex; flex-direction: column; line-height: 1.1; } .demo-nav .wordmark strong { color: var(--navy); font-size: 18px; font-family: var(--heading-font); } .demo-nav .wordmark span { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; } .demo-nav .links { display: flex; align-items: center; gap: 18px; } .demo-nav .links a { text-decoration: none; color: var(--navy); font-weight: 750; font-size: 14px; } .back-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff !important; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; } .back-btn:hover { background: var(--navy-2); } /* --- Buttons ------------------------------------------------------------ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: var(--accent); color: #fff; padding: 13px 20px; border-radius: 999px; font-weight: 800; font-size: 15px; box-shadow: 0 12px 26px var(--accent-soft); } .button:hover { background: var(--accent-dark); } .button.ghost { background: transparent; color: var(--navy); border: 2px solid var(--line); box-shadow: none; } .button.ghost:hover { border-color: var(--accent); color: var(--accent); } .button.on-dark { background: #fff; color: var(--navy); box-shadow: 0 12px 26px rgba(0, 0, 0, .22); } .button.on-dark.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .button.on-dark.ghost:hover { border-color: #fff; color: #fff; } /* --- Hero --------------------------------------------------------------- */ .hero { background: var(--hero-bg); color: #fff; padding: clamp(56px, 9vw, 104px) clamp(18px, 4vw, 32px); } /* Hero with a full-bleed photo. The themed tint keeps the headline readable over the image. The image URL is supplied per page via --hero-img. */ .hero.has-image { background-image: var(--hero-tint), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; } .hero-inner { max-width: 980px; margin: 0 auto; } .hero .photo-credit { margin: 28px 0 0; font-size: 12px; color: rgba(255, 255, 255, .68); } .hero .photo-credit a { color: inherit; } .fiction-label { display: inline-block; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .hero .office { margin: 0 0 12px; color: rgba(255, 255, 255, .82); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; } .hero h1 { color: #fff; font-size: clamp(42px, 8vw, 78px); } .hero .tagline { margin: 18px 0 0; font-size: clamp(20px, 3vw, 27px); font-weight: 700; color: #fff; max-width: 720px; } .hero .intro { margin: 18px 0 0; font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 640px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* --- Generic section layout -------------------------------------------- */ .section { max-width: 1080px; margin: 0 auto; padding: clamp(54px, 8vw, 92px) clamp(18px, 4vw, 32px); } .eyebrow { margin: 0 0 12px; color: var(--accent); font-weight: 850; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; } .section h2 { font-size: clamp(30px, 5vw, 46px); } .lead { color: var(--muted); font-size: 18px; max-width: 640px; margin-top: 14px; } /* --- About -------------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .about-copy p { color: var(--ink); font-size: 17px; margin: 0 0 16px; } .about-copy p:last-child { margin-bottom: 0; } /* About-section photo (environmental image, never a fake candidate portrait) */ .about-media { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface-tint); } .about-media img { width: 100%; height: 100%; min-height: 340px; max-height: 480px; object-fit: cover; } .about-media figcaption { padding: 12px 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--white); border-top: 1px solid var(--line); } /* --- Image gallery (supporting photos) ---------------------------------- */ .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; } figure.media { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); } figure.media img { width: 100%; height: 260px; object-fit: cover; transition: transform .5s ease; } figure.media:hover img { transform: scale(1.04); } figure.media figcaption { padding: 14px 18px; font-size: 14px; color: var(--muted); } /* --- Priorities --------------------------------------------------------- */ .priorities { background: var(--surface-tint); } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; } .card .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 900; font-size: 18px; margin-bottom: 16px; } .card h3 { font-size: 21px; margin-bottom: 10px; } .card p { color: var(--muted); margin: 0; } /* --- Community ---------------------------------------------------------- */ .community-card { max-width: 1080px; margin: 0 auto; background: var(--hero-bg); color: #fff; border-radius: var(--radius); padding: clamp(36px, 6vw, 64px); text-align: center; } .community-card h2 { color: #fff; font-size: clamp(28px, 4.5vw, 42px); } .community-card .quote { font-size: clamp(20px, 3vw, 26px); font-weight: 700; max-width: 760px; margin: 18px auto 0; } .community-card .sub { color: rgba(255, 255, 255, .85); max-width: 620px; margin: 16px auto 0; font-size: 17px; } .support-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } .support-row span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700; } /* --- Contact ------------------------------------------------------------ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 48px); align-items: start; } .contact-copy p { color: var(--muted); font-size: 17px; } .contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 4vw, 36px); } .contact-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .contact-list li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .contact-list li:last-child { border-bottom: 0; padding-bottom: 0; } .contact-list .label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); } .contact-list a { color: var(--navy); font-weight: 750; text-decoration: none; } .contact-list a:hover { text-decoration: underline; } .social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .social-row span { background: var(--surface-tint); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 750; color: var(--navy); } /* --- Footer ------------------------------------------------------------- */ .demo-footer { background: var(--navy); color: #fff; padding: clamp(40px, 6vw, 60px) clamp(18px, 4vw, 32px); } .demo-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; } .demo-footer .name { font-size: 20px; font-weight: 800; } .demo-footer .name span { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 600; } .disclaimer { max-width: 1080px; margin: 28px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.7; } .disclaimer strong { color: #fff; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 820px) { .about-grid, .contact-grid { grid-template-columns: 1fr; } .about-media { order: -1; } .about-media img { min-height: 220px; max-height: 320px; } .cards { grid-template-columns: 1fr; } .media-grid { grid-template-columns: 1fr; } figure.media img { height: 220px; } .demo-nav .links a:not(.back-btn) { display: none; } } /* ========================================================================== THEME: School board — Alex Carter (warm, parent-focused) ========================================================================== */ .theme-school { --accent: #d97817; --accent-dark: #b9610c; --accent-soft: rgba(217, 120, 23, .12); --hero-bg: linear-gradient(150deg, #123a5e, #1c6f86); --hero-tint: linear-gradient(150deg, rgba(18, 58, 94, .86), rgba(28, 111, 134, .68)); --surface-tint: #fbf6ee; --bg: #fffdf9; } .theme-school .card { border-radius: 26px; } /* ========================================================================== THEME: County commission — Morgan Lee (practical, civic) ========================================================================== */ .theme-county { --accent: #2f7d56; --accent-dark: #226040; --accent-soft: rgba(47, 125, 86, .12); --hero-bg: linear-gradient(150deg, #0b2347, #1f5d52); --hero-tint: linear-gradient(150deg, rgba(11, 35, 71, .86), rgba(31, 93, 82, .70)); --surface-tint: #f1f6f3; --bg: #f6f8f7; } .theme-county .card { border-left: 4px solid var(--accent); } /* ========================================================================== THEME: Judicial — Jordan Fields (restrained, formal) ========================================================================== */ .theme-judge { --accent: #9a7b33; --accent-dark: #7c6228; --accent-soft: rgba(154, 123, 51, .14); --hero-bg: linear-gradient(160deg, #0a1c33, #1c2c44); --hero-tint: linear-gradient(160deg, rgba(10, 28, 51, .88), rgba(28, 44, 68, .78)); --surface-tint: #f5f4f0; --bg: #f6f5f1; --heading-font: Georgia, "Times New Roman", serif; } .theme-judge .hero h1, .theme-judge .section h2, .theme-judge .community-card h2 { letter-spacing: 0; } .theme-judge .fiction-label { letter-spacing: .14em; } .theme-judge .card { text-align: center; } .theme-judge .card .num { margin-left: auto; margin-right: auto; }