# Petabit Scale — Web Implementation Snippets

Copy-paste-ready code for common web/digital surfaces. Maintained against the canonical palette, typography, and logo files at `/assets/brand/`.

---

## Fonts — `@font-face` declarations

Place the three font families in your site's fonts directory (or reference from a CDN). These declarations assume the font files are served from `/fonts/`.

```css
/* ---- Display tier: Raleway (variable) ---- */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/raleway/Raleway.ttf') format('truetype-variations'),
       url('/fonts/raleway/Raleway.ttf') format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/raleway/Raleway-Italic.ttf') format('truetype-variations'),
       url('/fonts/raleway/Raleway-Italic.ttf') format('truetype');
}

/* ---- Headers tier: Lato (static weights) ---- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/lato/Lato-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/lato/Lato-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato/Lato-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato/Lato-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato/Lato-BoldItalic.ttf') format('truetype');
}

/* ---- Body tier: Open Sans (variable) ---- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/opensans/OpenSans.ttf') format('truetype-variations'),
       url('/fonts/opensans/OpenSans.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/opensans/OpenSans-Italic.ttf') format('truetype-variations'),
       url('/fonts/opensans/OpenSans-Italic.ttf') format('truetype');
}
```

---

## Base typography + palette CSS

```css
@import url('/assets/brand/palette/palette.css');  /* palette custom properties */

:root {
  /* Type stacks with safe fallbacks */
  --ps-font-display: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ps-font-header:  'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ps-font-body:    'Open Sans', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Base scale (adjust for your site) */
  --ps-body-size: 16px;
  --ps-body-lh:   1.55;
  --ps-h1-size:   clamp(2.25rem, 4vw, 3.5rem);
  --ps-h2-size:   clamp(1.5rem, 2.5vw, 2rem);
}

body {
  font-family: var(--ps-font-body);
  font-size: var(--ps-body-size);
  line-height: var(--ps-body-lh);
  color: var(--ps-charcoal);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

h1, .ps-display {
  font-family: var(--ps-font-display);
  font-weight: 300;          /* Raleway Light for display */
  font-size: var(--ps-h1-size);
  line-height: 1.1;
  color: var(--ps-forest-green);
  letter-spacing: -0.01em;
}

h2, h3, h4, .ps-header {
  font-family: var(--ps-font-header);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ps-forest-green);
}

h2 { font-size: var(--ps-h2-size); }

a {
  color: var(--ps-primary-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
a:hover {
  border-bottom-color: var(--ps-primary-teal);
}
```

### Dark-mode variant

```css
@media (prefers-color-scheme: dark) {
  body {
    background: var(--ps-charcoal);
    color: #E7E3DB;       /* warm off-white on dark */
  }
  h1, .ps-display, h2, h3, h4, .ps-header {
    color: var(--ps-bronze);    /* bronze reads better on charcoal than forest */
  }
  a {
    color: var(--ps-cream);
  }
  a:hover {
    border-bottom-color: var(--ps-cream);
  }
}
```

---

## Favicon HTML block

Drop-in `<head>` block. Files are already at `/assets/brand/favicon/`.

```html
<!-- Petabit Scale favicon set -->
<link rel="icon" type="image/svg+xml" href="/assets/brand/favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/brand/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/brand/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/assets/brand/favicon/favicon-48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/assets/brand/favicon/favicon-64.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/brand/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/brand/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/assets/brand/favicon/android-chrome-512x512.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1F272B">
```

### `site.webmanifest`

```json
{
  "name": "Petabit Scale",
  "short_name": "Petabit Scale",
  "description": "Large-scale network infrastructure — carrier-grade.",
  "icons": [
    {
      "src": "/assets/brand/favicon/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/brand/favicon/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#1F272B",
  "background_color": "#1F272B",
  "display": "standalone"
}
```

---

## Open Graph + social meta tags

