/* Responsive layer for "AP Communications Site v2.dc.html".
*
* The page is authored in Claude Design as a fixed 1440px comp: every rule
* lives in a style="" attribute and there are no media queries at all. Rather
* than rewrite 646 lines of inline styles (which a design re-sync would
* clobber), this sheet overrides the layout-critical inline values by matching
* on their literal text. !important is required throughout — inline styles beat
* any selector otherwise.
*
* IMPORTANT — every selector is listed twice. The dc-runtime mounts the page
* through React, which re-serializes each style attribute:
*
* authored padding:80px 44px grid-template-columns:repeat(3,minmax(0,1fr))
* in the DOM padding: 80px 44px; grid-template-columns: repeat(3, minmax(0px, 1fr));
*
* i.e. a space after every colon and comma, and bare 0 becomes 0px. Matching
* only the authored spelling silently matches nothing. The pairs below cover
* both so the sheet works with or without the runtime.
*
* If the page is re-synced from Design, re-add the to this file in
* and re-check these strings.
*
* Breakpoints: 1024 tablet · 900 stack two-column · 760 phone · 620 narrow.
*/
/* Horizontal gutter — the comp's 44px, tightened twice. */
:root { --ap-gutter: 44px; }
@media (max-width: 1024px) { :root { --ap-gutter: 28px; } }
@media (max-width: 640px) { :root { --ap-gutter: 20px; } }
img, svg { max-width: 100%; }
/* ── Section gutters ─────────────────────────────────────────────────────── */
[style*="padding:80px 44px"], [style*="padding: 80px 44px"] { padding: clamp(44px, 7vw, 80px) var(--ap-gutter) !important; }
[style*="padding:76px 44px"], [style*="padding: 76px 44px"] { padding: clamp(40px, 7vw, 76px) var(--ap-gutter) !important; }
[style*="padding:72px 44px"], [style*="padding: 72px 44px"] { padding: clamp(40px, 6.5vw, 72px) var(--ap-gutter) !important; }
[style*="padding:64px 44px"], [style*="padding: 64px 44px"] { padding: clamp(38px, 6vw, 64px) var(--ap-gutter) !important; }
[style*="padding:56px 44px"], [style*="padding: 56px 44px"] { padding: clamp(36px, 5.5vw, 56px) var(--ap-gutter) !important; }
[style*="padding:48px 44px"], [style*="padding: 48px 44px"] { padding: clamp(32px, 5vw, 48px) var(--ap-gutter) !important; }
[style*="padding:30px 44px"], [style*="padding: 30px 44px"] { padding: clamp(20px, 3vw, 30px) var(--ap-gutter) !important; }
[style*="padding:26px 44px"], [style*="padding: 26px 44px"] { padding: clamp(18px, 2.6vw, 26px) var(--ap-gutter) !important; }
[style*="padding:24px 44px"], [style*="padding: 24px 44px"] { padding: clamp(18px, 2.4vw, 24px) var(--ap-gutter) !important; }
[style*="padding:20px 44px"], [style*="padding: 20px 44px"] { padding: clamp(14px, 2vw, 20px) var(--ap-gutter) !important; }
[style*="padding:9px 44px"], [style*="padding: 9px 44px"] { padding: 9px var(--ap-gutter) !important; }
[style*="padding:0 44px"], [style*="padding: 0px 44px"] { padding: 0 var(--ap-gutter) !important; }
[style*="padding:44px"], [style*="padding: 44px"] { padding: var(--ap-gutter) !important; }
/* Specific variants — must follow the shorter strings they contain. */
[style*="padding:44px 36px"], [style*="padding: 44px 36px"] { padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 36px) !important; }
[style*="padding:40px 30px"], [style*="padding: 40px 30px"] { padding: clamp(28px, 3.6vw, 40px) clamp(20px, 2.6vw, 30px) !important; }
[style*="padding:76px 44px 52px"], [style*="padding: 76px 44px 52px"] { padding: clamp(40px, 7vw, 76px) var(--ap-gutter) clamp(30px, 4.6vw, 52px) !important; }
/* ── Fluid type — the comp's fixed sizes become clamps ───────────────────── */
[style*="font-size:104px"], [style*="font-size: 104px"] { font-size: clamp(40px, 10.5vw, 104px) !important; }
[style*="font-size:78px"], [style*="font-size: 78px"] { font-size: clamp(34px, 8vw, 78px) !important; }
[style*="font-size:74px"], [style*="font-size: 74px"] { font-size: clamp(34px, 7.6vw, 74px) !important; }
[style*="font-size:62px"], [style*="font-size: 62px"] { font-size: clamp(32px, 6.5vw, 62px) !important; }
[style*="font-size:52px"], [style*="font-size: 52px"] { font-size: clamp(30px, 5.4vw, 52px) !important; }
[style*="font-size:46px"], [style*="font-size: 46px"] { font-size: clamp(30px, 5vw, 46px) !important; }
[style*="font-size:44px"], [style*="font-size: 44px"] { font-size: clamp(28px, 4.6vw, 44px) !important; }
[style*="font-size:40px"], [style*="font-size: 40px"] { font-size: clamp(26px, 4.2vw, 40px) !important; }
[style*="font-size:38px"], [style*="font-size: 38px"] { font-size: clamp(26px, 4vw, 38px) !important; }
[style*="font-size:36px"], [style*="font-size: 36px"] { font-size: clamp(26px, 3.8vw, 36px) !important; }
[style*="font-size:34px"], [style*="font-size: 34px"] { font-size: clamp(25px, 3.6vw, 34px) !important; }
[style*="font-size:32px"], [style*="font-size: 32px"] { font-size: clamp(23px, 3.4vw, 32px) !important; }
[style*="font-size:30px"], [style*="font-size: 30px"] { font-size: clamp(22px, 3.2vw, 30px) !important; }
[style*="font-size:28px"], [style*="font-size: 28px"] { font-size: clamp(21px, 3vw, 28px) !important; }
[style*="font-size:27px"], [style*="font-size: 27px"] { font-size: clamp(20px, 2.8vw, 27px) !important; }
[style*="font-size:25px"], [style*="font-size: 25px"] { font-size: clamp(19px, 2.6vw, 25px) !important; }
[style*="font-size:24px"], [style*="font-size: 24px"] { font-size: clamp(19px, 2.5vw, 24px) !important; }
/* ── Grids ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
[style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
[style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
[style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
[style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Two-column splits stack. Their inner dividers were drawn as border-right /
border-left on the cell, which reads as a stray underline once stacked —
swap the right-hand rule for a bottom one. */
@media (max-width: 900px) {
[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
[style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
[style*="grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)"],
[style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr)"],
[style*="grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)"],
[style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr)"],
[style*="grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)"],
[style*="grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr)"],
[style*="grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)"],
[style*="grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr)"] {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
[style*="border-right:1px solid var(--color-divider)"],
[style*="border-right: 1px solid var(--color-divider)"] {
border-right: 0 !important;
border-bottom: 1px solid var(--color-divider) !important;
}
[style*="border-left:1px solid var(--color-divider)"],
[style*="border-left: 1px solid var(--color-divider)"] { border-left: 0 !important; }
}
@media (max-width: 700px) {
[style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
[style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
[style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
[style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
/* ── Header ──────────────────────────────────────────────────────────────── */
/* The comp puts the wordmark and five nav items on one row. That row needs
~980px (50px mark + 16 gap + 293px wordmark, then ~520px of nav, plus two
44px gutters), so below 980 the nav drops to its own full-width row —
at 768 it was otherwise overlapping the wordmark. */
@media (max-width: 980px) {
[style*="padding:20px 44px"][style*="position:sticky"],
[style*="padding: 20px 44px"][style*="position: sticky"] { flex-wrap: wrap !important; gap: 12px !important; }
[style="display:flex;align-items:center;gap:34px"],
[style="display: flex; align-items: center; gap: 34px;"] {
width: 100%;
justify-content: space-between !important;
flex-wrap: wrap;
gap: 10px !important;
}
}
/* Phone: shrink the lockup itself so row 1 stays comfortable. */
@media (max-width: 760px) {
[style="display:flex;align-items:center;gap:34px"] > div,
[style="display: flex; align-items: center; gap: 34px;"] > div { font-size: 12.5px !important; }
img[src*="ap-wordmark"] { height: 14px !important; }
img[src*="ap-mark"][style*="height:50px"],
img[src*="ap-mark"][style*="height: 50px"] { height: 38px !important; width: 38px !important; }
[style*="gap:16px;cursor:pointer"], [style*="gap: 16px; cursor: pointer"] { gap: 11px !important; }
}
/* ── Announcement bar ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
[style*="padding:9px 44px"], [style*="padding: 9px 44px"] { flex-wrap: wrap !important; font-size: 11px !important; gap: 5px 14px !important; }
[style*="padding:9px 44px"] > div, [style*="padding: 9px 44px"] > div { gap: 14px !important; }
}
/* Below 500 the standby label loses to the phone numbers, which are the CTA. */
@media (max-width: 500px) {
[style*="padding:9px 44px"] > span:first-child,
[style*="padding: 9px 44px"] > span:first-child { display: none !important; }
}
/* ── Hero ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
[style*="min-height:640px"], [style*="min-height: 640px"] { min-height: auto !important; padding: 60px 0 !important; }
[style*="gap:44px;padding-right:44px"], [style*="gap: 44px; padding-right: 44px"] { gap: 26px !important; padding-right: 26px !important; }
}
/* ── Media blocks ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
[style*="margin:44px"], [style*="margin: 44px"] { margin: var(--ap-gutter) !important; }
[style*="min-height:400px"], [style*="min-height: 400px"] { min-height: 260px !important; }
[style*="min-height:360px"], [style*="min-height: 360px"] { min-height: 240px !important; }
[style*="min-height:340px"], [style*="min-height: 340px"] { min-height: 230px !important; }
}
/* ── Rows that rely on margin-left:auto to push a trailing element right ──── */
@media (max-width: 760px) {
[style*="margin-left:auto"], [style*="margin-left: auto"] { margin-left: 0 !important; }
[style*="min-width:280px"], [style*="min-width: 280px"] { flex-wrap: wrap !important; gap: 12px !important; }
[style*="min-width:280px"] > div,
[style*="min-width: 280px"] > div { flex: 1 1 calc(50% - 6px) !important; }
}
@media (max-width: 560px) {
.btn[style*="margin-left:auto"], .btn[style*="margin-left: auto"] { width: 100% !important; }
}
/* ── Cable-type table ────────────────────────────────────────────────────── */
/* Three prose columns will not fit a phone. Drop the header row and reflow
each record into a labelled block. */
@media (max-width: 620px) {
.table thead { display: none; }
.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
.table tr { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.table td { border: 0; padding: 2px 0; }
.table td:first-child {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: 19px;
}
.table td:nth-child(2)::before,
.table td:nth-child(3)::before {
font-family: var(--font-heading);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 11px;
color: var(--color-accent-700);
display: block;
margin-top: 6px;
}
.table td:nth-child(2)::before { content: "Where it goes"; }
.table td:nth-child(3)::before { content: "Why"; }
}
/* ── Touch targets ───────────────────────────────────────────────────────── */
@media (hover: none) {
[onclick], .btn { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 22%, transparent); }
}