/* Athena Host v1.0.0 — Host an ATM page styles. Design weights preserved exactly (max 700, mostly 500/600). Full bleed, theme image shielding, and overflow clipping built in. */ .ah-wrap { font-family: 'Poppins', 'Avenir Next', Avenir, sans-serif; background: #F7F7F5; color: #0B0B0C; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .ah-wrap *, .ah-wrap *::before, .ah-wrap *::after { box-sizing: border-box; } .ah-wrap a { text-decoration: none !important; } /* Content column matches the Breakdance content width (Settings > Athena Host). Same math Breakdance uses: content width + its 20px gutters. */ .ah-inner { max-width: calc(var(--ah-content, 1366px) + 40px); margin: 0 auto; padding-left: 20px; padding-right: 20px; } body.ah-fullbleed { overflow-x: hidden; } /* ---------- Hero ---------- */ .ah-hero { position: relative; background: #0B0B0C; color: #fff; overflow: hidden; } /* Photo occupies the right side only, fading into the dark left panel, so the headline never overlaps the subject's face at any width. */ .ah-hero { display: flex; flex-direction: column; } .ah-hero-bg { position: absolute; top: 0; bottom: 0; right: 0; left: 37%; width: 63% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 76% 22%; opacity: .92; } .ah-hero-grad { position: absolute; inset: 0; background: linear-gradient(100deg, #0B0B0C 37%, rgba(11,11,12,.88) 51%, rgba(11,11,12,.22) 72%, rgba(11,11,12,.05) 89%); } .ah-hero-bg-m { display: none; } .ah-hero-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #FFC04A, transparent); } .ah-hero-inner { padding-top: 152px; padding-bottom: 124px; position: relative; } .ah-badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,192,74,.4); color: #FFC04A; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 7px 14px; border-radius: 2px; } .ah-badge-dot { width: 4px; height: 4px; background: #FFC04A; border-radius: 50%; } .ah-hero h1.ah-title { font-size: clamp(38px, 5vw, 66px) !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: -.03em !important; margin: 26px 0 0 !important; color: #fff !important; font-family: inherit !important; } .ah-accent { color: #FFC04A; } .ah-accent-deep { color: #F7931A; } .ah-hero-sub { font-family: Roboto, sans-serif; font-size: 20px; line-height: 1.6; color: #C9C9CF; max-width: 58ch; margin: 26px 0 0; } .ah-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .ah-btn-gold { background: #FFC04A; color: #0B0B0C !important; font-size: 15px; font-weight: 500; padding: 15px 28px; border-radius: 2px; display: inline-block; transition: background .15s; } .ah-btn-gold:hover { background: #FFD07A; } .ah-btn-ghost { border: 1px solid rgba(255,255,255,.28); color: #fff !important; font-size: 15px; font-weight: 400; padding: 15px 28px; border-radius: 2px; display: inline-block; transition: border-color .15s, color .15s; } .ah-btn-ghost:hover { border-color: #FFC04A; color: #FFC04A !important; } /* Stat strip on hero */ .ah-stats { border-top: 1px solid rgba(255,255,255,.09); position: relative; background: rgba(11,11,12,.6); } .ah-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ah-stat { padding: 30px 28px 32px; border-left: 1px solid rgba(255,255,255,.09); } .ah-stat:first-child { padding-left: 0; border-left: none; } .ah-stat:last-child { padding-right: 0; } .ah-stat-value { font-size: 36px; font-weight: 600; color: #FFC04A; letter-spacing: -.02em; } .ah-stat-label { font-family: Roboto, sans-serif; font-size: 14px; color: #8A8A93; margin-top: 6px; } /* ---------- Gold banner ---------- */ .ah-band { background: #FFC04A; } .ah-band-inner { padding-top: 64px; padding-bottom: 68px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .ah-band h2.ah-band-h { font-size: clamp(26px, 3vw, 38px) !important; font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.3 !important; margin: 0 !important; max-width: 48ch; color: #0B0B0C !important; font-family: inherit !important; } .ah-band-h strong { font-weight: 700; } .ah-btn-dark { flex: none; background: #0B0B0C; color: #fff !important; font-size: 16px; font-weight: 500; padding: 17px 34px; border-radius: 14px; border: 2px solid #0B0B0C; transition: background .18s ease, color .18s ease; display: inline-block; } .ah-btn-dark:hover { background: transparent; color: #0B0B0C !important; } /* ---------- Section headers ---------- */ .ah-sec { padding-top: 88px; } .ah-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 4px; } .ah-sec h2.ah-h2 { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; margin: 0 !important; color: #0B0B0C !important; font-family: inherit !important; } .ah-sec-sub { font-family: Roboto, sans-serif; font-size: 17px; color: #55555E; margin: 8px 0 0; } .ah-link-under { font-family: Roboto, sans-serif; font-size: 14px; font-weight: 500; color: #0B0B0C !important; border-bottom: 1px solid #FFC04A; padding-bottom: 2px; flex: none; } .ah-link-under:hover { color: #F7931A !important; } /* ---------- Benefits ---------- */ .ah-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 34px; } .ah-benefit { background: #fff; border: 1px solid #E2E2DC; border-radius: 3px; overflow: hidden; } .ah-benefit-media { position: relative; height: 230px; background: #0B0B0C; } .ah-benefit-media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; } .ah-benefit-num { position: absolute; left: 0; bottom: 0; background: #FFC04A; color: #0B0B0C; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; } .ah-benefit-body { padding: 26px 28px 30px; } .ah-benefit h3.ah-h3 { font-size: 23px !important; font-weight: 700 !important; letter-spacing: -.01em !important; margin: 0 !important; color: #0B0B0C !important; font-family: inherit !important; } .ah-benefit p { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.65; color: #55555E; margin: 10px 0 0; } /* ---------- Testimonials ---------- */ .ah-quotes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 34px; } .ah-quote { background: #fff; border: 1px solid #E2E2DC; border-radius: 3px; padding: 32px 34px 28px; display: flex; flex-direction: column; gap: 20px; } .ah-quote-mark { font-size: 44px; line-height: .6; color: #FFC04A; font-weight: 600; } .ah-quote p { font-family: Roboto, sans-serif; font-size: 17px; line-height: 1.7; color: #0B0B0C; margin: 0; flex: 1; } .ah-quote-who { display: flex; align-items: center; gap: 14px; border-top: 1px solid #E2E2DC; padding-top: 20px; } .ah-quote-badge { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0B0B0C; color: #FFC04A; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .ah-quote-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .ah-quote-role { font-family: Roboto, sans-serif; font-size: 14px; color: #6C6C75; margin-top: 2px; } /* ---------- Steps ("What Hosting Takes") ---------- */ .ah-steps-sec { padding-top: 76px; } .ah-steps-card { background: #0B0B0C; color: #fff; border-radius: 3px; padding: 56px 56px 60px; position: relative; overflow: hidden; } .ah-steps-owl { position: absolute; right: -70px; bottom: -90px; height: 420px !important; width: auto !important; max-width: none !important; opacity: .05; pointer-events: none; } .ah-steps-card h2.ah-h2-light { font-size: clamp(25px, 3vw, 32px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; margin: 0 !important; position: relative; color: #fff !important; font-family: inherit !important; } .ah-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; position: relative; } .ah-step { padding: 0 34px; } .ah-step + .ah-step { border-left: 1px solid rgba(255,255,255,.14); } .ah-step-num { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: #FFC04A; } .ah-step-title { font-size: 21px; font-weight: 500; margin-top: 14px; letter-spacing: -.01em; } .ah-step p { font-family: Roboto, sans-serif; font-size: 15px; line-height: 1.65; color: #C9C9CF; margin: 9px 0 0; } /* ---------- Apply ---------- */ .ah-apply { padding-top: 84px; padding-bottom: 96px; } .ah-apply-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; } .ah-apply h2.ah-apply-h { font-size: clamp(32px, 4vw, 48px) !important; font-weight: 600 !important; letter-spacing: -.015em !important; line-height: 1.28 !important; margin: 0 !important; color: #0B0B0C !important; font-family: inherit !important; } .ah-apply-sub { font-family: Roboto, sans-serif; font-size: 17px; line-height: 1.65; color: #55555E; margin: 20px 0 0; } .ah-checklist { margin-top: 36px; border-top: 1px solid #E2E2DC; padding-top: 32px; display: flex; flex-direction: column; gap: 30px; } .ah-check { display: flex; gap: 18px; align-items: center; } .ah-check-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #FFC04A; display: flex; align-items: center; justify-content: center; } .ah-check-icon img { width: 22px !important; height: 22px !important; max-width: none !important; display: block; } .ah-check-text { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.5; color: #0B0B0C; } .ah-talk { margin-top: 32px; border-top: 1px solid #E2E2DC; padding-top: 24px; } .ah-talk-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6C6C75; } .ah-talk-phone { display: block; font-size: 22px; font-weight: 500; color: #0B0B0C !important; margin-top: 10px; } .ah-talk-phone:hover { color: #F7931A !important; } .ah-talk-email { font-family: Roboto, sans-serif; font-size: 15px; color: #55555E !important; } .ah-talk-email:hover { color: #F7931A !important; } /* Form card */ .ah-form-card { background: #0B0B0C; border-radius: 3px; padding: 38px 40px 42px; color: #fff; } .ah-form-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #FFC04A; } .ah-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .ah-form-grid.ah-first { margin-top: 22px; } .ah-form-grid.ah-addr { grid-template-columns: 2fr 1fr; } .ah-form-grid.ah-csz { grid-template-columns: 2fr 1.4fr 1fr; } .ah-field { display: block; } .ah-label { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8A8A93; } .ah-wrap input.ah-input, .ah-wrap textarea.ah-textarea, .ah-wrap select.ah-select { width: 100%; margin-top: 9px; background: #141416 !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 2px !important; color: #fff !important; font-family: Roboto, sans-serif !important; font-size: 15px !important; padding: 13px 14px !important; outline: none !important; box-shadow: none !important; } .ah-wrap input.ah-input:focus, .ah-wrap textarea.ah-textarea:focus, .ah-wrap select.ah-select:focus { border-color: #FFC04A !important; } .ah-wrap input.ah-input::placeholder, .ah-wrap textarea.ah-textarea::placeholder { color: #8A8A93; } .ah-wrap select.ah-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A93' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; } .ah-wrap select.ah-select option { background: #141416; color: #fff; } .ah-pill-wrap { margin-top: 20px; } .ah-pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; } .ah-pill { background: transparent; color: #C9C9CF; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; font-size: 13px; font-weight: 500; padding: 9px 14px; cursor: pointer; } .ah-pill.is-on { background: #FFC04A; color: #0B0B0C; border-color: #FFC04A; } .ah-textarea { resize: vertical; line-height: 1.55 !important; } .ah-submit { width: 100%; margin-top: 22px; background: #FFC04A; color: #0B0B0C; border: none; border-radius: 2px; font-size: 15px; font-weight: 600; letter-spacing: .04em; padding: 16px; cursor: pointer; transition: background .15s; } .ah-submit:hover { background: #FFD07A; } .ah-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* Success state */ .ah-sent { min-height: 470px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; animation: ahFade .4s ease both; } .ah-sent-owl { height: 56px !important; width: auto !important; max-width: none !important; } .ah-sent-title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; } .ah-sent-copy { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: #C9C9CF; margin: 0; max-width: 44ch; } .ah-sent-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; } @keyframes ahFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* 1440 to 1699: side layout with smaller type and the photo pushed further right so text and face keep clear separation. */ @media (min-width: 1440px) and (max-width: 1699px) { .ah-hero h1.ah-title { font-size: 52px !important; } .ah-hero-sub { font-size: 18px; max-width: 52ch; } .ah-hero-bg { left: 44%; width: 56% !important; } .ah-hero-grad { background: linear-gradient(100deg, #0B0B0C 44%, rgba(11,11,12,.88) 55%, rgba(11,11,12,.22) 74%, rgba(11,11,12,.05) 91%); } } /* Desktop and tablet landscape: hero text anchored toward the left edge instead of the centered container. Stats align to match. */ @media (min-width: 1025px) { .ah-hero-inner, .ah-stats .ah-inner { max-width: none; margin: 0; padding-left: 20vw; padding-right: 40px; } } /* Tablet landscape: a smaller version of the desktop side layout. */ @media (min-width: 1025px) and (max-width: 1439px) { .ah-hero-inner { padding-top: 104px; padding-bottom: 88px; } .ah-hero h1.ah-title { font-size: 44px !important; } .ah-hero-sub { font-size: 16px; max-width: 48ch; } .ah-hero-bg { left: 47%; width: 53% !important; } .ah-hero-grad { background: linear-gradient(100deg, #0B0B0C 47%, rgba(11,11,12,.88) 57%, rgba(11,11,12,.22) 76%, rgba(11,11,12,.05) 91%); } } /* ---------- Responsive ---------- */ /* Below 1280 the side-by-side hero cannot guarantee clearance from the subject's face, so it stacks: text panel, then photo band, then stats. */ @media (max-width: 1024px) { .ah-band-inner { flex-direction: column; align-items: center; text-align: center; gap: 26px; } /* Stacked hero: text centered above the photo band. */ .ah-hero-inner { padding-top: 64px; padding-bottom: 56px; order: 1; text-align: center; } .ah-hero-sub { margin-left: auto; margin-right: auto; } .ah-hero-ctas { justify-content: center; } .ah-hero-bg { position: static !important; order: 2; width: 100% !important; height: 380px !important; left: auto; object-position: 70% 22%; opacity: 1; } .ah-hero-grad { display: none; } .ah-stats { order: 3; } } @media (max-width: 1023px) { .ah-inner { padding-left: 28px; padding-right: 28px; } .ah-hero-bg { height: 340px !important; } .ah-stats-grid { grid-template-columns: 1fr 1fr; } .ah-stat, .ah-stat:first-child, .ah-stat:last-child { padding: 22px 20px; border-left: none; border-top: 1px solid rgba(255,255,255,.09); } .ah-stat:nth-child(-n+2) { border-top: none; } .ah-stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.09); } .ah-band-inner { padding-top: 48px; padding-bottom: 52px; } .ah-benefits-grid, .ah-quotes-grid { grid-template-columns: 1fr; } .ah-steps-card { padding: 40px 32px 44px; } .ah-steps-grid { grid-template-columns: 1fr; gap: 28px; } .ah-step { padding: 0; } .ah-step + .ah-step { border-left: none; border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px; } .ah-apply-grid { grid-template-columns: 1fr; gap: 44px; } .ah-sec { padding-top: 64px; } .ah-steps-sec { padding-top: 64px; } .ah-apply { padding-top: 64px; padding-bottom: 72px; } } @media (max-width: 640px) { .ah-inner { padding-left: 20px; padding-right: 20px; } .ah-hero-sub { font-size: 17px; } .ah-hero-inner { text-align: left; } .ah-badge { font-size: 10px; letter-spacing: .1em; gap: 8px; padding: 6px 10px; white-space: nowrap; } .ah-hero-sub { margin-left: 0; margin-right: 0; } .ah-hero-ctas { justify-content: flex-start; } .ah-band-inner { align-items: flex-start; text-align: left; } .ah-sent-ctas { width: 100%; } .ah-sent-ctas a { width: 100%; text-align: center; } /* Phones: photo sits between the subtitle and the buttons. */ .ah-hero-bg { display: none !important; } .ah-hero-bg-m { display: block; width: calc(100% + 40px); max-width: none !important; margin: 26px -20px 0; height: 300px; object-fit: cover; object-position: 70% 22%; } .ah-hero-ctas { margin-top: 26px; } .ah-hero-inner { padding-bottom: 40px; } .ah-hero-ctas a { width: 100%; text-align: center; } .ah-stats-grid { grid-template-columns: 1fr; } .ah-stat, .ah-stat:nth-child(even), .ah-stat:nth-child(-n+2) { border-left: none; border-top: 1px solid rgba(255,255,255,.09); padding: 18px 0; } .ah-stat:first-child { border-top: none; } .ah-form-card { padding: 26px 20px 30px; } .ah-form-grid, .ah-form-grid.ah-addr, .ah-form-grid.ah-csz { grid-template-columns: 1fr; } .ah-quote { padding: 24px 22px 22px; } } /* Anchor targets: offset for the site's fixed headers (~118px) plus the WP admin bar when logged in, so #apply / #benefits land below them. */ /* Anchor targets. Was a flat 126px. The site header is two stacked bars and the lower one collapses on scroll: 182px tall sitting at the top of the page, 118px once it has moved. 126 left 8px of clearance in the best case and none at all on a laptop, where the navigation sits taller, which is why the jump links landed underneath the header and read as having scrolled past the target. assets/js/host.js does the real work by measuring the header AFTER the jump has settled. What follows is the fallback for a reader with JavaScript off, and it uses the taller of the two heights on purpose: landing a little low is far better than landing underneath the header and seeing nothing. */ #apply, #benefits { scroll-margin-top: calc(182px + 24px + var(--wp-admin--admin-bar--height, 0px)); } @media (max-width: 640px) { #apply, #benefits { scroll-margin-top: calc(262px + 24px + var(--wp-admin--admin-bar--height, 0px)); } } /* ================== 1.1.6 ================== */ /* The content edge every other section on this page sits on. Same arithmetic .ah-inner already does: the Breakdance content width plus its 20px gutters, centred, with 20px of padding inside. */ .ah-wrap{ --ah-inset: max(20px, calc((100vw - (var(--ah-content,1366px) + 40px)) / 2 + 20px)); } /* ---------------------------------------------------------------- HERO --- The hero copy was inset by a flat 20vw. A viewport percentage has nothing to do with where the rest of the page starts, and the two come apart badly as the screen gets smaller. Measured: 2560 wide : hero at 512, sections at 597 (close, reads fine) 1512 wide : hero at 302, sections at 73 (229px apart) 1440 wide : hero at 288, sections at 37 (251px apart) 1366 wide : hero at 273, sections at 20 (253px apart) So on a 27 inch screen it reads correctly, and on any laptop the headline is pushed a quarter of the screen inboard while everything below it sits hard against the page edge. The headline also ran into the subject's face. min() rather than replacing the 20vw outright. The hero now starts at whichever is further LEFT: the page's own content edge, or the design's 20vw. On a wide screen 20vw is the smaller number and nothing changes, so the look that is already right stays exactly as it was. On every laptop the content edge is the smaller number and the hero lines up with the page. */ @media (min-width: 1025px){ .ah-hero-inner, .ah-stats .ah-inner{ padding-left: min(20vw, var(--ah-inset)); } } /* -------------------------------------------------------------- BUTTONS --- The hero buttons measured 55px tall. Every other button on the site is 47: Careers, Contact and Buy at an ATM all run a 15px face on a 1 line-height with 16px of vertical padding. These had no line-height set, so the face carried Poppins's own 1.5 leading on top of the same padding. Setting the leading rather than shaving the padding is what makes these match the rest of the site exactly instead of landing on some new number. The ghost button takes 15px because its 1px border makes up the difference, so the two keep the same height and the same width. */ .ah-hero-ctas .ah-btn-gold{ line-height: 1; padding: 16px 28px; } .ah-hero-ctas .ah-btn-ghost{ line-height: 1; padding: 15px 27px; } /* ================== 1.1.8 : gold band ================== */ /* Was 64/68 of padding around a 38px face on 1.3 leading, which ran the band to roughly 230px on a laptop and let the line break fall on the word "you". Now about 175px, with the break forced after "Partner," by the {br} token in the band text setting. */ .ah-band-inner{ padding-top: 48px; padding-bottom: 50px; } .ah-band h2.ah-band-h{ font-size: clamp(22px, 2.1vw, 30px) !important; line-height: 1.3 !important; } /* Square, and the same 15px face on a 1 line-height as the two hero buttons, so all three buttons on this page are 47px. The hover was already correct: the fill leaves and the 2px black border it has carried all along becomes the outline. Only the 14px rounding was wrong. */ .ah-btn-dark{ border-radius: 2px; font-size: 15px; line-height: 1; padding: 14px 30px; } /* Stacked, the band carries two lines of copy, a gap and the button, so it runs taller than the 176px it holds on a laptop. Trimming the padding and the gap brings it back in proportion on a tablet without crowding it. */ @media (max-width: 1023px){ .ah-band-inner{ padding-top: 38px; padding-bottom: 42px; gap: 20px; } } /* The forced break after "Partner," is right on a laptop and on a tablet, but on a phone the first half alone already runs to three lines, so a hard break there only adds a short orphan under it. Below 640 the line flows. */ @media (max-width: 640px){ .ah-band h2.ah-band-h br{ display: none; } }