```html
<!-- Open Graph -->
<meta property="og:title"        content="Petabit Scale">
<meta property="og:description"  content="Hyperscaler-grade expertise, strategy, and pricing — for the unique challenges of operating networks at massive scale.">
<meta property="og:image"        content="https://www.petabitscale.com/assets/brand/og/petabit-scale-og-default.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url"          content="https://www.petabitscale.com/">
<meta property="og:type"         content="website">

<!-- Twitter / X -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="Petabit Scale">
<meta name="twitter:description" content="Hyperscaler-grade expertise, strategy, and pricing — for the unique challenges of operating networks at massive scale.">
<meta name="twitter:image"       content="https://www.petabitscale.com/assets/brand/og/petabit-scale-og-default.png">
```

**OG image to generate**: 1200×630 px · charcoal background · horizontal color lockup centered · optional one-line tagline in Raleway Light cream. File should land at `/assets/brand/og/petabit-scale-og-default.png`. (Not yet generated; flagged as an open task in the applications spec.)

---

## Logo embedding patterns

```html
<!-- Site header, light background -->
<a href="/" class="ps-logo">
  <img src="/assets/brand/svg/petabit-scale-horizontal-color.svg"
       alt="Petabit Scale"
       width="240" height="49">
</a>

<!-- Dark hero band or section over photography -->
<img src="/assets/brand/svg/petabit-scale-horizontal-on-dark.svg"
     alt="Petabit Scale"
     width="360" height="73">

<!-- Mobile / small contexts -->
<img src="/assets/brand/svg/petabit-scale-mark-color.svg"
     alt="Petabit Scale"
     width="40" height="40">

<!-- CSS: ensure logos don't pick up link-underline styles -->
.ps-logo { display: inline-block; border: none; }
.ps-logo img { display: block; }
```

### Responsive logo sizing

```css
.ps-logo img {
  height: 32px;           /* mobile default */
  width: auto;
}
@media (min-width: 768px) {
  .ps-logo img { height: 40px; }
}
@media (min-width: 1200px) {
  .ps-logo img { height: 48px; }
}
```

Respect the minimum sizes: horizontal 120px wide / stacked 80px wide / mark 32px.

---

## Utility CSS classes for text accents

```css
/* Emphasis patterns matching the brand's typographic hierarchy */
.ps-kicker {
  font-family: var(--ps-font-header);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-primary-teal);
}

.ps-pull-quote {
  font-family: var(--ps-font-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--ps-deep-bronze);
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--ps-bronze);
}

.ps-caption {
  font-family: var(--ps-font-body);
  font-style: italic;
  font-size: 0.875rem;
  color: #5A6369;
}

/* Callout card */
.ps-callout {
  background: #FBF8F3;            /* warm cream tint */
  border-left: 4px solid var(--ps-primary-teal);
  padding: 1rem 1.25rem;
  border-radius: 2px;
}
```

---

## Email HTML template baseline

Keep email HTML inline-styled (most email clients strip `<style>` blocks). Rely on web-safe fallbacks — Raleway/Open Sans/Lato don't render in Outlook desktop by default.

```html
<table cellpadding="0" cellspacing="0" border="0"
       style="font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; color: #1F272B; max-width: 600px;">
  <tr>
    <td style="padding: 0 0 16px 0;">
      <!-- Body paragraph -->
      <p style="margin: 0 0 12px 0;">
        Hey [name],
      </p>
      <p style="margin: 0 0 12px 0;">
        [Opening — verdict-first, one-line.]
      </p>
      <p style="margin: 0 0 12px 0;">
        [Reasoning.]
      </p>
      <p style="margin: 0 0 12px 0;">
        [Specific recommendation.]
      </p>
      <p style="margin: 0 0 12px 0;">
        — [Name]
      </p>
    </td>
  </tr>
</table>
```

---

## Notes

- **Don't** bundle the fonts into a `<link>` to an external CDN unless you've verified licensing and CORS behavior. The files in `/assets/fonts/` are SIL Open Font License — self-hosting is fine.
- **Don't** introduce electric blues, pure black, or pure white as brand colors. Use `--ps-primary-teal`, `--ps-charcoal`, and `#FBF8F3` (warm cream) as your substrates.
- **Don't** use drop-shadows on the mark. The mark is already dimensional; shadows read as AI-generated.
- **Do** prefer SVG over PNG wherever the rendering target supports it — crisper at every scale.
- **Do** specify `alt="Petabit Scale"` on every logo embed.