/* * ============================================================ * AUDIODIMENSION * SPECIAL PAGES * * Loaded only on selected pages. * ============================================================ */ /* ============================================================ FAQ PAGE — VARIABLES ============================================================ */ .ad-faq-page { --ad-dark: #0c0914; --ad-orange: #f2762b; --ad-light: #f5f3ef; --ad-white: #ffffff; width: 100%; margin: 0 !important; padding: 0; background: var(--ad-white); color: var(--ad-dark); overflow: hidden; } /* ============================================================ FAQ HERO ============================================================ */ .ad-faq-hero { position: relative; width: 100%; min-height: 500px; margin: 0 !important; padding: 115px 0 145px; display: flex; align-items: center; background: var(--ad-dark); color: var(--ad-white); overflow: hidden; isolation: isolate; } .ad-faq-hero-inner { position: relative; z-index: 5; width: min(1320px, calc(100% - 80px)); margin: 0 auto !important; } /* ------------------------------------------------------------ HERO SMALL LABEL ------------------------------------------------------------ */ .ad-faq-eyebrow { margin: 0 0 25px !important; color: var(--ad-orange); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .20em; text-transform: uppercase; } /* ------------------------------------------------------------ HERO TITLE ------------------------------------------------------------ */ .ad-faq-title { max-width: 1050px; margin: 0 0 35px !important; color: var(--ad-white) !important; font-size: clamp(70px, 9vw, 140px); font-weight: 400; line-height: .88; letter-spacing: -.055em; } /* ------------------------------------------------------------ HERO INTRO ------------------------------------------------------------ */ .ad-faq-lead { max-width: 620px; margin: 0 !important; color: rgba(255, 255, 255, .68); font-size: clamp(18px, 1.6vw, 23px); font-weight: 300; line-height: 1.55; } /* ------------------------------------------------------------ LARGE DECORATIVE QUESTION MARK ------------------------------------------------------------ */ .ad-faq-hero::before { content: "?"; position: absolute; top: 50%; right: 5%; z-index: 1; color: transparent; font-size: clamp(300px, 35vw, 600px); font-weight: 300; line-height: .7; -webkit-text-stroke: 1px rgba(242, 118, 43, .18); transform: translateY(-48%); pointer-events: none; } /* ============================================================ FAQ CONTENT ============================================================ */ .ad-faq-content { position: relative; width: 100%; margin: 0 !important; padding: 125px 0 145px; background: var(--ad-white); color: var(--ad-dark); } .ad-faq-content-inner { position: relative; width: min(1180px, calc(100% - 80px)); margin: 0 auto !important; } /* ============================================================ FAQ SECTION HEADER ============================================================ */ .ad-faq-section-header { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(0, 1fr); gap: 60px; margin: 0 0 65px !important; } .ad-faq-section-label { margin: 8px 0 0 !important; color: var(--ad-orange); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; } .ad-faq-section-title { max-width: 760px; margin: 0 !important; color: var(--ad-dark); font-size: clamp(38px, 4.5vw, 68px); font-weight: 400; line-height: 1; letter-spacing: -.04em; } /* ============================================================ FAQ LIST ============================================================ */ .ad-faq-list { width: 100%; margin: 0 !important; padding: 0; border-top: 1px solid rgba(12, 9, 20, .18); } /* ============================================================ INDIVIDUAL FAQ — CORE/DETAILS ============================================================ */ .ad-faq-item { position: relative; width: 100%; margin: 0 !important; padding: 0; border: 0; border-bottom: 1px solid rgba(12, 9, 20, .18); background: transparent; transition: background-color .35s ease; } /* ============================================================ DETAILS SUMMARY / QUESTION ============================================================ */ .ad-faq-item > summary { position: relative; display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 35px 85px 35px 0; color: var(--ad-dark); font-size: clamp(21px, 2vw, 30px); font-weight: 400; line-height: 1.25; letter-spacing: -.018em; cursor: pointer; list-style: none; transition: color .30s ease, padding-left .30s ease; } /* ------------------------------------------------------------ REMOVE NATIVE DETAILS MARKER ------------------------------------------------------------ */ .ad-faq-item > summary::marker { content: ""; } .ad-faq-item > summary::-webkit-details-marker { display: none; } /* ============================================================ CUSTOM + ICON ============================================================ */ .ad-faq-item > summary::before, .ad-faq-item > summary::after { content: ""; position: absolute; top: 50%; right: 18px; width: 22px; height: 2px; background: var(--ad-orange); transform-origin: center; transition: transform .35s ease, opacity .35s ease; } /* horizontal bar */ .ad-faq-item > summary::before { transform: translateY(-50%); } /* vertical bar */ .ad-faq-item > summary::after { transform: translateY(-50%) rotate(90deg); } /* ============================================================ FAQ HOVER ============================================================ */ .ad-faq-item:hover { background: rgba(242, 118, 43, .035); } .ad-faq-item:hover > summary { color: var(--ad-orange); padding-left: 12px; } /* ============================================================ FAQ OPEN STATE ============================================================ */ .ad-faq-item[open] { background: rgba(242, 118, 43, .045); } .ad-faq-item[open] > summary { color: var(--ad-orange); } /* horizontal bar remains */ .ad-faq-item[open] > summary::before { transform: translateY(-50%) rotate(180deg); } /* vertical bar disappears */ .ad-faq-item[open] > summary::after { transform: translateY(-50%) rotate(180deg); opacity: 0; } /* ============================================================ FAQ ANSWER ============================================================ */ /* * Works with: * *

* * which is the safest Gutenberg structure for our pattern. */ .ad-faq-item > .ad-faq-answer { max-width: 850px; box-sizing: border-box; margin: 0 !important; padding: 0 70px 38px 0; color: rgba(12, 9, 20, .68); font-size: 17px; line-height: 1.75; } /* ------------------------------------------------------------ ALSO SUPPORT A GROUP AS ANSWER should we use it later ------------------------------------------------------------ */ .ad-faq-item > div.ad-faq-answer { max-width: 850px; box-sizing: border-box; margin: 0 !important; padding: 0 70px 38px 0; } .ad-faq-item > div.ad-faq-answer > * { color: rgba(12, 9, 20, .68); font-size: 17px; line-height: 1.75; } .ad-faq-item > div.ad-faq-answer > *:first-child { margin-top: 0; } .ad-faq-item > div.ad-faq-answer > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ LINKS INSIDE ANSWERS ------------------------------------------------------------ */ .ad-faq-answer a { color: var(--ad-orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: opacity .25s ease; } .ad-faq-answer a:hover { opacity: .7; } /* ============================================================ FAQ OPEN ANIMATION ============================================================ */ .ad-faq-item[open] > .ad-faq-answer { animation: ad-faq-answer-in .38s ease both; } @keyframes ad-faq-answer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ OPTIONAL FAQ NUMBERS ============================================================ */ .ad-faq-number { display: inline-block; min-width: 42px; margin-right: 18px; color: var(--ad-orange); font-size: 11px; font-weight: 600; letter-spacing: .12em; vertical-align: middle; } /* ============================================================ MULTIPLE FAQ GROUPS ============================================================ */ .ad-faq-group + .ad-faq-group { margin-top: 125px !important; } /* ============================================================ CONTACT CTA ============================================================ */ .ad-faq-contact { position: relative; width: 100%; margin: 0 !important; padding: 125px 0 145px; background: var(--ad-light); color: var(--ad-dark); overflow: visible; } .ad-faq-contact-inner { position: relative; z-index: 5; width: min(1180px, calc(100% - 80px)); margin: 0 auto !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 70px; } /* ------------------------------------------------------------ CTA LABEL ------------------------------------------------------------ */ .ad-faq-contact-label { margin: 0 0 24px !important; color: var(--ad-orange); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .20em; text-transform: uppercase; } /* ------------------------------------------------------------ CTA TITLE ------------------------------------------------------------ */ .ad-faq-contact-title { max-width: 820px; margin: 0 !important; color: var(--ad-dark); font-size: clamp(48px, 6vw, 90px); font-weight: 400; line-height: .94; letter-spacing: -.05em; } /* ============================================================ CONTACT BUTTON ============================================================ */ .ad-faq-contact-button .wp-block-button__link { position: relative; padding: 16px 31px; border: 1px solid var(--ad-orange); border-radius: 40px; background: var(--ad-orange); color: #ffffff !important; white-space: nowrap; font-size: 14px; font-weight: 500; transition: background-color .30s ease, color .30s ease, transform .30s ease; } .ad-faq-contact-button .wp-block-button__link:hover { background: transparent; color: var(--ad-orange) !important; transform: translateY(-3px); } /* ============================================================ IMPORTANT FOOTER WAVE ============================================================ */ /* * No footer separator is generated here. * * The global audiodimension.css already handles the * AudioDimension footer wave using shape-2-2.svg. * * This prevents duplicate waves and competing pseudo-elements. */ /* ============================================================ TABLET ============================================================ */ @media (max-width: 1000px) { /* HERO */ .ad-faq-hero { min-height: 440px; padding: 95px 0 125px; } /* MAIN WIDTHS */ .ad-faq-hero-inner, .ad-faq-content-inner, .ad-faq-contact-inner { width: calc( 100% - 60px ); } /* CONTENT */ .ad-faq-content { padding: 100px 0 120px; } /* SECTION HEADER */ .ad-faq-section-header { grid-template-columns: 150px minmax(0, 1fr); gap: 35px; } /* CTA */ .ad-faq-contact { padding: 105px 0 120px; } .ad-faq-contact-inner { gap: 45px; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 700px) { /* -------------------------------------------------------- HERO -------------------------------------------------------- */ .ad-faq-hero { min-height: auto; padding: 75px 0 90px; } .ad-faq-hero-inner, .ad-faq-content-inner, .ad-faq-contact-inner { width: calc( 100% - 40px ); } .ad-faq-title { font-size: clamp( 58px, 20vw, 86px ); } .ad-faq-lead { max-width: 94%; font-size: 17px; } /* smaller decorative question mark */ .ad-faq-hero::before { right: -10%; font-size: 330px; opacity: .65; } /* -------------------------------------------------------- CONTENT -------------------------------------------------------- */ .ad-faq-content { padding: 75px 0 90px; } /* -------------------------------------------------------- SECTION HEADER -------------------------------------------------------- */ .ad-faq-section-header { display: block; margin-bottom: 45px !important; } .ad-faq-section-label { margin: 0 0 18px !important; } .ad-faq-section-title { font-size: clamp( 38px, 11vw, 54px ); } /* -------------------------------------------------------- QUESTIONS -------------------------------------------------------- */ .ad-faq-item > summary { padding: 27px 55px 27px 0; font-size: 20px; line-height: 1.3; } .ad-faq-item > summary::before, .ad-faq-item > summary::after { right: 5px; width: 18px; } /* * Disable horizontal movement on touch/mobile. */ .ad-faq-item:hover > summary { padding-left: 0; } /* -------------------------------------------------------- ANSWERS -------------------------------------------------------- */ .ad-faq-item > .ad-faq-answer { padding: 0 30px 30px 0; font-size: 16px; line-height: 1.7; } .ad-faq-item > div.ad-faq-answer { padding: 0 30px 30px 0; } .ad-faq-item > div.ad-faq-answer > * { font-size: 16px; line-height: 1.7; } /* -------------------------------------------------------- GROUPS -------------------------------------------------------- */ .ad-faq-group + .ad-faq-group { margin-top: 85px !important; } /* -------------------------------------------------------- CTA -------------------------------------------------------- */ .ad-faq-contact { padding: 80px 0 90px; } .ad-faq-contact-inner { display: block; } .ad-faq-contact-title { margin-bottom: 38px !important; font-size: clamp( 44px, 13vw, 64px ); } /* -------------------------------------------------------- NO DECORATIVE WAVES ON MOBILE -------------------------------------------------------- */ .ad-faq-page::before, .ad-faq-page::after, .ad-faq-contact::before, .ad-faq-contact::after { content: none !important; display: none !important; background-image: none !important; } } /* ============================================================ ACCESSIBILITY ============================================================ */ .ad-faq-item > summary:focus-visible { outline: 2px solid var(--ad-orange); outline-offset: 5px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .ad-faq-item, .ad-faq-item > summary, .ad-faq-item > summary::before, .ad-faq-item > summary::after, .ad-faq-contact-button .wp-block-button__link { transition: none !important; } .ad-faq-item[open] > .ad-faq-answer { animation: none !important; } } /* ============================================================ FAQ — HERO -> CONTENT WAVE Black to white transition ============================================================ */ .ad-faq-content { position: relative; overflow: visible; } /* wave between dark Hero and white FAQ area */ .ad-faq-content::before { content: ""; position: absolute; top: -4px; left: 0; z-index: 3; width: 100%; height: 80px; background-image: url("https://audiodimension.io/wp-content/uploads/2023/09/shape-1-1-2.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; transform: scaleY(-1); transform-origin: center; pointer-events: none; } /* FAQ content must stay above the wave */ .ad-faq-content-inner { position: relative; z-index: 5; } /* ============================================================ ACCESSIBILITY — HIGHER CONTRAST ============================================================ */ /* Dark blue team section */ .ad-about-team { background: #184E7D; color: #ffffff; } .ad-about-team .ad-about-section-title, .ad-about-team .ad-team-card h3 { color: #ffffff !important; } .ad-about-team .ad-team-role { color: #FF9A4A !important; } .ad-about-team .ad-team-card > p:last-child { color: rgba(255, 255, 255, .92) !important; } /* Dark hero text */ .ad-faq-lead, .ad-about-lead { color: rgba(255, 255, 255, .88); } /* Dark story section */ .ad-about-story-columns p { color: rgba(255, 255, 255, .88); } /* Text on white / light backgrounds */ .ad-faq-item > .ad-faq-answer, .ad-faq-item > div.ad-faq-answer > *, .ad-about-value p:not(.ad-about-number), .ad-about-research-columns p, .ad-about-opportunity > p:not(.ad-about-section-label) { color: rgba(12, 9, 20, .82); } /* FAQ borders slightly stronger */ .ad-faq-list, .ad-faq-item { border-color: rgba(12, 9, 20, .28); } /* Vision / Mission separators */ .ad-about-value, .ad-about-opportunity { border-top-color: rgba(12, 9, 20, .28); } .ad-about-value + .ad-about-value, .ad-about-opportunity + .ad-about-opportunity { border-left-color: rgba(12, 9, 20, .22); } /* Orange labels: slightly lighter on dark backgrounds */ .ad-about-team .ad-about-section-label, .ad-about-story .ad-about-section-label, .ad-faq-hero .ad-faq-eyebrow, .ad-about-hero .ad-about-eyebrow { color: #FF9A4A; } /* Better focus visibility */ .ad-faq-item > summary:focus-visible, .ad-about-button .wp-block-button__link:focus-visible, .ad-faq-contact-button .wp-block-button__link:focus-visible { outline: 3px solid #FF9A4A; outline-offset: 4px; } /* Links inside FAQ answers */ .ad-faq-answer a { color: #C94F00; font-weight: 600; } /* Mobile text also stays high contrast */ @media (max-width: 700px) { .ad-about-team .ad-team-card > p:last-child, .ad-about-story-columns p, .ad-faq-lead, .ad-about-lead { color: rgba(255, 255, 255, .94); } } /* ============================================================ PARTNERS STRIP Reusable special-page pattern 6 fixed logos per row ============================================================ */ .ad-partners-strip { position: relative; width: 100%; margin: 0 !important; padding: 28px 0 34px; background: #211326; color: #ffffff; overflow: hidden; } .ad-partners-strip-inner { width: min(980px, calc(100% - 64px)); margin: 0 auto !important; } /* ============================================================ TITLE ============================================================ */ .ad-partners-strip-title { margin: 0 0 24px !important; color: #ffffff !important; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; } /* ============================================================ LOGO ROW 6 fixed items ============================================================ */ .ad-partners-logos { width: 100%; margin: 0 !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: clamp(18px, 2.5vw, 34px); } /* second row if added later */ .ad-partners-logos + .ad-partners-logos { margin-top: 24px !important; } /* ============================================================ LOGO ITEM Square upload -> round on website ============================================================ */ .ad-partners-logo { width: 74px; height: 74px; margin: 0 auto !important; border-radius: 50%; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,.20); transition: transform .30s ease; } .ad-partners-logo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* subtle hover */ .ad-partners-logo:hover { transform: translateY(-3px) scale(1.04); } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1000px) { .ad-partners-strip-inner { width: calc(100% - 48px); } .ad-partners-logos { gap: 20px; } .ad-partners-logo { width: 66px; height: 66px; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 700px) { .ad-partners-strip { padding: 26px 0 30px; } .ad-partners-strip-inner { width: calc(100% - 32px); } .ad-partners-strip-title { margin-bottom: 22px !important; font-size: 15px; } /* * 6 logos become 3 + 3 */ .ad-partners-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; } .ad-partners-logo { width: 62px; height: 62px; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { .ad-partners-logo { transition: none !important; } } /* === AUDIODIMENSION ABOUT + ORGANIC SECTION OVERRIDES === */ /* ============================================================ REUSABLE ORGANIC SECTION STYLES style-1 = white | style-2 = blue | style-3 = black ============================================================ */ .style-1,.style-2,.style-3{--ad-section-bg:#fff;position:relative;isolation:isolate;width:100%;box-sizing:border-box;overflow:visible!important} .style-1{--ad-section-bg:#fff;background:#fff!important;color:#0c0914!important}.style-2{--ad-section-bg:#184E7D;background:#184E7D!important;color:#fff!important}.style-3{--ad-section-bg:#0c0914;background:#0c0914!important;color:#fff!important} .style-1>*,.style-2>*,.style-3>*{position:relative;z-index:3} .style-2 h1,.style-2 h2,.style-2 h3,.style-2 h4,.style-2 h5,.style-2 h6,.style-3 h1,.style-3 h2,.style-3 h3,.style-3 h4,.style-3 h5,.style-3 h6{color:#fff!important} .style-2 p,.style-3 p{color:rgba(255,255,255,.94)}.style-1 p{color:rgba(12,9,20,.86)} .style-2::before,.style-2::after,.style-3::before,.style-3::after{content:"";position:absolute;z-index:1;height:82px;background:var(--ad-section-bg);pointer-events:none} .style-2::before{top:-39px;left:-18%;width:134%;border-radius:38% 62% 0 0/100% 100% 0 0} .style-2::after{bottom:-39px;left:-6%;width:130%;border-radius:0 0 66% 34%/0 0 100% 100%} .style-3::before{top:-39px;left:-5%;width:132%;border-radius:64% 36% 0 0/100% 100% 0 0} .style-3::after{bottom:-39px;left:-18%;width:136%;border-radius:0 0 37% 63%/0 0 100% 100%} /* ABOUT PAGE */ .ad-about-page{--ad-dark:#0c0914;--ad-orange:#F57920;--ad-orange-light:#FF9A4A;--ad-blue:#184E7D;--ad-light:#f5f3ef;--ad-white:#fff;width:100%;margin:0!important;padding:0;background:#fff;color:var(--ad-dark);overflow:hidden} .ad-about-hero{position:relative;width:100%;min-height:580px;margin:0!important;padding:120px 0 145px;display:flex;align-items:center;background:var(--ad-dark);color:#fff;overflow:hidden} .ad-about-hero-inner{position:relative;z-index:5;width:min(1320px,calc(100% - 80px));margin:0 auto!important} .ad-about-eyebrow{margin:0 0 24px!important;color:var(--ad-orange-light)!important;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.20em;text-transform:uppercase} .ad-about-title{max-width:1050px;margin:0 0 34px!important;color:#fff!important;font-size:clamp(64px,8vw,126px);font-weight:400;line-height:.91;letter-spacing:-.052em} .ad-about-lead{max-width:700px;margin:0!important;color:rgba(255,255,255,.92)!important;font-size:clamp(18px,1.6vw,23px);line-height:1.55} .ad-about-intro{position:relative;width:100%;margin:0!important;padding:130px 0 125px;background:#fff;overflow:visible} .ad-about-intro::before{content:"";position:absolute;top:-4px;left:0;z-index:2;width:100%;height:80px;background-image:url("https://audiodimension.io/wp-content/uploads/2023/09/shape-1-1-2.svg");background-repeat:no-repeat;background-position:center;background-size:100% 100%;transform:scaleY(-1);transform-origin:center;pointer-events:none} .ad-about-intro-inner,.ad-about-research-inner,.ad-about-team-inner,.ad-about-story-inner{position:relative;z-index:5;width:min(1180px,calc(100% - 80px));margin:0 auto!important} .ad-about-value{width:100%;box-sizing:border-box;padding:48px 0 64px;border-top:1px solid rgba(12,9,20,.28)} .ad-about-value+.ad-about-value{margin-top:18px!important;border-left:0!important} .ad-about-number{margin:0 0 34px!important;color:var(--ad-orange);font-size:11px;font-weight:700;letter-spacing:.15em} .ad-about-value h2{max-width:850px;margin:0 0 24px!important;color:var(--ad-dark)!important;font-size:clamp(42px,5vw,70px);font-weight:400;line-height:.96;letter-spacing:-.04em} .ad-about-value p:not(.ad-about-number){max-width:760px;color:rgba(12,9,20,.86)!important;font-size:17px;line-height:1.72} .ad-about-research{position:relative;width:100%;margin:0!important;padding:125px 0 145px;background:var(--ad-light);color:var(--ad-dark)} .ad-about-section-label{margin:0 0 24px!important;color:var(--ad-orange);font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.20em;text-transform:uppercase} .ad-section-label,.ad-about-section-label{margin:0 0 24px!important;color:#F57920!important;font-size:11px!important;font-weight:700;line-height:1.2;letter-spacing:.20em;text-transform:uppercase} .ad-about-section-title{max-width:900px;margin:0 0 70px!important;color:var(--ad-dark);font-size:clamp(48px,6vw,86px);font-weight:400;line-height:.96;letter-spacing:-.045em} .ad-about-research-columns{gap:80px}.ad-about-research-columns p{margin:0;color:rgba(12,9,20,.84)!important;font-size:18px;line-height:1.75} .ad-about-team.style-2{margin:55px 0!important;padding:125px 0 135px;background:#184E7D!important;color:#fff!important;overflow:visible!important} .ad-about-team.style-2 .ad-about-section-label{color:var(--ad-orange-light)!important}.ad-about-team.style-2 .ad-about-section-title,.ad-about-team.style-2 .ad-team-card h3{color:#fff!important} .ad-team-grid{margin:0!important;gap:32px}.ad-team-grid-second{max-width:790px;margin-top:72px!important}.ad-team-card{position:relative;color:#fff} .ad-team-card figure{margin:0 0 28px!important;overflow:hidden;border-radius:2px;background:var(--ad-dark)}.ad-team-card figure img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .ad-about-team .ad-team-role{margin:0 0 10px!important;color:var(--ad-orange-light)!important;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase} .ad-about-team .ad-team-card h3{margin:0 0 17px!important;font-size:clamp(25px,2.3vw,34px);font-weight:400;line-height:1.06;letter-spacing:-.025em} .ad-about-team .ad-team-card>p:last-child{margin-bottom:0!important;color:rgba(255,255,255,.94)!important;font-size:15px;line-height:1.68} .ad-about-story.style-3{margin:55px 0!important;padding:125px 0 140px;background:#0c0914!important;color:#fff!important;overflow:visible!important} .ad-about-story.style-3 .ad-about-section-label{color:var(--ad-orange-light)!important} .ad-about-story-title{max-width:980px;margin:0 0 70px!important;color:#fff!important;font-size:clamp(54px,7vw,100px);font-weight:400;line-height:.91;letter-spacing:-.05em} .ad-about-story-columns{gap:85px}.ad-about-story-columns p{color:rgba(255,255,255,.92)!important;font-size:18px;line-height:1.75} .ad-partners-strip.style-3{margin:55px 0!important;padding:72px 0 78px;background:#0c0914!important;color:#fff!important;overflow:visible!important}.ad-partners-strip.style-3 .ad-partners-strip-title{color:#fff!important} @media(max-width:1000px){.ad-about-hero-inner,.ad-about-intro-inner,.ad-about-research-inner,.ad-about-team-inner,.ad-about-story-inner{width:calc(100% - 60px)}.ad-about-hero{min-height:500px;padding:100px 0 125px}.ad-about-intro,.ad-about-research{padding:105px 0 115px}.ad-about-team.style-2,.ad-about-story.style-3{margin:42px 0!important;padding:105px 0 115px}.style-2::before,.style-2::after,.style-3::before,.style-3::after{height:64px}.style-2::before,.style-3::before{top:-30px}.style-2::after,.style-3::after{bottom:-30px}} @media(max-width:700px){.ad-about-hero-inner,.ad-about-intro-inner,.ad-about-research-inner,.ad-about-team-inner,.ad-about-story-inner{width:calc(100% - 40px)}.ad-about-hero{min-height:auto;padding:72px 0 88px}.ad-about-title{font-size:clamp(52px,16vw,76px)}.ad-about-intro{padding:80px 0 85px}.ad-about-intro::before{content:none!important;display:none!important}.ad-about-research{padding:80px 0 90px}.ad-about-research-columns,.ad-about-story-columns,.ad-team-grid,.ad-team-grid-second{display:block}.ad-about-research-columns .wp-block-column+.wp-block-column,.ad-about-story-columns .wp-block-column+.wp-block-column{margin-top:28px}.ad-team-grid-second{max-width:none;margin-top:0!important}.ad-team-card{margin-bottom:55px}.ad-team-card:last-child{margin-bottom:0}.ad-about-team.style-2,.ad-about-story.style-3,.ad-partners-strip.style-3{margin:28px 0!important;padding:78px 0 85px}.style-2::before,.style-2::after,.style-3::before,.style-3::after{height:42px}.style-2::before{top:-19px;left:-22%;width:140%}.style-2::after{bottom:-19px;left:-8%;width:134%}.style-3::before{top:-19px;left:-8%;width:136%}.style-3::after{bottom:-19px;left:-22%;width:142%}} .style-2 a:focus-visible,.style-3 a:focus-visible{outline:3px solid #FF9A4A;outline-offset:4px} /* ============================================================ ABOUT — FINAL SECTION TRANSITIONS Fixes: 1. no white gaps between Research / Team / Story 2. softer blue organic edge 3. larger section labels, smaller main section headings 4. white Our Story copy 5. reusable dark styles overlap previous section cleanly ============================================================ */ /* ------------------------------------------------------------ IMPORTANT: allow organic edges to extend outside sections ------------------------------------------------------------ */ .ad-about-page, .ad-about-research, .ad-about-team, .ad-about-story, .style-2, .style-3 { overflow: visible !important; } /* ============================================================ RESEARCH -> LEADERSHIP TEAM Blue begins immediately and overlaps the beige section. ============================================================ */ .ad-about-research { position: relative; z-index: 1; margin-bottom: 0 !important; } /* * Remove the old white gap. * The blue section itself starts immediately after Research. */ .ad-about-team, .ad-about-team.style-2 { position: relative; z-index: 5; margin-top: 0 !important; margin-bottom: 0 !important; background: #184E7D !important; color: #ffffff !important; isolation: isolate; } /* * Keep actual Team content above the blue organic edge. */ .ad-about-team > *, .ad-about-team.style-2 > * { position: relative; z-index: 7; } /* ============================================================ BLUE — TOP ORGANIC EDGE Soft, shallow and shifted LEFT. ============================================================ */ .ad-about-team::before, .ad-about-team.style-2::before { content: "" !important; position: absolute !important; top: -30px !important; left: -4% !important; z-index: 6 !important; display: block !important; width: 124% !important; height: 62px !important; background: #184E7D !important; background-image: none !important; border-radius: 63% 37% 0 0 / 100% 100% 0 0 !important; transform: none !important; pointer-events: none; } /* ============================================================ BLUE — BOTTOM ORGANIC EDGE Soft convex movement toward RIGHT. ============================================================ */ .ad-about-team::after, .ad-about-team.style-2::after { content: "" !important; position: absolute !important; bottom: -28px !important; left: -16% !important; z-index: 6 !important; display: block !important; width: 130% !important; height: 58px !important; background: #184E7D !important; background-image: none !important; border-radius: 0 0 36% 64% / 0 0 100% 100% !important; transform: none !important; pointer-events: none; } /* ============================================================ LEADERSHIP TEAM TYPOGRAPHY Label larger, headline smaller. ============================================================ */ .ad-about-team .ad-about-section-title { max-width: 820px; margin-bottom: 64px !important; color: #ffffff !important; font-size: clamp(40px, 4.8vw, 64px) !important; font-weight: 400; line-height: .98; letter-spacing: -.04em; } /* ============================================================ TEAM -> OUR STORY Black must sit directly over the blue, never with white gap. ============================================================ */ .ad-about-story, .ad-about-story.style-3 { position: relative; z-index: 10; margin-top: 0 !important; margin-bottom: 0 !important; background: #0c0914 !important; color: #ffffff !important; isolation: isolate; } /* * Story content stays above black organic edges. */ .ad-about-story > *, .ad-about-story.style-3 > * { position: relative; z-index: 12; } /* ============================================================ STYLE 3 / OUR STORY — TOP EDGE More pronounced than blue, overlapping the previous section. ============================================================ */ .ad-about-story::before, .ad-about-story.style-3::before, .style-3::before { content: "" !important; position: absolute !important; top: -39px !important; left: -5% !important; z-index: 11 !important; display: block !important; width: 132% !important; height: 80px !important; background: #0c0914 !important; background-image: none !important; border-radius: 64% 36% 0 0 / 100% 100% 0 0 !important; transform: none !important; pointer-events: none; } /* ============================================================ STYLE 3 / OUR STORY — BOTTOM EDGE ============================================================ */ .ad-about-story::after, .ad-about-story.style-3::after, .style-3::after { content: "" !important; position: absolute !important; bottom: -38px !important; left: -18% !important; z-index: 11 !important; display: block !important; width: 136% !important; height: 78px !important; background: #0c0914 !important; background-image: none !important; border-radius: 0 0 37% 63% / 0 0 100% 100% !important; transform: none !important; pointer-events: none; } /* ============================================================ OUR STORY TYPOGRAPHY Label larger, headline smaller. ============================================================ */ .ad-about-story .ad-about-story-title { max-width: 850px; margin-bottom: 62px !important; color: #ffffff !important; font-size: clamp(42px, 5vw, 66px) !important; font-weight: 400; line-height: .97; letter-spacing: -.04em; } /* * All Our Story paragraphs must be truly white. */ .ad-about-story-columns p, .ad-about-story .wp-block-column p, .ad-about-story p:not(.ad-about-section-label) { color: #ffffff !important; } /* ============================================================ REUSABLE STYLE 2 + STYLE 3 Remove artificial white gaps when applied elsewhere. ============================================================ */ .style-2, .style-3 { margin-top: 0 !important; margin-bottom: 0 !important; } /* * When a dark organic section directly follows another section, * its top curve must visually overlap what comes before. */ .style-2, .style-3 { position: relative; } /* ============================================================ PARTNERS Keep current successful black treatment. ============================================================ */ .ad-partners-strip.style-3 { position: relative; z-index: 10; margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1000px) { .ad-about-team::before, .ad-about-team.style-2::before { top: -24px !important; height: 50px !important; } .ad-about-team::after, .ad-about-team.style-2::after { bottom: -22px !important; height: 46px !important; } .ad-about-story::before, .ad-about-story.style-3::before, .style-3::before { top: -31px !important; height: 64px !important; } .ad-about-story::after, .ad-about-story.style-3::after, .style-3::after { bottom: -30px !important; height: 62px !important; } .ad-about-team .ad-about-section-title, .ad-about-story .ad-about-story-title { font-size: clamp(38px, 5.5vw, 56px) !important; } } /* ============================================================ MOBILE Curves remain visible but shallower. ============================================================ */ @media (max-width: 700px) { .ad-about-team::before, .ad-about-team.style-2::before { top: -15px !important; left: -6% !important; width: 128% !important; height: 32px !important; } .ad-about-team::after, .ad-about-team.style-2::after { bottom: -14px !important; left: -18% !important; width: 136% !important; height: 30px !important; } .ad-about-story::before, .ad-about-story.style-3::before, .style-3::before { top: -20px !important; left: -8% !important; width: 136% !important; height: 42px !important; } .ad-about-story::after, .ad-about-story.style-3::after, .style-3::after { bottom: -19px !important; left: -22% !important; width: 142% !important; height: 40px !important; } .ad-about-team .ad-about-section-title, .ad-about-story .ad-about-story-title { margin-bottom: 45px !important; font-size: clamp(36px, 11vw, 48px) !important; } } /* ============================================================ THREE FEATURES ============================================================ */ .ad-features-three { width: 100%; margin: 0 !important; padding: 75px 0 85px; background: #ffffff; } .ad-features-three-inner { width: min(1180px, calc(100% - 80px)); margin: 0 auto !important; } .ad-features-three-grid { margin: 0 !important; gap: clamp(45px, 6vw, 95px); } .ad-feature-card { text-align: center; } .ad-feature-icon { width: 64px; height: 64px; margin: 0 auto 22px !important; } .ad-feature-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .ad-feature-title { margin: 0 0 18px !important; color: #0c0914 !important; font-size: 18px; font-weight: 500; line-height: 1.25; } .ad-feature-text { max-width: 310px; margin: 0 auto !important; color: rgba(12,9,20,.82); font-size: 15px; line-height: 1.65; } @media (max-width: 800px) { .ad-features-three { padding: 60px 0 65px; } .ad-features-three-inner { width: calc(100% - 40px); } .ad-features-three-grid { display: block; } .ad-feature-card + .ad-feature-card { margin-top: 55px; } .ad-feature-text { max-width: 420px; } } /* ========================================================= CONTACT — FULL WIDTH MAP ========================================================= */ .ad-contact-map { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 64px !important; margin-bottom: 0px !important; padding: 0 !important; line-height: 0; } .ad-contact-map iframe { display: block; width: 100%; height: 520px; border: 0; } @media (max-width: 782px) { .ad-contact-map { margin-top: 40px !important; } .ad-contact-map iframe { height: 400px; } } /* ============================================================ LABEL CONSISTENCY — FINAL AUTHORITATIVE RULE Small orange uppercase labels across reusable/About sections. ============================================================ */ .ad-section-label, .ad-about-section-label, .ad-about-team .ad-about-section-label, .ad-about-story .ad-about-section-label { margin: 0 0 24px !important; color: #F57920 !important; font-size: 11px !important; font-weight: 700; line-height: 1.2; letter-spacing: .20em; text-transform: uppercase; } /* ============================================================ REUSABLE BLACK / BLUE SECTIONS — ALIGNMENT FIX Matches the horizontal rhythm of the surrounding page. ============================================================ */ .ad-section.ad-section-black.style-3, .ad-section.ad-section-blue.style-2 { position: relative; width: 100% !important; max-width: none !important; padding: 88px 0 92px; box-sizing: border-box; overflow: visible !important; } /* IMPORTANT: the pattern's inner Group uses layout:default, not constrained. This keeps label, columns and image on the SAME 1180px grid. */ .ad-section .ad-section-inner { width: min(1180px, calc(100% - 90px)) !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* label aligned exactly with the left edge of the content */ .ad-section .ad-section-label { width: 100%; margin: 0 0 28px !important; padding: 0 !important; color: #F57920 !important; font-size: 11px !important; font-weight: 700; line-height: 1.2; letter-spacing: .20em; text-transform: uppercase; } /* native Gutenberg two-column grid */ .ad-section .ad-section-columns { width: 100% !important; max-width: none !important; margin: 0 !important; gap: clamp(44px, 5vw, 76px) !important; align-items: flex-start; } .ad-section .ad-section-column { min-width: 0; flex-basis: 0 !important; flex-grow: 1 !important; } /* headings stay inside their own text column */ .ad-section .ad-section-title { max-width: none !important; margin: 0 0 20px !important; color: #ffffff !important; font-size: clamp(30px, 3vw, 44px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; } .ad-section .ad-section-column p { max-width: none !important; margin-top: 0; color: rgba(255,255,255,.94) !important; } /* image fills the full width of its Gutenberg column */ .ad-section .ad-section-column-image, .ad-section .ad-section-image { width: 100% !important; max-width: none !important; } .ad-section .ad-section-image { margin: 0 !important; } .ad-section .ad-section-image img { display: block; width: 100% !important; max-width: none !important; height: auto !important; object-fit: cover; } /* Make the right-hand image reach the same right grid edge as the paragraphs above/below the coloured band. */ .ad-section .ad-section-column-image .wp-block-image { margin-left: 0 !important; margin-right: 0 !important; } /* Keep dark copy white */ .ad-section.ad-section-black h1, .ad-section.ad-section-black h2, .ad-section.ad-section-black h3, .ad-section.ad-section-black h4, .ad-section.ad-section-black p, .ad-section.ad-section-blue h1, .ad-section.ad-section-blue h2, .ad-section.ad-section-blue h3, .ad-section.ad-section-blue h4, .ad-section.ad-section-blue p { color: #ffffff !important; } @media (max-width: 1000px) { .ad-section .ad-section-inner { width: calc(100% - 60px) !important; } .ad-section .ad-section-columns { gap: 42px !important; } } @media (max-width: 781px) { .ad-section.ad-section-black.style-3, .ad-section.ad-section-blue.style-2 { padding: 68px 0 72px; } .ad-section .ad-section-inner { width: calc(100% - 40px) !important; } .ad-section .ad-section-columns { gap: 28px !important; } } /* ============================================================ STANDALONE DARK WAVE SEPARATOR Insert this pattern directly below Home Hero. ============================================================ */ .ad-wave-separator { position: relative; width: 100%; max-width: none !important; height: 96px; margin: 0 !important; padding: 0 !important; overflow: hidden; line-height: 0; pointer-events: none; } .ad-wave-separator-dark { background: transparent; } .ad-wave-separator-shape { position: absolute; inset: 0; width: 100%; height: 100%; background-image: url("https://audiodimension.io/wp-content/uploads/2023/09/shape-8.svg"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; transform: rotate(180deg); transform-origin: center center; } /* No accidental Gutenberg spacing around the separator */ .ad-home-hero + .ad-wave-separator, .ad-wave-separator + * { margin-block-start: 0 !important; } @media (max-width: 700px) { .ad-wave-separator { height: 56px; } } /* ============================================================ INTERNAL PAGES / TECHNOLOGY — AUTHORITATIVE HORIZONTAL SAFE AREA Loaded after audiodimension.css, so this must live in pages.css. ============================================================ */ .ad-features-three-inner, .ad-section .ad-section-inner, .ad-page-content, .ad-page-content-inner, .ad-content-inner, .ad-intro-pages-inner { width: 100% !important; max-width: 1270px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 45px !important; padding-right: 45px !important; box-sizing: border-box !important; } @media (max-width: 1000px) { .ad-features-three-inner, .ad-section .ad-section-inner, .ad-page-content, .ad-page-content-inner, .ad-content-inner, .ad-intro-pages-inner { max-width: none !important; padding-left: 30px !important; padding-right: 30px !important; } } @media (max-width: 700px) { .ad-features-three-inner, .ad-section .ad-section-inner, .ad-page-content, .ad-page-content-inner, .ad-content-inner, .ad-intro-pages-inner { padding-left: 20px !important; padding-right: 20px !important; } }