/* ============================================================ Portland Queer Arts Foundation — Theme Styles Design System v1.0 ============================================================ */ /* --- Google Fonts Import --- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); /* --- CSS Custom Properties (Brand Tokens) --- */ :root { --pqa-navy: #2B2E5F; --pqa-light-navy: #F4F4F7; --pqa-accent-blue: #3ABAF9; --pqa-white: #FFFFFF; --pqa-text-dark: #1A1C3A; --pqa-text-mid: #4A4D6B; --pqa-text-light: #8C8FA8; --pqa-border: #E2E2EC; /* Layout */ --pqa-header-height: 5rem; /* clearance for sticky-positioned elements below the fixed nav */ /* Rainbow Colors */ --pqa-dark-brown: #964E00; --pqa-light-brown: #BC7C2F; --pqa-pink: #F447E4; --pqa-purple: #8860E2; --pqa-blue: #3ABAF9; --pqa-green: #6DC435; --pqa-yellow: #FFD541; --pqa-orange: #F78A2F; --pqa-red: #FF4453; /* Rainbow Gradient — Right version (logo on page) */ --pqa-rainbow: linear-gradient(90deg, #FF4453 0%, #F78A2F 13%, #FFD541 26%, #6DC435 39%, #3ABAF9 51%, #8860E2 63%, #F447E4 75%, #BC7C2F 87%, #964E00 100%); /* Rainbow Gradient — vertical (top to bottom), for left/right border accents */ --pqa-rainbow-vertical: linear-gradient(to bottom, #964E00 0%, #BC7C2F 13%, #F447E4 26%, #8860E2 39%, #3ABAF9 51%, #6DC435 63%, #FFD541 75%, #F78A2F 87%, #FF4453 100%); /* Typography */ --font-base: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* Transitions */ --transition: 0.2s ease; /* Max content width */ --max-width: 1200px; --content-width: 800px; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-base); font-weight: 500; color: var(--pqa-text-dark); background-color: var(--pqa-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* iframes have a browser-default width of 300px (HTML spec). Force them to fill their container unless something more specific overrides. */ iframe { width: 100%; } a { color: inherit; text-decoration: none; } /* Override WP Global Styles injection: a:where(:not(.wp-element-button)) { text-decoration: underline } WP uses :where() deliberately to zero out specificity (0-0-1), making it easy to override. Dropping :where() gives us 0-1-1, which beats the injected inline rule on specificity. */ a:not(.wp-element-button) { text-decoration: none; } ul, ol { list-style: none; } /* ============================================================ NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--pqa-white); border-bottom: 1px solid var(--pqa-border); box-shadow: 0 1px 12px rgba(43, 46, 95, 0.06); } /* Offset sticky header when the WP admin bar is present. The admin bar is position:fixed at 32px tall (desktop) and 46px tall on screens ≤782px. WordPress adds .admin-bar to when it is shown. */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* --- Rainbow Stripe --- */ .rainbow-stripe { height: 5px; background: var(--pqa-rainbow); width: 100%; display: block; } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .nav-logo img { max-height: 60px; min-height: 45px; min-width: 199px; max-width: 265px; } .nav-logo-fallback { display: none; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-fallback .emblem { min-height: 70px; min-width: 70px; max-height: 70px; max-width: 70px; } .nav-logo-mobile { display: none; min-height: 70px; min-width: 70px; max-height: 70px; max-width: 70px; } .nav-logo-mobile img { min-height: 70px; min-width: 70px; max-height: 70px; max-width: 70px; } .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 0.5rem 0.75rem; font-size: 0.825rem; font-weight: 600; letter-spacing: 0.03em; color: var(--pqa-text-mid); border-radius: 6px; transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--pqa-navy); background-color: var(--pqa-light-navy); } .nav-link svg { width: 12px; height: 12px; transition: transform var(--transition); } .nav-item:hover .nav-link svg { transform: rotate(180deg); } /* Hamburger → X animation */ .nav-toggle rect { transition: transform 0.25s ease, opacity 0.25s ease; transform-box: fill-box; transform-origin: center; } .nav-toggle.open rect:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open rect:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.open rect:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Dropdown */ .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background-color: var(--pqa-white); border: 1px solid var(--pqa-border); border-radius: 10px; box-shadow: 0 8px 32px rgba(43, 46, 95, 0.12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--transition); overflow: hidden; } .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: block; padding: 0.65rem 1.25rem; font-size: 0.825rem; font-weight: 600; color: var(--pqa-text-mid); transition: background var(--transition), color var(--transition); } .nav-dropdown a:hover { background-color: var(--pqa-light-navy); color: var(--pqa-navy); } .nav-dropdown .dropdown-divider { height: 1px; background-color: var(--pqa-border); margin: 4px 0; } /* CTA buttons in nav */ .nav-cta-group { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.6rem 1.25rem; border-radius: 100px; font-family: var(--font-base); font-size: 0.825rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; cursor: pointer; border: 2px solid transparent; transition: all var(--transition); white-space: nowrap; text-decoration: none; /* Normalize