/* ========================================================================== Willett for Congress — INTERMEDIATE tier shared styles Builds on ../assets/brand.css tokens. Do not redefine core colors/fonts. ========================================================================== */ /* ---- Google Fonts load is in each HTML ---- */ /* ========================================================================== HEADER ========================================================================== */ .site-header { background: var(--blue); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(12,58,84,0.22); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; } .header-logo { flex-shrink: 0; display: flex; align-items: center; } .header-logo img { height: 42px; width: auto; } .site-nav { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; } .site-nav a { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: rgba(255,255,255,0.88); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5em 0.8em; border-radius: var(--r-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .site-nav a:hover, .site-nav a.active { background: rgba(255,255,255,0.12); color: #fff; } .site-nav a.active { border-bottom: 3px solid var(--orange); border-radius: 0; padding-bottom: calc(0.5em - 3px); } .header-donate { flex-shrink: 0; } /* Mobile hamburger */ .nav-toggle { display: none; background: transparent; border: 2px solid rgba(255,255,255,0.6); border-radius: var(--r-sm); color: #fff; padding: 6px 10px; cursor: pointer; font-size: 1.3rem; line-height: 1; margin-left: auto; } @media (max-width: 767px) { .nav-toggle { display: block; } .header-inner { height: 60px; } .header-logo img { height: 34px; } .site-nav { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: var(--blue-deep); padding: 0.75rem 0; box-shadow: 0 8px 20px rgba(12,58,84,0.3); gap: 0; z-index: 99; } .site-nav.open { display: flex; } .site-nav a { padding: 0.75em 1.5em; border-radius: 0; font-size: 1rem; width: 100%; } .site-nav a.active { border-bottom: none; border-left: 4px solid var(--orange); padding-left: calc(1.5em - 4px); } .header-donate { display: none; } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--blue-ink); color: rgba(255,255,255,0.85); padding: 48px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } @media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } } .footer-brand img { height: 38px; width: auto; margin-bottom: 0.75rem; } .footer-brand p { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0 0 0.5rem; line-height: 1.5; } .footer-links h4 { font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin: 0 0 0.75rem; } .footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .footer-links a { color: rgba(255,255,255,0.72); font-size: 0.92rem; transition: color var(--dur) var(--ease); } .footer-links a:hover { color: #fff; } .footer-social h4 { font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin: 0 0 0.75rem; } .social-icons { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 1.1rem; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .social-icons a:hover { background: var(--orange); color: var(--blue-ink); transform: translateY(-3px); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; } .footer-bottom p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); } .footer-email-cta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .footer-email-cta input[type="email"] { padding: 0.5em 0.9em; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 0.9rem; min-width: min(200px, 100%); max-width: 100%; } .footer-email-cta input::placeholder { color: rgba(255,255,255,0.45); } .footer-email-cta input:focus { outline: 3px solid var(--orange); outline-offset: 2px; } /* ========================================================================== TIER BADGE (fixed corner) ========================================================================== */ .tier-badge { position: fixed; bottom: 18px; left: 18px; background: var(--blue-ink); color: rgba(255,255,255,0.7); font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.18); z-index: 200; pointer-events: none; white-space: nowrap; } /* ========================================================================== SECTION UTILITIES ========================================================================== */ .section { padding: clamp(56px, 8vw, 96px) 0; } .section--cream { background: var(--cream); } .section--cream-2 { background: var(--cream-2); } .section--blue { background: var(--blue); color: #fff; } .section--blue-ink { background: var(--blue-ink); color: #fff; } .section--photo { position: relative; background-size: cover; background-position: center; background-attachment: fixed; /* parallax */ color: #fff; } @media (max-width: 767px) { .section--photo { background-attachment: scroll; } /* disable parallax on mobile */ } .section--photo::before { content: ''; position: absolute; inset: 0; background: rgba(12,58,84,0.68); z-index: 0; } .section--photo > * { position: relative; z-index: 1; } .section--photo .container { position: relative; z-index: 1; } .section-header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-header .eyebrow { display: block; margin-bottom: 0.5rem; } .section-header h2 { margin-bottom: 0.5rem; } .section-header .rule-accent { margin: 0.75rem auto 0; } .section-header p { margin: 1rem auto 0; max-width: 600px; color: var(--ink-soft); font-size: 1.05rem; } .section--blue .section-header p, .section--blue-ink .section-header p, .section--photo .section-header p { color: rgba(255,255,255,0.78); } /* ========================================================================== VOTE BANNER (top of hero) ========================================================================== */ .vote-banner { background: var(--orange); color: var(--blue-ink); text-align: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(0.78rem, 1.5vw, 0.9rem); text-transform: uppercase; letter-spacing: 0.1em; padding: 9px 16px; } /* ========================================================================== HERO — parallax ========================================================================== */ .hero { position: relative; min-height: clamp(480px, 72vh, 760px); display: flex; align-items: center; background-image: url('../assets/img/hero-farmland.webp'); background-size: cover; background-position: center 30%; background-attachment: fixed; overflow: hidden; } @media (max-width: 767px) { .hero { background-attachment: scroll; } } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10,45,66,0.88) 0%, rgba(25,102,146,0.62) 60%, rgba(12,58,84,0.52) 100%); } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(48px, 8vw, 80px) 0; } @media (max-width: 767px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__portrait { order: -1; } } .hero__content { color: #fff; } .hero__eyebrow { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--orange); margin-bottom: 0.75rem; } .hero__title { font-family: var(--font-head); font-size: clamp(2.6rem, 6.5vw, 4.4rem); font-weight: 700; line-height: 1.04; margin: 0 0 0.35em; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .hero__title em { font-style: normal; color: var(--orange); } .hero__sub { font-size: clamp(1.05rem, 2vw, 1.25rem); margin: 0 0 0.6em; color: rgba(255,255,255,0.9); max-width: 540px; line-height: 1.5; } @media (max-width: 767px) { .hero__sub { max-width: 100%; } } .hero__tagline { font-family: var(--font-head); font-size: clamp(0.9rem, 1.8vw, 1.05rem); font-weight: 600; color: rgba(255,255,255,0.78); margin-bottom: 1.75rem; font-style: italic; } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 767px) { .hero__actions { justify-content: center; } } .vote-badge { display: inline-flex; align-items: center; gap: 0.5em; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--r-pill); padding: 0.35em 1em; font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1.25rem; } .vote-badge::before { content: '🗳'; font-size: 1rem; } .hero__portrait { width: 220px; flex-shrink: 0; } .hero__portrait img { width: 100%; height: auto; border-radius: var(--r-lg); border: 4px solid rgba(255,255,255,0.25); box-shadow: var(--sh-lg); object-fit: cover; object-position: top; } @media (max-width: 767px) { .hero__portrait { width: 160px; margin: 0 auto; } } /* ========================================================================== ISSUES GRID ========================================================================== */ .issues-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 1023px) { .issues-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .issues-grid { grid-template-columns: 1fr; } } .issue-card { background: var(--white); border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--sh-sm); border-top: 4px solid var(--orange); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .issue-card:hover { box-shadow: var(--sh-md); transform: translateY(-4px); } .issue-card__icon { font-size: 1.8rem; margin-bottom: 0.6rem; line-height: 1; } .issue-card__num { font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin-bottom: 0.3rem; } .issue-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--blue); } .issue-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; line-height: 1.55; } .issue-card a { display: inline-block; margin-top: 0.75rem; font-size: 0.82rem; font-weight: 700; font-family: var(--font-head); color: var(--orange-deep); text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================================== ENDORSEMENTS STRIP ========================================================================== */ .endorsements-strip { background: var(--blue); padding: clamp(40px, 6vw, 64px) 0; } .endorsements-strip .section-header h2 { color: #fff; } .endorsements-strip .section-header .eyebrow { color: var(--orange-soft); } .endorse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; } @media (max-width: 1023px) { .endorse-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .endorse-grid { grid-template-columns: 1fr; } } .endorse-card { background: rgba(255,255,255,0.1); border-radius: var(--r-md); padding: 1.4rem; border-left: 4px solid var(--orange); color: #fff; } .endorse-card blockquote { margin: 0 0 0.75rem; font-size: 0.92rem; font-style: italic; line-height: 1.55; color: rgba(255,255,255,0.85); } .endorse-card cite { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; color: var(--orange); } .endorse-card .endorse-role { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.62); margin-top: 0.15rem; } /* ========================================================================== DONATE TIERS ========================================================================== */ .donate-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.75rem 0; } .donate-tiers a { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--blue-ink); background: var(--orange); padding: 0.75em 1.6em; border-radius: var(--r-pill); border: 3px solid transparent; transition: all var(--dur) var(--ease); text-decoration: none; white-space: nowrap; } .donate-tiers a:hover { background: var(--orange-deep); color: #fff; transform: translateY(-3px); box-shadow: var(--sh-md); } .donate-tiers a.tier-featured { background: var(--white); color: var(--blue); border-color: var(--orange); font-size: 1.15rem; } .donate-tiers a.tier-featured:hover { background: var(--orange); color: var(--blue-ink); } .donate-other { display: block; text-align: center; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; } .donate-other:hover { color: #fff; } /* ========================================================================== SECTION PHOTO BACKGROUNDS ========================================================================== */ .bg-mainstreet { background-image: url('../assets/img/district-mainstreet.webp'); } .bg-grain { background-image: url('../assets/img/grain-elevator.webp'); } .bg-field { background-image: url('../assets/img/texture-field.webp'); } .bg-flag { background-image: url('../assets/img/hero-flag.webp'); } /* ========================================================================== VOLUNTEER TEASER ========================================================================== */ .volunteer-teaser { text-align: center; max-width: 600px; margin: 0 auto; } .volunteer-teaser h2 { color: #fff; } .volunteer-teaser p { color: rgba(255,255,255,0.82); font-size: 1.1rem; margin-bottom: 1.5rem; } .volunteer-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ========================================================================== NEWS TEASER ========================================================================== */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 767px) { .news-grid { grid-template-columns: 1fr; } } .news-card { background: var(--white); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); display: flex; flex-direction: column; } .news-card:hover { box-shadow: var(--sh-md); transform: translateY(-4px); } .news-card__img { height: 180px; background: var(--cream-2); overflow: hidden; } .news-card__img img { width: 100%; height: 100%; object-fit: cover; } .news-card__placeholder { height: 180px; background: linear-gradient(135deg, var(--cream-2), var(--line)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--line-2); } .news-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; } .news-card__cat { font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange-deep); margin-bottom: 0.4rem; } .news-card h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 0.5rem; } .news-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; flex: 1; } .news-card a.read-more { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; } .news-card a.read-more:hover { color: var(--orange-deep); } .news-card--placeholder { opacity: 0.6; } /* ========================================================================== PAGE HERO (non-homepage) ========================================================================== */ .page-hero { background: var(--blue); padding: clamp(40px, 6vw, 72px) 0; color: #fff; position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; background: rgba(255,255,255,0.04); border-radius: 50%; pointer-events: none; } .page-hero .eyebrow { display: block; margin-bottom: 0.5rem; color: var(--orange-soft); } .page-hero h1 { color: #fff; margin-bottom: 0.4em; } .page-hero p { color: rgba(255,255,255,0.82); font-size: 1.1rem; margin: 0; max-width: 600px; } /* ========================================================================== ABOUT PAGE ========================================================================== */ .bio-layout { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; } @media (max-width: 899px) { .bio-layout { grid-template-columns: 1fr; } .bio-portrait { order: -1; max-width: 300px; margin: 0 auto; } } .bio-portrait { position: sticky; top: 88px; } .bio-portrait img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-lg); object-fit: cover; object-position: top; } .bio-facts-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; background: var(--blue); border-radius: var(--r-md); overflow: hidden; } .bio-facts-list li { padding: 0.65rem 1rem; font-size: 0.88rem; display: flex; align-items: baseline; gap: 0.6rem; color: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(255,255,255,0.1); } .bio-facts-list li:last-child { border-bottom: none; } .bio-facts-list li::before { content: '★'; color: var(--orange); font-size: 0.7rem; flex-shrink: 0; margin-top: 2px; } .bio-text h2 { color: var(--blue); margin-bottom: 1.25rem; } .bio-text p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); margin-bottom: 1.25rem; } .bio-throughline { background: var(--cream-2); border-left: 5px solid var(--orange); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1rem 1.25rem; font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: var(--blue); margin: 1.5rem 0; font-style: italic; } /* ========================================================================== ISSUES PAGE ========================================================================== */ .issues-list { display: flex; flex-direction: column; gap: 0; } .issue-section { padding: clamp(36px, 5vw, 56px) 0; border-bottom: 1px solid var(--line); } .issue-section:last-child { border-bottom: none; } .issue-section__layout { display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 479px) { .issue-section__layout { grid-template-columns: 1fr; } .issue-num { display: none; } } .issue-num { width: 72px; height: 72px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 4px solid var(--orange); } .issue-body h2 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); color: var(--blue); margin-bottom: 0.6rem; } .issue-quote { font-family: var(--font-head); font-size: 1.05rem; font-style: italic; color: var(--blue); border-left: 4px solid var(--orange); padding-left: 1rem; margin: 0.75rem 0 1rem; } .issue-body p { font-size: 1.02rem; line-height: 1.7; color: var(--ink); margin: 0; } /* ========================================================================== NEWS PAGE ========================================================================== */ .press-list { display: flex; flex-direction: column; gap: 1rem; } .press-item { background: var(--white); border-radius: var(--r-md); padding: 1.5rem 1.75rem; box-shadow: var(--sh-sm); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; border-left: 5px solid var(--orange); transition: box-shadow var(--dur) var(--ease); } .press-item:hover { box-shadow: var(--sh-md); } .press-item--placeholder { border-left-color: var(--line-2); opacity: 0.55; } .press-item h3 { font-size: 1.1rem; color: var(--blue); margin-bottom: 0.25rem; } .press-item p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; } .press-item__meta { text-align: right; font-size: 0.82rem; color: var(--ink-mute); white-space: nowrap; } @media (max-width: 479px) { .press-item { grid-template-columns: 1fr; } .press-item__meta { text-align: left; } } /* ========================================================================== VOLUNTEER PAGE ========================================================================== */ .volunteer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 767px) { .volunteer-grid { grid-template-columns: 1fr; } } .form-card { background: var(--white); border-radius: var(--r-md); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--sh-md); } .form-card h3 { color: var(--blue); font-size: 1.35rem; margin-bottom: 0.25rem; } .form-card > p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.5rem; } .field-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; } .field-group label { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); } .field-group input, .field-group select, .field-group textarea { padding: 0.7em 0.9em; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--cream); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25,102,146,0.18); } .field-group input:focus-visible, .field-group select:focus-visible, .field-group textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; box-shadow: none; } .field-group textarea { resize: vertical; min-height: 90px; } .sms-consent { font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.25rem; line-height: 1.5; } .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .checkbox-group label { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; color: var(--ink); cursor: pointer; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; } .checkbox-group input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--blue); margin: 0; } .form-success { display: none; text-align: center; padding: 2rem; color: var(--blue); } .form-success .success-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .form-success h4 { font-size: 1.2rem; color: var(--blue); margin-bottom: 0.25rem; } .form-success p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; } .form-card.submitted .form-fields { display: none; } .form-card.submitted .form-success { display: block; } /* Email signup strip */ .email-signup-strip { text-align: center; } .email-signup-strip h3 { color: #fff; margin-bottom: 0.5rem; } .email-signup-strip p { color: rgba(255,255,255,0.78); margin-bottom: 1.25rem; } .email-form-inline { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .email-form-inline input[type="email"] { flex: 1; min-width: min(200px, 100%); max-width: 100%; padding: 0.75em 1em; border-radius: var(--r-pill); border: none; font-family: var(--font-body); font-size: 1rem; color: var(--ink); } .email-form-inline input:focus { outline: 3px solid var(--orange); outline-offset: 2px; } /* Global :focus-visible for interactive elements not covered above */ a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: var(--r-sm); } .social-icons a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* ========================================================================== SKIP NAV ========================================================================== */ .skip-nav { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--orange); color: var(--blue-ink); font-family: var(--font-head); font-weight: 700; padding: 0.5em 1.2em; border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; } .skip-nav:focus { left: 0; } /* ========================================================================== SCROLL REVEAL Hidden state scoped to html.js so content is visible when JS is absent/blocked. ========================================================================== */ html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } html.js .reveal.visible { opacity: 1; transform: none; } html.js .reveal-delay-1 { transition-delay: 0.1s; } html.js .reveal-delay-2 { transition-delay: 0.2s; } html.js .reveal-delay-3 { transition-delay: 0.3s; } html.js .reveal-delay-4 { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== MISC UTILITIES ========================================================================== */ .text-center { text-align: center; } .mt-sm { margin-top: 0.75rem; } .mt-md { margin-top: 1.5rem; } .mt-lg { margin-top: 2.5rem; } .orange { color: var(--orange); } .white { color: #fff; } .flag-rule { height: 5px; width: 100%; background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 33%, var(--white) 33%, var(--white) 66%, var(--flag-red) 66%, var(--flag-red) 100%); margin: 0; border: none; }