/* site.css — Frank Ramey for Knoxville City Council Archetype: Candidate promo. Palette: navy #173b91 / red #bf3739 / white. */ /* ------------------------------------------------------------------------- FONTS The brand face is Articulat CF (Adobe Fonts / Typekit — "articulat-cf"). Adobe Fonts cannot be self-hosted, so add the campaign's Typekit embed to to activate it: Until then, "Mulish" (loaded via Google Fonts in index.html) stands in as the closest free match. The stack below prefers Articulat CF when present. ------------------------------------------------------------------------- */ :root { --font-display: "articulat-cf", "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "articulat-cf", "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Brand palette */ --primary--color: #173b91; /* navy — dominant */ --secondary--color: #bf3739; /* red — accent */ --utility--white: #ffffff; --ink: #14213a; /* near-navy body text on light */ --primary--color-80: #173b91cc; --primary--color-60: #173b9199; --primary--color-20: #173b9133; --secondary--color-20: #bf373933; /* Sizes */ --radius: .5rem; } /* ---- Base type ---- */ body { font-family: var(--font-body); color: var(--ink); background: var(--utility--white); line-height: 1.55; font-size: 1.0625rem; margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; margin: 0; } p { margin: 0; } a { text-decoration: none; } /* ---- Buttons ---- */ .button { display: inline-flex; align-items: center; gap: .5rem; background-color: var(--secondary--color); color: var(--utility--white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .95rem 1.75rem; border-radius: var(--radius); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; box-shadow: 0 6px 18px rgba(191,55,57,.28); } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(191,55,57,.36); } .button:focus-visible { outline: 3px solid var(--utility--white); outline-offset: 2px; } .button.is-ghost { background: transparent; color: var(--utility--white); box-shadow: inset 0 0 0 2px var(--utility--white); } .button.is-ghost:hover { background: var(--utility--white); color: var(--primary--color); } /* ========================================================================= HERO Aerial neighborhood photo, navy scrim, text left, cut-out headshot right, election-day stamp overlapping. Mirrors the Open Graph composition. ========================================================================= */ .hero { position: relative; background: linear-gradient(90deg, var(--primary--color) 0%, var(--primary--color-80) 46%, rgba(23,59,145,.28) 100%), url("../images/hero-bg.webp") center/cover no-repeat; color: var(--utility--white); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 1rem; min-height: 560px; } .hero__copy { padding-top: 4.5rem; padding-bottom: 4.5rem; max-width: 40rem; } .hero__pre { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: 1.5rem; opacity: .96; } .hero__h1 { font-size: clamp(3rem, 7.5vw, 5.75rem); text-transform: uppercase; margin: .1em 0 .1em; } .hero__role { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.35rem, 2.6vw, 2rem); margin-bottom: 1.25rem; } .hero__slogan { font-size: 1.2rem; font-weight: 400; max-width: 34rem; border-left: 4px solid var(--secondary--color); padding-left: 1rem; margin-bottom: 1.75rem; } .hero__media { position: relative; align-self: end; height: 100%; min-height: 560px; } .hero__headshot { position: absolute; right: -2%; bottom: 0; z-index: 1; height: 96%; width: auto; max-width: none; filter: drop-shadow(0 12px 24px rgba(0,0,0,.28)); } .hero__badge { position: absolute; left: 6%; bottom: 6%; z-index: 2; width: 180px; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); } /* ========================================================================= PRIORITIES (issue cards — labels only, no body copy) ========================================================================= */ .section-priorities { background: var(--utility--white); } .section-heading { text-align: center; margin-bottom: 2.5rem; } .section-heading h2 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--primary--color); text-transform: uppercase; } .section-heading .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--secondary--color); font-size: .95rem; margin-bottom: .5rem; } .issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-card { text-align: center; padding: 2.5rem 1.5rem; border: 2px solid var(--primary--color-20); border-radius: var(--radius); background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .grid-card:hover { transform: translateY(-4px); border-color: var(--primary--color); box-shadow: 0 14px 30px rgba(23,59,145,.14); } .grid-card__icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; color: var(--primary--color); } .grid-card__icon svg { width: 100%; height: 100%; } .grid-card__h3 { font-size: 1.35rem; color: var(--primary--color); text-transform: uppercase; letter-spacing: .01em; } /* ========================================================================= MEET FRANK (bio) ========================================================================= */ .section-bio { background: #f4f6fb; } .bio-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; } .bio-photo { background: var(--primary--color); border-radius: var(--radius); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .bio-photo img { width: 100%; max-width: 360px; height: auto; } .bio-copy .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--secondary--color); font-size: .95rem; margin-bottom: .5rem; } .bio-copy h2 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--primary--color); text-transform: uppercase; margin-bottom: 1.25rem; } .bio-copy p { font-size: 1.15rem; } /* ========================================================================= VOTE (voting information CTA band) ========================================================================= */ .section-vote { background: var(--primary--color); color: var(--utility--white); } .vote-grid { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; } .vote-h2 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; margin-bottom: 1.75rem; } .vote-h2 span { color: #ffd646; } .vote-list { display: grid; gap: 1.25rem; } .vote-item { display: flex; gap: 1rem; align-items: baseline; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.25rem; } .vote-item__date { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; font-size: 1.05rem; min-width: 8.5rem; } .vote-item__body { font-size: 1.1rem; } .vote-item__body a { color: #ffd646; text-decoration: underline; font-weight: 800; } .vote-badge { width: 220px; height: auto; justify-self: center; } /* ========================================================================= FOOTER ========================================================================= */ .footer { background: #0f2a68; color: var(--utility--white); } .footer__inner { text-align: center; } .footer__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.25rem; margin-bottom: 1rem; } .paid-for { display: inline-block; border: 1px solid var(--utility--white); padding: 10px 30px; max-width: 46rem; margin: 0 auto 1rem; font-size: .95rem; } .footer__link { display: block; margin-top: .75rem; color: var(--utility--white); text-decoration: underline; opacity: .85; } .footer__link:hover { opacity: 1; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 991px) { .hero__inner { grid-template-columns: 1fr; min-height: 0; } .hero__copy { padding-bottom: 1.5rem; } .hero__media { min-height: 380px; } .hero__headshot { height: 100%; right: 50%; transform: translateX(50%); } .hero__badge { left: 5%; bottom: 5%; width: 120px; } .bio-grid { grid-template-columns: 1fr; gap: 2rem; } .bio-photo { max-width: 320px; margin: 0 auto; } .vote-grid { grid-template-columns: 1fr; } .vote-badge { width: 180px; } } @media (max-width: 767px) { .issue-grid { grid-template-columns: 1fr; } .hero__media { min-height: 320px; } .vote-item { flex-direction: column; gap: .35rem; } .vote-item__date { min-width: 0; } }