/* Theme Name: IAS — The Industry Award Show Theme URI: https://theindustryawardshow.com Author: Big D International Author URI: https://bigdinternational.com Description: A black-tie, editorial one-page WordPress theme for The Industry Award Show. Inspired by CFDA. Built for beauty professionals. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ias Tags: one-page, dark, minimal, events, beauty */ /* ─── GOOGLE FONTS loaded via wp_enqueue_style in functions.php ─── */ /* ─── RESET & ROOT ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --black: #070707; --black2: #111111; --black3: #181818; --white: #F4F1EB; --gold: #B2f63d; --gold2: #B2f63d; --gold3: #C8F050; --muted: #fefefe; --muted2: rgba(244,241,235,0.18); --rule: rgba(244,241,235,0.09); --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-w: 1240px; --pad-x: 60px; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--sans); background: var(--black); color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 300; overflow-x: hidden; line-height: 1.6; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--sans); } ul, ol { list-style: none; } input, textarea, select { font-family: var(--sans); } /* ─── INNER PAGES (padding for fixed header) ─── */ .ias-inner-page { padding-top: 68px; background: var(--black); min-height: 80vh; } .ias-inner-page + #ias-footer { margin-top: 0; } /* ─── UTILITY ─── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } .section-kicker { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; font-weight: 400; display: block; } .section-h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 58px); font-weight: 300; line-height: 1.0; letter-spacing: -1px; color: var(--white); margin-bottom: 28px; } .section-h2 em { font-style: italic; color: var(--gold2); } .section-rule { width: 28px; height: 1px; background: var(--gold); margin-bottom: 32px; } .body-text { font-size: 16px; line-height: 1.95; color: var(--white); font-weight: 300; margin-bottom: 18px; } /* ─── SCROLL REVEAL ─── */ /* Default: fully visible. JS adds .ias-reveal-ready to only after confirming IntersectionObserver works, then .ias-reveal-ready .reveal starts hidden and animates in. This guarantees content is ALWAYS visible even if JS fails. */ .ias-reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1); } .ias-reveal-ready .reveal.visible { opacity: 1; transform: none; } .ias-reveal-ready .reveal-d1 { transition-delay: 0.1s; } .ias-reveal-ready .reveal-d2 { transition-delay: 0.22s; } .ias-reveal-ready .reveal-d3 { transition-delay: 0.34s; } .ias-reveal-ready .reveal-d4 { transition-delay: 0.46s; } /* ─── BUTTONS ─── */ .btn-primary { display: inline-block; background: var(--gold); color: var(--black); border: none; padding: 17px 52px; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 500; transition: opacity 0.2s; cursor: pointer; } .btn-primary:hover { opacity: 0.82; color: var(--black); } .btn-ghost { display: inline-block; background: transparent; color: var(--white); border: 1px solid rgba(244,241,235,0.18); padding: 17px 52px; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 300; transition: all 0.25s; cursor: pointer; } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ═══════════════════════════════════════ HEADER ═══════════════════════════════════════ */ #ias-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); background: rgba(7,7,7,0.95); border-bottom: 1px solid var(--rule); transition: background 0.4s; } #ias-header.scrolled { background: rgba(7,7,7,0.98); } .ias-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } .ias-logo-emblem { width: 34px; height: 34px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ias-logo-emblem span { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--gold); } .ias-logo-text { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--white); font-weight: 400; } .ias-nav { display: flex; align-items: center; gap: 40px; } .ias-nav a { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); font-weight: 400; transition: color 0.2s; } .ias-nav a:hover, .ias-nav a.current-menu-item { color: var(--gold); } .ias-nav-cta { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 9px 22px; background: transparent; font-weight: 400; transition: all 0.25s; } .ias-nav-cta:hover { background: var(--gold); color: var(--black) !important; border-color: var(--gold); } /* Mobile hamburger */ .ias-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; } .ias-hamburger span { display: block; width: 22px; height: 1px; background: var(--white); transition: all 0.3s; } .ias-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .ias-hamburger.open span:nth-child(2) { opacity: 0; } .ias-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .ias-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: rgba(7,7,7,0.98); z-index: 998; flex-direction: column; align-items: center; justify-content: center; gap: 36px; } .ias-mobile-menu.open { display: flex; } .ias-mobile-menu a { font-family: var(--serif); font-size: 32px; font-style: italic; font-weight: 300; color: var(--white); transition: color 0.2s; } .ias-mobile-menu a:hover { color: var(--gold); } /* ═══════════════════════════════════════ HERO ═══════════════════════════════════════ */ #ias-hero { min-height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px var(--pad-x) 120px; overflow: hidden; } .hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center 25%; opacity: 0.16; } .hero-bg-fade { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 50% 40%, transparent 0%, rgba(7,7,7,0.92) 100%), linear-gradient(to bottom, rgba(7,7,7,0.3) 0%, transparent 30%, transparent 70%, var(--black) 100%); } .hero-grain { position: absolute; inset: 0; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; } .hero-content { position: relative; z-index: 2; max-width: 1000px; } .hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 60px; animation: fadeUp 1s 0.2s both; } .hero-tick { width: 36px; height: 1px; background: var(--gold); } .hero-eyebrow-text { font-size: 10px; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); font-weight: 400; } .hero-h1 { font-family: var(--serif); font-size: clamp(68px, 11vw, 120px); font-weight: 300; line-height: 0.92; letter-spacing: -2px; color: var(--white); animation: fadeUp 1.1s 0.35s both; } .hero-h1 em { font-style: italic; color: var(--gold2); font-weight: 300; } .hero-divider { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 44px 0; animation: fadeUp 1s 0.55s both; } .hero-div-line { flex: 1; height: 1px; background: var(--rule); max-width: 160px; } .hero-div-text { font-family: var(--serif); font-size: clamp(15px, 1.8vw, 20px); font-style: italic; color: var(--muted); font-weight: 300; white-space: nowrap; } .hero-meta { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--muted); margin-bottom: 52px; animation: fadeUp 1s 0.65s both; } .hero-meta span { color: var(--gold); } .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeUp 1s 0.8s both; } .hero-scroll-hint { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; animation: fadeUp 1s 1.1s both; } .hero-scroll-stem { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); } .hero-scroll-lbl { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted2); } /* ═══════════════════════════════════════ TICKER ═══════════════════════════════════════ */ .ias-ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 15px 0; background: var(--black); } .ias-ticker-track { display: inline-flex; align-items: center; animation: ticker 30s linear infinite; } .ticker-item { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--muted); padding: 0 32px; font-weight: 400; } .ticker-gem { color: var(--gold); font-size: 7px; } /* ═══════════════════════════════════════ ABOUT ═══════════════════════════════════════ */ #ias-about { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; } .about-image-wrap { position: relative; overflow: hidden; } .about-image-wrap img { width: 100%; height: 100%; min-height: 580px; object-fit: cover; filter: grayscale(8%) brightness(0.78); transition: transform 8s ease; } .about-image-wrap:hover img { transform: scale(1.04); } .about-image-veil { position: absolute; inset: 0; background: linear-gradient(to right, transparent 55%, var(--black) 100%); } .about-text-wrap { padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; background: var(--black); } .about-pull-quote { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 21px; font-style: italic; font-weight: 300; color: var(--white); line-height: 1.5; } /* ═══════════════════════════════════════ WHY IT MATTERS ═══════════════════════════════════════ */ #ias-why { padding: 160px var(--pad-x); border-top: 1px solid var(--rule); position: relative; overflow: hidden; } .why-photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.04; } .why-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 2; } .why-top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 96px; align-items: end; } .why-h2 { font-family: var(--serif); font-size: clamp(52px, 7.5vw, 96px); font-weight: 300; line-height: 0.93; letter-spacing: -2px; color: var(--white); } .why-h2 em { font-style: italic; color: var(--gold2); } .why-desc { font-size: 16px; line-height: 1.9; color: var(--white); font-weight: 300; } .why-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--rule); } .why-card { padding: 60px 56px 60px 0; border-right: 1px solid var(--rule); } .why-card:last-child { border-right: none; padding-left: 56px; padding-right: 0; } .why-card:nth-child(2) { padding: 60px 28px; } .why-num { font-family: var(--serif); font-size: 88px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 32px; letter-spacing: -4px; display: block; } .why-title { font-family: var(--serif); font-size: 24px; font-weight: 300; font-style: italic; color: var(--white); margin-bottom: 16px; } .why-body { font-size: 14px; line-height: 1.88; color: var(--muted); font-weight: 300; } /* ═══════════════════════════════════════ PHOTO MOMENT ═══════════════════════════════════════ */ #ias-moment { display: grid; grid-template-columns: 3fr 2fr; gap: 3px; height: 580px; background: var(--black3); } .moment-main { position: relative; overflow: hidden; } .moment-main img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(12%) brightness(0.65); transition: transform 9s ease; } .moment-main:hover img { transform: scale(1.05); } .moment-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,7,0.82) 0%, rgba(7,7,7,0.1) 55%); } .moment-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 52px 60px; } .moment-quote { font-family: var(--serif); font-size: clamp(22px,3vw,38px); font-style: italic; font-weight: 300; color: var(--white); line-height: 1.3; margin-bottom: 16px; } .moment-attr { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); } .moment-side { display: flex; flex-direction: column; gap: 3px; } .moment-side img { width: 100%; flex: 1; object-fit: cover; filter: grayscale(15%) brightness(0.6); height: 50%; transition: filter 0.5s; } .moment-side img:hover { filter: grayscale(0%) brightness(0.75); } /* ═══════════════════════════════════════ COUNTDOWN ═══════════════════════════════════════ */ #ias-countdown { padding: 100px var(--pad-x); background: var(--black2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; } .cd-row { display: flex; justify-content: center; align-items: flex-start; margin: 0 0 44px; } .cd-unit { padding: 0 56px; text-align: center; } .cd-unit + .cd-unit { border-left: 1px solid var(--rule); } .cd-num { font-family: var(--serif); font-size: clamp(64px,9vw,108px); font-weight: 300; color: var(--white); line-height: 1; display: block; letter-spacing: -3px; font-variant-numeric: tabular-nums; } .cd-label { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted2); display: block; margin-top: 10px; } .cd-note { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted2); } /* ═══════════════════════════════════════ SUBMISSIONS ═══════════════════════════════════════ */ #ias-submissions { padding: 160px var(--pad-x); border-top: 1px solid var(--rule); } .subs-inner { max-width: var(--max-w); margin: 0 auto; } .subs-h2 { font-family: var(--serif); font-size: clamp(48px,7vw,88px); font-weight: 300; line-height: 0.95; letter-spacing: -2px; color: var(--white); margin-top: 16px; } .subs-h2 em { font-style: italic; color: var(--gold2); } .subs-header { margin-bottom: 88px; } .subs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; } .subs-desc { font-size: 16px; line-height: 1.9; color: var(--muted); font-weight: 300; margin-bottom: 44px; } .subs-reqs { border-top: 1px solid var(--rule); } .subs-req { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .req-idx { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--gold); flex-shrink: 0; margin-top: 1px; min-width: 22px; } .req-text { font-size: 14px; line-height: 1.7; color: var(--muted); font-weight: 300; } /* ═══════════════════════════════════════ GET INVOLVED ═══════════════════════════════════════ */ #ias-involved { padding: 160px var(--pad-x); border-top: 1px solid var(--rule); } .inv-inner { max-width: var(--max-w); margin: 0 auto; } .inv-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 96px; } .inv-h2 { font-family: var(--serif); font-size: clamp(48px,6.5vw,84px); font-weight: 300; line-height: 0.95; letter-spacing: -2px; color: var(--white); } .inv-h2 em { font-style: italic; color: var(--gold2); } .inv-desc { font-size: 16px; line-height: 1.9; color: var(--muted); font-weight: 300; } .inv-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--rule); margin-bottom: 72px; } .inv-card { padding: 60px 56px 60px 0; border-right: 1px solid var(--rule); } .inv-card:last-child { border-right: none; padding-left: 56px; padding-right: 0; } .inv-card:nth-child(2) { padding: 60px 28px; } .inv-ordinal { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--gold); display: block; margin-bottom: 24px; } .inv-title { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--white); font-weight: 400; margin-bottom: 18px; } .inv-body { font-size: 14px; line-height: 1.88; color: var(--muted); font-weight: 300; margin-bottom: 36px; } .inv-link { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); background: none; border: none; font-family: var(--sans); display: inline-flex; align-items: center; gap: 12px; padding: 0; transition: gap 0.25s; cursor: pointer; } .inv-link:hover { gap: 18px; } .inv-link-line { width: 20px; height: 1px; background: var(--gold); flex-shrink: 0; } .inv-ctas { display: flex; gap: 14px; } /* ═══════════════════════════════════════ SPONSOR ═══════════════════════════════════════ */ #ias-sponsor { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; border-top: 1px solid var(--rule); } .spon-image-wrap { position: relative; overflow: hidden; } .spon-image-wrap img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; filter: grayscale(10%) brightness(0.5); transition: transform 9s ease; } .spon-image-wrap:hover img { transform: scale(1.04); } .spon-image-veil { position: absolute; inset: 0; background: linear-gradient(to left, transparent 50%, var(--black) 100%); } .spon-text-wrap { padding: 100px 80px; background: var(--black); display: flex; flex-direction: column; justify-content: center; } .spon-em { font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 300; color: var(--white); line-height: 1.55; margin-bottom: 52px; display: block; } .spon-tiers { margin-bottom: 52px; border-top: 1px solid var(--rule); } .spon-tier { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--rule); transition: padding-left 0.25s; cursor: pointer; } .spon-tier:hover { padding-left: 10px; } .spon-tier-name { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); font-weight: 300; transition: color 0.2s; } .spon-tier:hover .spon-tier-name { color: var(--gold); } .spon-tier-arrow { color: var(--rule); font-size: 14px; transition: color 0.2s; } .spon-tier:hover .spon-tier-arrow { color: var(--gold); } /* ═══════════════════════════════════════ DUAL PHOTO ═══════════════════════════════════════ */ #ias-dualphoto { display: grid; grid-template-columns: 1fr 1fr; height: 440px; } .dual-half { position: relative; overflow: hidden; } .dual-half img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(12%) brightness(0.55); transition: filter 0.5s; } .dual-half:hover img { filter: grayscale(0%) brightness(0.65); } .dual-half-label { position: absolute; bottom: 28px; left: 32px; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); } /* ═══════════════════════════════════════ EMAIL SIGNUP ═══════════════════════════════════════ */ #ias-email { padding: 160px var(--pad-x); background: var(--black2); border-top: 1px solid var(--rule); text-align: center; } .email-inner { max-width: 520px; margin: 0 auto; } .email-h2 { font-family: var(--serif); font-size: clamp(40px,5.5vw,68px); font-weight: 300; line-height: 0.97; letter-spacing: -1.5px; color: var(--white); margin-bottom: 10px; } .email-h2 em { font-style: italic; color: var(--gold2); } .email-sub { font-size: 15px; line-height: 1.85; color: var(--muted); font-weight: 300; margin-bottom: 52px; } .email-form { display: flex; flex-direction: column; gap: 0; } .ef-field { padding: 18px 0; border: none; border-bottom: 1px solid var(--rule); background: transparent; color: var(--white); font-size: 14px; font-family: var(--sans); font-weight: 300; outline: none; margin-bottom: 12px; transition: border-color 0.2s; width: 100%; } .ef-field:focus { border-bottom-color: var(--gold); } .ef-field::placeholder { color: var(--muted2); letter-spacing: 1px; } .ef-submit { margin-top: 8px; background: var(--gold); color: var(--black); border: none; padding: 18px; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 500; transition: opacity 0.2s; cursor: pointer; width: 100%; font-family: var(--sans); } .ef-submit:hover { opacity: 0.84; } .ef-note { font-size: 10px; color: var(--muted2); margin-top: 16px; letter-spacing: 2px; display: block; } /* ═══════════════════════════════════════ FOOTER ═══════════════════════════════════════ */ #ias-footer { background: var(--black); border-top: 1px solid var(--rule); } .ftr-top { max-width: var(--max-w); margin: 0 auto; padding: 84px var(--pad-x) 68px; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; } .ftr-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .ftr-emblem { width: 32px; height: 32px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ftr-emblem span { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--gold); } .ftr-name { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--white); font-weight: 400; } .ftr-tagline { font-family: var(--serif); font-size: 15px; font-style: italic; font-weight: 300; color: #fefefe; line-height: 1.7; max-width: 270px; } .ftr-col-label { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 400; display: block; } .ftr-links { display: flex; flex-direction: column; gap: 13px; } .ftr-links a { font-size: 15px; color: #CECECE; font-weight: 300; transition: color 0.2s; } .ftr-links a:hover { color: var(--white); } .ftr-bottom { border-top: 1px solid var(--rule); max-width: var(--max-w); margin: 0 auto; padding: 24px var(--pad-x); display: flex; justify-content: space-between; align-items: center; } .ftr-copy { font-size: 12px; color: #F3F3F3; letter-spacing: 2px; } .ftr-loc { font-size: 12px; color: #F3F3F3; letter-spacing: 3px; text-transform: uppercase; } .ftr-links a[href] { text-decoration: none; } /* ─── WordPress default alignment classes ─── */ .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } .aligncenter { display: block; margin: 0 auto; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; } /* ─── KEYFRAMES ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════ */ @media (max-width: 1024px) { :root { --pad-x: 32px; } #ias-header { padding: 0 28px; } .ias-nav { display: none; } .ias-hamburger { display: flex; } #ias-hero { padding: 120px 28px 100px; } #ias-about { grid-template-columns: 1fr; } .about-image-wrap img { min-height: 360px; } .about-image-veil { background: linear-gradient(to bottom, transparent 60%, var(--black) 100%); } .about-text-wrap { padding: 60px 32px 80px; } #ias-why { padding: 100px 28px; } .why-top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; } .why-grid { grid-template-columns: 1fr; } .why-card, .why-card:last-child, .why-card:nth-child(2) { padding: 48px 0; border-right: none; border-bottom: 1px solid var(--rule); } .why-card:last-child { border-bottom: none; } #ias-moment { grid-template-columns: 1fr; height: auto; } .moment-main img { height: 380px; } .moment-side { flex-direction: row; height: 200px; } .moment-side img { width: 50%; height: 100%; } .moment-caption { padding: 36px 28px; } #ias-countdown { padding: 72px 28px; } .cd-row { flex-wrap: wrap; } .cd-unit { padding: 20px 28px; width: 50%; } .cd-unit:nth-child(1), .cd-unit:nth-child(3) { border-left: none; } .cd-num { font-size: 56px; } #ias-submissions { padding: 100px 28px; } .subs-grid { grid-template-columns: 1fr; gap: 56px; } #ias-involved { padding: 100px 28px; } .inv-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; } .inv-grid { grid-template-columns: 1fr; } .inv-card, .inv-card:last-child, .inv-card:nth-child(2) { padding: 48px 0; border-right: none; border-bottom: 1px solid var(--rule); } .inv-card:last-child { border-bottom: none; } .inv-ctas { flex-direction: column; align-items: flex-start; } #ias-sponsor { grid-template-columns: 1fr; } .spon-image-wrap img { min-height: 300px; } .spon-image-veil { background: linear-gradient(to bottom, transparent 50%, var(--black) 100%); } .spon-text-wrap { padding: 60px 32px 80px; } #ias-dualphoto { height: 280px; } #ias-email { padding: 100px 28px; } .ftr-top { grid-template-columns: 1fr 1fr; padding: 56px 28px; gap: 32px; } .ftr-bottom { padding: 20px 28px; flex-direction: column; gap: 10px; text-align: center; } } @media (max-width: 600px) { .hero-h1 { font-size: clamp(52px,16vw,80px); letter-spacing: -1px; } .hero-btns { flex-direction: column; align-items: center; } .btn-primary, .btn-ghost { width: 260px; text-align: center; padding: 17px 28px; } #ias-dualphoto { height: 200px; } .moment-side { display: none; } .ftr-top { grid-template-columns: 1fr; } .cd-unit { width: 50%; } } /* ─── ACTIVE NAV STATE ─── */ .ias-nav a.active { color: var(--gold); } .ias-nav ul { display: flex; align-items: center; gap: 40px; list-style: none; } .ias-nav ul li { list-style: none; } .ias-mobile-menu a.active { color: var(--gold); } /* ═══════════════════════════════════════ INNER PAGE STYLES ═══════════════════════════════════════ */ /* ── Page / Post hero banner ── */ .ias-page-hero { padding: 140px var(--pad-x) 80px; background: var(--black2); border-bottom: 1px solid var(--rule); text-align: center; } .ias-page-hero .page-kicker { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 20px; } .ias-page-hero h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 80px); font-weight: 300; color: var(--white); letter-spacing: -2px; line-height: 0.95; margin-bottom: 0; } .ias-page-hero h1 em { font-style: italic; color: var(--gold2); } .ias-page-hero .page-meta { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted2); flex-wrap: wrap; } .ias-page-hero .meta-dot { color: var(--rule); } /* ── Featured image ── */ .ias-featured-img { max-width: 1100px; margin: 0 auto; height: 460px; overflow: hidden; } .ias-featured-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(8%) brightness(0.78); display: block; } /* ── Page content wrapper ── */ .ias-content-wrap { max-width: 760px; margin: 0 auto; padding: 80px var(--pad-x) 120px; } /* ── WordPress content typography ── */ .ias-content { color: rgba(244,241,235,0.65); font-size: 17px; line-height: 1.9; font-weight: 300; } .ias-content h1,.ias-content h2,.ias-content h3,.ias-content h4,.ias-content h5 { font-family: var(--serif); font-weight: 300; color: var(--white); margin: 48px 0 20px; line-height: 1.15; letter-spacing: -0.5px; } .ias-content h1 { font-size: clamp(32px,4vw,52px); } .ias-content h2 { font-size: clamp(26px,3vw,40px); } .ias-content h3 { font-size: clamp(22px,2.5vw,30px); } .ias-content h4 { font-size: 20px; } .ias-content p { margin-bottom: 24px; } .ias-content a { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; } .ias-content a:hover { color: var(--gold); } .ias-content ul, .ias-content ol { padding-left: 28px; margin-bottom: 24px; } .ias-content ul li { list-style: disc; margin-bottom: 8px; } .ias-content ol li { list-style: decimal; margin-bottom: 8px; } .ias-content blockquote { border-left: 2px solid var(--gold); padding: 16px 28px; margin: 40px 0; font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--white); line-height: 1.55; } .ias-content blockquote p { margin: 0; } .ias-content img { max-width: 100%; height: auto; display: block; margin: 40px auto; filter: grayscale(5%) brightness(0.85); } .ias-content figure { margin: 40px 0; } .ias-content figcaption { font-size: 12px; color: var(--muted2); text-align: center; margin-top: 10px; letter-spacing: 1px; } .ias-content hr { border: none; border-top: 1px solid var(--rule); margin: 48px 0; } .ias-content code { font-family: var(--sans); font-size: 14px; background: var(--black2); color: var(--gold2); padding: 2px 8px; } .ias-content pre { background: var(--black2); padding: 24px; overflow-x: auto; margin-bottom: 28px; border-left: 2px solid var(--gold); } .ias-content table { width: 100%; border-collapse: collapse; margin-bottom: 32px; font-size: 15px; } .ias-content table th { border-bottom: 1px solid var(--gold); padding: 12px 16px; text-align: left; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 400; } .ias-content table td { border-bottom: 1px solid var(--rule); padding: 12px 16px; color: var(--muted); } .ias-content table tr:last-child td { border-bottom: none; } /* ── Tags ── */ .ias-tag-list { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); display: flex; gap: 10px; flex-wrap: wrap; } .ias-tag { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted2); border: 1px solid var(--rule); padding: 7px 16px; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .ias-tag:hover { color: var(--gold); border-color: rgba(192,155,53,0.4); } /* ── Post nav ── */ .ias-post-nav { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .ias-post-nav a { text-decoration: none; display: block; } .ias-post-nav .nav-label { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; } .ias-post-nav .nav-title { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--white); line-height: 1.3; display: block; transition: color 0.2s; } .ias-post-nav a:hover .nav-title { color: var(--gold2); } .ias-post-nav .next-link { text-align: right; } /* ── Page sidebar layout ── */ .ias-page-with-sidebar { max-width: 1100px; margin: 0 auto; padding: 80px var(--pad-x) 120px; display: grid; grid-template-columns: 1fr 320px; gap: 80px; align-items: start; } .ias-sidebar { position: sticky; top: 100px; } .ias-sidebar-box { border: 1px solid var(--rule); padding: 36px; margin-bottom: 32px; } .ias-sidebar-title { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: block; } .ias-sidebar-links { display: flex; flex-direction: column; gap: 12px; } .ias-sidebar-links a { font-size: 13px; color: var(--muted); text-decoration: none; padding-bottom: 12px; border-bottom: 1px solid var(--rule); transition: color 0.2s; } .ias-sidebar-links a:last-child { border-bottom: none; } .ias-sidebar-links a:hover { color: var(--white); } /* ── Back to home bar ── */ .ias-breadcrumb { padding: 20px var(--pad-x); border-bottom: 1px solid var(--rule); background: var(--black); display: flex; align-items: center; gap: 12px; } .ias-breadcrumb a { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted2); text-decoration: none; transition: color 0.2s; } .ias-breadcrumb a:hover { color: var(--gold); } .ias-breadcrumb-sep { color: var(--rule); font-size: 12px; } .ias-breadcrumb-current { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); } /* ── Archive grid ── */ .ias-archive-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 2px; } .ias-archive-card { background: var(--black2); padding: 48px 40px; border-bottom: 2px solid transparent; transition: border-color 0.25s; display: flex; flex-direction: column; } .ias-archive-card:hover { border-bottom-color: var(--gold); } .ias-archive-card-img { margin: -48px -40px 32px; height: 220px; overflow: hidden; } .ias-archive-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(10%) brightness(0.7); display: block; } .ias-archive-card-cat { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 14px; } .ias-archive-card-title { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--white); margin-bottom: 16px; line-height: 1.2; text-decoration: none; display: block; transition: color 0.2s; } .ias-archive-card-title:hover { color: var(--gold2); } .ias-archive-card-excerpt { font-size: 14px; line-height: 1.8; color: var(--muted); font-weight: 300; flex: 1; margin-bottom: 24px; } .ias-archive-card-date { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted2); } /* ── Pagination ── */ .ias-pagination { margin-top: 72px; display: flex; justify-content: center; gap: 4px; } .ias-pagination .page-numbers { font-size: 11px; letter-spacing: 2px; color: var(--muted); border: 1px solid var(--rule); padding: 10px 16px; text-decoration: none; transition: all 0.2s; } .ias-pagination .page-numbers.current { background: var(--gold); color: var(--black); border-color: var(--gold); } .ias-pagination .page-numbers:hover:not(.current) { border-color: var(--gold); color: var(--gold); } /* ── Search form ── */ .ias-search-form { display: flex; align-items: stretch; border-bottom: 1px solid var(--gold); max-width: 560px; } .ias-search-form input { flex: 1; background: transparent; border: none; outline: none; padding: 14px 0; font-size: 15px; color: var(--white); font-family: var(--sans); font-weight: 300; } .ias-search-form input::placeholder { color: var(--muted2); } .ias-search-form button { background: transparent; border: none; color: var(--gold); font-size: 18px; padding: 0 8px; cursor: pointer; } /* ── WP Block editor content ── */ .ias-content .wp-block-image img { filter: grayscale(5%) brightness(0.85); } .ias-content .wp-block-quote { border-left: 2px solid var(--gold); padding: 16px 28px; } .ias-content .wp-block-separator { border-top: 1px solid var(--rule); margin: 48px 0; } .ias-content .wp-block-pullquote { border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); padding: 40px; text-align: center; margin: 48px 0; } .ias-content .wp-block-pullquote p { font-family: var(--serif); font-size: clamp(20px,2.5vw,30px); font-style: italic; color: var(--white); } .ias-content .wp-block-button .wp-block-button__link { background: var(--gold); color: var(--black); padding: 14px 36px; text-decoration: none; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; } .ias-content .wp-block-cover { margin: 40px 0; } /* ── Page template variations ── */ /* Full width — no sidebar, wider content */ .ias-template-fullwidth .ias-content-wrap { max-width: 1100px; } /* Landing — no hero padding, content starts immediately */ .ias-template-landing { padding-top: 68px; } /* ── Responsive inner pages ── */ @media (max-width: 1024px) { .ias-page-with-sidebar { grid-template-columns: 1fr; gap: 48px; } .ias-sidebar { position: static; } .ias-featured-img { height: 300px; } .ias-archive-grid { grid-template-columns: 1fr; } .ias-post-nav { grid-template-columns: 1fr; gap: 24px; } .ias-post-nav .next-link { text-align: left; } } @media (max-width: 600px) { .ias-page-hero { padding: 110px 24px 60px; } .ias-content-wrap { padding: 56px 24px 80px; } } /* ─── CUSTOM LOGO (uploaded via Customize → Site Identity) ─── */ .ias-custom-logo { display: block; max-height: 60px; /* fits inside 68px header */ width: auto; object-fit: contain; /* Keep it crisp on dark background */ filter: brightness(0) invert(1); /* makes any logo white */ } /* If the logo is already white/light, remove the filter above by going to Customize → Additional CSS and adding: .ias-custom-logo { filter: none; } */ .ias-footer-logo { max-height: 60px; opacity: 0.75; transition: opacity 0.2s; } .ias-footer-logo:hover { opacity: 1; } .ias-mobile-logo { max-height: 52px; margin: 0 auto 36px; display: block; }