/* Antioch site CSS. Generated from tools/css/*.css by tools/publish-css.sh; edit those files, not this one. */ /* Antioch: shared rules (fonts, graphic language, header/footer). Page-specific rules live in tools/css/.css. */ /* Anton and Instrument Serif ship single weights: never fake a bold. */ html, body, .titles, h1, h2, h3, h4, h5, h6, .hero-content, .cc-wordmark, .atx-acc, .atx-out { font-synthesis: none; } /* Accent word: Instrument Serif Italic, 1.13em, Clay on light grounds, Apricot on dark (one per title) */ .atx-acc { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.13em; letter-spacing: -.01em; text-transform: none; color: #B8481A; } .main-color .atx-acc, .black .atx-acc, .hero-content .atx-acc, .footer .atx-acc { color: #FF9E5E; } .sec-color .atx-acc { color: #2E1338; } /* Outline word: Anton only (static), transparent fill, 2.5px stroke in the title color */ .atx-out { color: transparent !important; -webkit-text-stroke: 2.5px currentColor; paint-order: stroke fill; } .atx-out { -webkit-text-stroke-color: #2E1338; } .main-color .atx-out, .hero-content .atx-out { -webkit-text-stroke-color: #fff; } /* Subtitles and quotes: Instrument Serif */ .titles.subtitle, .subtitle.small-titles { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic; font-weight: 400 !important; text-transform: none; letter-spacing: 0; } .ct-quote-text.titles { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400 !important; line-height: 1.05; text-transform: none; } /* Eyebrows (small titles) are Schibsted caps; footer column titles too */ .small-titles { text-transform: uppercase; letter-spacing: .08em; } .footer h3.titles { font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; } /* Page ground is Mist everywhere (the theme paints with the footer color); the footer is a framed panel on it */ html { background: #F4F0F7 !important; } /* Header top bar: 48 tall, Mulberry, text lined up with the 1300 content; the right line in Apricot; phones show the Sunday line only */ .top-bar { height: 48px; padding-left: 40px; padding-right: 40px; } .top-bar p { margin: 0 !important; line-height: 48px; font-size: 1.6em; font-weight: 500; } .top-bar .atx-bar-right { color: #FF9E5E; } .top-bar-active .content { padding-top: 48px; } .header-location-static.top-bar-active .content, .header-over-no-hero.top-bar-active .content { padding-top: 0; } @media (max-width: 767px) { .top-bar { display: block !important; height: auto; padding: 10px 20px; } .top-bar p { line-height: 24px; } .top-bar .left { width: 100%; float: none; } .top-bar .right { display: none; } } /* Header: between the icon breakpoint (1120) and 1440 the menu gap and buttons tighten so nothing collides */ .header .main-nav li { margin: 0 clamp(8px, 1.1vw, 25px); } @media (max-width: 1439px) { .header .multiple-header-buttons { gap: 12px; } .header .multiple-header-buttons a.button { padding: 0 22px !important; } .header .main-nav a { font-size: 17px; } } @media (min-width: 1200px) and (max-width: 1299px) { .option-c .header .main-nav { left: 330px; transform: none; width: auto; text-align: left; white-space: nowrap; } } /* Header: menu in sentence case, buttons in order Give (outline white) then Plan A Visit (Apricot) */ .header .main-nav a { text-transform: none; letter-spacing: 0; font-size: 18px; } .header .logo { left: 40px !important; } .header .multiple-header-buttons { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex !important; align-items: center; gap: 16px; z-index: 99; } .header .multiple-header-buttons a.button { float: none; margin: 0; box-sizing: border-box; padding: 0 30px !important; border: 2px solid; line-height: 52px; height: 56px; display: inline-block !important; } .header .multiple-header-buttons a.button:not(.button-2) { border-color: #fff; background: transparent !important; color: #fff !important; } .header .multiple-header-buttons a.button:not(.button-2):hover { background: #fff !important; color: #2E1338 !important; } /* Big Wordmark footer: a framed panel on Mist: columns, giant Apricot ANTIOCH, hairline, fine print */ .cc-footer-wordmark { display: flex; flex-direction: column; margin: 16px; border-radius: 20px; overflow: clip; padding: 120px 0 84px !important; background: #2E1338; } .cc-footer-wordmark > .section { display: contents; } .cc-footer-wordmark .cc-footer-main, .cc-footer-wordmark .cc-footer-bottom { width: min(1300px, calc(100% - 80px)); margin-left: auto; margin-right: auto; box-sizing: border-box; } .cc-footer-wordmark .cc-footer-main { order: 1; display: block; padding: 0; } .cc-footer-wordmark .cc-footer-brand { display: none; } .cc-footer-wordmark .cc-footer-cols { display: grid; grid-template-columns: 320px 380px 160px 180px 1fr; gap: 0; width: 100%; } .cc-footer-wordmark .cc-footer-col:nth-child(4) h3 { visibility: hidden; } .cc-footer-wordmark .cc-wordmark { order: 2; } .cc-footer-wordmark .cc-footer-legal { display: flex; justify-content: space-between; align-items: center; } .cc-footer-wordmark .cc-footer-bottom { order: 3; border-top: 1px solid #5A4263; border-bottom: 0 !important; margin-top: 0; padding: 28px 0 0; } div.footer.cc-footer p.cc-wordmark { position: relative; font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0; line-height: .8 !important; font-size: min(24.8vw, 424px) !important; text-align: center; margin: 70px 0 60px; padding: 0 !important; overflow: visible; } div.footer.cc-footer p.cc-wordmark::after { content: 'church'; position: absolute; left: 69.8%; bottom: -.3em; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: .43em; letter-spacing: -.01em; line-height: 1; color: #fff; text-transform: none; transform: rotate(8deg); transform-origin: left bottom; } @media (max-width: 767px) { .cc-footer-wordmark { margin: 10px; border-radius: 14px; padding: 60px 0 40px !important; } } /* Header: at 1199 and below the menu and buttons give way to the "Menu" label + icon (the framework's own switch is at 880) */ @media (max-width: 1199px) { .header .desktop { display: none !important; } .header .mobile { display: block !important; } .option-c .btn-menu { display: block !important; left: auto !important; right: 30px !important; } #btnMenu::before { content: 'Menu'; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: -4px; font: 600 18px/1 'Schibsted Grotesk', sans-serif; color: #fff; text-transform: none; letter-spacing: 0; } } @media (max-width: 767px) { .top-bar { padding: 0 20px; } .top-bar p { line-height: 40px; } .header .logo { left: 20px !important; } .option-c .btn-menu { right: 10px !important; } } /* Footer columns as the reference: Say hello carries a button; phones stack Visit, Gather, Say hello, Menu */ .cc-footer-wordmark .cc-footer-col:nth-child(5) li:last-child a { display: inline-block; background: #FF9E5E; color: #2E1338 !important; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 0 30px; line-height: 56px; margin-top: 12px; } .cc-footer-wordmark .cc-footer-col:nth-child(5) li:last-child a:hover { background: #fff; } @media (max-width: 767px) { .cc-footer-wordmark .cc-footer-cols { grid-template-columns: 1fr 1fr; gap: 0 16px; } .cc-footer-wordmark .cc-footer-col { grid-column: 1 / -1; margin-bottom: 36px; } .cc-footer-wordmark .cc-footer-col:nth-child(3), .cc-footer-wordmark .cc-footer-col:nth-child(4) { grid-column: auto; margin-bottom: 0; order: 4; } .cc-footer-wordmark .cc-footer-col:nth-child(4) h3 { visibility: hidden; } .cc-footer-wordmark .cc-footer-col:nth-child(5) { order: 3; display: contents; } .cc-footer-wordmark .cc-footer-col:nth-child(5) h3 { grid-column: 1 / -1; order: 3; } .cc-footer-wordmark .cc-footer-col:nth-child(5) ul { display: contents; } .cc-footer-wordmark .cc-footer-col:nth-child(5) li { grid-column: 1 / -1; order: 3; } .cc-footer-wordmark .cc-footer-col:nth-child(5) li:nth-child(2) { margin-bottom: 36px; } .cc-footer-wordmark .cc-footer-col:nth-child(5) li:last-child { order: 6; margin: 36px 0 0; } .cc-footer-wordmark .cc-footer-col:nth-child(5) li:last-child a { line-height: 48px; padding: 0 22px; margin: 0; } div.footer.cc-footer p.cc-wordmark { font-size: 25.6vw !important; text-align: left; padding-left: 20px !important; margin: 40px 0 70px; } div.footer.cc-footer p.cc-wordmark::after { font-size: .8em; left: 46%; bottom: -.62em; } } /* Header over an inset hero: the logo/menu/buttons row sits 40px below the card's top edge (24 on phones). The scrolled (header-display) state is unchanged. */ .header:not(.header-display) { top: 34px; } @media (max-width: 767px) { .header:not(.header-display) { top: 10px; } } /* Antioch About (page 9). Rules hang off body.page-id-9 and the atx classes set in tools/build-about.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / ribbon rules live in home.css (atx-frame, atx-ribbon). */ /* ---------- Header placement Above: Main bar from the top (Fixed header) ---------- */ body.page-id-9 .header-wrapper .header, body.page-id-9 .header-wrapper { background: #2E1338 !important; } /* ---------- 00 Hero: Title + Photo Strip (Mist) ---------- */ body.page-id-9 .ct2-hero-strip { background: #F4F0F7; --atx-giant: clamp(120px, 16.47vw, 280px); } body.page-id-9 .ct2-hst { position: relative; padding-top: 0 !important; margin-top: -34px; padding-bottom: 80px !important; } body.page-id-9 .ct2-hst .ct2-hero-title { font: 400 var(--atx-giant)/.86 'Anton', sans-serif; letter-spacing: 0; text-transform: uppercase; color: #2E1338 !important; margin: 0 0 3px; } body.page-id-9 .ct2-hst .ct2-hero-title .atx-acc { display: block; text-align: right; font-size: 1.13em; line-height: .86; margin-top: -.086em; color: #B8481A !important; text-transform: none; } body.page-id-9 .ct2-hst .ct2-hero-sentence { position: absolute; left: 0; top: calc(var(--atx-giant) * 1.21); margin: 0; font: 400 20px/1.6 'Schibsted Grotesk', sans-serif !important; color: #4A3D52 !important; } body.page-id-9 .ct2-hst-strip { padding-bottom: 160px; } body.page-id-9 .ct2-hst-set { gap: 17px; padding-right: 17px; } body.page-id-9 .ct2-hst-img { width: clamp(200px, 18.82vw, 320px); aspect-ratio: 320 / 420; border-radius: 20px; } body.page-id-9 .ct2-hst-img:nth-child(even) { aspect-ratio: 320 / 360; } /* ---------- 01 Content Centered with Image on Each Side ---------- */ body.page-id-9 .atx-learn { position: relative; } @media (min-width: 768px) { body.page-id-9 .atx-learn .section-double-images { min-height: 860px; box-sizing: border-box; } } body.page-id-9 .atx-learn .titles, body.page-id-9 .atx-learn .wysiwyg { text-align: center !important; } body.page-id-9 .atx-learn .buttons-center { text-align: center; display: flex; justify-content: center; } body.page-id-9 .atx-learn .buttons-center .push { display: none; } body.page-id-9 .atx-learn .buttons-center .button { margin-right: 0 !important; } body.page-id-9 .atx-learn .wysiwyg, body.page-id-9 .atx-learn .wysiwyg p { line-height: 1.6; } body.page-id-9 .atx-learn .section-double-images .section_titles_width { padding-top: 20px; } body.page-id-9 .atx-learn .section-double-images .section_titles_width { text-align: center; } body.page-id-9 .atx-learn .section-double-images .section_titles_width::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 28px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } body.page-id-9 .atx-learn .wysiwyg, body.page-id-9 .atx-learn .wysiwyg p { text-align: center; } body.page-id-9 .atx-learn .centered-image-style { height: 580px; width: min(340px, 20vw); border-radius: 20px; overflow: hidden; transform: none !important; } body.page-id-9 .atx-learn .centered-image-style img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } body.page-id-9 .atx-learn .centered-image-left { left: 16px; top: 0 !important; } body.page-id-9 .atx-learn .centered-image-right { right: 16px; top: 120px !important; } /* ---------- 02 Statement: the mission (framed, Mulberry) ---------- */ body.page-id-9 .atx-mission { position: relative; isolation: isolate; } body.page-id-9 .atx-mission .section { z-index: 3; } body.page-id-9 .atx-mission .small-titles { color: #fff !important; } body.page-id-9 .atx-mission .small-titles::before { background: #FF9E5E !important; } body.page-id-9 .atx-mission .ct2-stm-text { font: 600 clamp(30px, 3.06vw, 52px)/1.19 'Schibsted Grotesk', sans-serif; letter-spacing: -.02em; text-transform: none; color: #fff; margin-top: 0; } body.page-id-9 .atx-mission .ct2-stm-text { margin-top: 40px !important; } body.page-id-9 .atx-mission .ct2-stm-text strong { text-decoration: none !important; } body.page-id-9 .atx-mission .ct2-stm-text strong { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.16em; letter-spacing: -.01em; color: #FF9E5E; line-height: 1; } body.page-id-9 .atx-mission::after { content: ''; position: absolute; z-index: 1; right: -360px; top: 348px; width: 640px; height: 640px; border-radius: 50%; background: #CDB9F2; pointer-events: none; } /* ---------- 03 Person Spotlight (Mist) ---------- */ body.page-id-9 .atx-spot { position: relative; overflow: clip; } body.page-id-9 .atx-spot .section { position: relative; z-index: 2; } body.page-id-9 .atx-spot .wysiwyg, body.page-id-9 .atx-spot .wysiwyg p { line-height: 1.6; } @media (min-width: 768px) { body.page-id-9 .atx-spot .section { min-height: 900px; box-sizing: border-box; display: flex; align-items: center; } body.page-id-9 .atx-spot .div-within-section { width: 100%; transform: translateY(-14px); } } body.page-id-9 .atx-spot .ct-person { grid-template-columns: 640px 460px; justify-content: space-between; gap: 40px; padding-right: 40px; } body.page-id-9 .atx-spot .ct-person-card { position: relative; width: 460px; z-index: 1; } body.page-id-9 .atx-spot .ct-person-card figcaption { display: none; } body.page-id-9 .atx-spot .ct-person-card a { display: block; position: relative; z-index: 2; } body.page-id-9 .atx-spot .ct-person-photo { width: 460px; margin: 0; } body.page-id-9 .atx-spot .ct-person-card::before { content: ''; position: absolute; z-index: 0; left: 10px; top: -110px; width: 560px; height: 560px; border-radius: 50%; background: #FF9E5E; } body.page-id-9 .atx-spot .ct-person-card::after { content: ''; position: absolute; z-index: 3; left: -80px; top: 20px; width: 520px; height: 520px; border-radius: 50%; border: 2px solid #2E1338; pointer-events: none; } body.page-id-9 .atx-spot::after { content: ''; position: absolute; z-index: 1; left: calc(50% - 250px); bottom: -196px; width: 360px; height: 360px; border-radius: 50%; background: #FF9E5E; pointer-events: none; } body.page-id-9 .atx-spot .button { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body.page-id-9 .atx-spot .button:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 04 Text Rows: Statement of Faith (framed, Lilac) ---------- */ body.page-id-9 .atx-faith .small-titles::before { background: #B8481A !important; } body.page-id-9 .atx-faith .ct2-text-rows { border-top-color: rgba(46, 19, 56, .85); } body.page-id-9 .atx-faith .ct2-tr, body.page-id-9 .atx-faith .ct2-split-50 .ct2-tr { padding: 40px 0 39px; align-items: start; border-bottom-color: rgba(46, 19, 56, .85); gap: 50px; grid-template-columns: 650px minmax(0, 600px); } body.page-id-9 .atx-faith .ct2-tr-text { margin-top: 8px; } body.page-id-9 .atx-faith .ct2-text-rows { margin-top: 57px !important; } body.page-id-9 .atx-faith .ct2-tr-label { flex-wrap: nowrap; align-items: center; gap: 0; } body.page-id-9 .atx-faith .ct2-tr-n { flex: 0 0 120px; font: 400 clamp(44px, 4.7vw, 80px)/.95 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; letter-spacing: 0; opacity: 1; } body.page-id-9 .atx-faith .ct2-tr-label .titles { flex: 1 1 auto; font: 400 clamp(44px, 4.7vw, 80px)/.95 'Anton', sans-serif; color: #2E1338; text-transform: uppercase; letter-spacing: 0; } body.page-id-9 .atx-faith .ct2-tr-text, body.page-id-9 .atx-faith .ct2-tr-text .wysiwyg, body.page-id-9 .atx-faith .ct2-tr-text p { font-size: 20px; line-height: 1.6; color: #4A3D52; max-width: 600px; } /* ---------- 05 Grids: Our Leadership (team, Mist) ---------- */ body.page-id-9 .atx-team .panel-image-wrap a { display: block; background: #CDB9F2; padding: 16px; border-radius: 20px; } body.page-id-9 .atx-team .panel-image-wrap [class*="image-wrapper-"] { border-radius: 8px; padding-top: 0 !important; height: auto !important; aspect-ratio: 4 / 5; } body.page-id-9 .atx-team .panel-image-wrap img { filter: none; mix-blend-mode: normal; border-radius: 8px; } body.page-id-9 .atx-team .grid-flex .panel:nth-child(3n+2) { margin-top: 80px; } body.page-id-9 .atx-team .grid-flex .panel { margin-bottom: 0; } body.page-id-9 .atx-spot .small-titles, body.page-id-9 .atx-team .section_titles_width .small-titles { color: #B8481A !important; } body.page-id-9 .atx-spot .small-titles::before, body.page-id-9 .atx-team .section_titles_width .small-titles::before { background: #B8481A !important; } body.page-id-9 .atx-team .panel-content-wrap .titles.medium { margin-top: 24px; font-size: 40px; line-height: 1; } body.page-id-9 .atx-team .panel-content-wrap .small-titles { display: block; margin: 6px 0 0; font: 400 16px/1.3 'Schibsted Grotesk', sans-serif !important; letter-spacing: 0; text-transform: none; color: #4A3D52 !important; } body.page-id-9 .atx-team .panel-content-wrap .small-titles::before { display: none; } /* ---------- 06 Marquee ribbon out: not overlapping ---------- */ body.page-id-9 .atx-ribbon { margin-top: 0; } /* ---------- Tablet ---------- */ @media (max-width: 1250px) { body.page-id-9 .atx-spot .ct-person { grid-template-columns: minmax(0, 1fr) 460px; } } @media (max-width: 900px) { body.page-id-9 .atx-spot .ct-person { grid-template-columns: 1fr; padding-right: 0; justify-items: center; } body.page-id-9 .atx-spot .ct-person-text { justify-self: stretch; } } /* ---------- Phones ---------- */ @media (max-width: 767px) { body.page-id-9 .ct2-hero-strip { --atx-giant: 120px; } body.page-id-9 .ct2-hst { padding-top: 0 !important; padding-bottom: 40px !important; margin: 6px 20px 0; width: auto; max-width: none; } body.page-id-9 .ct2-hst .ct2-hero-title .atx-acc { font-size: min(136px, 32vw); line-height: .86; margin-top: -.1em; } body.page-id-9 .ct2-hst .ct2-hero-sentence { position: static; margin-top: 19px; } body.page-id-9 .ct2-hst-strip { padding-bottom: 40px; } body.page-id-9 .ct2-hst-set { gap: 12px; padding-right: 12px; } body.page-id-9 .ct2-hst-img, body.page-id-9 .ct2-hst-img:nth-child(even) { width: 220px; aspect-ratio: 220 / 280; align-self: auto; } body.page-id-9 .atx-learn { display: grid; grid-template-columns: 165px 165px; justify-content: center; column-gap: 20px; padding: 0 20px; } body.page-id-9 .atx-learn .centered-image-style { position: relative !important; width: 165px !important; height: 220px !important; top: auto !important; left: auto; right: auto; } body.page-id-9 .atx-learn .centered-image-left { order: 1; grid-column: 1; } body.page-id-9 .atx-learn .centered-image-right { order: 2; grid-column: 2; margin-top: 30px; top: auto !important; } body.page-id-9 .atx-learn .section-double-images { order: 3; grid-column: 1 / -1; width: 100% !important; margin-top: 40px; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-9 .atx-learn .section-double-images .section_titles_width::before { width: 30px; height: 30px; margin-bottom: 20px; } body.page-id-9 .atx-learn .section-double-images .section_titles_width { padding-top: 0; } body.page-id-9 .atx-mission::after { right: -150px; top: 337px; width: 280px; height: 280px; } body.page-id-9 .atx-mission .ct2-stm-text { margin-top: 23px !important; } body.page-id-9 .atx-spot .ct-person { gap: 50px; } body.page-id-9 .atx-spot .ct-person-card { order: -1; width: 260px; margin: 20px 0 0 55px; justify-self: start; } body.page-id-9 .atx-spot .ct-person-photo { width: 260px; } body.page-id-9 .atx-spot .ct-person-card::before { left: -5px; top: -40px; width: 320px; height: 320px; } body.page-id-9 .atx-spot .ct-person-card::after { display: none; } body.page-id-9 .atx-spot::after { left: auto; right: 10px; bottom: auto; top: calc(100% - 100px); width: 200px; height: 200px; } body.page-id-9 .atx-spot .ct-person-text { padding-bottom: 76px; } body.page-id-9 .atx-spot .wysiwyg, body.page-id-9 .atx-spot .wysiwyg p { font-size: 20px; line-height: 1.45; } body.page-id-9 .atx-learn .section_titles_width .titles, body.page-id-9 .atx-spot .titles, body.page-id-9 .atx-faith .section_titles_width .titles, body.page-id-9 .atx-team .section_titles_width .titles { font-size: 44px; line-height: .95; } body.page-id-9 .atx-mission .section { min-height: 417px; box-sizing: border-box; } body.page-id-9 .atx-faith .ct2-tr, body.page-id-9 .atx-faith .ct2-split-50 .ct2-tr { padding: 24px 0 23px; gap: 12px; align-items: stretch; grid-template-columns: 1fr; } body.page-id-9 .atx-faith .ct2-tr-text { margin-top: 0; } body.page-id-9 .atx-faith .ct2-tr-n { flex: 0 0 64px; font-size: 44px; -webkit-text-stroke-width: 1.5px; } body.page-id-9 .atx-faith .ct2-tr-label .titles { font-size: 44px; } body.page-id-9 .atx-faith .ct2-tr-text, body.page-id-9 .atx-faith .ct2-tr-text .wysiwyg, body.page-id-9 .atx-faith .ct2-tr-text p { font-size: 18px; line-height: 1.6; } body.page-id-9 .atx-team .grid-flex .panel:nth-child(3n+2) { margin-top: 0; } body.page-id-9 .atx-team .grid-flex .panel { margin-bottom: 0; } body.page-id-9 .atx-team .panel-image-wrap a { padding: 10px; border-radius: 14px; } body.page-id-9 .atx-team .panel-image-wrap [class*="image-wrapper-"] { padding-top: 0 !important; height: 190px !important; aspect-ratio: auto; } body.page-id-9 .atx-team .panel-content-wrap .titles.medium { font-size: 22px; margin-top: 12px; } } /* Antioch Connect (page 2560). Rules hang off body.page-id-2560 and the atx classes set in tools/build-connect.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / accent / ribbon rules live in home.css (atx-frame, atx-ribbon). */ /* ---------- 00 Hero: Title over Wide Image. Photo card first (framed 16 / 20), Mist title plate cut into its bottom-left ---------- */ body.page-id-2560 .ct2-hero-stacked { display: flex; flex-direction: column; margin: 16px 16px 0; padding: 0 !important; background: transparent !important; --ct2-hero-top: 0px; } body.page-id-2560 .ct2-hero-stacked .ct2-hk-media { order: -1; max-width: none; width: auto; margin: 0; padding: 0 !important; position: relative; border-radius: 20px; overflow: clip; } body.page-id-2560 .ct2-hero-stacked .ct2-hk-media img { width: 100%; aspect-ratio: 1668 / 780; object-fit: cover; border-radius: 20px; display: block; } /* Hero Overlay 60 (owner rule) comes from the hero's Hero Overlay setting (framework 3.2.10 draws it on this layout). */ body.page-id-2560 .ct2-hero-stacked .ct2-hk { margin: -260px 0 0; position: relative; z-index: 2; width: fit-content; max-width: 100%; box-sizing: border-box; background: #F4F0F7; border-top-right-radius: 20px; padding: 63px 68px 0 184px !important; min-height: 260px; } body.page-id-2560 .ct2-hero-stacked .ct2-hk.section { margin-left: 0; margin-right: 0; } body.page-id-2560 .ct2-hero-stacked .ct2-hk-copy { display: block; } body.page-id-2560 .ct2-hero-stacked .ct2-hero-title { font-size: clamp(64px, 8.82vw, 150px); line-height: .95; letter-spacing: 0; color: #2E1338 !important; white-space: nowrap; margin: 0; text-transform: uppercase; } body.page-id-2560 .ct2-hero-stacked .ct2-hero-title .atx-acc { font-size: 1.13em; text-transform: none; color: #B8481A !important; line-height: .9; } /* concave fillets where the plate meets the photo (left, above its top edge; right, beside its end) */ body.page-id-2560 .ct2-hero-stacked .ct2-hk::before { content: ''; position: absolute; left: 0; top: -20px; width: 20px; height: 20px; background: radial-gradient(circle at 100% 0, transparent 20px, #F4F0F7 20.5px); } body.page-id-2560 .ct2-hero-stacked .ct2-hk::after { content: ''; position: absolute; left: 100%; bottom: 0; width: 20px; height: 20px; background: radial-gradient(circle at 100% 0, transparent 20px, #F4F0F7 20.5px); } @media (prefers-reduced-motion: no-preference) { body.page-id-2560 .ct2-hero-stacked .ct2-hk-media img { animation: atx-conn-settle .6s ease-out both; } } @keyframes atx-conn-settle { from { transform: scale(1.04); } to { transform: scale(1); } } /* ---------- 01 Pathway Finder (framed, Lilac) ---------- */ body .atx-path { position: relative; } body .atx-path .ct3-head-split { grid-template-columns: 700px 520px; gap: 30px 0; align-items: start; } body .atx-path .ct3-hs-title .atx-acc { display: block; line-height: 1; } body .atx-path .ct3-hs-body .wysiwyg p { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; margin: 0; } body .atx-path .ct3-hs-body { padding: 6px 0 0 !important; } body .atx-path .ct3-hs-body .wysiwyg { max-width: none; margin: 0; width: 520px; } body .atx-path .ct2-head { margin-bottom: 0 !important; } /* half-moon: Mulberry semicircle hanging from the panel's top edge (the page's one) */ body .atx-path::after { content: ''; position: absolute; top: -150px; right: 200px; width: 300px; height: 300px; border-radius: 50%; background: #2E1338; pointer-events: none; z-index: 1; } body .atx-path .section { z-index: 3; } body .atx-path .ct3-pathway { margin-top: 80px !important; } body .atx-path .ct3-pw-ask { display: block; } body .atx-path .ct3-pw-q { font: 400 40px/1 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0; color: #2E1338; margin: 0 0 24px; } body .atx-path .ct3-pw-chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } body .atx-path .ct3-chip { font: 600 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; padding: 13px 23px; border: 1.5px solid #2E1338; border-radius: 0; background: transparent; color: #2E1338; } body .atx-path .ct3-chip[aria-pressed="true"] { background: #2E1338; color: #fff; } body .atx-path .ct3-chip[data-key=""] { order: 9; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; padding-left: 12px; color: #2E1338; } body .atx-path .ct3-pw-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 44px; } body .atx-path .ct3-pw-card { flex-direction: row; align-items: stretch; gap: 30px; padding: 20px !important; border-radius: 20px; background: #fff; min-height: 340px; box-sizing: border-box; } body .atx-path .ct3-pw-img { flex: 0 0 260px; width: 260px; aspect-ratio: auto; border-radius: 14px; overflow: hidden; height: 300px; } body .atx-path .ct3-pw-copy { padding: 20px 0 0; display: flex; flex-direction: column; gap: 0; align-content: initial; flex: 1; min-width: 0; } body .atx-path .ct3-pw-copy .titles.small { font: 400 40px/1 'Anton', sans-serif; text-transform: uppercase; color: #2E1338; margin: 0 0 16px; } body .atx-path .ct3-pw-copy p { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; } body .atx-path .ct3-pw-link { margin-top: auto; padding-bottom: 20px; font: 700 18px/1 'Schibsted Grotesk', sans-serif; color: #2E1338; text-decoration: none; } body .atx-path .ct2-buttons { margin-top: 40px !important; } body .atx-path .ct2-buttons .button.button-white, body .atx-upnext .section a.button { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; line-height: 56px; padding-top: 0; padding-bottom: 0; } body .atx-path .ct2-buttons .button.button-white:hover, body .atx-upnext .section a.button:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 02 Bento Grid (Pattern A + spans: Kids 2x2, number 1x2, Adults and text 2x1) ---------- */ body .atx-bento .ct2-bento { grid-auto-rows: 300px; gap: 20px; } body .atx-bento .ct2-bento-a .ct2-tile:nth-child(3) { grid-row: span 2; grid-column: span 1; } body .atx-bento .ct2-bento-a .ct2-tile:nth-child(5), body .atx-bento .ct2-bento-a .ct2-tile:nth-child(6) { grid-column: span 2; grid-row: span 1; } body .atx-bento .ct2-tile { padding: 40px; min-height: 0; border-radius: 20px; box-sizing: border-box; } body .atx-bento .ct2-tile.has-photo::after { background: linear-gradient(to top, rgba(46, 19, 56, .7) 0%, rgba(46, 19, 56, .6) 25%, rgba(46, 19, 56, 0) 60%); } body .atx-bento .ct2-tt-image .ct2-tile-title { font: 400 40px/1.1 'Anton', sans-serif; text-transform: uppercase; color: #fff !important; } body .atx-bento .ct2-tt-image:first-child .ct2-tile-title { font-size: 60px; line-height: .95; } body .atx-bento .ct2-tt-image .ct2-tile-title::after { content: "\00a0\2192"; } body .atx-bento .ct2-tt-stat { background: #2E1338; color: #fff; justify-content: space-between; } body .atx-bento .ct2-tt-stat .ct2-tile-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } body .atx-bento .ct2-tile-stat { font: 400 280px/.86 'Anton', sans-serif !important; color: transparent !important; -webkit-text-stroke: 2.5px #FF9E5E; paint-order: stroke fill; margin: -16px 0 0 !important; } body .atx-bento .ct2-tt-stat .ct2-tile-text { margin: 0; font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; color: #fff; } body .atx-bento .ct2-tt-text { background: #FF9E5E; color: #2E1338; justify-content: space-between; } body .atx-bento .ct2-tt-text .ct2-tile-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } body .atx-bento .ct2-tt-text .ct2-tile-title { font: 400 60px/.95 'Anton', sans-serif; text-transform: uppercase; color: #2E1338 !important; max-width: 560px; } body .atx-bento .ct2-tt-text .ct2-tile-more { margin: 0; font: 700 18px/1 'Schibsted Grotesk', sans-serif; color: #2E1338; } /* ---------- 03 Ribbon: sits between two bands, no overlap ---------- */ body.page-id-2560 .atx-ribbon { margin-top: 0; } /* ---------- 04 Hover Index (framed, Mulberry): white rows, outline numerals, meta column, cursor photo ---------- */ body .atx-index { color: #fff; } body .atx-index .titles, body .atx-index .ct2-head h2 { color: #fff !important; } body .atx-index .ct2-head .atx-acc { color: #FF9E5E !important; } body .atx-index .small-titles { color: #FF9E5E; } body .atx-index .ct2-index { border-top-color: #5A4263; } body .atx-index .ct2-ix-row { border-bottom-color: #5A4263; } body .atx-index .ct2-ix-link { grid-template-columns: 120px minmax(0, 556px) minmax(0, 1fr); column-gap: 0; padding: 36px 0; align-items: center; color: #fff; } body .atx-index .has-numbers .ct2-ix-link { grid-template-columns: 120px 556px minmax(0, 1fr); } body .atx-index .ct2-ix-n { font: 400 80px/.95 'Anton', sans-serif; opacity: 1; color: transparent; -webkit-text-stroke: 2.5px #FF9E5E; paint-order: stroke fill; } body .atx-index .ct2-ix-title { font: 400 80px/.95 'Anton', sans-serif; text-transform: uppercase; color: #fff; } body .atx-index .ct2-ix-meta { font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #CDB9F2; opacity: 1; text-align: left; } body .atx-index .ct4-ix-desc { grid-column: 2 / -1; } body .atx-index .ct4-ix-desc > span { color: #fff; opacity: .9; font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; max-width: 520px; } body .atx-index .ct2-ix-row:hover .ct2-ix-n { color: #FF9E5E; } body .atx-index a.ct2-ix-link:hover .ct2-ix-title { color: #FF9E5E; transform: none; opacity: 1; } body .atx-index .ct2-ix-img { width: 420px; aspect-ratio: 420 / 520; border-radius: 20px; } /* ---------- 05 Grids (event posts): White cards, title Medium, date Clay ---------- */ body .atx-upnext .grid-flex .panel { background: #fff; border-radius: 20px; padding: 30px; box-sizing: border-box; } body .atx-upnext .grid-flex .panel-image-wrap img { border-radius: 14px; } body .atx-upnext .grid-flex .panel .titles.medium { margin-top: 30px; margin-bottom: 8px; } body .atx-upnext .grid-flex .panel .titles.medium, body .atx-upnext .grid-flex .panel .titles.medium a { font: 400 40px/1 'Anton', sans-serif; text-transform: uppercase; color: #2E1338; } body .atx.atx-upnext .grid-flex .panel h2.small-titles { display: block; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; text-transform: none; color: #B8481A !important; margin: 0; } body .atx.atx-upnext .grid-flex .panel h2.small-titles::before { display: none; } body .atx-upnext .section > .div-within-section > div > .ct2-buttons, body .atx-upnext .ct2-buttons { margin-top: 40px; } /* ---------- Narrow desktop / tablet ---------- */ @media (min-width: 601px) and (max-width: 1199px) { body .atx-bento .ct2-tile { padding: 24px; } body .atx-bento .ct2-tt-image:not(:first-child) .ct2-tile-title { font-size: 30px; } body .atx-bento .ct2-tile-stat { font-size: 200px !important; } } /* ---------- Phones ---------- */ @media (max-width: 1099px) { body .atx-path .ct3-head-split { grid-template-columns: 1fr; } body .atx-path .ct3-pw-results { grid-template-columns: 1fr; } body .atx-index .ct2-ix-title, body .atx-index .ct2-ix-n { font-size: clamp(44px, 7.8vw, 80px); } body .atx-index .ct2-ix-link { grid-template-columns: 90px minmax(0, 1fr) auto; } body .atx-index .has-numbers .ct2-ix-link { grid-template-columns: 90px minmax(0, 1fr) auto; } } @media (max-width: 767px) { body.page-id-2560 .ct2-hero-stacked { margin: 50px 10px 0; } body.page-id-2560 .ct2-hero-stacked .ct2-hk-media, body.page-id-2560 .ct2-hero-stacked .ct2-hk-media img { border-radius: 14px; } body.page-id-2560 .ct2-hero-stacked .ct2-hk-media img { aspect-ratio: 370 / 420; } body.page-id-2560 .ct2-hero-stacked .ct2-hk { margin-top: -80px; width: 300px; padding: 44px 20px 0 10px !important; min-height: 206px; } body.page-id-2560 .ct2-hero-stacked .ct2-hero-title { font-size: 64px; line-height: 72px; white-space: normal; } body.page-id-2560 .ct2-hero-stacked .ct2-hero-title .atx-acc { font-size: 72px; display: block; line-height: 1; } body.page-id-2560 .ct2-hero-stacked .ct2-hk::before { top: -14px; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 14px, #F4F0F7 14.5px); } body.page-id-2560 .ct2-hero-stacked .ct2-hk::after { width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 14px, #F4F0F7 14.5px); } body .atx-path::after { width: 160px; height: 160px; top: -80px; right: 20px; } body .atx-path .ct3-pathway { margin-top: 40px !important; } body .atx-path .ct3-pw-q { font-size: 30px !important; margin-bottom: 16px; } body .atx-path .ct3-chip { padding: 12px 17px; } body .atx-path .ct3-pw-card { flex-direction: column; gap: 0; min-height: 0; padding: 20px !important; } body .atx-path .ct3-pw-img { flex: none; width: 100%; height: 200px; } body .atx-path .ct3-pw-copy { padding-top: 20px; } body .atx-path .ct3-pw-copy .titles.small { font-size: 30px; margin-bottom: 10px; } body .atx-path .ct3-pw-copy p { font-size: 18px; } body .atx-path .ct3-pw-link { margin-top: 16px; padding-bottom: 0; } body .atx-path .ct3-hs-body .wysiwyg { width: auto; } body .atx-path .ct2-buttons .button, body .atx-upnext .section a.button { line-height: 48px; display: block; text-align: center; width: 100%; box-sizing: border-box; } } @media (max-width: 600px) { body .atx-bento .ct2-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 10px; } body .atx-bento .ct2-bento-a .ct2-tile { grid-column: 1 / -1 !important; grid-row: auto !important; padding: 16px; height: 200px; min-height: 0; } body .atx-bento .ct2-bento-a .ct2-tile:first-child { height: 350px; } body .atx-bento .ct2-bento-a .ct2-tile:nth-child(2), body .atx-bento .ct2-bento-a .ct2-tile:nth-child(4) { grid-column: auto !important; } body .atx-bento .ct2-tt-image .ct2-tile-title { font-size: 30px !important; } body .atx-bento .ct2-tt-image:first-child .ct2-tile-title { font-size: 38px !important; } body .atx-bento .ct2-bento-a .ct2-tt-stat { height: 160px; padding: 24px; } body .atx-bento .ct2-tt-stat .ct2-tile-body { flex-direction: row; align-items: center; gap: 30px; justify-content: flex-start; } body .atx-bento .ct2-tile-stat { font-size: 120px !important; margin: 0 !important; } body .atx-bento .ct2-tt-stat .ct2-tile-text { font-size: 20px; max-width: 180px; } body .atx-bento .ct2-bento-a .ct2-tt-text { height: 180px; padding: 20px; } body .atx-bento .ct2-bento-a .ct2-tt-text .ct2-tile-title { font-size: 40px !important; line-height: .95; max-width: 310px; } body .atx-index .ct2-ix-link { padding: 20px 0; grid-template-columns: 52px minmax(0, 1fr) 72px; column-gap: 0; } body .atx-index .has-numbers .ct2-ix-link { grid-template-columns: 52px minmax(0, 1fr) 72px; } body .atx-index .ct2-ix-title, body .atx-index .ct2-ix-n { font-size: 44px; line-height: .95; } body .atx-index .ct2-ix-meta { display: none; } body .atx-index .ct2-ix-img { position: static; opacity: 1; transform: none; width: 72px; height: 72px; aspect-ratio: 1; border-radius: 12px; grid-row: 1 / span 2; grid-column: 3; align-self: start; } body .atx-index .ct4-ix-desc { grid-column: 2 / 3; grid-row: 2; grid-template-rows: 1fr; opacity: 1; } body .atx-index .ct4-ix-desc > span { font-size: 18px; } body .atx-upnext .grid-flex .panel { padding: 20px; } body .atx-upnext .grid-flex .panel .titles.medium, body .atx-upnext .grid-flex .panel .titles.medium a { font-size: 30px; } body .atx-upnext .grid-flex .panel .titles.medium { margin-top: 20px; } } /* Antioch Contact (page 11). Rules hang off body.page-id-11 and the atx classes set in tools/build-contact.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / ribbon rules live in home.css (atx-frame, atx-ribbon). */ /* ---------- Header placement Above: Main bar from the top (Fixed header) ---------- */ body.page-id-11 .header-wrapper .header, body.page-id-11 .header-wrapper { background: #2E1338 !important; } /* ---------- 00 Hero: Offset Image, arch, White panel framed 16 / 20 ---------- */ body.page-id-11 .ct2-hero-offset { margin: 112px 16px 0; border-radius: 20px; background: #fff; overflow: clip; padding: 0 !important; --ct2-hero-top: 0px; } body.page-id-11 .ct2-hero-offset .ct2-ho { min-height: 760px; padding: 0 !important; align-items: center; isolation: isolate; } /* Apricot Sun 560, behind the arch's top-left shoulder, cut by the panel top */ body.page-id-11 .ct2-hero-offset .ct2-ho::before { content: ''; position: absolute; z-index: 0; left: 600px; top: -150px; width: 560px; height: 560px; border-radius: 50%; background: #FF9E5E; } body.page-id-11 .ct2-hero-offset .ct2-ho-media { position: relative; z-index: 1; width: 480px; max-width: 100%; aspect-ratio: auto; height: 620px; border-radius: 240px 240px 20px 20px; } body.page-id-11 .ct2-hero-offset .ct2-ho-copy { position: relative; z-index: 2; margin-right: 0; padding-top: 56px; } body.page-id-11 .ct2-hero-offset .ct2-hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #B8481A !important; opacity: 1; margin: 0 0 20px; } body.page-id-11 .ct2-hero-offset .ct2-hero-eyebrow::before { content: ''; flex: none; width: 40px; height: 2px; background: currentColor; } body.page-id-11 .ct2-hero-offset .ct2-hero-title { font-size: clamp(64px, 8.82vw, 150px); line-height: .88; letter-spacing: 0; color: #2E1338 !important; text-wrap: nowrap; } body.page-id-11 .ct2-hero-offset .ct2-hero-title .atx-acc { display: block; font-size: 1.13em; line-height: .9; margin-top: -.06em; color: #B8481A !important; opacity: 1; } body.page-id-11 .ct2-hero-offset .ct2-hero-sentence { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif !important; color: #4A3D52 !important; max-width: 520px; margin-top: 24px; } body.page-id-11 .ct2-hero-offset .ct2-hero-buttons { gap: 16px; margin-top: 36px; } body.page-id-11 .ct2-hero-offset .ct2-hero-buttons .button.button-white { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body.page-id-11 .ct2-hero-offset .ct2-hero-buttons .button.button-white:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 02 Form with Content on Left (framed, Lilac) ---------- */ body.page-id-11 .atx-form.atx-frame { margin-bottom: 0; } body.page-id-11 .atx-form .div-within-section { display: grid; grid-template-columns: 560px 640px; justify-content: space-between; column-gap: 40px; grid-template-rows: auto 1fr; align-items: start; } body.page-id-11 .atx-form .div-within-section > .relative { display: contents; } body.page-id-11 .atx-form .section_titles_width { grid-column: 1; grid-row: 1; width: auto; } body.page-id-11 .atx-form .small-titles { color: #2E1338 !important; margin-bottom: 20px !important; } body.page-id-11 .atx-form .small-titles::before { background: #B8481A !important; } body.page-id-11 .atx-form .left { grid-column: 1; grid-row: 2; width: auto !important; float: none !important; padding: 0 !important; } body.page-id-11 .atx-form .right { grid-column: 2; grid-row: 1 / span 2; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } body.page-id-11 .atx-form .push { display: none; } body.page-id-11 .atx-form .left h2 { margin-bottom: 24px !important; } body.page-id-11 .atx-form .left .wysiwyg p { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; max-width: 520px; margin: 0; } /* contact info: label / value rows with Main hairlines */ body.page-id-11 .atx-form dl.atx-info { margin: 48px 0 0; padding: 0; border-top: 1px solid #2E1338; } body.page-id-11 .atx-form dl.atx-info > div { border-bottom: 1px solid #2E1338; padding: 20px 0; } body.page-id-11 .atx-form dl.atx-info dt { font: 600 16px/26px 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; color: #2E1338; margin: 0 0 8px; } body.page-id-11 .atx-form dl.atx-info dd { margin: 0; font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; color: #2E1338; } body.page-id-11 .atx-form dl.atx-info a { color: inherit; text-decoration: none; } /* the White form card */ #main-content .atx-form .gform_wrapper { background: #fff; border-radius: 20px; padding: 60px; } #main-content .atx-form .gform_heading { display: none; } #main-content .atx-form .gfield_label, #main-content .atx-form legend.gfield_label { font: 600 16px/1.3 'Schibsted Grotesk', sans-serif; color: #2E1338; letter-spacing: 0; margin: 0 0 6px; } #main-content .atx-form .gfield_required, #main-content .atx-form .gfield_required_asterisk { color: #2E1338; } #main-content .atx-form .gform_fields { --gf-form-gap-y: 21px; row-gap: 21px !important; grid-row-gap: 21px !important; } #main-content .atx-form .gfield { grid-column: 1 / -1 !important; } #main-content .atx-form input[type=text], #main-content .atx-form input[type=email], #main-content .atx-form select, #main-content .atx-form textarea { background: transparent !important; border: 0 !important; border-bottom: 2px solid #2E1338 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 !important; font: 400 18px/1.4 'Schibsted Grotesk', sans-serif; color: #4A3D52; width: 100% !important; } #main-content .atx-form textarea { min-height: 140px; height: 140px; } #main-content .atx-form .ginput_complex { display: flex; gap: 20px; } #main-content .atx-form .ginput_complex > span { flex: 1; margin: 0; padding: 0; } #main-content .atx-form .gform-field-label--type-sub { display: none; } #main-content .atx-form input::placeholder, #main-content .atx-form textarea::placeholder { color: #4A3D52 !important; opacity: .85 !important; } #main-content .atx-form .gfield--type-captcha { min-height: 78px; margin-top: -7px; } #main-content .atx-form .gform_footer { margin-top: 36px !important;} #main-content .atx-form .gform_footer { margin: 0; padding: 0; } /* ---------- 03 Map & Locations ---------- */ body.page-id-11 .atx-map .div-within-section { display: grid; grid-template-columns: 460px 760px; justify-content: space-between; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; } body.page-id-11 .atx-map .ct2-head { grid-column: 1; grid-row: 1; margin-bottom: 40px; } body.page-id-11 .atx-map .ct2-locations { display: contents; } body.page-id-11 .atx-map .ct2-loc-list { grid-column: 1; grid-row: 2; } body.page-id-11 .atx-map .ct2-loc-map { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; min-height: 560px; height: 560px; border-radius: 20px; outline: 2px solid #FF9E5E; outline-offset: 16px; overflow: visible; } body.page-id-11 .atx-map .ct2-loc-map iframe { border-radius: 20px; } body.page-id-11 .atx-map .ct2-loc { padding: 0; border: 0; display: flex; flex-direction: column; } body.page-id-11 .atx-map .ct2-loc-name { order: 1; font: 400 40px/1 'Anton', sans-serif; text-transform: uppercase; color: #2E1338; margin: 0 0 20px; } body.page-id-11 .atx-map .ct2-loc-contact { order: 2; display: flex; flex-direction: column; gap: 4px; margin: 0; } body.page-id-11 .atx-map .ct2-loc-contact a { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; text-decoration: none; } body.page-id-11 .atx-map .ct2-loc-contact a:nth-child(3) { display: none; } body.page-id-11 .atx-map .ct2-loc-addr { order: 3; font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; margin: 0 0 40px; } body.page-id-11 .atx-map .ct2-loc-hours { order: 4; gap: 0; margin: 0 0 40px; border-top: 1px solid #2E1338; } body.page-id-11 .atx-map .ct2-loc-hours div { max-width: none; justify-content: flex-start; gap: 0; border-bottom: 1px solid #2E1338; padding: 16px 0; font: 400 20px/1.3 'Schibsted Grotesk', sans-serif; color: #4A3D52; } body.page-id-11 .atx-map .ct2-loc-hours dt { flex: none; width: 140px; font: 600 20px/1.3 'Schibsted Grotesk', sans-serif; color: #2E1338; } body.page-id-11 .atx-map .ct2-loc-hours dd { font-variant-numeric: normal; } body.page-id-11 .atx-map .ct2-loc .button { order: 5; align-self: flex-start; margin: 0 !important; } body.page-id-11 .atx-map .small-titles { color: #B8481A !important; } body.page-id-11 .atx-map .small-titles::before { background: #B8481A !important; } /* ---------- Phones ---------- */ @media (max-width: 767px) { body.page-id-11 .ct2-hero-offset { margin: 144px 10px 0; border-radius: 14px; } body.page-id-11 .ct2-hero-offset .ct2-ho { display: block; min-height: 0; padding: 30px 20px 60px !important; } body.page-id-11 .ct2-hero-offset .ct2-ho::before { left: -40px; top: -74px; width: 300px; height: 300px; } body.page-id-11 .ct2-hero-offset .ct2-ho-media { width: 260px; height: 340px; margin: 0 auto !important; border-radius: 130px 130px 14px 14px; } body.page-id-11 .ct2-hero-offset .ct2-ho-copy { margin: 40px 0 0 !important; padding-top: 0; } body.page-id-11 .ct2-hero-offset .ct2-hero-title { font-size: 64px; } body.page-id-11 .ct2-hero-offset .ct2-hero-title .atx-acc { font-size: 72px; } body.page-id-11 .ct2-hero-offset .ct2-hero-sentence { font-size: 18px; margin-top: 24px; } body.page-id-11 .ct2-hero-offset .ct2-hero-buttons { flex-direction: column; margin-top: 30px; } body.page-id-11 .ct2-hero-offset .ct2-hero-buttons .button { width: 100%; text-align: center; box-sizing: border-box; } body.page-id-11 .atx-form .div-within-section { display: block; } body.page-id-11 .atx-form .right { margin: 28px 0 0 !important; } #main-content .atx-form legend.gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; } #main-content .atx-form textarea { font-size: 18px !important; } body.page-id-11 .atx-form dl.atx-info { margin: 32px 0 28px; } body.page-id-11 .atx-form dl.atx-info dd { font-size: 20px; } #main-content .atx-form .gform_wrapper { padding: 24px; border-radius: 14px; } #main-content .atx-form .ginput_complex { flex-direction: column; gap: 28px; } #main-content .atx-form .gform-field-label--type-sub { display: block !important; font: 600 16px/1.3 'Schibsted Grotesk', sans-serif !important; color: #2E1338; order: -1; margin-bottom: 6px; } #main-content .atx-form .ginput_complex > span { display: flex; flex-direction: column; } body.page-id-11 .atx-map .div-within-section, body.page-id-11 .atx-map .ct2-locations { display: block; } body.page-id-11 .atx-map .ct2-head { margin-bottom: 30px; } body.page-id-11 .atx-map .ct2-loc-map { margin-top: 40px; height: 300px; min-height: 300px; outline-offset: 6px; } body.page-id-11 .atx-map .ct2-loc-name { font-size: 36px; } body.page-id-11 .atx-map .ct2-loc-contact a, body.page-id-11 .atx-map .ct2-loc-addr, body.page-id-11 .atx-map .ct2-loc-hours div { font-size: 20px !important; } body.page-id-11 .atx-map .ct2-loc-hours dt { width: 110px; font-size: 20px; } body.page-id-11 .atx-map .ct2-loc .button { align-self: stretch; text-align: center; } } /* Antioch Events (page 2561). Rules hang off body.page-id-2561 and the atx classes set in tools/build-events.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / ribbon rules live in home.css. */ /* ---------- Header placement Above: Main bar from the top (Fixed header) ---------- */ body.page-id-2561 .header-wrapper .header, body.page-id-2561 .header-wrapper { background: #2E1338 !important; } /* ---------- 00 Hero: Type Only, Lilac panel framed 16 / 20 ---------- */ body.page-id-2561 .ct2-hero-type { margin: 112px 16px 0; border-radius: 20px; overflow: clip; position: relative; --ct2-hero-top: 0px; padding-top: 0 !important; isolation: isolate; } body.page-id-2561 .ct2-hero-type .ct2-ht { position: relative; min-height: 720px; padding: 110px 0 0 !important; box-sizing: border-box; } body.page-id-2561 .ct2-hero-type::after { content: ''; position: absolute; z-index: 0; right: -208px; bottom: -260px; width: 520px; height: 520px; border-radius: 50%; background: #FF9E5E; } body.page-id-2561 .ct2-hero-type .ct2-ht { z-index: 1; } body.page-id-2561 .ct2-hero-type .ct2-hero-title.ct2-display { font-size: clamp(120px, 16.47vw, 280px) !important; line-height: .86 !important; letter-spacing: 0; color: #2E1338 !important; margin: 0; text-wrap: nowrap; } body.page-id-2561 .ct2-hero-type .ct2-hero-title .atx-out { color: transparent !important; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; opacity: 1; } body.page-id-2561 .ct2-hero-type .ct2-hero-title .atx-acc { color: #A33D15 !important; opacity: 1; font-size: 1.13em; line-height: .8; } body.page-id-2561 .ct2-hero-type .ct2-hero-sentence { position: absolute; left: 840px; top: 120px; width: 460px; max-width: 460px; margin: 0; font: italic 400 30px/1.2 'Instrument Serif', Georgia, serif !important; color: #2E1338 !important; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons { position: absolute; left: 840px; top: 250px; margin: 0; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons .button { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons .button:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 01 Countdown Band (framed, Mulberry) ---------- */ body .atx-countdown { position: relative; } body .atx-countdown::before { content: ''; position: absolute; z-index: 0; right: 0; top: 64px; width: 360px; height: 360px; border-radius: 50%; background: #CDB9F2; } body .atx-countdown .section { position: relative; z-index: 1; } body .atx-countdown .ct3-countdown { display: block; position: relative; } body .atx-countdown .ct3-cd-img { position: absolute; top: 0; right: 0; width: 420px; aspect-ratio: 7 / 4; border-radius: 20px; z-index: 2; } body .atx-countdown .ct2-head { max-width: 760px; } body .atx-countdown .ct2-head { min-height: 240px; } body .atx.atx-countdown .ct2-head h2.titles { color: #fff !important; } body .atx.atx-countdown .ct2-head h2.titles .atx-acc { color: #FF9E5E !important; } body .atx.atx-countdown .ct2-head .small-titles { color: #FF9E5E !important; } body .atx-countdown .ct3-cd-clock { display: grid; grid-template-columns: repeat(4, 325px); gap: 0; margin-top: 76px; } body .atx-countdown .ct3-cd-unit { justify-items: start; gap: 12px; padding-left: 40px; border-left: 1px solid #5A4263; min-width: 0; } body .atx-countdown .ct3-cd-unit:first-child { padding-left: 0; border-left: 0; } body .atx-countdown .ct3-cd-n { font-size: clamp(110px, 11.76vw, 200px) !important; line-height: .9; letter-spacing: 0; color: transparent !important; -webkit-text-stroke: 2.5px #FF9E5E; paint-order: stroke fill; } body .atx-countdown .ct3-cd-l { font: 600 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; opacity: 1; color: #fff; } body .atx.atx-countdown .ct3-cd-where.small-titles { display: block; margin: 40px 0 0; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; text-transform: none; color: #fff; } body .atx.atx-countdown .ct3-cd-where.small-titles::before { display: none; } body .atx-countdown .ct2-buttons { margin-top: 40px; } /* ---------- 02 Schedule: the Up Next board as three white cards ---------- */ body .atx-weekly { overflow: clip; } body .atx-weekly .ct3-hs-body { position: relative; z-index: 2; padding: 0; } body .atx-weekly .ct3-hs-body p { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #4A3D52; max-width: 560px; } body .atx-weekly .ct3-board { position: relative; } body .atx-weekly .ct3-board::before { content: ''; position: absolute; z-index: 0; left: -143px; top: 30px; width: 400px; height: 400px; border-radius: 50%; background: #FF9E5E; } body .atx-weekly .ct3-board-rows { position: relative; z-index: 1; border-top: 0; display: grid; grid-template-columns: repeat(3, 400px); justify-content: space-between; gap: 50px; } body .atx-weekly .ct3-board-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'day in' 'time time' 'what what'; gap: 0; padding: 40px; background: #fff; border: 0; border-top: 6px solid transparent; border-radius: 20px; align-content: start; } body .atx-weekly .ct3-board-row.ct2-tag-sec { border-top-color: #FF9E5E; } body .atx-weekly .ct3-board-row.ct2-tag-main { border-top-color: #2E1338; } body .atx-weekly .ct3-board-row.ct2-tag-fourth { border-top-color: #CDB9F2; } body .atx-weekly .ct3-board-when { display: contents; } body .atx-weekly .ct3-board-day { grid-area: day; font: 600 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #4A3D52; opacity: 1; } body .atx-weekly .ct3-board-time { grid-area: time; margin: 16px 0 20px; font: 400 80px/.95 'Anton', sans-serif; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; white-space: nowrap; } body .atx-weekly .ct3-board-in { grid-area: in; justify-self: end; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; color: #B8481A; opacity: 1; padding: 0 !important; background: none !important; } body .atx-weekly .ct3-board-row.is-next .ct3-board-in { background: none; color: #B8481A; } body .atx-weekly .ct3-board-what { grid-area: what; gap: 6px; } body .atx-weekly .ct3-board-title, body .atx-weekly .ct3-board-row.is-next .ct3-board-title { font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; text-transform: none; color: #2E1338; } body .atx-weekly .ct3-board-meta { font: 400 16px/1.4 'Schibsted Grotesk', sans-serif; color: #4A3D52; opacity: 1; } /* ---------- 03 ribbon sits flat between the schedule and the wall (no overlap) ---------- */ body .atx-ribbon.atx-ev-ribbon { margin-top: 0; } /* ---------- 04 The events wall ---------- */ body .atx-wall .ct3-filter { gap: 10px; margin-bottom: 0; } body .atx-wall .ct3-chip { font: 600 14px/1 'Schibsted Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px; border: 1.5px solid #2E1338; border-radius: 0; background: transparent; color: #2E1338; } body .atx-wall .ct3-chip[aria-pressed="true"] { background: #2E1338; color: #fff; } body .atx-wall .ct3-chip[data-key="worship"] { order: 1; } body .atx-wall .ct3-chip[data-key="kids"] { order: 2; } body .atx-wall .ct3-chip[data-key="students"] { order: 3; } body .atx-wall .ct3-chip[data-key="women"] { order: 4; } body .atx.atx-wall .grid-flex .panel h2.small-titles { display: block; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; text-transform: none; color: #B8481A !important; margin: 10px 0 0; } body .atx.atx-wall .grid-flex .panel h2.small-titles::before { display: none; } body .atx-wall .grid-flex .panel .titles.medium, body .atx-wall .grid-flex .panel .titles.medium a { color: #2E1338; } body .atx-wall .section .ct2-buttons .button, body .atx-wall .section .button.button-black, body .atx-wall .section a.button { background: #2E1338 !important; color: #fff !important; } @media (min-width: 1001px) { body .atx-wall .grid-flex > .panel:nth-child(3n+2) { margin-top: 80px; } body .atx-wall:has(.ct3-chip.is-on:not([data-key=""])) .grid-flex > .panel { margin-top: 0; } } /* ---------- Tablets ---------- */ @media (max-width: 1200px) and (min-width: 768px) { body.page-id-2561 .ct2-hero-type .ct2-ht { padding-bottom: 260px !important; } body.page-id-2561 .ct2-hero-type .ct2-hero-sentence { position: static; width: auto; max-width: 460px; margin-top: 36px; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons { position: static; margin-top: 28px; } body .atx-countdown .ct3-cd-clock { grid-template-columns: repeat(4, 1fr); } body .atx-countdown .ct3-cd-unit { padding-left: 20px; } body .atx-countdown .ct3-cd-n { font-size: clamp(80px, 10vw, 120px) !important; } body .atx-weekly .ct3-board-rows { grid-template-columns: repeat(3, 1fr); gap: 24px; } body .atx-weekly .ct3-board-row { padding: 28px; } body .atx-weekly .ct3-board-time { font-size: 52px; } body .atx-weekly .ct3-board::before { left: -60px; } } @media (max-width: 1000px) and (min-width: 768px) { body .atx-weekly .ct3-board-rows { grid-template-columns: 1fr; } body .atx-weekly .ct3-board-time { font-size: 64px; } } /* ---------- Phones ---------- */ @media (max-width: 767px) { body.page-id-2561 .ct2-hero-type { margin: 144px 10px 0; border-radius: 14px; } body.page-id-2561 .ct2-hero-type .ct2-ht { min-height: 0; padding: 28px 10px 150px !important; margin: 0 !important; } body.page-id-2561 .ct2-hero-type::after { width: 260px; height: 260px; right: -90px; bottom: -130px; } body.page-id-2561 .ct2-hero-type .ct2-hero-title.ct2-display { font-size: 60px !important; line-height: .95 !important; } body.page-id-2561 .ct2-hero-type .ct2-hero-title .atx-out { display: block; font-size: 120px; line-height: .82; } body.page-id-2561 .ct2-hero-type .ct2-hero-sentence { position: static; width: auto; max-width: none; font-size: 24px !important; margin: 24px 0 0; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons { position: static; margin-top: 24px; } body.page-id-2561 .ct2-hero-type .ct2-hero-buttons .button { display: block; text-align: center; } body .atx-countdown::before { width: 200px; height: 200px; top: 20px; right: -40px; } body .atx-countdown .ct3-cd-img { position: relative; width: 100%; margin-bottom: 30px; } body .atx-countdown .ct2-head { min-height: 0; } body .atx-countdown .ct2-head h2 { font-size: 40px !important; line-height: 46px !important; } body .atx-countdown .ct3-cd-clock { grid-template-columns: 1fr 1fr; margin-top: 30px; row-gap: 30px; } body .atx-countdown .ct3-cd-unit, body .atx-countdown .ct3-cd-unit:nth-child(odd) { padding-left: 0; border-left: 0; } body .atx-countdown .ct3-cd-unit:nth-child(n+3) { border-top: 1px solid #5A4263; padding-top: 24px; } body .atx-countdown .ct3-cd-n { font-size: 110px !important; } body .atx-countdown .ct2-buttons .button { display: block; text-align: center; } body .atx-weekly .ct3-board::before { width: 200px; height: 200px; left: auto; right: 10px; top: -20px; } body .atx-weekly .ct3-board-rows { grid-template-columns: 1fr; gap: 16px; } body .atx-weekly .ct3-board-row { padding: 30px; } body .atx-weekly .ct3-board-time { font-size: 44px; margin: 10px 0 14px; } body .atx-weekly .ct3-board-row { grid-template-columns: 1fr auto; } body .atx-wall .ct3-filter { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding-right: 20px; } body .atx-wall .ct3-chip { flex: none; } } /* Antioch Give (page 2562). Hooks: body.page-id-2562 (hero) and the atx classes set in tools/build-give.php. Section spacing is never set here (ACF fields only). Shared panel/eyebrow/accent rules come from home.css. */ /* ---------- 00 Hero: Classic, contained photo card ---------- */ body.page-id-2562 .hero-contained-wrap { padding: 16px 16px 0; } body.page-id-2562 .hero-contained-wrap > .relative { max-width: none; border-radius: 20px; } body.page-id-2562 .hero-contained-wrap .page-hero, body.page-id-2562 .hero-contained-wrap .secondary-hero, body.page-id-2562 .hero-contained-wrap .overlay { height: 820px !important; min-height: 820px; box-sizing: border-box; } body.page-id-2562 .hero-contained-wrap .overlay, body.page-id-2562 .hero-contained-wrap .overlay.pad-t-320 { box-sizing: border-box; display: flex; align-items: flex-end; padding: 0 0 100px !important; } body.page-id-2562 .hero-contained-wrap .hero-content { width: calc(100% - 2 * clamp(24px, 6vw, 60px)); max-width: 1300px; margin: 0 auto; padding: 0; } body.page-id-2562 .hero-contained-wrap .hero-content .small-titles { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #FF9E5E !important; margin: 0 0 24px; } body.page-id-2562 .hero-contained-wrap .hero-content .small-titles::before { content: ''; flex: none; width: 40px; height: 2px; background: currentColor; } body.page-id-2562 .hero-contained-wrap .hero-content h1 { font-size: clamp(64px, 8.8vw, 150px) !important; line-height: .88; letter-spacing: 0; text-transform: uppercase; color: #fff; margin: 0; } body.page-id-2562 .hero-contained-wrap .hero-content h1 .atx-acc { display: block; font-size: 1.13em; line-height: .8; color: #FF9E5E !important; margin-top: 4px; } body.page-id-2562 .hero-contained-wrap .hero-content p { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; color: #fff; margin: 34px 0 0; } body.page-id-2562 .hero-contained-wrap .hero-content .buttons-center { margin-top: 32px !important; } /* outline circle crossing the card's top-right corner (Apricot: a Main stroke disappears on the dark photo) */ body.page-id-2562 .hero-contained-wrap > .relative::before { content: ''; position: absolute; z-index: 5; right: -342px; top: -90px; width: 520px; height: 520px; border-radius: 50%; border: 2px solid #FF9E5E; pointer-events: none; } @media (max-width: 1199px) { body.page-id-2562 .hero-contained-wrap > .relative::before { display: none; } } @media (max-width: 767px) { body.page-id-2562 .hero-contained-wrap { padding: 10px 10px 0; } body.page-id-2562 .hero-contained-wrap > .relative { border-radius: 14px; } body.page-id-2562 .hero-contained-wrap .page-hero, body.page-id-2562 .hero-contained-wrap .secondary-hero, body.page-id-2562 .hero-contained-wrap .overlay { height: 600px !important; min-height: 600px; } body.page-id-2562 .hero-contained-wrap .overlay, body.page-id-2562 .hero-contained-wrap .overlay.pad-t-320 { padding: 0 20px 40px !important; } body.page-id-2562 .hero-contained-wrap .hero-content h1 { font-size: 64px !important; line-height: 1; } body.page-id-2562 .hero-contained-wrap .hero-content h1 .atx-acc { font-size: 72px; line-height: .9; } body.page-id-2562 .hero-contained-wrap .hero-content .small-titles { font-size: 16px; } body.page-id-2562 .hero-contained-wrap .hero-content p { font-size: 18px; margin-top: 20px; } body.page-id-2562 .hero-contained-wrap .hero-content .button { display: block; text-align: center; } body.page-id-2562 .hero-contained-wrap > .relative::before { width: 260px; height: 260px; right: -120px; top: -70px; } } /* ---------- 01 An Act of Worship (Titles with Content on Right) ---------- */ body .atx-give-intro { position: relative; overflow: clip; } body .atx-give-intro .section { position: relative; z-index: 2; } body .atx-give-intro::after { content: ''; position: absolute; z-index: 1; left: calc(50% - 650px); bottom: -180px; width: 360px; height: 360px; border-radius: 50%; background: #FF9E5E; pointer-events: none; } body .atx-give-intro .image-content { display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 80px; align-items: start; } body .atx-give-intro .image-content > .left, body .atx-give-intro .image-content > .right { width: auto; float: none; padding: 0; } body .atx-give-intro .image-content > .push { display: none; } body .atx-give-intro .titles { font-size: clamp(60px, 7.06vw, 120px) !important; line-height: .9 !important; letter-spacing: 0; color: #2E1338; } body .atx-give-intro .titles .atx-acc { display: block; line-height: .75; color: #B8481A !important; } body .atx-give-intro .wysiwyg, body .atx-give-intro .wysiwyg p { font-size: 20px; line-height: 1.6; color: #4A3D52; } body .atx-give-intro .right { padding-top: 6px; } @media (max-width: 900px) { body .atx-give-intro .image-content { grid-template-columns: 1fr; row-gap: 32px; } body .atx-give-intro .titles { font-size: 60px !important; line-height: .95 !important; } body .atx-give-intro::after { display: none; } body .atx-give-intro .wysiwyg, body .atx-give-intro .wysiwyg p { font-size: 18px !important; line-height: 1.6 !important; } body .atx-give-intro .right .button { display: block; text-align: center; margin-right: 0; } } /* ---------- 02 Two Ways to Give (Text Rows on Lilac) ---------- */ body .atx-ways .titles:not(.medium) { font-size: 60px; line-height: .95; color: #2E1338; } body .atx-ways .small-titles:not(.ct2-tr-meta) { color: #2E1338; } body .atx-ways .ct2-text-rows { border-top: 1px solid #2E1338; } body .atx-ways .ct2-tr { display: grid; grid-template-columns: 120px 296px minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: center; padding: 40px 0; border-bottom: 1px solid #2E1338; } body .atx-ways .ct2-tr-label { display: contents; } body .atx-ways .ct2-tr-n { grid-column: 1; grid-row: 1 / span 2; align-self: center; font: 400 80px/.95 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; opacity: 1; } body .atx-ways .ct2-tr-label .titles { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 400 40px/1.1 'Anton', sans-serif !important; text-transform: uppercase; color: #2E1338; margin: 0; } body .atx.atx-ways .small-titles.ct2-tr-meta { grid-column: 3; grid-row: 1; align-self: end; display: block; font: 600 16px/21px 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; color: #2E1338 !important; opacity: 1; margin: 0 0 12px; } body .atx.atx-ways .small-titles.ct2-tr-meta::before { display: none !important; } body .atx-ways .ct2-tr-text { grid-column: 3; grid-row: 2; align-self: start; } body .atx-ways .ct2-tr-text .wysiwyg, body .atx-ways .ct2-tr-text .wysiwyg p { font: 400 20px/32px 'Schibsted Grotesk', sans-serif; color: #2E1338; } body .atx-ways .ct2-tr-link { display: inline-block; margin-top: 16px; padding-bottom: 6px; border-bottom: 2px solid #2E1338; font: 700 18px/1 'Schibsted Grotesk', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #2E1338; } body .atx-ways a.ct2-tr-link, body .atx-ways a.ct2-tr-link.link-arrow { background-image: none !important; padding-right: 0 !important; } body .atx-ways a.ct2-tr-link::after, body .atx-ways a.ct2-tr-link::before { display: none !important; } @media (max-width: 800px) { body .atx-ways .titles:not(.medium) { font-size: 40px; } body .atx-ways .ct2-tr { grid-template-columns: 56px minmax(0, 1fr); padding: 28px 0; row-gap: 12px; align-items: start; } body .atx-ways .ct2-tr-n { grid-row: 1; font-size: 44px; } body .atx-ways .ct2-tr-label .titles { grid-column: 2; grid-row: 1; font-size: 32px !important; } body .atx.atx-ways .small-titles.ct2-tr-meta { grid-column: 1 / -1; grid-row: 2; margin: 0; } body .atx-ways .ct2-tr-text { grid-column: 1 / -1; grid-row: 3; } body .atx-ways .ct2-tr-text .wysiwyg, body .atx-ways .ct2-tr-text .wysiwyg p { font-size: 18px !important; line-height: 28px !important; } } /* ---------- 03 Room to Grow (Campaign Progress, bar, on Mulberry) ---------- */ body .atx-campaign { position: relative; } body .atx-campaign::before { content: ''; position: absolute; z-index: 0; left: -380px; top: 176px; width: 560px; height: 560px; border-radius: 50%; background: #CDB9F2; pointer-events: none; } body .atx-campaign .section { position: relative; z-index: 2; } body .atx-campaign .titles:not(.small-titles) { font-size: 60px; line-height: .95; color: #fff !important; } body .atx-campaign .ct3-cp-copy .wysiwyg, body .atx-campaign .ct3-cp-copy .wysiwyg p { font-size: 20px; line-height: 1.6; color: #fff !important; } body .atx-campaign .ct3-cp-copy .titles { margin-bottom: 20px !important; } body .atx-campaign .ct3-cp-top { grid-template-columns: 1fr; gap: 0; } body .atx-campaign .ct3-cp-figures { text-align: left; display: flex; align-items: baseline; gap: 24px; margin-top: 40px; flex-wrap: wrap; align-items: center; } body .atx-campaign .ct3-cp-raised { font: 400 clamp(90px, 11.8vw, 200px)/.85 'Anton', sans-serif !important; letter-spacing: 0; color: transparent !important; -webkit-text-stroke: 2.5px #FF9E5E; paint-order: stroke fill; } body .atx-campaign .ct3-cp-pre { font-size: 1em; vertical-align: baseline; margin: 0; } body .atx-campaign .ct3-cp-goal { margin: 0; padding-top: 36px; opacity: 1; font: 400 16px/21px 'Schibsted Grotesk', sans-serif; color: #fff; } body .atx-campaign .ct3-cp-goal::first-line { font: 700 20px/26px 'Schibsted Grotesk', sans-serif; } body .atx-campaign .ct3-cp-dot { display: block; height: 6px; font-size: 0; margin: 0; } body .atx-campaign .ct3-cp-track { margin: 70px 0 143px; height: 24px; background: rgba(255, 255, 255, .3); } body .atx-campaign .ct3-cp-bar .ct3-cp-track { height: 24px; border-radius: 0; background: rgba(255, 255, 255, .3); } body .atx-campaign .ct3-cp-fill, body .atx-campaign .ct3-cp-bar .ct3-cp-fill { background: #FF9E5E !important; border-radius: 0; } body .atx-campaign .ct3-cp-bar { --ct3-faint: rgba(255, 255, 255, .3); } body .atx-campaign .ct3-cp-now { bottom: 36px; font: 500 20px/26px 'Schibsted Grotesk', sans-serif; color: #FF9E5E !important; } body .atx-campaign .ct3-cp-bar .ct3-cp-ms { top: 24px; height: 20px; width: 2px; background: #fff; opacity: 1; } body .atx-campaign .ct3-cp-ms.is-reached, body .atx-campaign .ct3-cp-ms-list li.is-reached::before { background: #FF9E5E; border-color: #FF9E5E; } body .atx-campaign .ct3-cp-ms-amount { top: 54px; font: 700 20px/26px 'Schibsted Grotesk', sans-serif; color: #fff; } body .atx-campaign .ct3-cp-ms-label { top: 86px; font: 400 16px/21px 'Schibsted Grotesk', sans-serif; opacity: 1; color: #fff; } body .atx-campaign .ct3-cp-ms.is-reached .ct3-cp-ms-amount, body .atx-campaign .ct3-cp-ms.is-reached .ct3-cp-ms-label { color: #FF9E5E; } body .atx-campaign .ct3-cp-ms-amount, body .atx-campaign .ct3-cp-ms-label { left: 12px; transform: none; } body .atx-campaign .ct3-cp-foot { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); } body .atx-campaign .ct3-cp-deadline { font: 400 16px/21px 'Schibsted Grotesk', sans-serif; opacity: 1; color: #fff; } @media (max-width: 767px) { body .atx-campaign::before { width: 240px; height: 240px; left: auto; right: -80px; top: auto; bottom: -60px; } body .atx-campaign .titles:not(.small-titles) { font-size: 40px; } body .atx-campaign .ct3-cp-figures { flex-direction: column; align-items: flex-start; gap: 12px; } body .atx-campaign .ct3-cp-goal { padding-top: 0; } body .atx-campaign .ct3-cp-copy .wysiwyg, body .atx-campaign .ct3-cp-copy .wysiwyg p { font-size: 18px !important; line-height: 1.6 !important; } body .atx-campaign .ct3-cp-raised { font-size: clamp(64px, 23vw, 90px) !important; } body .atx-campaign .ct3-cp-track { margin: 60px 0 24px; } body .atx-campaign .ct3-cp-ms-list { margin-bottom: 32px; } body .atx-campaign .ct3-cp-ms-list li { font-size: 16px; color: #fff; } body .atx-campaign .ct3-cp-ms-list li.is-reached { color: #FF9E5E; } body .atx-campaign .ct3-cp-foot .button { text-align: center; } } /* ---------- 04 Give Today (CTA Banner on Apricot, flat marquee line) ---------- */ body .atx-give-cta { position: relative; } body .atx-give-cta .ct2-cta-display .titles:not(.small-titles):not(.headline) { font-size: clamp(60px, 7.06vw, 120px) !important; line-height: 1 !important; letter-spacing: 0; color: #2E1338; max-width: none; } body .atx-give-cta .titles .atx-acc { font-size: 1.13em; color: #2E1338 !important; line-height: .7; } body .atx-give-cta .wysiwyg, body .atx-give-cta .wysiwyg p { color: #2E1338 !important; max-width: 600px; font-size: 20px; line-height: 1.6; } body .atx-give-cta .ct2-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } body .atx-give-cta a.button.button-black { background: #2E1338 !important; color: #fff !important; } body .atx-give-cta a.button:not(.button-black) { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body .atx-give-cta a.button:not(.button-black):hover { background: #2E1338 !important; color: #fff !important; } body .atx-give-cta .ct2-cta-mq { margin: 76px calc(50% - 50vw) 0; width: auto; max-width: none; opacity: 1; border-top: 1px solid #2E1338; font: 400 40px/1 'Anton', sans-serif; text-transform: uppercase; color: #2E1338; padding: 30px 0; transform: none; background: transparent; } body .atx-give-cta .ct2-cta-mq .ct2-mq-item { color: #2E1338; font-size: 40px; } body .atx-give-cta .ct2-cta-mq .ct2-mq-sep { font-size: 0; opacity: 1; margin: 0 28px; } body .atx-give-cta .ct2-cta-mq .ct2-mq-sep::before { content: '\2726'; font: 400 20px/1 sans-serif; color: #2E1338; } @media (max-width: 767px) { body .atx-give-cta .ct2-cta-display .titles:not(.small-titles):not(.headline) { font-size: 60px !important; line-height: 1.1 !important; } body .atx-give-cta .wysiwyg, body .atx-give-cta .wysiwyg p { font-size: 18px !important; } body .atx-give-cta .ct2-buttons { flex-direction: column; align-items: stretch; } body .atx-give-cta .ct2-buttons a.button { text-align: center; } body .atx-give-cta .ct2-cta-mq { margin-top: 60px; font-size: 30px; padding: 22px 0; } body .atx-give-cta .ct2-cta-mq .ct2-mq-item { font-size: 30px; } } /* Antioch Home (page 7). Every rule hangs off the atx classes set in tools/build-home.php. Section spacing is never set here (ACF fields only). Big sizes use clamp() because Branding stops at 100px. */ /* ---------- Shared on this page: framed panels, eyebrows ---------- */ body .atx-frame { margin: 16px; border-radius: 20px; overflow: clip; } body .atx .small-titles:not(.ct-slide-meta):not(dt) { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #B8481A; margin-bottom: 20px; } body .atx .small-titles:not(.ct-slide-meta):not(dt)::before { content: ''; flex: none; width: 40px; height: 2px; background: currentColor; } body .atx.bg-main .small-titles, body .atx .ct-slide-label { color: #FF9E5E; } body .atx-times .small-titles { color: #2E1338; } /* accent word colors follow the real band classes (bg-main / bg-sec) */ body .atx.bg-main .atx-acc, body .atx.bg-black .atx-acc { color: #FF9E5E !important; } body .atx.bg-sec .atx-acc { color: #2E1338 !important; } /* Clay fails 3:1 on Lilac: accent words and am/pm there use #A33D15 */ body .atx.bg-fourth .atx-acc, body .atx.bg-fourth .atx-unit { color: #A33D15 !important; } @media (max-width: 767px) { body .atx-frame { margin: 10px; border-radius: 14px; } body .atx .small-titles:not(.ct-slide-meta):not(dt) { font-size: 16px; } } /* ---------- 00 Hero: Headline Card ---------- */ body .ct2-hero-card .ct4-hc-top { padding-left: clamp(22px, 10.8vw, 184px); padding-right: 22px; padding-top: clamp(150px, 13.9vw, 236px); } body .ct2-hero-card.is-under-header .ct4-hc-top { padding-top: clamp(150px, 13.9vw, 236px); } body .ct2-hero-card .ct2-hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 20px; } body .ct2-hero-card .ct2-hero-eyebrow::before { content: ''; flex: none; width: 40px; height: 2px; background: #fff; } body .ct2-hero .ct4-hc-title { font-size: clamp(64px, 9vw, 150px); line-height: .88; max-width: none; letter-spacing: 0; } body .ct2-hero .ct4-hc-title .atx-out { color: transparent !important; opacity: 1; -webkit-text-stroke: 2.5px #fff; paint-order: stroke fill; } body .ct2-hero .ct4-hc-title .atx-acc { color: #FF9E5E !important; opacity: 1; font-size: 1.13em; line-height: .5; } body .ct4-hc-top .ct2-hero-sentence { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif; max-width: 520px; margin-top: 34px; color: #fff; } body .ct4-hc-bottom { align-items: flex-end; } body .ct4-hc-tabs { flex: none; margin-left: auto; gap: 0 44px; padding: 0 0 123px 0; } body .ct4-hc-tab { font: 600 18px/22px 'Schibsted Grotesk', sans-serif; padding: 0 0 8px; color: #fff !important; border-bottom: 3px solid transparent; } body .ct4-hc-tab.is-on, body a.ct4-hc-tab:hover { border-bottom-color: #FF9E5E; } body .ct4-hc-count { margin-left: 0; gap: 22px; padding: 0 clamp(22px, 12.1vw, 206px) 118px 26px; font: 500 16px/1 'Schibsted Grotesk', sans-serif; color: #fff; } body .ct4-hc-bar { width: 130px; background: rgba(255, 255, 255, .3); } body .ct4-hc-bar i { background: #FF9E5E; } body .ct4-hc-pause { width: 48px; height: 48px; border-radius: 0; border: 2px solid #fff; } body .ct4-hc-notch { padding-bottom: 14px; } @media (max-width: 767px) { body .ct2-hero .ct4-hc-title { line-height: .95; } body .ct2-hero .ct4-hc-title .atx-acc { display: block; font-size: 72px; line-height: .9; margin-top: 6px; } body .ct4-hc-card { height: 720px; min-height: 720px; } body .ct2-hero-card .ct4-hc-top, body .ct2-hero-card.is-under-header .ct4-hc-top { padding: 200px 20px 0 20px; } body .ct4-hc-top .ct2-hero-sentence { font-size: 18px !important; line-height: 1.6; margin-top: 18px; max-width: 320px; } body .ct4-hc-notch .button { padding: 19px 24px !important; } body .ct4-hc-tabs { padding: 0 20px 14px; margin-left: 0; gap: 0 22px; } body .ct4-hc-count { display: none; } } /* ---------- 01 Ribbon (Marquee Band) ---------- */ body .atx-ribbon { position: relative; z-index: 4; overflow-x: clip; background: transparent !important; } body .atx-ribbon { margin-top: -40px; } body .atx-ribbon .section { margin-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .atx-ribbon .div-within-section { width: 100%; max-width: none; margin: 0; padding: 0; } body .atx-ribbon .ct2-marquee { --ct2-tilt: -3deg; width: 104vw; margin-left: -2vw; font-size: clamp(60px, 7.06vw, 120px) !important; line-height: 1; padding: .05em 0; background: #FF9E5E; color: #2E1338; transform: rotate(-3deg); } body .atx-ribbon .ct2-mq-item { font-size: 1em; color: #2E1338; } body .atx-ribbon .ct2-mq-item.is-alt { opacity: 1; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; } body .atx-ribbon .ct2-mq-sep { color: #2E1338; opacity: 1; } body .atx-ribbon .ct2-mq-track { animation-duration: 40s; } @media (max-width: 767px) { body .atx-ribbon { margin-top: 0; } } /* ---------- 02 Statement: Who We Are ---------- */ body .atx-who { position: relative; isolation: isolate; overflow-x: clip; } body .atx-who .ct2-stm-text { font: 600 clamp(30px, 2.94vw, 50px)/1.18 'Schibsted Grotesk', sans-serif; letter-spacing: -.02em; text-transform: none; color: #2E1338; margin-top: 0; } body .atx-who .ct2-stm-text strong { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.16em; letter-spacing: -.01em; color: #B8481A; line-height: 1; } body .atx-who .ct4-stm-pill { width: 2.7em; height: 1em; margin: 0 .1em; vertical-align: -.12em; } body .atx-who .section { z-index: 3; } body .atx-who::after { content: ''; position: absolute; z-index: 1; left: calc(50% - 19px); top: 244px; width: 360px; height: 180px; border-radius: 180px 180px 0 0; background: #CDB9F2; pointer-events: none; } body .atx-who .button { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body .atx-who .button:hover { background: #2E1338 !important; color: #fff !important; } @media (max-width: 767px) { body .atx-who::after { display: none; } body .atx-who .ct2-stm-text { position: relative; } body .atx-who .ct2-stm-text::after { content: ''; position: absolute; z-index: -1; left: 8px; bottom: -8px; width: 200px; height: 100px; border-radius: 100px 100px 0 0; background: #CDB9F2; pointer-events: none; } } /* ---------- 03 Quicklinks ---------- */ body .atx-ql .quicklink-panels { counter-reset: ql; align-items: flex-start; } body .atx-ql .quicklink-panels .panel { counter-increment: ql; } body .atx-ql .quicklink-panels .panel:nth-child(even) { margin-top: 80px !important; } body .atx-ql .image-wrapper-portrait { height: 460px; padding: 0 !important; } body .atx-ql .quicklink-panels .anchor-panel { background: linear-gradient(0deg, rgba(46, 19, 56, .6) 0%, rgba(46, 19, 56, 0) 55%) !important; } body .atx-ql .quicklink-panels .anchor-panel:hover { background: linear-gradient(0deg, rgba(46, 19, 56, .7) 0%, rgba(46, 19, 56, .1) 60%) !important; } body .atx-ql .quicklink-panels h2 { padding: 0 24px 24px !important; font-size: 40px; line-height: 1; letter-spacing: .005em; color: #fff; } body .atx-ql .quicklink-panels h2::before { content: counter(ql, decimal-leading-zero); display: block; color: #FF9E5E; margin-bottom: 4px; } body .atx-ql .quicklink-panels h2::after { content: '\00a0\2192'; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: .7em; } @media (max-width: 767px) { body .atx-ql .quicklink-panels { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-top: 40px !important; } body .atx-ql .quicklink-panels > .panel { flex: none !important; max-width: none !important; width: auto !important; } body .atx-ql .quicklink-panels .panel:nth-child(3) { margin-top: -40px !important; } body .atx-ql .quicklink-panels .panel:nth-child(4) { margin-top: 0 !important; } body .atx-ql .image-wrapper-portrait { height: 252px; } body .atx-ql .quicklink-panels .panel:nth-child(even) { margin-top: 40px !important; } body .atx-ql .quicklink-panels h2 { font-size: 30px; padding: 0 14px 16px !important; } } /* ---------- 04 Collage: You're Welcome Here! ---------- */ body .atx-welcome { position: relative; } body .atx-welcome .ct2-collage { display: grid; grid-template-columns: 796px minmax(0, 440px); column-gap: 64px; align-items: center; } body .atx-welcome .ct2-cl-media { aspect-ratio: auto; height: 900px; max-width: none; } body .atx-welcome .ct2-cl-media::before { content: ''; position: absolute; left: -224px; top: 260px; width: 620px; height: 620px; border-radius: 50%; background: #CDB9F2; } body .atx-welcome .ct2-cl-img { inset: auto; box-shadow: none; border-radius: 20px; outline: 0; } body .atx-welcome .ct2-cl-img-1 { left: 90px; top: 40px; width: 560px; height: 700px; } body .atx-welcome .ct2-cl-img-2 { left: 416px; top: 580px; width: 380px; height: 300px; z-index: 2; } body .atx-welcome .ct2-cl-img-3 { left: 0; top: -40px; width: 260px; height: 350px; z-index: 2; } body .atx-welcome .ct2-cl-badge { left: 548px; right: auto; top: -37px; width: 180px; height: 180px; padding: 0 8px; background: #FF9E5E; color: #2E1338; transform: rotate(-8deg); z-index: 3; } body .atx-welcome .ct2-cl-badge span { font: 400 38px/.95 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .005em; } body .atx-welcome .ct2-cl-copy .titles { color: #fff !important; font-size: 60px; line-height: .95; } body .atx-welcome .wysiwyg, body .atx-welcome .wysiwyg p { color: #fff !important; font-size: 20px; line-height: 1.6; } @media (max-width: 1250px) { body .atx-welcome .ct2-collage { grid-template-columns: 1fr; row-gap: 50px; } body .atx-welcome .ct2-cl-media { width: 796px; max-width: 100%; } } @media (max-width: 860px) { body .atx-welcome .ct2-cl-media { height: 450px; width: 100%; max-width: 350px; } body .atx-welcome .ct2-cl-media::before { width: 340px; height: 340px; left: -50px; top: 150px; } body .atx-welcome .ct2-cl-img-1 { left: 40px; top: 30px; width: 270px; height: 360px; } body .atx-welcome .ct2-cl-img-2 { left: 170px; top: 320px; width: 160px; height: 126px; } body .atx-welcome .ct2-cl-img-3 { left: -4px; top: 0; width: 120px; height: 160px; } body .atx-welcome .ct2-cl-badge { left: 220px; right: auto; top: -18px; width: 120px; height: 120px; } body .atx-welcome .ct2-cl-badge span { font-size: 26px; } body .atx-welcome .ct2-cl-copy .titles { font-size: 40px !important; } body .atx-welcome .wysiwyg, body .atx-welcome .wysiwyg p { font-size: 18px !important; } } /* ---------- 05 Gather With Us Weekly (Data Boxes, rows) ---------- */ body .atx-times .ct3-head-split { grid-template-columns: minmax(0, 600px) minmax(0, 560px); justify-content: space-between; align-items: start; } body .atx-times .ct3-head-split .ct3-hs-body .wysiwyg { color: #4A3D52; } body .atx-times .ct3-hs-title h2 { font-size: 60px; line-height: .95; } body .atx-times .grid-flex { border-top: 1px solid #2E1338 !important; } body .atx-times .grid-flex > .panel { grid-template-columns: 740px minmax(0, 1fr) !important; grid-template-rows: 1fr auto auto 1fr; column-gap: 0; row-gap: 6px; align-items: center !important; padding: 30px 0 !important; border-bottom: 1px solid #2E1338 !important; text-align: left; } body .atx-times .grid-flex > .panel .big-numbers { grid-column: 1; grid-row: 1 / 5; align-self: center; font: 400 clamp(110px, 11.76vw, 200px)/.85 'Anton', sans-serif !important; color: transparent !important; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; letter-spacing: 0; text-transform: none; } body .atx-times .atx-unit { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: .34em; line-height: 1; -webkit-text-stroke: 0; color: #B8481A; margin-left: 14px; letter-spacing: 0; } body .atx-times .grid-flex > .panel .big-numbers-labels { grid-column: 2; grid-row: 2; align-self: end; font: 700 20px/26px 'Schibsted Grotesk', sans-serif !important; text-transform: none; letter-spacing: 0; color: #2E1338; } body .atx-times .grid-flex > .panel p { grid-column: 2; grid-row: 3; align-self: start; font: 400 20px/32px 'Schibsted Grotesk', sans-serif; color: #4A3D52; } body .atx-times .grid-flex > .panel hr { display: none; } @media (max-width: 900px) { body .atx-times .ct3-head-split { grid-template-columns: 1fr; } body .atx-times .grid-flex > .panel { grid-template-columns: 1fr !important; grid-template-rows: auto; row-gap: 4px; } body .atx-times .grid-flex > .panel .big-numbers, body .atx-times .grid-flex > .panel .big-numbers-labels, body .atx-times .grid-flex > .panel p { grid-column: 1; grid-row: auto; } } /* ---------- 06 Get Connected (Sticky Story, stacking cards) ---------- */ body .atx-connect .ct2-sticky { grid-template-columns: minmax(0, 420px) minmax(0, 800px); column-gap: 80px; justify-content: space-between; } body .atx-connect .ct2-head h2 { font-size: 60px; line-height: .95; } body .atx-connect .ct2-head h2 .atx-acc { display: block; line-height: 1; } body .atx-connect .ct2-head .wysiwyg { max-width: 400px; } body .atx-connect .ct2-sticky-items { counter-reset: atxst; } body .atx-connect .ct2-st-item { counter-increment: atxst; display: grid; grid-template-columns: 55% 1fr; height: 520px; padding: 0 !important; border: 0 !important; border-radius: 20px; overflow: hidden; box-shadow: none; margin-bottom: 40px !important; color: #2E1338; } body .atx-connect .ct2-st-item:last-child { margin-bottom: 0 !important; } body .atx-connect .ct2-st-item:nth-child(1) { top: 120px; background: #FF9E5E; } body .atx-connect .ct2-st-item:nth-child(2) { top: 144px; background: #CDB9F2; } body .atx-connect .ct2-st-item:nth-child(3) { top: 168px; background: #2E1338; color: #fff; } body .atx-connect .ct2-st-item:nth-child(4) { top: 192px; background: #fff; } body .atx-connect .ct2-st-img { margin: 0 !important; aspect-ratio: auto; height: 100%; border-radius: 0; } body .atx-connect .ct2-st-img img { border-radius: 0 !important; } body .atx-connect .ct2-st-copy { display: flex; flex-direction: column; padding: 40px; min-width: 0; } body .atx-connect .ct2-st-copy::before { content: counter(atxst, decimal-leading-zero); font: 400 120px/.9 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2px #2E1338; margin-bottom: 40px; } body .atx-connect .ct2-st-item:nth-child(3) .ct2-st-copy::before { -webkit-text-stroke-color: #FF9E5E; } body .atx-connect .ct2-st-copy h3 { font: 400 60px/.95 'Anton', sans-serif; text-transform: uppercase; color: inherit !important; margin: 0 0 16px; } body .atx-connect .ct2-st-copy p { font: 400 18px/1.55 'Schibsted Grotesk', sans-serif; color: inherit !important; } body .atx-connect .ct2-st-link { margin-top: auto; font: 700 16px/1.2 'Schibsted Grotesk', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; color: inherit !important; } body .atx-connect .ct2-st-link-text { text-decoration: none; } @media (max-width: 1000px) { body .atx-connect .ct2-sticky { grid-template-columns: 1fr; } body .atx-connect .ct2-st-item:nth-child(n) { top: 16px; } body .atx-connect .ct2-st-item { grid-template-columns: 1fr; grid-template-rows: 260px auto; height: auto; } body .atx-connect .ct2-st-copy::before { font-size: 60px; margin-bottom: 16px; } body .atx-connect .ct2-st-copy h3 { font-size: 40px; } body .atx-connect .ct2-st-copy { padding: 24px; } body .atx-connect .ct2-st-link { margin-top: 24px; } } /* ---------- 07 Photo band ---------- */ body .atx-photo .div-within-section img { display: block; width: 100%; height: 820px; object-fit: cover; object-position: center; } @media (max-width: 767px) { body .atx-photo .div-within-section img { height: 440px; } } /* ---------- 08 Featured Slider: a Mulberry card rising out of the photo ---------- */ body .atx-feature { position: relative; z-index: 5; } body .atx-feature .section { margin-top: -216px !important; } body .atx-feature .ct-featured-slider { box-sizing: border-box; background: #2E1338; color: #fff; border-radius: 20px; padding: 60px; position: relative; } body .atx-feature .ct-featured-slider .ct-slide { grid-template-columns: 700px minmax(0, 1fr); gap: 60px; align-items: center; } body .atx-feature .ct-slide-image { aspect-ratio: auto; height: 460px; } body .atx-feature .ct-slide-title { font: 400 60px/.95 'Anton', sans-serif; color: #fff !important; text-transform: uppercase; margin: 0 0 20px; } body .atx-feature .ct-slide-meta { display: block; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; text-transform: none; color: #E9E1EE !important; opacity: 1; margin-bottom: 28px; } body .atx-feature .ct-slide-content, body .atx-feature .ct-slide-content p { color: #E9E1EE !important; } body .atx-feature .ct-slide-label { margin-bottom: 20px; } body .atx-feature .ct-slide .button { margin-top: 0; } body .atx-feature .ct-featured-slider .owl-nav { position: absolute; right: 60px; bottom: 60px; width: auto; display: flex; gap: 8px; margin: 0; z-index: 3; } body .atx-feature .ct-featured-slider .owl-nav button { position: static !important; transform: none !important; width: 56px; height: 56px; border-radius: 0 !important; background: #FF9E5E !important; margin: 0 !important; display: grid; place-items: center; opacity: 1 !important; } body .atx-feature .ct-featured-slider .owl-nav button { flex: none; } body .atx-feature .ct-featured-slider .owl-nav button span { position: static; transform: none; width: auto; height: auto; display: grid; place-items: center; } body .atx-feature .ct-slide-label { color: #FF9E5E !important; } body .atx-feature .ct-featured-slider .owl-nav svg { width: 14px; height: 26px; } body .atx-feature .ct-featured-slider .owl-nav svg path { fill: #2E1338 !important; } body .atx-feature .ct-featured-slider .owl-dots { display: none; } body .atx-feature .atx-slide-count { position: absolute; right: 60px; top: 52px; z-index: 2; display: flex; align-items: flex-end; gap: 10px; } body .atx-feature .atx-slide-count b { font: 400 120px/.9 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2px #FF9E5E; } body .atx-feature .atx-slide-count span { font: 400 16px/1.3 'Schibsted Grotesk', sans-serif; color: #fff; padding-bottom: 8px; } @media (max-width: 900px) { body .atx-feature .ct-featured-slider { padding: 20px; } body .atx-feature .ct-featured-slider .ct-slide { grid-template-columns: 1fr; gap: 24px; } body .atx-feature .ct-slide-image { height: 220px; } body .atx-feature .ct-slide-title { font-size: 40px; } body .atx-feature .atx-slide-count b { font-size: 60px; } body .atx-feature .atx-slide-count { right: 24px; top: 24px; } body .atx-feature .ct-featured-slider .owl-nav { right: 20px; bottom: 20px; } } /* ---------- 09 CTA: Come As You Are ---------- */ body .atx-cta { position: relative; } body .atx-cta::before { content: ''; position: absolute; z-index: 0; right: -130px; bottom: -331px; width: 560px; height: 560px; border-radius: 50%; border: 2px solid #2E1338; pointer-events: none; } body .atx-cta .section { position: relative; z-index: 2; } body .atx-cta .ct2-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 60px; align-items: start; } body .atx-cta .ct2-cta .ct2-head, body .atx-cta .ct2-cta .ct2-buttons { grid-column: 1; } body .atx-cta .ct2-cta-details { grid-column: 2; grid-row: 1 / span 2; display: block; margin: 16px 0 0; padding: 0; border-top: 1px solid #2E1338; } body .atx-cta .ct2-cta-details > div { padding: 24px 0; border-bottom: 1px solid #2E1338; } body .atx-cta .ct2-cta-details dt { font: 700 20px/26px 'Schibsted Grotesk', sans-serif; text-transform: none; letter-spacing: 0; opacity: 1; margin: 0 0 6px; color: #2E1338 !important; } body .atx-cta .ct2-cta-details dd, body .atx-cta .ct2-cta-details dd a { font: 400 20px/32px 'Schibsted Grotesk', sans-serif; color: #2E1338 !important; } body .atx-cta .ct2-cta-display .titles:not(.small-titles):not(.headline) { font-size: clamp(60px, 7.06vw, 120px) !important; line-height: 1 !important; letter-spacing: 0; color: #2E1338; max-width: 560px; } body .atx-cta .titles .atx-acc { font-size: 1.13em; color: #2E1338; line-height: .7; } body .atx-cta .wysiwyg, body .atx-cta .wysiwyg p { color: #2E1338 !important; max-width: 560px; font-size: 20px; line-height: 1.6; } body .atx-cta .ct2-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } body .atx-cta a.button.button-black { background: #2E1338 !important; color: #fff !important; } body .atx-cta a.button:not(.button-black) { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body .atx-cta a.button:not(.button-black):hover { background: #2E1338 !important; color: #fff !important; } @media (max-width: 900px) { body .atx-cta .ct2-cta { grid-template-columns: 1fr; } body .atx-cta .ct2-cta-details { grid-column: 1; grid-row: auto; margin-top: 40px; } body .atx-cta::before { width: 360px; height: 360px; right: -140px; top: -140px; bottom: auto; } } /* ---------- Motion (classes are added by tools/js/home.js, so nothing is hidden without the script) ---------- */ @media (prefers-reduced-motion: no-preference) { body .atx-rise { opacity: 0; transform: translateY(40px); transition: opacity .6s cubic-bezier(.25, 1, .5, 1) var(--atx-d, 0ms), transform .6s cubic-bezier(.25, 1, .5, 1) var(--atx-d, 0ms); } body .atx-rise.is-in { opacity: 1; transform: none; } body .atx-ql .quicklink-panels .panel.atx-rise { transition-property: opacity, transform, margin; } body .atx-lines { opacity: 0; transform: translateY(40px); transition: opacity .6s cubic-bezier(.25, 1, .5, 1), transform .6s cubic-bezier(.25, 1, .5, 1); } body .atx-lines.is-in { opacity: 1; transform: none; } } /* phones: 20px side margins on every atx band (the framework default is 40) */ @media (max-width: 767px) { body .atx .section { margin-left: 0 !important; margin-right: 0 !important; max-width: none; width: auto; padding-left: 20px !important; padding-right: 20px !important; } body .atx-ribbon .section, body .atx-photo .section { padding-left: 0 !important; padding-right: 0 !important; } body .atx-ql .quicklink-panels h2 { font-size: 30px !important; padding: 0 12px 14px !important; text-wrap: balance; } } /* phones: Titles 40 (the framework shrinks layout titles to 30 on phones) */ @media (max-width: 767px) { body .atx-times .ct3-hs-title h2, body .atx-connect .ct2-head h2, body .atx-welcome .ct2-cl-copy .titles, body .atx-feature .ct-slide-title { font-size: 40px !important; line-height: .95; } body .atx-connect .ct2-st-copy h3 { font-size: 40px !important; } body .atx-times .ct3-hs-body { padding: 0; } body .atx-times .ct3-hs-body .wysiwyg { font-size: 18px; } } body .atx-times .ct3-hs-body { padding: 0; } @media (max-width: 767px) { body .atx-connect .ct2-head h2 .atx-acc { display: inline; } body .atx-connect .ct2-head .wysiwyg p { font-size: 18px; } body .atx-connect .ct2-st-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 20px 20px 24px; } body .atx-connect .ct2-st-copy::before { margin: 0; grid-column: 1; } body .atx-connect .ct2-st-copy h3 { grid-column: 2; margin: 0; } body .atx-connect .ct2-st-copy p, body .atx-connect .ct2-st-link { grid-column: 1 / -1; } body .atx-connect .ct2-st-copy p { margin-top: 16px; font-size: 16px; } body .atx-connect .ct2-st-link { margin-top: 18px; justify-self: start; } } @media (max-width: 767px) { body .atx-feature .section { margin-top: -116px !important; padding-left: 10px !important; padding-right: 10px !important; } body .atx-feature .ct-featured-slider { padding: 20px 20px 96px; } body .atx-feature .atx-slide-count { top: auto; bottom: 28px; left: 20px; right: auto; } body .atx-feature .atx-slide-count b { font-size: 60px; } } @media (max-width: 767px) { body .atx-feature .ct-featured-slider { padding-bottom: 76px; } body .atx-cta .ct2-cta-display .titles:not(.small-titles):not(.headline) { max-width: 260px; } body .atx-cta .wysiwyg, body .atx-cta .wysiwyg p { font-size: 18px !important; line-height: 1.6; } body .atx-cta .ct2-cta-details dt { font-size: 18px !important; line-height: 24px; } body .atx-cta .ct2-cta-details dd, body .atx-cta .ct2-cta-details dd a { font-size: 18px !important; line-height: 28px; } body .atx-cta::before { width: 360px; height: 360px; right: -210px; top: -180px; bottom: auto; } body .atx-cta .ct2-buttons { flex-direction: column; align-items: stretch; } body .atx-cta .ct2-buttons a.button { text-align: center; } } /* Antioch Messages (page 1579). Rules hang off body.page-id-1579 and the atx classes set in tools/build-messages.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / ribbon rules live in home.css (atx-frame, atx-ribbon, .atx .small-titles). */ /* ---------- 00 Hero: Portrait Card on Night, framed 16 / 20 (header over the hero) ---------- */ body.page-id-1579 .ct2-hero-portrait { margin: 16px 16px 0; padding-top: 110px !important; border-radius: 20px; overflow: clip; background: #170A1C !important; position: relative; isolation: isolate; color: #fff; } body.page-id-1579 .header { background-image: none; } body.page-id-1579 .ct2-hero-portrait > .ct4-hp { position: relative; z-index: 1; padding-bottom: 20px !important; } @media (min-width: 768px) { body.page-id-1579 .ct4-hp-media, body.page-id-1579 .ct4-hp-img-right .ct4-hp-media { grid-column: 7 / 13; justify-self: end; width: 560px; max-width: 100%; aspect-ratio: 3 / 4; margin-right: 0; } body.page-id-1579 .ct4-hp-side, body.page-id-1579 .ct4-hp-img-right .ct4-hp-side { grid-column: 1 / 7; padding-top: 104px; padding-bottom: 341px; } } /* Lilac Sun behind the photo, centered on its left edge; its top clears the header */ body.page-id-1579 .ct2-hero-portrait::before { content: ''; position: absolute; z-index: 0; left: calc(55.4% - 240px); top: 200px; width: 480px; height: 480px; border-radius: 50%; background: #CDB9F2; } /* Hero Overlay 60 on the portrait (the Portrait Card layout has no overlay field of its own) */ body.page-id-1579 .ct4-hp-media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); pointer-events: none; } body.page-id-1579 .ct4-hp .ct2-hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #FF9E5E !important; opacity: 1; margin: 0 0 24px; } body.page-id-1579 .ct4-hp .ct2-hero-eyebrow::before { content: ''; flex: none; width: 40px; height: 2px; background: currentColor; } body.page-id-1579 .ct2-hero .ct4-hp-lead { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic; font-weight: 400; font-size: 30px !important; line-height: 1.2; letter-spacing: 0; color: #fff; max-width: 500px; } body.page-id-1579 .ct2-hero .ct4-hp-note { font: 500 20px/1.6 'Schibsted Grotesk', sans-serif; opacity: 1; color: #fff; margin: 0 0 20px; } body.page-id-1579 .ct4-hp-link { color: #FF9E5E !important; font: 700 18px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid #FF9E5E; padding-bottom: 6px; text-decoration: none; } body.page-id-1579 .ct2-hero .ct4-hp-name { font-size: min(19.4vw, 331px, calc((100vw - 120px) / 3.93)) !important; letter-spacing: 0; margin-top: -.785em; line-height: .86 !important; color: #fff !important; font-weight: 400; font-synthesis: none; } body.page-id-1579 .ct2-hero .ct4-hp-loc { font: 500 16px/1.3 'Schibsted Grotesk', sans-serif !important; opacity: 1; color: #fff; } /* ---------- 01 Magazine Cover ---------- */ .atx-cover .ct3-cv-mast { font-weight: 400; font-synthesis: none; font-size: min(18cqi, calc(223cqi / var(--ct3-len))); white-space: nowrap; color: var(--color-sec, #FF9E5E); letter-spacing: 0; } body .atx-cover .ct3-cv-frame { border-radius: 20px; } body .atx.atx-cover .ct3-cv-issue.small-titles:not(.ct-slide-meta):not(dt) { display: block; color: #fff; text-transform: none; letter-spacing: 0; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; margin: 0; } body .atx.atx-cover .small-titles:not(.ct-slide-meta):not(dt)::before { display: none; } body .atx.atx-cover .ct3-cv-kicker.small-titles:not(.ct-slide-meta):not(dt) { display: block; color: #FF9E5E; text-transform: none; letter-spacing: 0; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; font-weight: 500; margin: 0; opacity: 1; } body .atx-cover .ct3-cv-line { gap: 8px; } body .atx-cover .ct3-cv-text { font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; text-transform: none; color: #fff; } body .atx-cover .ct3-cv-text a { color: #fff; text-decoration: none; } body .atx-cover .ct3-cv-foot { text-align: center; } body .atx-cover .ct3-cv-foot .ct2-head .small-titles { display: none; } body .atx-cover .ct3-cv-foot h2 { margin: 0 0 20px; } body .atx-cover .ct3-cv-foot .wysiwyg p { font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; color: #2E1338; margin: 0; } body .atx-cover .button.button-white { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body .atx-cover .button.button-white:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 02 Grids (Recent Messages, framed, Lilac) ---------- */ body .atx-msgs .grid-flex { counter-reset: msg; row-gap: 60px; margin-top: 49px !important; } body .atx-msgs .image-wrapper-rectangle { aspect-ratio: 406 / 264; overflow: hidden; border-radius: 20px; } body .atx-msgs .image-wrapper-rectangle img { display: block; width: 100%; height: 100%; object-fit: cover; } body .atx-msgs .grid-flex > .panel { counter-increment: msg; } body .atx-msgs .panel-content-wrap { position: relative; padding-left: 66px; } body .atx-msgs .panel-content-wrap::before { content: counter(msg, decimal-leading-zero); position: absolute; left: 0; top: 26px; font: 400 40px/1.04 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; } body .atx-msgs .panel-content-wrap h2.titles { margin: 26px 0 14px !important; line-height: 1; } body .atx-msgs .panel-content-wrap h2.titles a { color: #2E1338; } body .atx-msgs .panel-content-wrap h2.job-title-date { display: flex; justify-content: space-between; align-items: baseline; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; color: #2E1338; margin: 0 !important; } body .atx-msgs .panel-content-wrap h2.job-title-date::before { display: none; } body .atx-msgs .panel-content-wrap h2.job-title-date::after { content: 'Watch \2192'; font-weight: 600; } body .atx-msgs .push { display: none; } body .atx-msgs .button { background: #2E1338 !important; color: #fff !important; } body .atx-msgs .button:hover { background: #B8481A !important; } /* ---------- 03 Ribbon: sits under the Lilac panel (no overlap) ---------- */ body.page-id-1579 .atx-ribbon { margin-top: 0; } /* ---------- 04 Series Bento ---------- */ body .atx-series .ct4-series { counter-reset: sr; } body .atx-series .ct4-sr { counter-increment: sr; } body .atx-series .ct4-sr + .ct4-sr { margin-top: 44px; padding-top: 44px; } body .atx-series .ct4-sr-text { background: #fff; border-radius: 20px; padding: 32px !important; } body .atx-series .ct4-sr-index { font-size: 0; opacity: 1; margin: 0 0 20px; } body .atx-series .ct4-sr-index::before { content: counter(sr, decimal-leading-zero); font: 400 80px/.95 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2.5px #2E1338; paint-order: stroke fill; } body .atx-series .ct4-sr-label { font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; color: #B8481A; opacity: 1; margin: 0 0 12px; } body .atx-series .ct4-sr .ct4-sr-title { order: 1; font-size: 40px; color: #2E1338; margin: 0 0 8px !important; } body .atx-series .ct4-sr-label { order: 2; } body .atx-series .ct4-sr-copy { order: 3; } body .atx-series .ct4-sr-link { order: 4; } body .atx-series .ct4-sr-copy { font: 400 16px/1.5 'Schibsted Grotesk', sans-serif; color: #4A3D52; opacity: 1; margin: 0 0 20px; } body .atx-series .ct4-sr-link { color: #2E1338 !important; font: 700 18px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; } body .atx-series .ct2-buttons .button.button-white { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body .atx-series .ct2-buttons .button.button-white:hover { background: #2E1338 !important; color: #fff !important; } /* View All Series: Series Bento Header Buttons, Placement = Beside the Title (framework 3.2.10; full width at the end on phones) */ /* ---------- Phones ---------- */ @media (max-width: 767px) { body.page-id-1579 .ct2-hero-portrait { margin: 6px 10px 0; padding-top: 95px !important; border-radius: 14px; } body.page-id-1579 .ct2-hero-portrait > .ct4-hp { padding-left: 20px !important; padding-right: 20px !important; } body.page-id-1579 .ct4-hp-media { margin-right: -10px; } body.page-id-1579 .ct2-hero-portrait::before { left: -30px; top: 130px; width: 240px; height: 240px; } body.page-id-1579 .ct2-hero-portrait > .ct4-hp { padding-bottom: 28px !important; } body.page-id-1579 .ct4-hp-side { padding-top: 0; padding-bottom: 0; } body.page-id-1579 .ct2-hero .ct4-hp-name { margin-top: -.4em; } body.page-id-1579 .ct2-hero .ct4-hp-note { font-size: 18px; } body .atx-cover .ct3-cv-foot .ct2-head, body .atx-cover .ct3-cv-foot .ct2-head h2, body .atx-cover .ct3-cv-foot .wysiwyg { text-align: left !important; } body .atx-cover .ct3-cv-foot h2 { font-size: 44px; line-height: 1; } body .atx-cover .ct3-cv-foot .ct2-buttons { width: 100%; justify-content: stretch; } body .atx-cover .ct3-cv-foot .ct2-buttons .button { width: 100%; box-sizing: border-box; } body.page-id-1579 .ct2-hero .ct4-hp-lead { font-size: 24px !important; } body.page-id-1579 .ct2-hero .ct4-hp-name { font-size: 21.4vw !important; } body .atx-cover .ct3-cv-frame { border-radius: 14px; } body .atx-cover .ct3-cv-foot { text-align: left; } body .atx-cover .ct3-cv-text { font-size: 20px; } body .atx-cover .ct3-cv-foot .ct2-buttons { display: grid; gap: 16px; } body .atx-cover .ct3-cv-foot .ct2-buttons .button { text-align: center; } body .atx-msgs .grid-flex { row-gap: 40px; } body .atx-msgs .panel-content-wrap::before { font-size: 32px; top: 20px; } body .atx-msgs .panel-content-wrap { padding-left: 54px; } body .atx-series .ct4-sr-text { padding: 24px !important; } } /* the section button floats out of the grid wrapper: keep it inside the band's bottom padding */ body .atx-msgs .div-within-section { display: flow-root; } @media (min-width: 768px) and (max-width: 1100px) { body.page-id-1579 .ct2-hero-portrait::before { width: 340px; height: 340px; left: calc(55.4% - 170px); top: 180px; } } /* Antioch Ministry pages (Kids, Students, College, Adults, Baptism, Serve): children of Connect (parent-pageid-2560). Built by tools/build-ministry.php. Section spacing is never set here (ACF fields only). Hero panel color comes from the real class (.ct2-hp-sec / -fourth / -main / -white); shapes are pseudo-elements. */ /* ---------- 00 Hero: Offset Image, circle on a flat panel ---------- */ /* Header placement Above: solid Main bar (College keeps the transparent header over its Main panel) */ body.parent-pageid-2560:not(.page-id-2758) .header-wrapper .header, body.parent-pageid-2560:not(.page-id-2758) .header-wrapper { background: #2E1338 !important; } body.parent-pageid-2560 .ct2-hero-offset { margin: 112px 16px 0; border-radius: 20px; overflow: clip; padding: 0 !important; --ct2-hero-top: 0px; --min-ink: #2E1338; --min-sun: #CDB9F2; --min-ring: #2E1338; } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-fourth, body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-white { --min-sun: #FF9E5E; } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-main { --min-ink: #fff; --min-sun: #FF9E5E; --min-ring: #fff; margin-top: 16px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho { min-height: 760px; padding: 0 !important; align-items: center; isolation: isolate; } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-main .ct2-ho { padding-top: 96px !important; min-height: 856px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media { position: relative; z-index: 1; overflow: visible; --d: clamp(300px, 32.94vw, 560px); width: var(--d); height: var(--d); max-width: none; aspect-ratio: 1; border-radius: 0; margin-right: 40px; background: none; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-img { border-radius: 50% !important; position: relative; z-index: 1; } /* Sun 680 behind the circle (20 left, 60 down), Main ring 640 over it (60 right, 60 up) */ body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media::before { content: ''; position: absolute; z-index: 0; width: calc(var(--d) * 1.2143); height: calc(var(--d) * 1.2143); left: calc(var(--d) * -.1429); top: 0; border-radius: 50%; background: var(--min-sun); pointer-events: none; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media::after { content: ''; position: absolute; z-index: 2; width: calc(var(--d) * 1.1429); height: calc(var(--d) * 1.1429); left: calc(var(--d) * .0375); top: calc(var(--d) * -.1786); border-radius: 50%; border: 2px solid var(--min-ring); box-sizing: border-box; pointer-events: none; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-copy { position: relative; z-index: 3; margin-right: 0 !important; padding-top: 60px; color: var(--min-ink); } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-main .ct2-ho-copy { padding-top: 0; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--min-ink) !important; opacity: 1; margin: 0 0 8px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-eyebrow a { color: inherit; text-decoration: none; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-eyebrow::before { content: ''; flex: none; width: 40px; height: 2px; background: currentColor; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-title { font-size: clamp(120px, 16.47vw, 280px); line-height: .9; letter-spacing: 0; color: var(--min-ink) !important; text-wrap: nowrap; text-transform: uppercase; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-sentence { font: italic 400 30px/1.2 'Instrument Serif', Georgia, serif !important; color: var(--min-ink) !important; max-width: 470px; margin-top: 24px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-buttons { gap: 16px; margin-top: 40px; } /* long ministry names get a smaller Giant so the word clears the Sun (desktop only; phones are 120 for all) */ body.page-id-2757 .ct2-hero-offset .ct2-hero-title, body.page-id-2758 .ct2-hero-offset .ct2-hero-title, body.page-id-2761 .ct2-hero-offset .ct2-hero-title { font-size: clamp(120px, 13.8vw, 235px); } body.page-id-2762 .ct2-hero-offset .ct2-hero-title { font-size: clamp(120px, 14.5vw, 246px); } body.page-id-2760 .ct2-hero-offset .ct2-hero-title { font-size: clamp(120px, 13.8vw, 235px); } /* ---------- 01 Titles with Content on Right (Mist) + the page's one half-moon ---------- */ body.parent-pageid-2560 .atx-min-intro { position: relative; } body.parent-pageid-2560 .atx-min-intro::before { content: ''; position: absolute; z-index: 0; top: 0; right: 16px; width: 360px; height: 180px; border-radius: 0 0 180px 180px; background: #CDB9F2; pointer-events: none; } body.page-id-2757 .atx-min-intro::before, body.page-id-2761 .atx-min-intro::before { background: #FF9E5E; } body.parent-pageid-2560 .atx-min-intro .section { position: relative; z-index: 2; } body.parent-pageid-2560 .atx-min-intro .image-content { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 640px); justify-content: space-between; align-items: start; } body.parent-pageid-2560 .atx-min-intro .image-content > .push { display: none; } body.parent-pageid-2560 .atx-min-intro .image-content .left, body.parent-pageid-2560 .atx-min-intro .image-content .right { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } body.parent-pageid-2560 .atx-min-intro .titles { font-size: clamp(64px, 7.06vw, 120px) !important; line-height: .95 !important; letter-spacing: 0; color: #2E1338; margin: 0; } body.parent-pageid-2560 .atx-min-intro .titles .atx-acc { display: block; font-size: 1.13em; line-height: .9; color: #B8481A; } body.parent-pageid-2560 .atx-min-intro .wysiwyg, body.parent-pageid-2560 .atx-min-intro .wysiwyg p { font-size: 20px; line-height: 1.6; color: #4A3D52; margin: 0; } body.parent-pageid-2560 .atx-min-intro .image-content > .right { padding-top: 20px !important; } /* clears the half-moon (22px lower than the frame) */ body.parent-pageid-2560 .atx-min-intro .right > div:last-child { margin-top: 20px; } body.parent-pageid-2560 .atx-min-intro a.button:not(.button-black) { margin-top: 20px; } body.parent-pageid-2560 .atx-min-intro a.button.button-black { background: transparent !important; border: 2px solid #2E1338; color: #2E1338 !important; } body.parent-pageid-2560 .atx-min-intro a.button.button-black:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- 02 / 03 Double-image rows ---------- */ body.parent-pageid-2560 main { counter-reset: min-row; } body.parent-pageid-2560 .atx-min-row { counter-increment: min-row; position: relative; --w: clamp(260px, calc(50vw - 140px), 640px); --o: calc(var(--w) * .125); } body.parent-pageid-2560 .atx-min-row .section { position: relative; z-index: 3; } body.parent-pageid-2560 .atx-min-row .div-within-section > .relative { display: grid; grid-template-columns: calc(var(--w) + var(--o)) minmax(0, 1fr); column-gap: 40px; align-items: start; } body.parent-pageid-2560 .atx-min-row .div-within-section > .relative > .push { display: none; } body.parent-pageid-2560 .atx-min-row .flip .div-within-section > .relative, body.parent-pageid-2560 .atx-min-row .div-within-section.flip > .relative { grid-template-columns: minmax(0, 1fr) calc(var(--w) + var(--o)); } body.parent-pageid-2560 .atx-min-row .left, body.parent-pageid-2560 .atx-min-row .right { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; } body.parent-pageid-2560 .atx-min-row .left.two-images { position: relative; width: calc(var(--w) + var(--o)) !important; height: calc(var(--w) * 1.1875 + var(--o)); } /* double image: .image-bottom = image_behind (up-right), .image-top = main image (front, lower-left) */ body.parent-pageid-2560 .atx-min-row .two-images .image-top, body.parent-pageid-2560 .atx-min-row .two-images .image-bottom { position: absolute; width: var(--w); height: calc(var(--w) * 1.1875); margin: 0; float: none; } body.parent-pageid-2560 .atx-min-row .two-images [class*="image-wrapper-"] { height: 100%; padding-top: 0; } body.parent-pageid-2560 .atx-min-row .two-images .image-bottom { top: 0; left: var(--o); z-index: 1; } body.parent-pageid-2560 .atx-min-row .two-images .image-top { top: var(--o); left: 0; z-index: 2; } /* flipped row (the .flip class sits on the inner .section) */ body.parent-pageid-2560 .atx-min-row .flip .two-images .image-bottom { left: 0; } body.parent-pageid-2560 .atx-min-row .flip .two-images .image-top { left: var(--o); } body.parent-pageid-2560 .atx-min-row .flip .left { grid-column: 2; grid-row: 1; justify-self: end; } body.parent-pageid-2560 .atx-min-row .flip .right { grid-column: 1; grid-row: 1; } body.parent-pageid-2560 .atx-min-row .right { padding-top: var(--o) !important; } body.parent-pageid-2560 .atx-min-row .right .dynamic-center-wrap { position: static; transform: none; top: auto; width: auto; } body.parent-pageid-2560 .atx-min-row .right .titles { font-size: 60px !important; line-height: .95 !important; letter-spacing: 0; margin: 0 0 32px !important; color: #2E1338; } body.parent-pageid-2560 .atx-min-row .right .titles::before { content: counter(min-row, decimal-leading-zero); display: block; font: 400 120px/1 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2px #2E1338; margin-bottom: 18px; } body.parent-pageid-2560 .atx-min-row .right .titles .atx-acc { display: block; font-size: 1.13em; line-height: .95; color: #B8481A; } body.parent-pageid-2560 .atx-min-row .wysiwyg, body.parent-pageid-2560 .atx-min-row .wysiwyg p { font-size: 20px; line-height: 1.6; color: #4A3D52; margin: 0; } /* 02: Apricot Sun 420 behind the photos' lower-left */ body.parent-pageid-2560 .atx-min-row:not(.atx-min-row-dark)::before { content: ''; position: absolute; z-index: 0; left: 20px; bottom: 10px; width: 420px; height: 420px; border-radius: 50%; background: #FF9E5E; pointer-events: none; } /* 03: dark framed panel, Lilac Sun 480 behind the photos' upper-right, cut by the panel */ body.parent-pageid-2560 .atx-min-row-dark { margin-top: 16px; } body.parent-pageid-2560 .atx-min-row-dark::before { content: ''; position: absolute; z-index: 0; right: -55px; top: -81px; width: 480px; height: 480px; border-radius: 50%; background: #CDB9F2; pointer-events: none; } body.parent-pageid-2560 .atx-min-row-dark .right .titles { color: #fff !important; } body.parent-pageid-2560 .atx-min-row-dark .right .titles::before { -webkit-text-stroke-color: #FF9E5E; } body.parent-pageid-2560 .atx-min-row-dark .right .titles .atx-acc { color: #FF9E5E !important; } body.parent-pageid-2560 .atx-min-row-dark .wysiwyg, body.parent-pageid-2560 .atx-min-row-dark .wysiwyg p { color: #fff; } body.parent-pageid-2560 .atx-min-row-dark .right .ta-center { text-align: left; } /* ---------- 05 CTA Banner (framed, Lilac): no circle, the faces are the element ---------- */ body.parent-pageid-2560 .atx-cta-lilac::before { display: none; } body.parent-pageid-2560 .atx-cta-lilac .ct2-cta .ct3-proof { grid-column: 1; margin-top: 40px; gap: 0; } body.parent-pageid-2560 .atx-cta-lilac .ct2-cta .ct2-cta-details { grid-row: 1 / span 3; } body.parent-pageid-2560 .atx-cta-lilac .ct3-proof-faces img { width: 120px !important; height: 120px !important; flex: 0 0 120px; margin-left: -30px; border: 4px solid #CDB9F2; box-sizing: border-box; } body.parent-pageid-2560 .atx-cta-lilac .ct3-proof-faces img:first-child { margin-left: 0; } body.parent-pageid-2560 .atx-cta-lilac .ct3-proof-copy:empty { display: none; } body.parent-pageid-2560 .atx-cta-lilac a.button { background: #FF9E5E !important; border: 2px solid #FF9E5E; color: #2E1338 !important; } body.parent-pageid-2560 .atx-cta-lilac a.button:hover { background: #2E1338 !important; border-color: #2E1338; color: #fff !important; } body.parent-pageid-2560 .atx-cta-lilac a.button.button-black { background: transparent !important; border-color: #2E1338; color: #2E1338 !important; } body.parent-pageid-2560 .atx-cta-lilac a.button.button-black:hover { background: #2E1338 !important; color: #fff !important; } /* ---------- Tablet ---------- */ @media (max-width: 1239px) { body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media { margin-right: 24px; } body.parent-pageid-2560 .atx-min-intro::before { width: 260px; height: 130px; border-radius: 0 0 130px 130px; } body.parent-pageid-2560 .atx-min-intro .image-content > .right { padding-top: 150px !important; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-sentence { max-width: min(470px, 36vw); } body.parent-pageid-2560 .atx-min-row:not(.atx-min-row-dark)::before { left: 0; } } /* ---------- Phones ---------- */ @media (max-width: 767px) { body.parent-pageid-2560 .ct2-hero-offset { margin: 144px 10px 0; border-radius: 14px; } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-main { margin-top: 10px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho { display: block; min-height: 0; padding: 20px 20px 40px !important; } body.parent-pageid-2560 .ct2-hero-offset.ct2-hp-main .ct2-ho { padding-top: 110px !important; min-height: 0; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media { --d: 280px; margin: 0 auto !important; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media::before { width: 320px; height: 320px; left: -40px; top: 10px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-media::after { width: 320px; height: 320px; left: 10px; top: -30px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-ho-copy { margin: 62px 0 0 !important; padding-top: 0 !important; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-eyebrow { font-size: 16px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-title, body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-title { font-size: 120px !important; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-sentence { font-size: 24px !important; max-width: none; margin-top: 16px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-buttons { margin-top: 28px; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-buttons .button { width: 100%; text-align: center; box-sizing: border-box; } body.parent-pageid-2560 .atx-min-intro::before { right: 10px; width: 180px; height: 90px; border-radius: 0 0 90px 90px; } body.parent-pageid-2560 .atx-min-intro .image-content { display: block; } body.parent-pageid-2560 .atx-min-intro .titles { font-size: 60px !important; line-height: 68px !important; max-width: 170px; } body.parent-pageid-2560 .atx-min-intro .left, body.parent-pageid-2560 .atx-min-intro .right { display: block; } body.parent-pageid-2560 .atx-min-intro .image-content > .right { padding-top: 28px !important; } body.parent-pageid-2560 .atx-min-intro .wysiwyg, body.parent-pageid-2560 .atx-min-intro .wysiwyg p, body.parent-pageid-2560 .atx-min-row .wysiwyg, body.parent-pageid-2560 .atx-min-row .wysiwyg p { font-size: 18px !important; line-height: 1.6 !important; } body.parent-pageid-2560 .atx-min-intro a.button { display: block; margin-right: 0 !important; text-align: center; } body.parent-pageid-2560 .atx-min-row { --w: 300px; --o: 30px; } body.parent-pageid-2560 .atx-min-row .div-within-section > .relative, body.parent-pageid-2560 .atx-min-row .flip .div-within-section > .relative { display: block; } body.parent-pageid-2560 .atx-min-row .left, body.parent-pageid-2560 .atx-min-row .right { display: block; } body.parent-pageid-2560 .atx-min-row .left.two-images { margin: 0 auto 40px !important; width: 330px !important; height: 390px; } body.parent-pageid-2560 .atx-min-row .flip .left { justify-self: auto; } body.parent-pageid-2560 .atx-min-row .right { padding-top: 0 !important; } body.parent-pageid-2560 .atx-min-row .right .titles { font-size: 40px !important; } body.parent-pageid-2560 .atx-min-row .right .titles::before { font-size: 60px; margin-bottom: 12px; } body.parent-pageid-2560 .atx-min-row:not(.atx-min-row-dark)::before { left: 10px; bottom: auto; top: 206px; width: 200px; height: 200px; } body.parent-pageid-2560 .atx-min-row-dark::before { right: -90px; top: -90px; width: 240px; height: 240px; } body.parent-pageid-2560 .atx-min-row a.button { display: block; text-align: center; margin-right: 0; } body.parent-pageid-2560 .atx-cta-lilac .ct2-cta .ct2-cta-details { grid-row: auto; } body.parent-pageid-2560 .atx-cta-lilac .ct3-proof-faces img { width: 80px !important; height: 80px !important; flex: 0 0 80px; margin-left: -20px; } body.parent-pageid-2560 .atx-cta-lilac .ct2-cta .ct3-proof { margin-top: 36px; } } /* hero button-black is Mulberry, not pure black */ body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-buttons .button.button-black { background: #2E1338 !important; color: #fff !important; } body.parent-pageid-2560 .ct2-hero-offset .ct2-hero-buttons .button.button-black:hover { background: #fff !important; color: #2E1338 !important; } /* Antioch Plan A Visit (page 2559). Rules hang off body.page-id-2559 and the atx classes set in tools/build-plan-a-visit.php. Section spacing is never set here (ACF fields only). Shared panel / eyebrow / ribbon / CTA rules live in home.css (atx-frame, atx-ribbon, atx-cta). */ /* ---------- 00 Hero: Split, Main panel + photo, framed 16 / 20, Hero Overlay 60 on the photo ---------- */ body.page-id-2559 .ct2-hero-split { margin: 16px 16px 0; border-radius: 20px; overflow: clip; background: #2E1338; position: relative; isolation: isolate; } body.page-id-2559 .ct2-hero-split .ct2-hs { min-height: 820px; } body.page-id-2559 .ct2-hero-split .ct2-hs-media { border-radius: 20px 0 0 20px; overflow: clip; } body.page-id-2559 .ct2-hero-split .ct2-hs-media::after { content: ''; position: absolute; inset: 0; background: #000; opacity: .6; pointer-events: none; } body.page-id-2559 .ct2-hero-split .ct2-hs-copy { align-items: flex-end; padding: 0 40px 105px clamp(30px, 10.8vw, 184px); } body.page-id-2559 .ct2-hero-split .ct2-hs-inner { max-width: none; width: 100%; } body.page-id-2559 .ct2-hero-split .ct2-hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 600 18px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff !important; opacity: 1; margin: 0 0 20px; } body.page-id-2559 .ct2-hero-split .ct2-hero-eyebrow::before { content: ''; flex: none; width: 40px; height: 2px; background: #FF9E5E; } body.page-id-2559 .ct2-hero-split .ct2-hero-title { font-size: clamp(64px, 9vw, 150px); line-height: .88; letter-spacing: 0; color: #fff !important; } body.page-id-2559 .ct2-hero-split .ct2-hero-title .atx-acc { display: block; font-size: 1.133em; line-height: .97; letter-spacing: -.01em; color: #FF9E5E !important; opacity: 1; } body.page-id-2559 .ct2-hero-split .ct2-hero-sentence { font: 400 20px/1.6 'Schibsted Grotesk', sans-serif !important; color: #fff !important; margin: 36px 0 0; max-width: 520px; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons { gap: 16px; margin-top: 44px; align-items: flex-start; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons .button, body.page-id-2559 .atx-cta-left .ct2-buttons a.button { padding: 19px 30px; line-height: 18px; letter-spacing: .06em; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons .button.button-white { background: transparent !important; border: 2px solid #fff; color: #fff !important; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons .button.button-white:hover { background: #fff !important; color: #2E1338 !important; } /* Lilac Sun 300, centered on the seam, half of it cut by the panel's bottom edge */ body.page-id-2559 .ct2-hero-split::after { content: ''; position: absolute; z-index: 3; left: 50%; bottom: calc(var(--atx-sun) / -2); width: var(--atx-sun); height: var(--atx-sun); margin-left: calc(var(--atx-sun) / -2); border-radius: 50%; background: #CDB9F2; pointer-events: none; --atx-sun: clamp(160px, 17.65vw, 300px); } @media (max-width: 767px) { /* the phone top bar is 24 tall (Home shows the same); the Figma frame draws 40, so the panel starts 10 below the real bar */ body.page-id-2559 .ct2-hero-split { margin: 34px 10px 0; border-radius: 14px; } body.page-id-2559 .ct2-hero-split .ct2-hs { min-height: 0; } body.page-id-2559 .ct2-hero-split .ct2-hs-media { aspect-ratio: auto; height: 300px; border-radius: 14px 14px 0 0; } body.page-id-2559 .ct2-hero-split .ct2-hs-copy { padding: 104px 20px 40px; } body.page-id-2559 .ct2-hero-split .ct2-hero-eyebrow { font-size: 16px; margin-bottom: 20px; } body.page-id-2559 .ct2-hero-split .ct2-hero-title .atx-acc { font-size: 72px; line-height: .97; } body.page-id-2559 .ct2-hero-split .ct2-hero-sentence { font-size: 18px !important; margin-top: 24px; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons { flex-direction: column; align-items: stretch; margin-top: 32px; } body.page-id-2559 .ct2-hero-split .ct2-hero-buttons .button { text-align: center; font-size: 16px; padding: 16px 30px; line-height: 16px; } body.page-id-2559 .ct2-hero-split::after { --atx-sun: 160px; left: auto; right: -40px; top: 220px; bottom: auto; margin-left: 0; } } /* ---------- 01 Ribbon: the frame draws it 24 into the hero (shared rule trims Up 80 to 40) ---------- */ body.page-id-2559 .atx-ribbon { margin-top: -24px; } @media (max-width: 767px) { body.page-id-2559 .atx-ribbon { margin-top: -10px; } } /* ---------- 02 Welcome to Antioch: photo + White plate with a 2px outline offset, Service Times ---------- */ body.page-id-2559 .atx.atx-welcome-plate .right .small-titles:not(.ct-details-title) { margin-bottom: 20px; color: #B8481A; } body.page-id-2559 .atx-welcome-plate .image-content .div-within-section > .relative { align-items: flex-start; } body.page-id-2559 .atx-welcome-plate .image-wrapper-rectangle { height: 600px; padding: 0 !important; } body.page-id-2559 .atx-welcome-plate .image-wrapper-rectangle img { width: 100%; height: 100%; object-fit: cover; } body.page-id-2559 .atx-welcome-plate .right { box-sizing: border-box; box-shadow: none !important; padding: 60px !important; border-radius: 20px; } /* the 2px outline is drawn by the row (the plate itself paints over it), offset 10 right / down */ body.page-id-2559 .atx-welcome-plate .image-content .div-within-section > .relative::after { content: ''; position: absolute; z-index: 1; inset: 80px 0 0 660px; border: 2px solid #2E1338; border-radius: 20px; transform: translate(10px, 10px); pointer-events: none; } body.page-id-2559 .atx-welcome-plate .titles { font-size: 60px; line-height: .95; margin-bottom: 32px !important; } body.page-id-2559 .atx-welcome-plate .titles .atx-acc { display: block; font-size: 68px; line-height: 1.06; letter-spacing: -.01em; } body.page-id-2559 .atx-welcome-plate .wysiwyg, body.page-id-2559 .atx-welcome-plate .wysiwyg p { font-size: 20px !important; line-height: 1.6; color: #4A3D52; } body.page-id-2559 .atx-welcome-plate .ct-details { margin-top: 40px !important; } body.page-id-2559 .atx.atx-welcome-plate .right .small-titles.ct-details-title { display: block; margin: 0 0 16px; font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; text-transform: none; color: #2E1338; } body.page-id-2559 .atx.atx-welcome-plate .right .small-titles.ct-details-title::before { display: none; } body.page-id-2559 .atx-welcome-plate .ct-details-list { margin: 0; padding: 0; border-top: 1px solid #2E1338; } body.page-id-2559 .atx-welcome-plate .ct-details-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; padding: 18px 0; border-bottom: 1px solid #2E1338; } body.page-id-2559 .atx-welcome-plate .ct-details-row dt { font: 600 20px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: 0; text-transform: none; color: #2E1338; margin: 2px 0 0; padding: 0; width: auto; } body.page-id-2559 .atx-welcome-plate .ct-details-row dd { font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; color: #2E1338; margin: 0; padding: 0; } @media (min-width: 1001px) { body.page-id-2559 .atx-welcome-plate .image-content .div-within-section > .relative > .left { flex: 0 0 820px; width: 820px !important; } body.page-id-2559 .atx-welcome-plate .image-content .div-within-section > .relative > .right { flex: 0 0 640px; width: 640px !important; margin: 80px 0 0 -160px; align-self: flex-start; } } @media (max-width: 1000px) { body.page-id-2559 .atx-welcome-plate .right { padding: 30px !important; } body.page-id-2559 .atx-welcome-plate.ct3-plate .image-content .div-within-section > .relative > .right { margin: -60px 6px 0 0 !important; } body.page-id-2559 .atx-welcome-plate .image-content .div-within-section > .relative::after { inset: 200px 6px 0 0; transform: translate(6px, 6px); } body.page-id-2559 .atx-welcome-plate .image-wrapper-rectangle { height: 260px; } body.page-id-2559 .atx-welcome-plate .titles { font-size: 40px !important; margin-bottom: 20px !important; } body.page-id-2559 .atx-welcome-plate .titles .atx-acc { font-size: 46px; } body.page-id-2559 .atx-welcome-plate .wysiwyg, body.page-id-2559 .atx-welcome-plate .wysiwyg p { font-size: 18px !important; } body.page-id-2559 .atx.atx-welcome-plate .right .small-titles.ct-details-title { font-size: 20px; } body.page-id-2559 .atx-welcome-plate .ct-details-row { grid-template-columns: 1fr; padding: 14px 0; } body.page-id-2559 .atx-welcome-plate .ct-details-row dt { font-size: 18px; } body.page-id-2559 .atx-welcome-plate .ct-details-row dd { font-size: 20px; margin-top: 4px; } } /* ---------- 03 Blockquote: the mission on a photo, Main 60% overlay, giant Apricot quote mark ---------- */ body.page-id-2559 .atx-quote > .overlay { background: rgba(46, 19, 56, .6) !important; } body.page-id-2559 .atx.atx-quote .small-titles { color: #fff; margin-bottom: 148px !important; } body.page-id-2559 .atx-quote .small-titles::before { background: #FF9E5E; } body.page-id-2559 .atx-quote .ct-quote-text { position: relative; margin: 0; font-size: 60px !important; line-height: 1.05; color: #fff !important; } body.page-id-2559 .atx-quote .ct-quote-text em { font-style: italic; color: #FF9E5E; } body.page-id-2559 .atx-quote .ct-quote-text::before { content: '\201C'; position: absolute; right: calc(100% + 6px); top: -40px; font: italic 400 316px/.86 'Instrument Serif', Georgia, serif; color: #FF9E5E; } @media (max-width: 767px) { body.page-id-2559 .atx.atx-quote .small-titles { margin-bottom: 111px !important; } body.page-id-2559 .atx-quote .ct-quote-text { font-size: 34px !important; } body.page-id-2559 .atx-quote .ct-quote-text::before { right: auto; left: -6px; top: -106px; font-size: 160px; line-height: .73; } } /* ---------- 04 For the Family: two staggered portrait tiles with outline numerals, Lilac Sun ---------- */ body.page-id-2559 .atx-family { position: relative; } body.page-id-2559 .atx-family::after { content: ''; position: absolute; z-index: 0; right: -76px; top: 310px; width: 520px; height: 520px; border-radius: 50%; background: #CDB9F2; pointer-events: none; } body.page-id-2559 .atx-family .section { position: relative; z-index: 2; } body.page-id-2559 .atx-family .ct3-head-split { grid-template-columns: minmax(0, 700px) minmax(0, 600px); justify-content: space-between; align-items: start; } body.page-id-2559 .atx-family .ct3-hs-title h2 { font-size: 60px; line-height: .95; color: #fff !important; } body.page-id-2559 .atx-family .ct3-hs-body { padding: 6px 0 0; } body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg, body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg p { font-size: 20px; line-height: 1.6; color: #fff !important; } body.page-id-2559 .atx-family .quicklink-panels { counter-reset: fam; align-items: flex-start; margin-top: 80px !important; } body.page-id-2559 .atx-family .quicklink-panels .panel { counter-increment: fam; padding-top: 140px; } body.page-id-2559 .atx-family .quicklink-panels .panel:nth-child(2) { margin-top: 120px !important; } body.page-id-2559 .atx-family .quicklink-panels .panel::before { content: counter(fam, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 400 120px/.9 'Anton', sans-serif; color: transparent; -webkit-text-stroke: 2.5px #FF9E5E; paint-order: stroke fill; letter-spacing: 0; } body.page-id-2559 .atx-family .image-wrapper-portrait { position: relative; height: 780px; padding: 0 !important; } body.page-id-2559 .atx-family .quicklink-panels .anchor-panel { z-index: 3; background: linear-gradient(to bottom, rgba(46, 19, 56, 0) 55%, rgba(46, 19, 56, .8)) !important; top: 140px; bottom: 0; height: auto; border-radius: 20px; } body.page-id-2559 .atx-family .quicklink-panels .anchor-panel:hover { background: linear-gradient(to bottom, rgba(46, 19, 56, 0) 50%, rgba(46, 19, 56, .85)) !important; } body.page-id-2559 .atx-family .quicklink-panels h2 { padding: 0 40px 40px !important; font: 400 40px/1 'Anton', sans-serif; letter-spacing: .005em; text-transform: uppercase; color: #fff !important; } body.page-id-2559 .atx-family .quicklink-panels h2 .ql-link-label { display: block; margin-top: 12px; font: 700 16px/1.2 'Schibsted Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; } body.page-id-2559 .atx-family .quicklink-panels h2 .ql-link-label::after { content: '\00a0\2192'; } @media (max-width: 767px) { body.page-id-2559 .atx-family::after { width: 240px; height: 240px; right: -100px; top: 775px; } body.page-id-2559 .atx-family .ct3-head-split { grid-template-columns: 1fr; row-gap: 20px; } body.page-id-2559 .atx-family .ct3-hs-title h2 { font-size: 40px !important; } body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg, body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg p { font-size: 18px; } body.page-id-2559 .atx-family .quicklink-panels { margin-top: 40px !important; row-gap: 32px; } body.page-id-2559 .atx-family .quicklink-panels .panel { padding-top: 52px; } body.page-id-2559 .atx-family .quicklink-panels .panel:nth-child(2) { margin-top: 0 !important; } body.page-id-2559 .atx-family .quicklink-panels .panel::before { font-size: 40px; -webkit-text-stroke-width: 1.5px; } body.page-id-2559 .atx-family .image-wrapper-portrait { height: 430px; } body.page-id-2559 .atx-family .quicklink-panels .anchor-panel { top: 52px; bottom: 0; height: auto; border-radius: 14px; } body.page-id-2559 .atx-family .quicklink-panels h2 { padding: 0 16px 16px !important; font-size: 30px !important; } body.page-id-2559 .atx-family .quicklink-panels h2 .ql-link-label { font-size: 14px; margin-top: 8px; } } /* ---------- 05 Letter: portrait over an Apricot Sun, White paper, Apricot half-moon on the band's bottom edge ---------- */ body.page-id-2559 .atx-letter { position: relative; } body.page-id-2559 .atx-letter::after { content: ''; position: absolute; z-index: 0; bottom: 0; left: calc(50% + 190px); width: 420px; height: 210px; border-radius: 210px 210px 0 0; background: #FF9E5E; pointer-events: none; } body.page-id-2559 .atx-letter .ct2-letter.has-paper { box-sizing: border-box; position: relative; z-index: 2; padding: 240px 80px 80px; box-shadow: none; border-radius: 20px; } body.page-id-2559 .atx-letter .ct2-lt-portrait { position: absolute; z-index: 3; top: -100px; left: 80px; width: 200px; height: 200px; margin: 0; overflow: visible; border-radius: 0; isolation: isolate; } body.page-id-2559 .atx-letter .ct2-lt-portrait::before { content: ''; position: absolute; z-index: -1; left: -20px; top: -20px; width: 320px; height: 320px; border-radius: 50%; background: #FF9E5E; } body.page-id-2559 .atx-letter .ct2-lt-portrait img { width: 200px; height: 200px; border-radius: 50% !important; object-fit: cover; position: relative; } body.page-id-2559 .atx-letter .ct2-head { margin-bottom: 32px; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-head h2 { font-size: 60px; line-height: .95; color: #2E1338 !important; margin: 0; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-body p { font-size: 20px; line-height: 1.6; color: #4A3D52 !important; } body.page-id-2559 .atx-letter .ct2-lt-sign { margin-top: 40px; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-script { font: italic 400 48px/1 'Instrument Serif', Georgia, serif !important; letter-spacing: 0; text-transform: none; color: #B8481A !important; transform: none; margin: 0 0 16px; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-name { display: block; margin: 0; font: 700 24px/1.25 'Schibsted Grotesk', sans-serif; letter-spacing: -.01em; text-transform: none; color: #2E1338 !important; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-name::before { display: none; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-role { margin: 4px 0 0; font: 500 16px/1.3 'Schibsted Grotesk', sans-serif; letter-spacing: .02em; color: #4A3D52 !important; opacity: 1; } @media (max-width: 1000px) { body.page-id-2559 .atx-letter::after { left: auto; right: 10px; } } @media (max-width: 767px) { body.page-id-2559 .atx-letter::after { width: 220px; height: 110px; border-radius: 110px 110px 0 0; right: 10px; } body.page-id-2559 .atx-letter .ct2-letter.has-paper { margin-top: 80px; padding: 150px 30px 30px; } body.page-id-2559 .atx-letter .ct2-lt-portrait { top: -70px; left: 30px; width: 140px; height: 140px; } body.page-id-2559 .atx-letter .ct2-lt-portrait::before { width: 220px; height: 220px; left: -10px; top: -10px; } body.page-id-2559 .atx-letter .ct2-lt-portrait img { width: 140px; height: 140px; } body.page-id-2559 .atx-letter .ct2-head h2 { font-size: 40px !important; } body.page-id-2559 .atx-letter .ct2-lt-body p { font-size: 18px; } body.page-id-2559 .atx-letter .ct2-lt-script { font-size: 36px !important; } } /* ---------- 06 What We Believe: counters, hairlines, photo crossfade ---------- */ body.page-id-2559 .atx.atx-beliefs .small-titles { color: #2E1338; } body.page-id-2559 .atx.atx-beliefs .small-titles::before { background: #B8481A; } body.page-id-2559 .atx-beliefs .ct3-hs-title h2 { font-size: 60px; line-height: .95; } body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg, body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg p { font-size: 20px; line-height: 1.6; color: #4A3D52; } body.page-id-2559 .atx-beliefs .ct2-ai-list { counter-reset: bel; margin-top: 0; border-top: 0; } body.page-id-2559 .atx-beliefs .ct2-ai-item { counter-increment: bel; border: 0 !important; border-top: 1px solid #2E1338 !important; padding: 0 !important; } body.page-id-2559 .atx-beliefs .ct2-ai-item:last-child { border-bottom: 1px solid #2E1338 !important; } body.page-id-2559 .atx-beliefs .ct2-ai-item h3 { margin: 0; } body.page-id-2559 .atx-beliefs .ct2-ai-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 100%; padding: 28px 0 27px; font: 400 40px/1 'Anton', sans-serif; letter-spacing: .005em; text-transform: uppercase; color: #2E1338; text-align: left; } body.page-id-2559 .atx-beliefs .ct2-ai-toggle::before { content: counter(bel, decimal-leading-zero); flex: none; width: 80px; color: transparent; -webkit-text-stroke: 1.5px #2E1338; paint-order: stroke fill; } body.page-id-2559 .atx-beliefs .ct2-ai-item.is-open .ct2-ai-toggle::before { color: #2E1338; -webkit-text-stroke: 0; } body.page-id-2559 .atx-beliefs .ct2-ai-toggle > span:first-child { flex: 1 1 auto; } body.page-id-2559 .atx-beliefs .ct-faq-icon { flex: none; margin-left: auto; } body.page-id-2559 .atx-beliefs .ct2-ai-panel { padding: 0 40px 28px 80px; margin-top: -12px; } body.page-id-2559 .atx-beliefs .ct2-ai-panel p { font-size: 20px; line-height: 1.6; color: #4A3D52; margin: 0; } body.page-id-2559 .atx-beliefs .ct2-ai-media .ct2-ai-img img { border-radius: 20px; } @media (min-width: 1001px) { body.page-id-2559 .atx-beliefs .ct2-accimg { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 0 60px; justify-content: space-between; align-items: start; } body.page-id-2559 .atx-beliefs .ct2-ai-copy { display: contents; } body.page-id-2559 .atx-beliefs .ct2-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 60px; } body.page-id-2559 .atx-beliefs .ct3-head-split { grid-template-columns: minmax(0, 700px) minmax(0, 600px); justify-content: space-between; align-items: start; } body.page-id-2559 .atx-beliefs .ct3-hs-body { padding: 6px 0 0; } body.page-id-2559 .atx-beliefs .ct2-ai-list { grid-column: 1; grid-row: 2; } body.page-id-2559 .atx-beliefs .ct2-ai-media { grid-column: 2; grid-row: 2; width: 600px; height: 720px; aspect-ratio: auto; position: relative; top: 0; justify-self: end; } body.page-id-2559 .atx-beliefs .ct2-ai-inline { display: none; } } @media (max-width: 1000px) { body.page-id-2559 .atx-beliefs .ct2-ai-media { display: none; } body.page-id-2559 .atx-beliefs .ct2-ai-inline { margin-top: 16px; } body.page-id-2559 .atx-beliefs .ct2-ai-inline img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; } } @media (max-width: 767px) { body.page-id-2559 .atx-beliefs .ct3-hs-title h2 { font-size: 40px !important; } body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg, body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg p { font-size: 18px; } body.page-id-2559 .atx-beliefs .ct2-ai-toggle { padding: 20px 0; font-size: 30px; } body.page-id-2559 .atx-beliefs .ct2-ai-toggle::before { width: 56px; } body.page-id-2559 .atx-beliefs .ct2-ai-panel { padding: 0 0 20px; margin-top: 0; } body.page-id-2559 .atx-beliefs .ct2-ai-panel p { font-size: 18px; } } /* ---------- 07 See You Sunday: the outline circle sits on the bottom-LEFT corner (Home's is bottom-right) ---------- */ body.page-id-2559 .atx-cta-left::before { right: auto; left: -240px; bottom: -420px; top: auto; } body.page-id-2559 .atx-cta-left .ct2-buttons { align-items: flex-start; } @media (max-width: 900px) { body.page-id-2559 .atx-cta-left .ct2-buttons { align-items: stretch; } body.page-id-2559 .atx-cta-left .ct2-buttons a.button { font-size: 16px; padding: 16px 30px; line-height: 16px; } body.page-id-2559 .atx-cta-left::before { left: auto; right: -117px; top: -130px; bottom: auto; width: 260px; height: 260px; } } /* ---------- Phones: the theme sets small fixed sizes on these elements, so the drawn sizes are !important ---------- */ body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg p, body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg p, body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-body p, body.page-id-2559 .atx-beliefs .ct2-ai-panel p { font-size: 20px !important; line-height: 1.6; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-name { font-size: 24px !important; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-role { font-size: 16px !important; } body.page-id-2559 .atx.atx-welcome-plate .right .small-titles.ct-details-title { font-size: 24px !important; } body.page-id-2559 .atx-welcome-plate .ct-details-row dt { font-size: 20px !important; } body.page-id-2559 .atx-welcome-plate .ct-details-row dd { font-size: 24px !important; } @media (max-width: 767px) { body.page-id-2559 .atx-family .ct3-hs-body .wysiwyg p, body.page-id-2559 .atx-beliefs .ct3-hs-body .wysiwyg p, body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-body p, body.page-id-2559 .atx-beliefs .ct2-ai-panel p { font-size: 18px !important; } body.page-id-2559 .atx.atx-letter .ct2-letter.has-paper .ct2-lt-name { font-size: 20px !important; } body.page-id-2559 .atx.atx-welcome-plate .right .small-titles.ct-details-title { font-size: 20px !important; } body.page-id-2559 .atx-welcome-plate .ct-details-row dt { font-size: 18px !important; } body.page-id-2559 .atx-welcome-plate .ct-details-row dd { font-size: 20px !important; } }