/* Data Center Directory front-end styles — built on the real brand colors from the logo (crimson) and homepage banner (teal), not a generic theme. Modern card/shadow/whitespace treatment below is hand-written, no Bootstrap/Tailwind dependency — see the reasoning in our build notes: a fixed-size component framework or a build-step utility framework are both the wrong tool for a WordPress plugin distributed as a zip file. */ :root { --ddc-crimson: #D91A5C; --ddc-crimson-dark: #B01049; --ddc-teal: #1B6B7A; --ddc-ink: #1A1A1A; --ddc-ink-soft: #4A4A4A; --ddc-bg: #FFFFFF; --ddc-panel: #FAFAFB; --ddc-hairline: #E8E5E9; --ddc-verified: #2E9E5B; --ddc-pending: #C98A2E; --ddc-disclaimer-tint: #FDF0F4; --ddc-shadow-sm: 0 1px 2px rgba(20,10,15,0.06), 0 1px 1px rgba(20,10,15,0.04); --ddc-shadow-md: 0 4px 14px rgba(20,10,15,0.08), 0 2px 4px rgba(20,10,15,0.05); --ddc-shadow-lift: 0 8px 24px rgba(217,26,92,0.12), 0 3px 8px rgba(20,10,15,0.06); --ddc-radius: 14px; --ddc-radius-sm: 8px; /* Added August 1, revised same day per direct feedback: the base font-SIZE fix below stays, but forcing a system-font FAMILY here was reverted — the theme's own default typeface was fine as-is, only the size (and a separate real bug, below) needed fixing. --ddc-font-size-base is a normal, comfortably-readable body-copy size (not the browser-default 16px floor, not an oversized "accessibility mode" size either) — see .ddc-page below for where this gets applied. REAL ROOT CAUSE of the reported "font looks inconsistent" symptom, found via direct screenshot after the size fix alone didn't fully resolve it: DDC_Frontend::link_or_plain() (used ~30 places site-wide — company/country/state/city names anywhere a live page might not exist yet) used to return completely unwrapped plain text for the "no live page" case, with no element for this file's own `.ddc-list a` / `.ddc-az-list li a` rules to match. An unresearched company sitting right next to an already-researched one rendered with a visibly different count font/weight — not a font-family/theme problem at all, but this plugin's own CSS only ever styling half of its own generated markup. Fixed at the root (link_or_plain() now wraps that case in a real, class-carrying span) rather than patched per selector — see that function's own docblock, and every `.ddc-plain-link` rule below, for the full fix. */ --ddc-font-mono: 'SF Mono', Consolas, monospace; --ddc-font-size-base: 18px; } * { box-sizing: border-box; } /* AUDIT NOTE (raised directly, Aug 1): CSS-only smooth scroll for the A-Z-jump anchor links and any other same-page #fragment navigation on this site, per direct request to reduce the "jump" feel without JavaScript. Important honesty about what this actually covers: scroll-behavior:smooth is guaranteed by spec for a same-document anchor click (clicking #foo while already on that exact page/URL) — it does NOT govern a full page reload to a new URL that happens to contain a #fragment (there's no CSS property that governs "how a page positions itself when it first loads at a URL with a #fragment already in it"; that's outside CSS's fragment-navigation spec, browsers just differ here). The Companies hub's filter tabs used to need a workaround for exactly that reason (first a #fragment, later a small scoped script); the type filter was since rebuilt entirely as pure CSS radios (see template-companies-hub.php and the ddc-type-tabs/ddc-visually-hidden rules below), which never reloads the page at all, so that whole problem no longer applies there either. This rule now only concerns plain same-page anchor links (A-Z jump, etc.). Scoped behind prefers-reduced-motion so anyone who's told their OS they don't want scroll animations (often for a vestibular/motion-sensitivity reason) still gets the plain instant jump, not overridden by this. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Suppresses the active theme's own title/breadcrumb banner (Construction Field theme: a functions.php-hooked ".inner-main-title" block rendered inside get_header(), confirmed not to be literal header.php markup) on every page this plugin renders — homepage and every ddc_page — since we render our own H1/breadcrumb below it. Scoped to the 'ddc-managed-page' body class (added by DDC_Frontend::load_template / DDC_Homepage::add_managed_body_class) rather than a global rule, so it never affects normal theme pages (posts, static pages) outside this plugin's control. If the theme is ever changed, this selector may need updating to match the new theme's banner markup. */ body.ddc-managed-page .inner-main-title { display: none !important; } /* Hides the active theme's mobile-nav hamburger toggle (Construction Field theme: Bootstrap-3-style ".navbar-toggle" inside ".navbar-header", confirmed via live DevTools inspection, not guessed) on every page this plugin renders. Per direct request: this site's own quick-nav links (.ddc-nav-tile — Home/Companies/Countries/AI Data Centers) already cover the same destinations the theme's mobile menu would open, so the toggle is pure redundant chrome here, not a real second navigation system being suppressed — nothing crawlable or otherwise meaningful is lost by hiding it. Same 'ddc-managed-page' scoping as the banner-hide rule above, for the same reason (never touches normal theme pages outside this plugin's control, and survives theme updates that would silently undo a direct header.php edit). Hiding just the button is enough on its own — with nothing left to trigger it, Bootstrap's .navbar-collapse panel simply never gets its "open" class added, so it stays permanently, harmlessly collapsed rather than needing its own override. If the theme is ever changed, this selector may need updating to match the new theme's toggle markup, same caveat as above. */ body.ddc-managed-page .navbar-toggle { display: none !important; } /* Base font-SIZE only (not family — see the :root comment above for why that reverted) — a belt-and-suspenders declaration on itself, in case anything this plugin ever renders lands outside the .ddc-page container below (that container gets its own explicit declaration too — higher specificity than a theme's own body/p selectors is what actually guarantees this sticks on every theme, not just this one). Font-family is deliberately left off both rules so the theme's own typeface keeps coming through, exactly as before. */ body.ddc-managed-page { font-size: var(--ddc-font-size-base); } .ddc-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 60px; color: var(--ddc-ink); line-height: 1.6; font-size: var(--ddc-font-size-base); } .ddc-page h1 { font-size: 32px; margin-bottom: 16px; letter-spacing: -0.02em; } .ddc-page h2 { font-size: 22px; margin: 40px 0 18px; border-bottom: 2px solid var(--ddc-crimson); padding-bottom: 8px; } .ddc-page h3 { font-size: 19px; margin: 24px 0 10px; color: var(--ddc-teal); } .ddc-page h4 { font-size: 17px; margin: 16px 0 8px; } /* Company logo, header-sized — sits left of the H1 on company-prefixed pages. object-fit:contain matches the CONTAIN-fit resize the logo pipeline already stores (never cropped), so the image never looks stretched or clipped regardless of the source logo's own aspect ratio. */ .ddc-page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .ddc-page-header h1 { margin-bottom: 0; } /* v2.57.0 — was 56px/4px padding. Raised directly, with a live example (AWS's own header logo reading as small even after the fetch-side fill-ratio fix in v2.56.0): that fix only ever improved how much of the STORED 256px canvas the logo content fills; it never touched this DISPLAY box, which was hardcoded small independent of anything inside the file. Increasing the box itself is the fix that actually matters for how the logo reads on the page — 88px reads as a real header mark next to an h1, not a small icon before it. */ .ddc-header-logo { width: 88px; height: 88px; object-fit: contain; border-radius: var(--ddc-radius-sm); background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); padding: 6px; flex-shrink: 0; } /* Inline thumbnail in city/region "Companies here" lists — small, sits inline before the company name inside the link. Deliberately NOT enlarged alongside the header/card logos above — this one sits inline with running text in a list row, where a bigger mark would break line-height and readability, not just be more visible. */ /* v2.59.0 — "View all locations on a map" link, raised directly for being "not so visible text." A real pill/button now, matching the site's own crimson accent already used for other primary CTAs (e.g. the homepage's "See all companies →"), not plain inline text easy to skim past. */ .ddc-map-cta { display: inline-block; background: var(--ddc-crimson); color: #fff; font-weight: 600; padding: 8px 16px; border-radius: 999px; text-decoration: none; transition: background 0.15s ease; } .ddc-map-cta:hover { background: var(--ddc-crimson-dark); color: #fff; } .ddc-breadcrumb { font-size: 14px; color: #888; margin-bottom: 16px; } .ddc-breadcrumb a { color: var(--ddc-teal); text-decoration: none; transition: color 0.15s ease; } .ddc-breadcrumb a:hover { color: var(--ddc-crimson); } .ddc-breadcrumb .sep { margin: 0 8px; color: var(--ddc-hairline); } /* List items as soft cards, not bare rows — rounded corners, layered shadow, gentle lift + shadow-deepen on hover. This is the core "modern" treatment: plenty of whitespace, no harsh borders, motion kept subtle. */ .ddc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ddc-list li { background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm); padding: 14px 18px; box-shadow: var(--ddc-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .ddc-list li:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-1px); border-color: rgba(217,26,92,0.18); } .ddc-list a { color: var(--ddc-crimson); text-decoration: none; font-weight: 600; } .ddc-list a:hover { color: var(--ddc-crimson-dark); text-decoration: underline; } /* Matches .ddc-list a's font-weight (so an unlinked entry doesn't read as visually "lighter"/different from its linked neighbors — the actual reported bug) without also adopting the crimson link color, which would make non-clickable text look clickable — a different, equally real problem the fix shouldn't introduce. See DDC_Frontend::link_or_plain()'s own docblock for the full reasoning on why this span exists at all. */ .ddc-list .ddc-plain-link { font-weight: 600; } /* Cities list layout (country page, per direct request) — deliberately NOT a fixed grid-template-columns: 1fr 1fr. A rigid 2-column grid forces every item into an equal-width track regardless of its own content, which is exactly what didn't work well on mobile (the reported problem) — a rigid 2 columns keeps sitting there even when the actual content wants something else. flex-wrap instead: each item's own width is its content's natural size (min-width as a floor), so two short city names sit side by side on their own, and a name too long to fit next to another simply has nothing left to sit beside it on that row and grows (flex-grow: 1) to fill it alone — without any screen-width breakpoint needed, mobile included, since this adapts to whatever space is actually available rather than a fixed column count. */ /* NOTE (v2.34.15): briefly unused after the country page moved its Cities list to .ddc-thin-list in v2.34.14 — now in use again on the STATE page's Cities list, per direct request. Deliberate split, not an inconsistency: one state's cities are few enough for cards to cost little, while a country's flattened city list runs to hundreds. Keep this block. */ .ddc-list-2col { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } .ddc-list-2col li { flex: 1 1 auto; min-width: 130px; } /* Section jump menu (v2.34.17, country + state pages) — the "quiet text row" option, chosen over a pill row so it reads as navigation near the breadcrumb rather than as another control competing with the company type filter's pills further down. Deliberately NOT position:sticky, per direct decision. Separators are a ::before on every link after the first rather than markup, so the PHP stays a plain loop with nothing to special-case at either end of the list. They sit inside the 's box and so are technically part of its click target — a few px of extra hit area on a navigation link, which is harmless (and if anything helpful on touch), and worth not threading separator spans through the loop. */ .ddc-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 0 0 12px; margin: 0 0 26px; border-bottom: 1px solid var(--ddc-hairline); } .ddc-jump-label { font-size: 13px; color: #888; } .ddc-jump a { font-size: 14px; font-weight: 600; color: var(--ddc-crimson); text-decoration: none; padding: 2px 0; } .ddc-jump a:hover { color: var(--ddc-crimson-dark); text-decoration: underline; } .ddc-jump a + a::before { content: "\00b7"; color: var(--ddc-hairline); margin-right: 10px; text-decoration: none; display: inline-block; } /* Breathing room above a heading landed on from the menu. Matters for the no-JS fallback (a native #id jump pins the heading flush to the viewport top) and for the scripted path alike, since scrollIntoView honours this property too. */ .ddc-page h2[id] { scroll-margin-top: 16px; } /* directory-page.js moves focus to the heading it scrolled to, so keyboard and screen-reader users continue from the new position rather than from the menu. That focus is programmatic, never from a keypress, so the ring would be noise — :focus-visible correctly suppresses it while leaving every genuinely keyboard-driven focus ring on the page untouched. */ .ddc-page h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; } .ddc-badge { font-size: 11px; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 20px; margin-left: 8px; font-weight: 700; } .ddc-badge.verified { background: #E7F5EC; color: var(--ddc-verified); } .ddc-badge.pending { background: #FBF1E3; color: var(--ddc-pending); } .ddc-badge.ai { background: #E5F1F3; color: var(--ddc-teal); } .ddc-badge.tier { background: #EFE9F7; color: #6B3FA0; } .ddc-badge.carrier-neutral { background: #EAF2FF; color: #2A5FBF; } .ddc-badge.facility-operator { background: #FCEFE3; color: #B5551A; } /* Hyperscaler (v2.36.10) — own distinct tint, same reasoning as every other badge here: a new fact deserves a color nothing else already uses, so it can't be mistaken for Facility Operator (orange) or AI (teal) at a glance. */ .ddc-badge.hyperscaler { background: #EAF0FB; color: #2B4C8C; } /* Facility Closure Review (v2.36.0) — a quiet inline notice line, not a pill, since this is a caveat about the row above it, not a status tag of the same kind as VERIFIED/AI/TIER. Reuses the same amber tint as .ddc-badge.pending (var(--ddc-pending)) rather than a new red/ error color — this is uncertainty being surfaced, not an error state on the site's own part. */ .ddc-closure-notice { /* v2.591.0 -- was max-width: 480px, capping this notice at a fixed pixel width regardless of how wide its actual container (the .ddc-list li "card" above, or a company page's own content column) rendered -- on any card wider than 480px (the normal case on desktop) the notice stopped stretching with its card and looked visually disconnected/narrower than everything around it. display: block already makes this full-width of its container by default; removing the cap lets it do that, same as every other block-level element in these cards. */ display: block; font-size: 13px; color: var(--ddc-pending); background: #FBF1E3; border-radius: 6px; padding: 6px 10px; margin-top: 6px; } .ddc-closure-icon { font-style: normal; margin-right: 4px; } .ddc-ai-blurb { font-size: 18px; color: var(--ddc-ink-soft); line-height: 1.7; margin-bottom: 12px; } .ddc-mono { font-family: var(--ddc-font-mono); font-size: 13px; color: #666; margin-left: 8px; } .ddc-contact { font-size: 15px; color: var(--ddc-ink-soft); } .ddc-website { font-size: 15px; } .ddc-website a { font-weight: 600; } .ddc-company-notes { font-size: 18px; color: var(--ddc-ink-soft); font-style: italic; line-height: 1.7; } .ddc-source { font-size: 13px; color: #888; } /* Map accuracy disclaimer (v2.61.0, per direct request) — small, muted, sits directly below the map and above the crawlable location list. Same restrained tier as .ddc-source, not the bolder .ddc-disclaimer-top. */ .ddc-map-note { font-size: 13px; color: #888; margin: 10px 0 18px; } /* "Back to full details" link on map pages (v2.61.0) — was plain, unstyled markup that fell through to the active theme's default anchor color (grey, low contrast); now explicit, matching .ddc-list a's existing crimson/bold treatment used for links elsewhere. */ .ddc-back-link { color: var(--ddc-crimson); font-weight: 600; text-decoration: none; } .ddc-back-link:hover { color: var(--ddc-crimson-dark); } /* Compact States list (country page redesign, per direct request) — the parenthetical list of a state's cities, inline on the same line as the state name rather than each city getting its own list item. */ .ddc-inline-sublist { font-size: 14px; color: #666; font-weight: 400; } .ddc-inline-sublist a { font-weight: 400; } /* Intro paragraph "Read more" (per direct request — a long, genuinely good researched intro was pushing every section below it far down the page). Native disclosure marker kept — "Read more" benefits from the expand/collapse triangle as a clear affordance. (The States list's own separate "+N more" inline-cap accordion this comment used to compare against was removed in v2.32.91 — that section now always renders every city inline, uncapped.) */ .ddc-intro-more { margin-top: 12px; } .ddc-intro-more summary { cursor: pointer; color: var(--ddc-crimson); font-weight: 600; } .ddc-intro-more summary:hover { color: var(--ddc-crimson-dark); } .ddc-intro-more[open] summary { margin-bottom: 10px; } /* Label text swap on expand/collapse — per direct report that "Read more" sitting there unchanged after opening looked wrong. itself is emitted empty in the markup; the visible label comes entirely from generated content here, so the [open] attribute selector can swap it to "Show less" once expanded — pure CSS, no JS, same as everything else on this site. */ .ddc-intro-more summary::before { content: "Read more"; } .ddc-intro-more[open] summary::before { content: "Show less"; } /* Top disclaimer — deliberately the least visually assertive element on the page: bold, muted, no box, blends into normal text flow. */ .ddc-disclaimer-top { font-weight: 700; color: #888; font-size: 14px; margin: 12px 0 24px; } /* Bottom disclaimer — more complete legal statement, a touch more visual weight, still restrained (soft tint + rounded corners, no alert-box red). */ .ddc-disclaimer { margin-top: 44px; padding: 18px 22px; border-top: 2px solid var(--ddc-hairline); background: var(--ddc-disclaimer-tint); border-radius: 0 0 var(--ddc-radius-sm) var(--ddc-radius-sm); font-style: italic; font-size: 14px; color: var(--ddc-ink); } /* FAQ — native
/, zero JS, content always in initial HTML regardless of open/closed state (keeps it fully crawlable). Each question gets the same soft-card treatment as list items, for visual consistency across the page rather than a plain divider list. */ .ddc-faq { display: flex; flex-direction: column; gap: 8px; } .ddc-faq details { background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm); padding: 14px 18px; transition: box-shadow 0.2s ease; } .ddc-faq details[open] { box-shadow: var(--ddc-shadow-sm); } .ddc-faq summary { font-weight: 600; cursor: pointer; } .ddc-faq summary::marker { color: var(--ddc-crimson); } .ddc-faq p { margin-top: 10px; color: var(--ddc-ink-soft); font-size: 18px; } /* Submission CTA — visible prompt by default (never accordion'd away, since hiding a call-to-action defeats its purpose); soft gradient + deeper shadow gives it real presence without looking like an alert. */ .ddc-cta-prompt { background: linear-gradient(135deg, var(--ddc-crimson), var(--ddc-crimson-dark)); color: #fff; padding: 18px 24px; border-radius: var(--ddc-radius); margin: 40px 0; box-shadow: var(--ddc-shadow-lift); } .ddc-cta-prompt summary { color: #fff; font-weight: 700; cursor: pointer; list-style: none; } .ddc-cta-fields { background: #fff; color: var(--ddc-ink); padding: 18px; border-radius: var(--ddc-radius-sm); margin-top: 12px; } .ddc-cta-fields input, .ddc-cta-fields textarea { border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm); padding: 9px 12px; transition: border-color 0.15s ease; } .ddc-cta-fields input:focus, .ddc-cta-fields textarea:focus { outline: none; border-color: var(--ddc-crimson); } .ddc-type-phrase { font-weight: 600; color: var(--ddc-teal); } .ddc-stat-strip { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 20px; padding: 16px 20px; background: #F7FAFA; border: 1px solid #E2ECEC; border-radius: 8px; } .ddc-stat { display: flex; flex-direction: column; } .ddc-stat-num { font-size: 26px; font-weight: 700; color: var(--ddc-teal); line-height: 1.1; } .ddc-stat-label { font-size: 13px; color: #666; letter-spacing: 0.3px; text-transform: uppercase; margin-top: 2px; } /* v2.32.52: facility_highlight retired in favor of company_claim. v2.32.53: briefly reused .ddc-scale-note's pill styling instead of its own class — reverted the same session, per direct correction against a real live example (AWS's Beijing facility's Sinnet- partnership sentence) that a genuine one-sentence claim reads far better as its own italic line than crammed into a small pill. v2.32.54: scale_note retired outright. v2.32.57: facility_highlight restored to coexist with company_claim rather than being replaced by it — both are researched and stored independently, but only ONE ever shows on the page at a time (facility_highlight takes display priority; company_claim only shows when it's blank — see ddc_highlight_or_claim_html() in template-directory-page.php). Since the two are mutually exclusive on screen and read identically to a visitor, this one class is deliberately shared between both rather than duplicated per field. */ .ddc-company-claim { display: block; font-size: 14px; color: #444; font-style: italic; margin-top: 2px; } /* Map page location list — same card treatment for consistency with every other list on the site. */ #ddc-map { border-radius: var(--ddc-radius); overflow: hidden; box-shadow: var(--ddc-shadow-md); margin-bottom: 24px; } /* Nav tile bar — rendered by DDC_Frontend::render_nav_tiles() directly below get_header() on every plugin page. Deliberately its own bar under the theme's header, not a theme-menu injection — see that function's docblock for the full reasoning. Icons are inline SVG (currentColor line icons), not emoji or an external icon font/CDN, consistent with the plugin's no-external-asset-dependency approach elsewhere (e.g. the API client's own comments on this). */ .ddc-nav-tiles { background: #fff; border-bottom: 1px solid var(--ddc-hairline); padding: 12px 24px; overflow-x: auto; text-align: center; position: relative; } /* AUDIT FIX: the fade-gradient "there's more" cue tried here (v2.26.1) and refined once already (v2.26.2, after measuring it was too subtle against the tile background) has been removed entirely, per direct feedback: it's a static CSS overlay pinned to the container's edge with no awareness of actual scroll position, so it kept implying "there's more to scroll" even after genuinely scrolling all the way to the true end — actively misleading, not just redundant, once the v2.26.2 cut-off-tile technique was already doing this job correctly. That technique is scroll-accurate for free (once you're truly at the end, the last tile is simply fully visible, not cut off) — no reason to keep a second, less accurate indicator alongside it. Making the fade itself scroll-aware would need JavaScript tracking scroll position for a fairly minor visual detail the cut-off-tile approach already handles correctly on its own. position:relative above is kept even though nothing on this element needs absolute positioning anymore — harmless to leave, and cheaper than second-guessing whether some other future rule might rely on it establishing a positioning context. */ .ddc-nav-tiles-inner { /* AUDIT FIX: centers the bar as a block, matching .ddc-page's own 900px content column, rather than justify-content:center on the flex row directly (rejected: once tiles overflow on a narrow screen, centering the flex items themselves risks starting the horizontal scroll position mid-content instead of at the first tile in some engines). A first attempt at the "just center it" half of this used width:max-content + margin:0 auto — verified NOT actually centering correctly by rendering and directly measuring the pixel offset (135px off-center, not a rounding error), consistent with this project's established finding that some rendering paths don't handle newer CSS sizing keywords reliably. Replaced with the much older, more universally supported pattern: text-align:center on the OUTER bar plus display:inline-flex here — inline-flex shrink-wraps to its content by default (no max-content keyword needed) and text-align has centered inline-level content reliably since the earliest CSS. text-align:left resets it here so the actual tile text inside isn't affected, only the block's own horizontal position is. */ display: inline-flex; gap: 10px; max-width: 900px; text-align: left; } .ddc-nav-tile { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); border-radius: 10px; padding: 8px 14px; text-decoration: none; color: var(--ddc-ink); font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(20,10,15,0.04); transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease; white-space: nowrap; } .ddc-nav-tile:hover { box-shadow: var(--ddc-shadow-sm); transform: translateY(-1px); color: var(--ddc-ink); } .ddc-nav-tile.active { background: var(--ddc-ink); border-color: var(--ddc-ink); color: #fff; } .ddc-nav-tile .icon { width: 18px; height: 18px; display: flex; flex-shrink: 0; } .ddc-nav-tile .icon svg { width: 100%; height: 100%; } @media (max-width: 700px) { /* AUDIT FIX: text-align:center (set above, for the desktop case where content fits without overflowing) is NOT safe to leave in place once content genuinely overflows on a narrow screen — centering overflowing inline content risks the scroll starting somewhere in the middle rather than at the first tile, the exact problem already flagged and designed around when this bar was first centered. Left-aligning specifically here removes the ambiguity outright rather than relying on a specific viewport width happening to render acceptably: scroll now deterministically starts at "Home", the first tile, on every phone width. This is also the ONLY "there's more" scroll cue now (v2.26.1 tried a fade-gradient overlay alongside this, refined once in v2.26.2, then removed entirely in v2.26.4 — it was a static CSS overlay with no awareness of actual scroll position, so it kept implying more content existed even once scrolled all the way to the true end). Since the five tiles have irregular, unequal widths, they essentially never align exactly with an arbitrary phone width, so left-aligned overflow naturally leaves a tile genuinely cut in half at the visible edge far more often than not — scroll- accurate for free, since it's just showing whatever's actually there rather than a decorative indicator that can go stale. Tighter sizing so more of the row's content is visible before scrolling is needed at all. */ .ddc-nav-tiles { padding: 10px 16px; text-align: left; } .ddc-nav-tile { padding: 7px 12px; font-size: 13.5px; } } /* Top-row cards (Companies/Countries hub pages) — a single horizontal row rather than a wrapping multi-row grid, so this section stays compact. The count is the visual headline (why something is "top"), not a secondary label — same mono numeral treatment already used for ddc-readout-num in the homepage stats bar. */ .ddc-top-row { display: flex; gap: 12px; margin: 0 0 40px; flex-wrap: wrap; } .ddc-top-card { flex: 1 1 140px; background: #fff; border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm); padding: 16px 12px; text-align: center; box-shadow: var(--ddc-shadow-sm); text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease; } .ddc-top-card:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-2px); } .ddc-top-card .logo, .ddc-top-card .logo-img { width: 32px; height: 32px; border-radius: 8px; background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; font-weight: 700; object-fit: contain; } .ddc-top-card .name { font-weight: 600; font-size: 14px; color: var(--ddc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddc-top-card .stat { font-family: var(--ddc-font-mono); font-weight: 700; font-size: 17px; color: var(--ddc-crimson); margin-top: 6px; line-height: 1.1; } .ddc-top-card .stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; } /* A-Z index (Companies/Countries hub pages) — a jump bar of letters (only ones with real entries are clickable) above grouped sections, same pattern used by most alphabetical directory listings. */ .ddc-az-jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 26px; } .ddc-az-jump a { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); color: var(--ddc-ink); text-decoration: none; font-size: 13px; font-weight: 700; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ddc-az-jump a:hover { background: var(--ddc-crimson); color: #fff; border-color: var(--ddc-crimson); } .ddc-az-jump span.disabled { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #ccc; font-size: 13px; font-weight: 700; } .ddc-az-group { margin-bottom: 22px; scroll-margin-top: 16px; } .ddc-az-letter { font-family: var(--ddc-font-mono); font-size: 20px; font-weight: 700; color: var(--ddc-crimson); border-bottom: 1px solid var(--ddc-hairline); padding-bottom: 6px; margin-bottom: 10px; } /* .ddc-thin-list (v2.34.14) is deliberately glued onto every one of the .ddc-az-list rules below rather than defined as its own lookalike block. Per direct request the country page's Regions and Cities sections should read as the SAME listing style the Companies section already uses — plain text rows in columns, no card chrome — just without the A-Z jump bar and type filter wrapped around it. Sharing the declarations (instead of duplicating them) is what actually guarantees "same style" stays true if either is ever restyled again. Safe to share: no type-filter rule can reach Regions or Cities. Each one is keyed to a specific list class the Companies section alone carries (.ddc-country-company-list / .ddc-state-company-list / .ddc-continent-company-list, v2.36.9) or is scoped inside .ddc-az-group on the hub page — never to bare .ddc-thin-list. On top of that, every one is a general-sibling (~) selector anchored on the Companies radio inputs, and Regions/Cities render ABOVE that section, so they aren't later siblings either. */ .ddc-az-list, .ddc-thin-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; list-style: none; margin: 0; padding: 0; } /* The one place the two genuinely differ: an .ddc-az-list sits inside a .ddc-az-group that already carries the gap to the next block, while a .ddc-thin-list is a standalone section that needs its own. */ .ddc-thin-list { margin: 0 0 26px; } .ddc-az-list li a, .ddc-thin-list li a { /* AUDIT FIX: this used to be justify-content:space-between, which pushed the count to the far right edge of its grid column — since every column is sized to fit the WIDEST name that ever appears in that position across all rows, a short name like "Brazil" left a big visual gap before its own count, while that count then sat deceptively close to the START of the next column's name. Confirmed directly from a live screenshot: "1" (Bahrain's count) reading as if it belonged to "Brazil" right next to it. Fixed by dropping space-between for a small fixed gap right after the name text instead, so the count always sits immediately next to the name it actually belongs to regardless of column width. */ color: var(--ddc-ink); text-decoration: none; font-size: 16px; display: flex; align-items: baseline; gap: 6px; padding: 4px 0; } .ddc-az-list li a:hover, .ddc-thin-list li a:hover { color: var(--ddc-crimson); } /* AUDIT FIX (Aug 1, found via direct screenshot): this exact same layout — name + .n count on one flex row — is what an unlinked entry (no live page yet) needs too, or its count renders in whatever the raw default text looks like instead of the intended small mono figure, right next to a sibling entry that's styled correctly, reading as a jarring, "not tidy" inconsistency. Same reasoning as the .ddc-list fix just above: matches layout/size, not the a:hover color, since this text genuinely isn't clickable. */ .ddc-az-list li .ddc-plain-link, .ddc-thin-list li .ddc-plain-link { color: var(--ddc-ink); font-size: 16px; display: flex; align-items: baseline; gap: 6px; padding: 4px 0; } .ddc-az-list li a .n, .ddc-az-list li .ddc-plain-link .n { color: #aaa; font-size: 12px; font-family: var(--ddc-font-mono); flex-shrink: 0; } /* Thin-list-only rules (v2.34.15) — needed once the STATE page's Companies list moved onto this class, because unlike the country page's Companies listing (name + logo only) each row here can also carry an "AI DATA CENTER" badge, and unlike Regions/Cities it isn't a single short word. - li as a flex row: the badge is a SIBLING of the , and since that is itself display:flex (a block-level box), a default block li would drop the badge onto its own line under every single name. flex-wrap is kept as the deliberate fallback: where a long name genuinely leaves no room, the badge wraps under it rather than overflowing sideways into the neighbouring grid column — grid tracks are fixed 1fr, so overflow here would visibly collide with the next column's text (the same failure mode the .n count audit fix further up this file was about). - Compact badge: .ddc-badge's default size was set for a full-width card row, where horizontal space is free. In a 3-column text listing it's the single widest thing on the row, so it's scaled down HERE ONLY — every other placement is untouched. - min-width/overflow-wrap: a grid item defaults to min-width:auto, which refuses to shrink below its longest word and pushes the track wider than 1fr; both are needed for the wrap above to actually happen instead of the column just growing. */ .ddc-thin-list li { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; } .ddc-thin-list li > a, .ddc-thin-list li > .ddc-plain-link { min-width: 0; overflow-wrap: anywhere; } .ddc-thin-list .ddc-badge { font-size: 10px; letter-spacing: 0.3px; padding: 2px 7px; margin-left: 6px; } /* Filter tabs (4.5.0) — /companies/?type=... Per direct feedback, twice over: first the active pill needed to be visually distinct (fixed), then the whole container itself needed to read as its own highlighted card so it "gets into the eyes of people" immediately — not just individually-colored pills sitting on the plain white page background. Light crimson-tinted background + rounded card, same brand accent color as the active pill, just at low opacity so it reads as a highlighted panel rather than another plain content block. */ .ddc-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 14px 16px; background: #FDECF2; border: 1px solid #F6C9D9; border-radius: 12px; scroll-margin-top: 16px; } .ddc-type-tabs label { color: var(--ddc-crimson-dark); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 20px; border: 1px solid transparent; background: #fff; cursor: pointer; } .ddc-type-tabs label:hover { border-color: var(--ddc-crimson); } /* Companies hub type filter (per direct decision) — pure CSS, no JS. The driving radios (template-companies-hub.php) are visually hidden but stay in the tab order/keyboard-navigable, same standard pattern used for any accessible custom form control; clip-based hiding rather than display:none, which would remove them from the tab order entirely. */ .ddc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Active-tab styling — replaces the old .active class, driven by :checked instead. One line per option since each needs its OWN preceding radio id; can't be collapsed into a single shared selector. "All" needs one too (it's a real option, just with no corresponding hide-rule below since it hides nothing). */ #ddc-ctf-all:checked ~ .ddc-type-tabs label[for="ddc-ctf-all"], #ddc-ctf-cloud_provider:checked ~ .ddc-type-tabs label[for="ddc-ctf-cloud_provider"], #ddc-ctf-colocation:checked ~ .ddc-type-tabs label[for="ddc-ctf-colocation"], #ddc-ctf-self_operated:checked ~ .ddc-type-tabs label[for="ddc-ctf-self_operated"], #ddc-ctf-ai_cloud:checked ~ .ddc-type-tabs label[for="ddc-ctf-ai_cloud"], #ddc-ctf-ai_colocation:checked ~ .ddc-type-tabs label[for="ddc-ctf-ai_colocation"] { color: #fff; background: var(--ddc-crimson); border-color: var(--ddc-crimson); } /* Keyboard focus indicator — since the actual is visually hidden, its own native focus ring would be invisible; this passes focus-visible through to the label a sighted keyboard user is actually looking at instead. */ #ddc-ctf-all:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-all"], #ddc-ctf-cloud_provider:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-cloud_provider"], #ddc-ctf-colocation:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-colocation"], #ddc-ctf-self_operated:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-self_operated"], #ddc-ctf-ai_cloud:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-ai_cloud"], #ddc-ctf-ai_colocation:focus-visible ~ .ddc-type-tabs label[for="ddc-ctf-ai_colocation"] { outline: 2px solid var(--ddc-crimson); outline-offset: 2px; } /* A–Z heading + per-type empty-state message — each pre-rendered once per filter option, only the one matching the checked radio is ever shown. */ .ddc-az-filter-heading, .ddc-az-filter-empty { display: none; } #ddc-ctf-all:checked ~ .ddc-az-filter-heading[data-filter="all"], #ddc-ctf-cloud_provider:checked ~ .ddc-az-filter-heading[data-filter="cloud_provider"], #ddc-ctf-colocation:checked ~ .ddc-az-filter-heading[data-filter="colocation"], #ddc-ctf-self_operated:checked ~ .ddc-az-filter-heading[data-filter="self_operated"], #ddc-ctf-ai_cloud:checked ~ .ddc-az-filter-heading[data-filter="ai_cloud"], #ddc-ctf-ai_colocation:checked ~ .ddc-az-filter-heading[data-filter="ai_colocation"], #ddc-ctf-cloud_provider:checked ~ .ddc-az-filter-empty[data-filter="cloud_provider"], #ddc-ctf-colocation:checked ~ .ddc-az-filter-empty[data-filter="colocation"], #ddc-ctf-self_operated:checked ~ .ddc-az-filter-empty[data-filter="self_operated"], #ddc-ctf-ai_cloud:checked ~ .ddc-az-filter-empty[data-filter="ai_cloud"], #ddc-ctf-ai_colocation:checked ~ .ddc-az-filter-empty[data-filter="ai_colocation"] { display: block; } /* The actual row filtering — hides any company
  • whose data-types doesn't include the checked type. "All" needs no rule: nothing is ever hidden for it, every row shows by default. A company carrying more than one type naturally passes more than one of these (or none at all when a different type is selected), with zero special-casing — that's what the attribute-contains (~=) match against a space-separated list gives for free. */ #ddc-ctf-cloud_provider:checked ~ .ddc-az-group .ddc-az-list li:not([data-types~="cloud_provider"]) { display: none; } #ddc-ctf-colocation:checked ~ .ddc-az-group .ddc-az-list li:not([data-types~="colocation"]) { display: none; } #ddc-ctf-self_operated:checked ~ .ddc-az-group .ddc-az-list li:not([data-types~="self_operated"]) { display: none; } #ddc-ctf-ai_cloud:checked ~ .ddc-az-group .ddc-az-list li:not([data-types~="ai_cloud"]) { display: none; } #ddc-ctf-ai_colocation:checked ~ .ddc-az-group .ddc-az-list li:not([data-types~="ai_colocation"]) { display: none; } /* Hides a WHOLE letter group (the letter heading + its now-empty