Grace Andruszkiewicz 10/24/25 Grace Andruszkiewicz 10/24/25

3 Reasons to Participate in the Creative Youth Awards

It all begins with an idea.

Grace Andruszkiewicz 10/1/25 Grace Andruszkiewicz 10/1/25

Newsletter Archive

It all begins with an idea.

/* ================================ 📦 Load Base Neue Condensed Bold (custom) ================================ */ @font-face { font-family: 'Base Neue'; src: url('https://static1.squarespace.com/static/6267857d18652d5c8e3c2b4c/t/6852103b7710f05a23bf55e6/1750208572102/BaseNeue-CondensedBold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Base Neue'; src: url('https://static1.squarespace.com/static/6267857d18652d5c8e3c2b4c/t/6852103b427ad3583ea1bb2f/1750208572103/BaseNeue-CondensedBoldOblique.ttf') format('truetype'); font-weight: 700; font-style: italic; } /* ================================ 🔤 Headings use Base Neue ================================ */ h1, h2, h3, h4, h5, h6 { font-family: 'Base Neue', sans-serif !important; font-weight: 700 !important; font-style: normal !important; } h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, h1 i, h2 i, h3 i, h4 i, h5 i, h6 i { font-style: italic !important; } /* ================================ 🖱 Site‑wide buttons use Base Neue ================================ */ button, .button, input[type="submit"], input[type="button"], .sqs-block-button-element--small, .sqs-block-button-element--medium, .sqs-block-button-element--large { font-family: 'Base Neue', sans-serif !important; font-weight: 700 !important; font-style: normal !important; } /* ================================ 🧭 Navigation (main links, dropdowns, CTA) use Base Neue ================================ */ nav, nav *, .header-nav, .header-nav *, .header-menu, .header-menu *, .mobile-header, .mobile-header *, .header-actions, .header-actions * { font-family: 'Base Neue', sans-serif !important; font-weight: 700 !important; font-style: normal !important; } html, body { height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; min-height: 100vh; } .main-content { flex: 1; } footer { /* No special positioning needed */ } /* Header wrapper transition */ .header-title-nav-wrapper { padding-top: 16px; padding-bottom: 16px; transition: all 0.3s ease; } /* Shrunk header spacing */ .header-title-nav-wrapper.shrunk { padding-top: 6px !important; padding-bottom: 6px !important; } /* Logo visibility */ .large-logo { display: block; transition: all 0.3s ease; } .small-logo { display: none; transition: all 0.3s ease; } .header-title-nav-wrapper.shrunk .large-logo { display: none !important; } .header-title-nav-wrapper.shrunk .small-logo { display: block !important; } /* Logo sizing */ .large-logo img { max-height: 150px; transition: all 0.3s ease; } .small-logo img { max-height: 80px; transition: all 0.3s ease; } .header-actions .header-actions-action--social { order: 4 !important; } header#header { display: flex; justify-content: center; align-items: center; } header#header nav { display: flex; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; } /* Turn external Donate link into a button */ .header-nav a[href*="donorperfect"] { background-color: #FF7350; color: white !important; padding: 0.5rem 1.2rem; border-radius: 9999px; font-weight: bold; text-transform: uppercase; text-decoration: none !important; transition: background 0.3s ease; } .header-nav a[href*="donorperfect"]:hover { background-color: #ff5a34; } .header-border { border: none !important; border-width: 0 !important; height: 0 !important; display: none !important; } /* Add top padding to first section so it clears the fixed header */ section[data-section-id]:first-of-type { padding-top: 120px !important; /* adjust as needed */ position: relative; z-index: 1; } /* Fix for too much top padding when the first section is the footer */ /* Keep original top padding rule */ section[data-section-id]:first-of-type { padding-top: 120px !important; position: relative; z-index: 1; } /* Cancel that padding only if the first section is the footer */ section[data-section-id="6862b88f958e332c04deda8f"]:first-of-type { padding-top: 0 !important; } /* Smooth hover scale effect for icon blocks */ #block-f95fad9569cac7457480, #block-a821aeaee8ba111f1c2d, #block-0b3a3c51859df8f2e5bc, #block-7d1b6ac79486d0d35fa6, #block-b66ecd33a59075ba0e36, #block-6f76d1b6d5d366eb4c7e, #block-03f7004c2ae718e87c80 { transition: transform 0.3s ease; } #block-f95fad9569cac7457480:hover, #block-a821aeaee8ba111f1c2d:hover, #block-0b3a3c51859df8f2e5bc:hover, #block-7d1b6ac79486d0d35fa6:hover, #block-b66ecd33a59075ba0e36:hover, #block-6f76d1b6d5d366eb4c7e:hover, #block-03f7004c2ae718e87c80:hover { transform: scale(1.1); cursor: pointer; } /* ===== Dropdown gap + hover bridge ===== */ .header-nav-item--folder .header-nav-folder { top: calc(100% + 12px) !important; /* move panel down below the header */ z-index: 2000; /* sit above the header */ } /* Create a transparent hover area above the panel so it stays open */ .header-nav-item--folder .header-nav-folder::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; /* same value as above */ height: 12px; background: transparent; display: block; } /* Just in case anything is clipping the dropdown */ .Header, .header { overflow: visible !important; } /* --- keep the DONATE pill above everything just in case --- */ .header-nav a[href*="donorperfect"] { position: relative; z-index: 4000; } /* --- make sure nothing clips the hover bridge --- */ .header, .Header, .header-nav, .header-title-nav-wrapper, .header-nav-wrapper { overflow: visible !important; } /* --- push ALL possible dropdown containers down a bit --- */ .header-nav-item--folder .header-nav-folder, .header-menu-nav-item--folder .header-menu-folder, .HeaderNav-item--folder .HeaderNav-folder, .header-nav-item.has-submenu .header-subnav { margin-top: 12px !important; /* visual gap */ padding-top: 12px !important; /* keeps a transparent buffer */ z-index: 3000 !important; background: transparent; position: relative; } /* --- transparent “hover bridge” so the menu doesn’t collapse --- */ .header-nav-item--folder .header-nav-folder::before, .header-menu-nav-item--folder .header-menu-folder::before, .HeaderNav-item--folder .HeaderNav-folder::before, .header-nav-item.has-submenu .header-subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; /* same value as the gap */ height: 12px; background: transparent; pointer-events: auto; display: block; } /* Dropdown link text hover color */ .header-nav-item--folder .header-nav-folder a:hover, .header-menu-nav-item--folder .header-menu-folder a:hover, .HeaderNav-item--folder .HeaderNav-folder a:hover, .header-nav-item.has-submenu .header-subnav a:hover { color: #ff6a52 !important; } /* Force dropdown TEXT to #ff6a52 on hover (all 7.1 variants) */ .header-nav-folder a:hover, .header-nav-folder-item:hover a, .header-subnav a:hover, .header-subnav li:hover > a, .HeaderNav-folder a:hover, .HeaderNav-folder-item:hover a, .header-menu-folder a:hover, .header-menu-folder-item:hover a, .header-nav-folder a:hover *, .header-subnav a:hover *, .HeaderNav-folder a:hover *, .header-menu-folder a:hover * { color: #ff6a52 !important; -webkit-text-fill-color: #ff6a52 !important; /* WebKit quirk */ text-decoration: none !important; } /* Keep top-level nav (and the DONATE pill) from inheriting this */ .header-nav > .header-nav-item > a:hover { color: inherit !important; } /* Keep ACTIVE/CURRENT dropdown items #ff6a52 (covers all variants) */ .header-nav-folder a[aria-current], .header-nav-folder [aria-current="page"], .header-nav-folder-item.sqs-active-collection > a, .header-nav-folder-item.sqs-active-collection > span, .header-nav-folder-item--active > a, .header-nav-folder-item--active > span, .header-subnav a[aria-current], .header-subnav [aria-current="page"], .header-subnav .sqs-active-collection > a, .header-subnav .sqs-active-collection > span, .header-subnav-item--active > a, .header-subnav-item--active > span, .header-menu-folder a[aria-current], .header-menu-folder [aria-current="page"], .header-menu-folder-item.sqs-active-collection > a, .header-menu-folder-item.sqs-active-collection > span, .HeaderNav-folder a[aria-current], .HeaderNav-folder [aria-current="page"], .HeaderNav-folder-item.sqs-active-collection > a, .HeaderNav-folder-item.sqs-active-collection > span { color: #ff6a52 !important; -webkit-text-fill-color: #ff6a52 !important; /* WebKit quirk */ font-weight: 700; /* optional emphasis */ } /* Keep TOP-LEVEL items unchanged (only dropdowns get the color) */ .header-nav > .header-nav-item > a[aria-current], .header-nav > .header-nav-item.sqs-active-collection > a { color: inherit !important; } /* Adjust highlight text vertical alignment */ .sqs-block-code .highlighted-text, .sqs-block-content .highlighted-text { display: inline-flex; align-items: center; /* centers vertically */ line-height: 1.2em; /* tweak to give breathing room */ padding-top: 0.1em; /* pushes text slightly down */ padding-bottom: 0.1em; } /* ===== Keep blog/press titles clear of the fixed header ===== */ :root { --header-offset: 150px; } /* adjust if needed */ /* 7.1 blog ITEM template (Press post pages) */ body.sqs-template-blog-item .page-section:first-of-type, body.sqs-template-blog-item section[data-section-id]:first-of-type, body.collection-type-blog.view-item .page-section:first-of-type, body.collection-type-blog.view-item section[data-section-id]:first-of-type { padding-top: var(--header-offset) !important; position: relative; z-index: 1; } /* Anchor jumps shouldn’t hide under the header */ html { scroll-padding-top: var(--header-offset); } /* Optional: slightly more breathing room for the H1 itself */ body.sqs-template-blog-item h1 { margin-top: 0.25em !important; } /* Smaller offset on mobile if your header is shorter there */ @media (max-width: 767px) { :root { --header-offset: 110px; } } .blog-item-wrapper { padding-top: 90px !important; } /* Hide whatever label the theme renders inside the link */ nav.blog-list-pagination .older a .next-label, nav.blog-list-pagination .newer a .prev-label, .blog-item-pagination .older a .next-label, .blog-item-pagination .newer a .prev-label { display: none !important; } /* Align the link contents (arrow + our text) */ nav.blog-list-pagination .older a, nav.blog-list-pagination .newer a, .blog-item-pagination .older a, .blog-item-pagination .newer a { display: inline-flex !important; align-items: center !important; } /* RIGHT side (Older): text BEFORE the right arrow */ nav.blog-list-pagination .older a::before, .blog-item-pagination .older a::before { content: "See More"; font-size: 1.2em; font-weight: 700; /* optional */ color: currentColor; line-height: 1; margin-right: .35em; /* space before the arrow */ } /* LEFT side (Newer): text AFTER the left arrow */ nav.blog-list-pagination .newer a::after, .blog-item-pagination .newer a::after { content: "See More"; font-size: 1.2em; font-weight: 700; /* optional */ color: currentColor; line-height: 1; margin-left: .35em; /* space after the arrow */ } .view-item .blog-item-content-wrapper { display: flex; flex-direction: column; } .view-item .blog-meta-item--tags { order: -1; /* puts tags right under the title area */ margin: .6rem 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* 1) Pick up your site's coral (auto-updates when palette changes) */ :root{ --cya-accent: var(--color-accent, var(--color-4, var(--color-5, var(--tweak-accent-color, var(--primary-button-background-color, #FF6A58))))); /* last fallback is a coral-ish hex */ } /* 2) Apply coral to the tag label + chips */ .view-item .blog-meta-item--tags::before{ color: var(--cya-accent); opacity: .75; /* lightened label that still follows coral */ } .view-item .blog-meta-item--tags a{ color: var(--cya-accent); border-color: currentColor; background: transparent; opacity: .85; /* light coral look */ } .view-item .blog-meta-item--tags a:hover{ opacity: 1; background: var(--cya-accent); color: var(--color-background, #000); } /* --- Coral token picker (auto-updates with palette) --- */ :root{ --cya-accent: var(--color-accent, var(--color-bright-1, var(--color-4, var(--color-5, var(--tweak-accent-color, var(--primary-button-background-color, #FF6A58)))))); /* final fallback */ } /* Label before the chips */ .view-item .blog-meta-item--tags::before{ content: "Award(s):"; color: var(--cya-accent); opacity: .75; margin-right: .5rem; font-weight: 700; letter-spacing: .01em; } /* Chip links — force coral + outline and pill shape */ .view-item .blog-meta-item--tags a, .view-item .blog-meta-item--tags .sqs-simple-tags a { display: inline-block; padding: .3rem .7rem; line-height: 1; font-size: .85rem; border-radius: 999px; text-decoration: none; color: var(--cya-accent) !important; border: 1px solid var(--cya-accent) !important; background: transparent !important; } /* Hover: invert onto site background */ .view-item .blog-meta-item--tags a:hover, .view-item .blog-meta-item--tags .sqs-simple-tags a:hover { background: var(--cya-accent) !important; color: var(--color-background, #000) !important; } /* Fallback if JS couldn't read the button color */ :root { --cya-accent: #FF6A58; } /* any coral-ish backup */ /* Force chips to use the accent (overrides theme link colors) */ .view-item .blog-meta-item--tags::before { content: "Award(s):"; color: var(--cya-accent) !important; opacity: .75; margin-right: .5rem; font-weight: 700; letter-spacing: .01em; } .view-item .blog-meta-item--tags a, .view-item .blog-meta-item--tags .sqs-simple-tags a { color: var(--cya-accent) !important; border: 1px solid var(--cya-accent) !important; background: transparent !important; } .view-item .blog-meta-item--tags a:hover, .view-item .blog-meta-item--tags .sqs-simple-tags a:hover { background: var(--cya-accent) !important; color: var(--color-background, #000) !important; } /* === Top-level "Submit Work" pill (exclude subnav) === */ .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href="/submit"], .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href*="/submit"], .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href*="awardsplatform"], .header-nav .header-nav-item:not(.header-nav-item--folder) > a.cya-cta{ background:#FF7350; color:#fff !important; padding:.5rem 1.2rem; border-radius:9999px; font-weight:700; text-transform:uppercase; text-decoration:none !important; transition:background .25s ease, transform .15s ease; position:relative; z-index:4000; } .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href="/submit"]:hover, .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href*="/submit"]:hover, .header-nav .header-nav-item:not(.header-nav-item--folder) > a[href*="awardsplatform"]:hover, .header-nav .header-nav-item:not(.header-nav-item--folder) > a.cya-cta:hover{ background:#ff5a34; transform:translateY(-1px); } /* --- 2025 item pages: hide any native blog-item pagination rows (all variants) --- */ body.collection-type-blog.view-item [class*="pagination"], body.collection-type-blog.view-item .sqs-pagination, body.collection-type-blog.view-item .BlogItem-pagination, body.collection-type-blog.view-item nav.blog-item-pagination { display: none !important; } /* --- Remove the white strip that appears above the footer on item pages --- */ /* This targets the first section immediately after the BlogItem and removes its top border/spacing */ body.collection-type-blog.view-item .BlogItem + section { background: #000 !important; border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } /* If your first footer section has this ID, keep its top edge black too (safe override) */ section[data-section-id="6862b88f958e332c04deda8f"] { background: #000 !important; border-top: 0 !important; }