/* ===== css/fonts.css ===== */ /* Foster Refrigerators USA — self-hosted variable fonts (no CDN). Fraunces (display serif, opsz+wght axes) · Inter (body) · JetBrains Mono (data). */ /* Inter — variable, body + UI */ @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Fraunces — variable display serif (roman) */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* Fraunces — italic (used for the emphasized hero word) */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } /* JetBrains Mono — variable, technical labels + specs */ @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jbmono-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Fraunces optical sizing: large at display sizes for crisp, characterful headlines */ .fc-h1, .fc-h2, .article-hero h1 { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; } .fc-h3 { font-variation-settings: "opsz" 60; } /* ===== css/tokens.css ===== */ /* Foster Refrigerators USA — Design Tokens */ :root { /* ─── Brand ─── */ --fc-navy: #00235A; --fc-navy-ink: #0B1A35; --fc-orange: #1F6FB2; /* Foster oval blue — primary accent (replaces orange) */ --fc-orange-warm: #185A92; /* deeper Foster blue, hover */ /* Subtle vintage-military secondary (sparingly: small details, stamps) */ --fc-sand: #B79A5B; /* brass/khaki — heritage detail accent */ /* ─── Neutrals ─── */ --fc-steel-950: #0F1419; --fc-steel-700: #2D3340; --fc-steel-500: #5C6473; --fc-steel-300: #9CA5AF; --fc-steel-100: #E5E7EB; --fc-mist: #F4F6F8; --fc-paper: #FFFFFF; /* ─── Functional ─── */ --fc-success: #1F8A4C; --fc-warning: #C77700; --fc-danger: #B83227; /* ─── Type ─── */ --fc-font-display: "Fraunces", Georgia, "Times New Roman", serif; --fc-font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --fc-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Brass — heritage accent (eyebrows, small marks). Foster blue stays for interactive. */ --fc-brass: #9A6A2E; /* ─── Spacing ─── */ --fc-s-1: 4px; --fc-s-2: 8px; --fc-s-3: 12px; --fc-s-4: 16px; --fc-s-5: 24px; --fc-s-6: 32px; --fc-s-7: 48px; --fc-s-8: 64px; /* ─── Radii ─── */ --fc-r-sm: 4px; --fc-r-md: 8px; --fc-r-lg: 12px; /* ─── Shadows ─── */ --fc-shadow-sm: 0 1px 2px rgba(11,26,53,.08); --fc-shadow-md: 0 4px 12px rgba(11,26,53,.10); --fc-shadow-lg: 0 16px 40px rgba(11,26,53,.14); /* ─── Motion ─── */ --fc-ease: cubic-bezier(.2, .8, .2, 1); --fc-fast: 160ms; --fc-medium: 320ms; --fc-slow: 500ms; /* ─── Theme surfaces (semantic — these flip in dark mode) ─── */ --fc-bg: #FFFFFF; /* page background */ --fc-bg-elevated: #F4F6F8; /* cards / raised surfaces */ --fc-text: #0F1419; /* primary text */ --fc-text-muted: #5C6473; /* secondary text */ --fc-border: #E5E7EB; /* dividers / borders */ --fc-accent: #1F6FB2; /* Foster blue accent */ --fc-accent-hover:#185A92; color-scheme: light; } /* ════════════════════════════════════════════════════════════════ DARK MODE Strategy: navy/navy-ink are used as TEXT color in ~39 places and as a BACKGROUND in ~14. In dark mode we FLIP them light (so all text usages become readable automatically) and add --fc-surface-dark for the handful of components that used them as a dark background, overridden below. Toggled via ; also respects OS preference. ════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; /* Dark surface used by components that previously had a navy background */ --fc-surface-dark: #060C18; /* Brand text tokens flip LIGHT (these are used as text/headings/borders) */ --fc-navy-ink: #EEF2F8; --fc-navy: #DCE6F3; /* Neutral ramp inverts */ --fc-paper: #0A1222; /* page background */ --fc-mist: #111B30; /* card / elevated surfaces */ --fc-steel-950: #EEF2F8; /* primary text */ --fc-steel-700: #C7D0DE; --fc-steel-500: #9AA7BC; /* muted text */ --fc-steel-300: #6B7890; --fc-steel-100: #22324E; /* borders / dividers */ /* Accent (aliased as --fc-orange across the UI) brightens for contrast */ --fc-orange: #4F9BE0; --fc-orange-warm: #6FB0EC; --fc-sand: #C7A968; --fc-shadow-sm: 0 1px 2px rgba(0,0,0,.40); --fc-shadow-md: 0 4px 14px rgba(0,0,0,.45); --fc-shadow-lg: 0 18px 44px rgba(0,0,0,.55); } /* The components that used navy/navy-ink as a BACKGROUND keep a dark bg (now sourced from --fc-surface-dark instead of the flipped token). Full list — every selector that sets background: var(--fc-navy[-ink]). */ :root[data-theme="dark"] .site-foot, :root[data-theme="dark"] .article-hero, :root[data-theme="dark"] .article-cta, :root[data-theme="dark"] .fc-btn-navy, :root[data-theme="dark"] .hero-duo-card, :root[data-theme="dark"] .page-hero-media, :root[data-theme="dark"] .guide-card-thumb, :root[data-theme="dark"] .heritage-band, :root[data-theme="dark"] .cta-band, :root[data-theme="dark"] .fc-est-badge, :root[data-theme="dark"] .fc-chip[aria-pressed="true"], :root[data-theme="dark"] .fc-chip.is-active, :root[data-theme="dark"] .fc-bp, :root[data-theme="dark"] .fc-tech-photo-tag, :root[data-theme="dark"] .fc-cta-bar { background: var(--fc-surface-dark); } /* hamburger bars must be LIGHT on dark, not dark */ :root[data-theme="dark"] .site-nav-toggle span, :root[data-theme="dark"] .site-nav-toggle::before, :root[data-theme="dark"] .site-nav-toggle::after { background: #EEF2F8; } /* modal + any hardcoded white surface → dark elevated */ :root[data-theme="dark"] .fc-modal { background: var(--fc-mist); } /* Follow OS dark preference when the user has not explicitly chosen light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fc-surface-dark: #060C18; --fc-navy-ink: #EEF2F8; --fc-navy: #DCE6F3; --fc-paper: #0A1222; --fc-mist: #111B30; --fc-steel-950: #EEF2F8; --fc-steel-700: #C7D0DE; --fc-steel-500: #9AA7BC; --fc-steel-300: #6B7890; --fc-steel-100: #22324E; --fc-orange: #4F9BE0; --fc-orange-warm: #6FB0EC; --fc-sand: #C7A968; --fc-shadow-sm: 0 1px 2px rgba(0,0,0,.40); --fc-shadow-md: 0 4px 14px rgba(0,0,0,.45); --fc-shadow-lg: 0 18px 44px rgba(0,0,0,.55); } :root:not([data-theme="light"]) .site-foot, :root:not([data-theme="light"]) .article-hero, :root:not([data-theme="light"]) .article-cta, :root:not([data-theme="light"]) .fc-btn-navy, :root:not([data-theme="light"]) .hero-duo-card, :root:not([data-theme="light"]) .page-hero-media, :root:not([data-theme="light"]) .guide-card-thumb, :root:not([data-theme="light"]) .heritage-band, :root:not([data-theme="light"]) .cta-band, :root:not([data-theme="light"]) .fc-est-badge, :root:not([data-theme="light"]) .fc-chip[aria-pressed="true"], :root:not([data-theme="light"]) .fc-chip.is-active, :root:not([data-theme="light"]) .fc-bp, :root:not([data-theme="light"]) .fc-tech-photo-tag, :root:not([data-theme="light"]) .fc-cta-bar { background: var(--fc-surface-dark); } :root:not([data-theme="light"]) .site-nav-toggle span, :root:not([data-theme="light"]) .site-nav-toggle::before, :root:not([data-theme="light"]) .site-nav-toggle::after { background: #EEF2F8; } :root:not([data-theme="light"]) .fc-modal { background: var(--fc-mist); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fc-paper); color: var(--fc-steel-700); /* body text: softer than near-black for comfortable reading */ font-family: var(--fc-font-body); font-size: 17px; /* up from 16 for readability */ line-height: 1.65; /* more generous leading for body */ letter-spacing: -.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth theme switch (respects reduced-motion) */ body, .site-nav, .site-foot, .fc-section, [class*="-card"] { transition: background-color var(--fc-medium) var(--fc-ease), border-color var(--fc-medium) var(--fc-ease), color var(--fc-medium) var(--fc-ease); } @media (prefers-reduced-motion: reduce) { body, .site-nav, .site-foot, .fc-section, [class*="-card"] { transition: none; } } h1, h2, h3, h4, h5, h6 { font-family: var(--fc-font-display); font-weight: 600; /* Fraunces 600 reads premium; 900 was too heavy */ margin: 0; letter-spacing: -.005em; color: var(--fc-navy-ink); line-height: 1.08; } .fc-mono { font-family: var(--fc-font-mono); font-feature-settings: "tnum" 1; } /* ===== css/system.css ===== */ /* Foster Refrigerators USA — Design System v2 (Industrial / Spec-Sheet) Vocabulary: grid rules, mono labels, tabular specs, blueprint accents. Tokens come from tokens.css. */ /* ════════════════════════════════════════════════════════════════ GRID RULE — every page renders inside a visible 12-col bed ════════════════════════════════════════════════════════════════ */ .fc-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 24px; opacity: .35; } .fc-grid::before, .fc-grid::after { content: ""; grid-column: 1 / -1; } .fc-grid > span { border-left: 1px solid var(--fc-steel-100); border-right: 1px solid var(--fc-steel-100); height: 100%; } @media (min-width: 760px) { .fc-grid { padding: 0 48px; } } @media (min-width: 1100px) { .fc-grid { padding: 0 80px; } } /* Document corners — hidden on mobile (would overlap headlines on small screens) */ .fc-doc-corners { display: none; position: fixed; z-index: 1; pointer-events: none; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fc-steel-300); text-transform: uppercase; } @media (min-width: 900px) { .fc-doc-corners { display: block; } .fc-doc-tl { top: 88px; left: 48px; } .fc-doc-tr { top: 88px; right: 48px; text-align: right; } .fc-doc-bl { bottom: 16px; left: 48px; } .fc-doc-br { bottom: 16px; right: 48px; text-align: right; } } /* ════════════════════════════════════════════════════════════════ TYPE — tight, weighty, structural ════════════════════════════════════════════════════════════════ */ /* Mobile-first: clamps tuned so the bottom is readable on 320–480px screens */ .fc-h1 { font-family: var(--fc-font-display); font-weight: 600; font-size: clamp(38px, 8vw, 116px); line-height: 1.0; letter-spacing: -.02em; color: var(--fc-navy-ink); margin: 0; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; } /* Emphasized word: Fraunces italic in the brand blue */ .fc-h1 em { font-style: italic; color: var(--fc-orange); font-weight: 600; } .fc-h2 { font-family: var(--fc-font-display); font-weight: 600; font-size: clamp(30px, 6vw, 64px); line-height: 1.04; letter-spacing: -.018em; color: var(--fc-navy-ink); margin: 0; word-wrap: break-word; } .fc-h2 em { font-style: italic; color: var(--fc-orange); font-weight: 600; } .fc-h3 { font-family: var(--fc-font-display); font-weight: 600; font-size: clamp(21px, 4.4vw, 32px); line-height: 1.12; letter-spacing: -.012em; color: var(--fc-navy-ink); margin: 0; } .fc-lead { font-family: var(--fc-font-body); font-size: clamp(16px, 2.4vw, 21px); line-height: 1.6; color: var(--fc-steel-700); font-weight: 400; max-width: 62ch; letter-spacing: -.005em; } /* Eyebrow / Tag — monospace, with a leader line */ .fc-tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--fc-font-mono); font-size: 11px; font-weight: 600; color: var(--fc-brass); /* brass heritage accent for eyebrows */ letter-spacing: .14em; text-transform: uppercase; } .fc-tag::before { content: ""; width: 32px; height: 1px; background: var(--fc-brass); } .fc-tag-mini { font-family: var(--fc-font-mono); font-size: 10px; font-weight: 600; color: var(--fc-steel-500); letter-spacing: .14em; text-transform: uppercase; } /* ─── "SINCE 1946" heritage emphasis ───────────────────────────── Bold, prominent heritage marker. The year is the loudest element. */ .fc-since { display: inline-flex; align-items: baseline; gap: .42em; font-family: var(--fc-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1; color: var(--fc-navy); } .fc-since .fc-since-word { font-size: .58em; font-weight: 700; letter-spacing: .22em; color: var(--fc-steel-500); position: relative; top: -.06em; } .fc-since .fc-since-year { font-size: 1em; font-weight: 900; font-feature-settings: "tnum" 1; color: var(--fc-navy); } /* Orange variant — for use on light/navy heroes where it must pop */ .fc-since--accent .fc-since-year { color: var(--fc-orange); } /* Light variant — for dark/navy backgrounds */ .fc-since--light .fc-since-word { color: rgba(255,255,255,.72); } .fc-since--light .fc-since-year { color: #fff; } /* Pill badge form — a solid "EST. 1946" stamp for section corners + hero */ .fc-est-badge { display: inline-flex; align-items: center; gap: .5em; padding: 6px 14px; border-radius: var(--fc-r-sm); background: var(--fc-navy); color: #fff; font-family: var(--fc-font-display); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; } .fc-est-badge .fc-est-year { color: var(--fc-orange); font-feature-settings: "tnum" 1; } .fc-est-badge--ghost { background: transparent; color: var(--fc-navy); border: 1.5px solid var(--fc-navy); } .fc-est-badge--ghost .fc-est-year { color: var(--fc-orange); } /* Hero-scale heritage lockup — the loudest "Since 1946" on the site */ .fc-since-xl { font-size: clamp(17px, 3.2vw, 40px); } .fc-since { flex-wrap: wrap; max-width: 100%; } .fc-hero-heritage { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 4px; max-width: 100%; } .fc-hero-heritage .fc-tag::before { width: 24px; } @media (max-width: 559px) { .fc-hero-heritage .fc-tag { display: none; } } /* Coordinates strip — `[ 01 / NAVY ]` style markers */ .fc-coord { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fc-steel-300); text-transform: uppercase; } .fc-coord b { color: var(--fc-navy-ink); font-weight: 700; } .fc-coord span.div { color: var(--fc-steel-300); } /* ════════════════════════════════════════════════════════════════ BUTTONS — squared, monospace labels, mechanical ════════════════════════════════════════════════════════════════ */ .fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fc-font-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 20px; min-height: 48px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--fc-fast) var(--fc-ease); white-space: nowrap; position: relative; } @media (min-width: 600px) { .fc-btn { font-size: 13px; padding: 16px 28px; min-height: 52px; gap: 12px; } } .fc-btn::after { content: "→"; font-family: var(--fc-font-body); font-size: 16px; } .fc-btn-primary { background: var(--fc-orange); color: #fff; } .fc-btn-primary:hover { background: var(--fc-orange-warm); box-shadow: 0 8px 24px rgba(255,94,20,.32); } .fc-btn-navy { background: var(--fc-navy-ink); color: #fff; } .fc-btn-navy:hover { background: #000; } .fc-btn-ghost { background: transparent; color: var(--fc-navy-ink); border-color: var(--fc-steel-100); } .fc-btn-ghost:hover { border-color: var(--fc-navy-ink); background: var(--fc-mist); } .fc-btn-link { background: transparent; color: var(--fc-orange); padding: 4px 0; min-height: auto; font-size: 12px; border-bottom: 1px solid var(--fc-orange); border-radius: 0; } .fc-btn-link:hover { color: var(--fc-orange-warm); } .fc-btn-link::after { content: ""; } .fc-btn-link::after { content: " →"; font-family: inherit; font-size: inherit; } .fc-btn-sm { padding: 10px 16px; min-height: 36px; font-size: 11px; } .fc-btn-lg { padding: 16px 24px; min-height: 52px; font-size: 12px; } @media (min-width: 600px) { .fc-btn-lg { padding: 20px 36px; min-height: 60px; font-size: 14px; } } .fc-btn-block { width: 100%; } /* ════════════════════════════════════════════════════════════════ CHIPS — squared, mono labels ════════════════════════════════════════════════════════════════ */ .fc-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fc-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px; background: transparent; border: 1px solid var(--fc-steel-100); border-radius: 4px; color: var(--fc-navy-ink); cursor: pointer; transition: all var(--fc-fast) var(--fc-ease); } .fc-chip:hover { border-color: var(--fc-navy-ink); } .fc-chip[aria-pressed="true"], .fc-chip.is-active { background: var(--fc-navy-ink); border-color: var(--fc-navy-ink); color: #fff; } .fc-chip i { font-style: normal; font-size: 11px; color: var(--fc-steel-500); } .fc-chip[aria-pressed="true"] i { color: var(--fc-orange); } /* ════════════════════════════════════════════════════════════════ SPEC TABLE — the workhorse component tabular dl with mono labels and right-aligned values ════════════════════════════════════════════════════════════════ */ .fc-spec { margin: 0; font-family: var(--fc-font-body); border-top: 1px solid var(--fc-navy-ink); } .fc-spec > .row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--fc-steel-100); align-items: baseline; } @media (min-width: 600px) { .fc-spec > .row { grid-template-columns: minmax(140px, 1fr) auto; gap: 24px; padding: 16px 0; } } .fc-spec dt { font-family: var(--fc-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--fc-steel-500); text-transform: uppercase; } .fc-spec dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--fc-navy-ink); text-align: left; line-height: 1.4; } @media (min-width: 600px) { .fc-spec dd { text-align: right; } } .fc-spec dd .fc-mono { font-size: 14px; } .fc-spec-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--fc-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--fc-steel-500); text-transform: uppercase; padding-bottom: 8px; } /* ════════════════════════════════════════════════════════════════ TABULAR STAT — bigger numerics, mono unit, mono label ════════════════════════════════════════════════════════════════ */ .fc-stat { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; border-top: 1px solid var(--fc-navy-ink); border-bottom: 1px solid var(--fc-steel-100); } .fc-stat-num { font-family: var(--fc-font-display); font-weight: 800; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -.03em; color: var(--fc-navy-ink); font-variant-numeric: tabular-nums; } .fc-stat-num small { font-family: var(--fc-font-mono); font-weight: 500; font-size: .35em; color: var(--fc-orange); margin-left: 4px; vertical-align: 0.3em; letter-spacing: 0; } .fc-stat-label { font-family: var(--fc-font-mono); font-size: 11px; font-weight: 600; color: var(--fc-steel-500); letter-spacing: .12em; text-transform: uppercase; } .fc-stat-bar { height: 2px; width: 32px; background: var(--fc-orange); margin-top: 4px; } .fc-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; } @media (min-width: 760px) { .fc-stats-row { grid-template-columns: repeat(4, 1fr); gap: 0 32px; } } /* ════════════════════════════════════════════════════════════════ BLUEPRINT PHOTO — image with engineering overlay navy duotone + dimension callouts ════════════════════════════════════════════════════════════════ */ .fc-bp { position: relative; background: var(--fc-navy-ink); border-radius: 4px; overflow: hidden; isolation: isolate; } .fc-bp img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) contrast(1.05) brightness(1.05); opacity: 1; } .fc-bp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,35,90,.10) 0%, rgba(0,35,90,.10) 40%, rgba(11,26,53,.45) 100%); z-index: 1; } .fc-bp-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; z-index: 2; pointer-events: none; } .fc-bp-tag { position: absolute; z-index: 3; font-family: var(--fc-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-orange); padding: 6px 10px; background: rgba(11,26,53,.60); border: 1px solid rgba(255,94,20,.4); border-radius: 2px; } .fc-bp-tag.tl { top: 16px; left: 16px; } .fc-bp-tag.tr { top: 16px; right: 16px; } .fc-bp-tag.bl { bottom: 16px; left: 16px; } .fc-bp-tag.br { bottom: 16px; right: 16px; } .fc-bp-cap { position: absolute; z-index: 3; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.75); text-transform: uppercase; } .fc-bp-cap b { color: var(--fc-orange); font-weight: 600; } /* ════════════════════════════════════════════════════════════════ TECH CARD — product card with spec stripe ════════════════════════════════════════════════════════════════ */ .fc-tech { display: flex; flex-direction: column; background: var(--fc-paper); border: 1px solid var(--fc-steel-100); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; position: relative; transition: all var(--fc-fast) var(--fc-ease); } .fc-tech::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fc-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--fc-medium) var(--fc-ease); } .fc-tech:hover { border-color: var(--fc-navy-ink); box-shadow: 0 12px 32px rgba(11,26,53,.10); } .fc-tech:hover::before { transform: scaleX(1); } .fc-tech-photo { aspect-ratio: 4 / 3; background: var(--fc-mist); position: relative; overflow: hidden; } .fc-tech-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fc-slow) var(--fc-ease); } .fc-tech:hover .fc-tech-photo img { transform: scale(1.04); } .fc-tech-photo-tag { position: absolute; top: 12px; left: 12px; font-family: var(--fc-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--fc-navy-ink); color: #fff; padding: 4px 8px; border-radius: 2px; } .fc-tech-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .fc-tech-id { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fc-steel-500); text-transform: uppercase; } .fc-tech-name { font-family: var(--fc-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; color: var(--fc-navy-ink); margin: 0; } .fc-tech-spec { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fc-steel-700); } .fc-tech-spec b { color: var(--fc-navy-ink); font-weight: 600; } .fc-tech-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--fc-steel-100); display: flex; justify-content: space-between; align-items: baseline; } .fc-tech-price { font-family: var(--fc-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; color: var(--fc-navy-ink); font-variant-numeric: tabular-nums; } .fc-tech-price small { font-family: var(--fc-font-mono); font-weight: 500; font-size: 10px; color: var(--fc-steel-500); margin-right: 4px; letter-spacing: .12em; text-transform: uppercase; } .fc-tech-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 760px) { .fc-tech-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 1100px){ .fc-tech-grid { grid-template-columns: repeat(3, 1fr); } } /* ════════════════════════════════════════════════════════════════ FORM FIELDS — sharp corners, mono labels ════════════════════════════════════════════════════════════════ */ .fc-field { display: flex; flex-direction: column; gap: 8px; } .fc-label { font-family: var(--fc-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--fc-steel-700); text-transform: uppercase; display: flex; justify-content: space-between; } .fc-label .opt { color: var(--fc-steel-300); font-weight: 500; } .fc-input, .fc-textarea, .fc-select { font-family: var(--fc-font-body); font-size: 15px; padding: 14px 16px; border: 1px solid var(--fc-steel-100); border-radius: 4px; background: var(--fc-paper); color: var(--fc-navy-ink); transition: border-color var(--fc-fast) var(--fc-ease), box-shadow var(--fc-fast) var(--fc-ease); width: 100%; box-sizing: border-box; } .fc-input:focus, .fc-textarea:focus, .fc-select:focus { outline: none; border-color: var(--fc-navy-ink); box-shadow: 0 0 0 3px rgba(0,35,90,.10); } .fc-textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .fc-help { font-size: 12px; color: var(--fc-steel-500); } .fc-form { display: flex; flex-direction: column; gap: 18px; } /* ════════════════════════════════════════════════════════════════ CALL RIBBON / PHONE BLOCK ════════════════════════════════════════════════════════════════ */ .fc-call-ribbon { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--fc-steel-100); padding: 9px 14px; border-radius: 4px; font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--fc-navy-ink); text-decoration: none; font-weight: 600; transition: all var(--fc-fast) var(--fc-ease); } .fc-call-ribbon:hover { border-color: var(--fc-navy-ink); background: var(--fc-mist); } .fc-call-ribbon strong { font-weight: 700; } .fc-call-ribbon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-success); box-shadow: 0 0 0 3px rgba(31,138,76,.18); animation: fc-pulse 2.4s ease-in-out infinite; } @keyframes fc-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(31,138,76,.18); } 50% { box-shadow: 0 0 0 6px rgba(31,138,76,.04); } } /* ════════════════════════════════════════════════════════════════ STICKY CTA + MODAL (kept) ════════════════════════════════════════════════════════════════ */ .fc-cta-bar { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; background: var(--fc-navy-ink); color: #fff; border-radius: 4px; border: 1px solid #1a2a4d; box-shadow: var(--fc-shadow-lg); transform: translateY(120%); transition: transform var(--fc-medium) var(--fc-ease); } .fc-cta-bar.is-visible { transform: translateY(0); } .fc-cta-bar-text { font-family: var(--fc-font-mono); font-size: 12px; display: flex; flex-direction: column; gap: 2px; } .fc-cta-bar-text strong { font-weight: 700; font-size: 14px; letter-spacing: -.01em; } .fc-cta-bar-text span { color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .fc-cta-bar .fc-btn { padding: 10px 18px; min-height: 38px; font-size: 11px; } @media (min-width: 760px) { .fc-cta-bar { left: 32px; right: 32px; bottom: 24px; padding: 14px 16px 14px 22px; } } .fc-modal-backdrop { position: fixed; inset: 0; background: rgba(11,26,53,.62); backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: all var(--fc-medium) var(--fc-ease); } .fc-modal-backdrop.is-open { opacity: 1; visibility: visible; } .fc-modal { background: var(--fc-paper); border-radius: 4px; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px; box-shadow: var(--fc-shadow-lg); transform: translateY(20px); transition: transform var(--fc-medium) var(--fc-ease); position: relative; border-top: 4px solid var(--fc-orange); } .fc-modal-backdrop.is-open .fc-modal { transform: translateY(0); } .fc-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid var(--fc-steel-100); border-radius: 4px; background: var(--fc-paper); cursor: pointer; font-size: 16px; color: var(--fc-steel-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--fc-font-mono); } .fc-modal-close:hover { border-color: var(--fc-navy-ink); } /* ════════════════════════════════════════════════════════════════ SECTIONS / RULES ════════════════════════════════════════════════════════════════ */ .fc-section { position: relative; padding: 64px 20px; max-width: 1440px; margin: 0 auto; z-index: 2; } @media (min-width: 600px) { .fc-section { padding: 88px 24px; } } @media (min-width: 760px) { .fc-section { padding: 128px 48px; } } @media (min-width: 1100px) { .fc-section { padding: 160px 80px; } } .fc-section-tight { padding-top: 48px; padding-bottom: 48px; } @media (min-width: 760px) { .fc-section-tight { padding-top: 64px; padding-bottom: 64px; } } .fc-section-narrow { max-width: 960px; } .fc-section-band { background: var(--fc-mist); max-width: none; } .fc-section-band > .inner { max-width: 1440px; margin: 0 auto; padding: 0; } /* Section header — tag + h2 + division ledger */ .fc-section-head { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--fc-navy-ink); position: relative; } .fc-section-head::before { content: ""; position: absolute; bottom: -1px; left: 0; width: 64px; height: 3px; background: var(--fc-orange); } @media (min-width: 760px) { .fc-section-head { grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 48px; margin-bottom: 56px; } .fc-section-head::before { width: 80px; } } .fc-section-head .meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fc-steel-500); text-transform: uppercase; text-align: left; padding-top: 8px; border-top: 1px solid var(--fc-steel-100); } @media (min-width: 760px) { .fc-section-head .meta { display: flex; flex-direction: column; gap: 4px; text-align: right; padding-top: 0; border-top: none; } } .fc-section-head .meta b { color: var(--fc-navy-ink); font-weight: 600; font-size: 11px; } /* ════════════════════════════════════════════════════════════════ LOGO HELPERS ════════════════════════════════════════════════════════════════ */ .fc-logo { display: inline-block; line-height: 0; } .fc-logo img, .fc-logo svg { display: block; } .fc-logo-nav { height: 36px; } .fc-logo-hero { height: 88px; } .fc-logo-footer { height: 56px; } /* ════════════════════════════════════════════════════════════════ UTILITIES ════════════════════════════════════════════════════════════════ */ .fc-mono { font-family: var(--fc-font-mono); font-feature-settings: "tnum" 1; } .fc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .fc-mt { margin-top: 48px; } .fc-mt-s { margin-top: 16px; } .fc-mt-l { margin-top: 80px; } .fc-divider { height: 1px; background: var(--fc-steel-100); width: 100%; margin: 32px 0; } .fc-rule { height: 1px; background: linear-gradient(90deg, var(--fc-navy-ink) 0 80px, var(--fc-steel-100) 80px 100%); width: 100%; } /* ===== css/site.css ===== */ /* Foster Refrigerators USA — site-wide layout (industrial v2) Nav + footer + page hero + dense content rails. */ html, body { background: var(--fc-paper); color: var(--fc-navy-ink); max-width: 100%; overflow-x: hidden; } body { font-family: var(--fc-font-body); } img, svg { max-width: 100%; } .page-hero, .page-hero * { max-width: 100%; } .fc-lead { max-width: 100%; } @media (min-width: 760px) { .page-hero p.fc-lead { max-width: 60ch; } } /* ─── NAV ─────────────────────────────────────────────────── */ /* Mobile-first: simple row — logo hard-left, hamburger hard-right. Hidden links/call don't occupy layout because flex skips display:none. */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--fc-paper) 92%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--fc-steel-100); } .site-nav-brand { margin-right: auto; /* anchor logo to the far left */ display: inline-flex; align-items: center; /* vertically center oval + text */ gap: 14px; text-decoration: none; height: 44px; /* match hamburger height so the row is even */ } .site-nav-brand img { height: 40px; width: auto; display: block; align-self: center; /* center the oval within the 44px row */ } /* Dark-mode toggle (injected into nav by nav.js) */ .fc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--fc-steel-100); background: transparent; color: var(--fc-steel-700); border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; transition: border-color var(--fc-fast) var(--fc-ease), color var(--fc-fast) var(--fc-ease); } .fc-theme-toggle:hover { border-color: var(--fc-accent); color: var(--fc-accent); } .fc-theme-toggle:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; } @media (min-width: 760px) { .fc-theme-toggle { grid-column: 3; justify-self: end; } } .site-nav-brand .fc-since { font-size: 15px; padding-left: 14px; border-left: 1px solid var(--fc-steel-100); text-decoration: none; line-height: 1; } /* Hide the heritage lockup on small + mid screens — keep just the mark */ .site-nav-brand .fc-since { display: none; } @media (min-width: 1080px) { .site-nav-brand img { height: 46px; } .site-nav-brand .fc-since { display: inline-flex; } } /* Hamburger toggle — visible on mobile only */ .site-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--fc-steel-100); background: var(--fc-paper); border-radius: 4px; cursor: pointer; position: relative; } .site-nav-toggle::before, .site-nav-toggle::after, .site-nav-toggle span { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--fc-navy-ink); transition: transform .2s var(--fc-ease), top .2s var(--fc-ease), opacity .2s var(--fc-ease); } .site-nav-toggle::before { top: 14px; } .site-nav-toggle span { top: 21px; } .site-nav-toggle::after { top: 28px; } .site-nav[data-open="true"] .site-nav-toggle::before { top: 21px; transform: rotate(45deg); } .site-nav[data-open="true"] .site-nav-toggle::after { top: 21px; transform: rotate(-45deg); } .site-nav[data-open="true"] .site-nav-toggle span { opacity: 0; } @media (min-width: 760px) { .site-nav-toggle { display: none; } } /* Desktop nav links + call ribbon */ .site-nav-links { display: none; gap: 34px; grid-row: 1; } .site-nav-links a { font-family: var(--fc-font-body); font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--fc-steel-500); text-decoration: none; padding: 6px 0; position: relative; transition: color .18s ease; } .site-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--fc-orange); transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.4,0,.2,1); } .site-nav-links a:hover { color: var(--fc-navy-ink); } .site-nav-links a:hover::after { transform: scaleX(1); } .site-nav-links a.is-active { color: var(--fc-navy-ink); font-weight: 600; } .site-nav-links a.is-active::after { transform: scaleX(1); } .site-nav-call { display: none; } @media (min-width: 760px) { .site-nav { display: grid; grid-template-columns: auto 1fr auto auto; /* brand · links · toggle · call */ padding: 16px 48px; gap: 16px 20px; } .site-nav-brand { grid-column: 1; justify-self: start; margin-right: 0; } .site-nav-links { display: flex; grid-column: 2; justify-self: center; } .fc-theme-toggle { grid-column: 3; justify-self: end; } .site-nav-call { display: inline-flex; grid-column: 4; justify-self: end; } } /* Mobile drawer — full-width slide-down panel */ .site-nav-drawer { position: fixed; top: 56px; left: 0; right: 0; z-index: 99; background: var(--fc-paper); border-bottom: 1px solid var(--fc-steel-100); padding: 0 16px 24px; transform: translateY(-110%); transition: transform .3s var(--fc-ease); box-shadow: 0 16px 32px rgba(11,26,53,.10); } .site-nav[data-open="true"] + .site-nav-drawer { transform: translateY(0); } .site-nav-drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .site-nav-drawer a { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--fc-steel-100); font-family: var(--fc-font-mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-navy-ink); text-decoration: none; } .site-nav-drawer a::after { content: "→"; color: var(--fc-steel-300); font-family: var(--fc-font-body); font-size: 14px; } .site-nav-drawer a.is-active { color: var(--fc-orange); } .site-nav-drawer a.is-active::after { color: var(--fc-orange); } .site-nav-drawer-call { display: flex; align-items: center; justify-content: center; margin-top: 18px; padding: 14px; background: var(--fc-orange); color: #fff; border-radius: 4px; font-family: var(--fc-font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } @media (min-width: 760px) { .site-nav-drawer { display: none; } } /* ─── DESKTOP HEADER QUOTE CTA ────────────────────────────── */ /* Injected by nav.js next to the call ribbon. Hidden on mobile — the bottom dock covers small screens. */ .site-nav-cta, .site-nav-msg { display: none; } @media (min-width: 760px) { .site-nav { /* brand · links · theme · call · text · cta */ grid-template-columns: auto 1fr auto auto auto auto; } .site-nav-msg { grid-column: 5; justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: transparent; border: 1px solid var(--fc-steel-100); color: var(--fc-steel-700); border-radius: 4px; font-family: var(--fc-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color var(--fc-fast) var(--fc-ease), color var(--fc-fast) var(--fc-ease); } .site-nav-msg svg { width: 14px; height: 14px; } .site-nav-msg:hover { border-color: var(--fc-accent); color: var(--fc-accent); } .site-nav-msg:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; } .site-nav-cta { grid-column: 6; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--fc-orange); color: #fff; border-radius: 4px; font-family: var(--fc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px color-mix(in srgb, var(--fc-orange) 32%, transparent); transition: transform var(--fc-fast) var(--fc-ease), box-shadow var(--fc-fast) var(--fc-ease), background var(--fc-fast) var(--fc-ease); } .site-nav-cta:hover { background: var(--fc-orange-warm); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--fc-orange) 40%, transparent); } .site-nav-cta:focus-visible { outline: 2px solid var(--fc-navy-ink); outline-offset: 2px; } .site-nav-cta .arrow { font-family: var(--fc-font-body); font-size: 13px; } } /* ─── MOBILE BOTTOM DOCK ──────────────────────────────────── */ /* Fixed thumb-zone bar: tap-to-call + bold quote. Injected by nav.js. Desktop hides it (header CTA + hero cover large screens). */ .fc-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1.1fr 1.6fr; background: var(--fc-paper); border-top: 1px solid var(--fc-steel-100); box-shadow: 0 -8px 24px rgba(11,26,53,.12); padding-bottom: env(safe-area-inset-bottom); /* iOS home-bar */ transform: translateY(0); transition: transform .28s var(--fc-ease); } /* Two-button variant (Call · Quote) while the Message button is disabled. */ .fc-dock--2 { grid-template-columns: 1fr 1.7fr; } /* Slide away while actively scrolling down; reappear on stop/scroll-up */ .fc-dock[data-hidden="true"] { transform: translateY(calc(100% + env(safe-area-inset-bottom))); } .fc-dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; font-family: var(--fc-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } .fc-dock-call, .fc-dock-msg { color: var(--fc-navy-ink); border-right: 1px solid var(--fc-steel-100); background: var(--fc-paper); -webkit-appearance: none; appearance: none; border-top: 0; border-left: 0; border-bottom: 0; cursor: pointer; width: 100%; } .fc-dock-call svg, .fc-dock-msg svg { width: 16px; height: 16px; } .fc-dock-quote { color: #fff; background: var(--fc-orange); } .fc-dock-quote .arrow { font-family: var(--fc-font-body); font-size: 15px; } .fc-dock-quote:active { background: var(--fc-orange-warm); } @media (min-width: 760px) { .fc-dock { display: none; } } /* Reserve thumb-zone space so the dock never sits over the footer's last line at the bottom of the page (mobile only). */ @media (max-width: 759px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } } /* ─── MESSAGE CHOOSER SHEET ───────────────────────────────── */ /* Bottom sheet offering Text (SMS/iMessage) + WhatsApp. Opened from the dock's Message button or any [data-msg-open] trigger. */ .fc-msg-sheet { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-end; } .fc-msg-sheet[data-open="true"] { display: flex; } .fc-msg-sheet-scrim { position: absolute; inset: 0; background: rgba(11,26,53,.55); opacity: 0; transition: opacity .25s var(--fc-ease); } .fc-msg-sheet[data-open="true"] .fc-msg-sheet-scrim { opacity: 1; } .fc-msg-sheet-panel { position: relative; width: 100%; background: var(--fc-paper); border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px rgba(11,26,53,.28); transform: translateY(100%); transition: transform .28s var(--fc-ease); } .fc-msg-sheet[data-open="true"] .fc-msg-sheet-panel { transform: translateY(0); } .fc-msg-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--fc-steel-100); margin: 8px auto 14px; } .fc-msg-sheet h4 { font-family: var(--fc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-steel-500); margin: 0 4px 12px; } .fc-msg-opt { display: flex; align-items: center; gap: 14px; padding: 16px 14px; border: 1px solid var(--fc-steel-100); border-radius: 8px; text-decoration: none; color: var(--fc-navy-ink); margin-bottom: 10px; } .fc-msg-opt:last-child { margin-bottom: 0; } .fc-msg-opt .fc-msg-ico { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .fc-msg-opt .fc-msg-ico svg { width: 22px; height: 22px; } .fc-msg-opt .fc-msg-ico.is-text { background: #e7f0fb; color: var(--fc-orange); } .fc-msg-opt .fc-msg-ico.is-wa { background: #25D366; color: #fff; } .fc-msg-opt .fc-msg-label { font-weight: 700; font-size: 15px; line-height: 1.2; } .fc-msg-opt .fc-msg-sub { font-size: 12px; color: var(--fc-steel-500); margin-top: 2px; } .fc-msg-opt::after { content: "→"; margin-left: auto; color: var(--fc-steel-300); font-size: 16px; } /* ─── FOOTER ──────────────────────────────────────────────── */ .site-foot { background: var(--fc-navy-ink); color: rgba(255,255,255,.75); padding: 56px 20px 24px; position: relative; border-top: 1px solid #1a2a4d; } @media (min-width: 600px) { .site-foot { padding: 80px 24px 32px; } } .site-foot::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 3px; background: var(--fc-orange); } .site-foot-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.10); } @media (min-width: 760px) { .site-foot { padding: 96px 48px 32px; } .site-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; } } .site-foot h4 { font-family: var(--fc-font-mono); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--fc-orange); margin: 0 0 20px; } .site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .site-foot a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; transition: color .15s ease; } .site-foot a:hover { color: #fff; } .site-foot-mark { display: inline-block; margin-bottom: 24px; } .site-foot-mark img { height: 56px; width: auto; } .site-foot-blurb { font-size: 14px; line-height: 1.6; max-width: 360px; color: rgba(255,255,255,.65); } .site-foot-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.85); text-transform: uppercase; } .site-foot-pill::before { content: "★"; color: var(--fc-orange); } .site-foot-base { max-width: 1440px; margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: var(--fc-font-mono); font-size: 10px; color: rgba(255,255,255,.40); letter-spacing: .14em; text-transform: uppercase; } /* ─── PAGE HERO ───────────────────────────────────────────── */ .page-hero { position: relative; padding: 84px 20px 56px; max-width: 1440px; margin: 0 auto; } @media (min-width: 600px) { .page-hero { padding: 100px 24px 72px; } } @media (min-width: 760px) { .page-hero { padding: 160px 48px 120px; } } @media (min-width: 1100px) { .page-hero { padding: 180px 80px 140px; } } /* Split hero — copy left, product image right (fills the blank space) */ .page-hero--split { padding-top: 96px; padding-bottom: 40px; } @media (min-width: 600px) { .page-hero--split { padding-top: 108px; } } @media (min-width: 760px) { .page-hero--split { padding-top: 132px; padding-bottom: 64px; } } @media (min-width: 1000px) { .page-hero--split { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; /* Tighter vertical rhythm so both CTAs + proof ribbon stay above the fold on a standard 1440×900 laptop (was 150/96). */ padding-top: 116px; padding-bottom: 64px; } } .page-hero-copy { min-width: 0; } /* Mono proof ribbon under the CTAs */ .page-hero-ribbon { display: flex; flex-wrap: wrap; gap: 0; margin-top: 36px; border-top: 1px solid var(--fc-steel-100); border-bottom: 1px solid var(--fc-steel-100); } .page-hero-ribbon span { font-family: var(--fc-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-steel-500); padding: 12px 16px 12px 0; margin-right: 16px; position: relative; } .page-hero-ribbon span:not(:last-child)::after { content: "·"; position: absolute; right: 0; color: var(--fc-steel-300); } /* Hero media (right column) */ .page-hero-media { position: relative; margin-top: 36px; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fc-navy-ink); } .page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1000px) { .page-hero-media { margin-top: 0; aspect-ratio: 5 / 6; } } /* ─── Ken Burns hero: two slides crossfade, active one slowly zooms ─── */ .fc-kenburns .fc-kb-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease-in-out; will-change: opacity; z-index: 1; } .fc-kenburns .fc-kb-slide.is-active { opacity: 1; z-index: 2; } .fc-kenburns .fc-kb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); } /* Only the active slide animates — slow, cinematic drift + zoom */ .fc-kenburns .fc-kb-slide.is-active img { animation: fc-kb-pan 16s ease-in-out forwards; } @keyframes fc-kb-pan { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } } /* keep the blueprint grid + tags above the slides */ .fc-kenburns .fc-bp-grid, .fc-kenburns .fc-bp-tag { z-index: 3; } @media (prefers-reduced-motion: reduce) { .fc-kenburns .fc-kb-slide { transition: opacity .4s ease; } .fc-kenburns .fc-kb-slide.is-active img { animation: none; transform: none; } } .page-hero-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; /* vertically center the spec panel — no top void */ } @media (min-width: 760px) { .page-hero-grid { gap: 56px; } } @media (min-width: 1100px) { .page-hero-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; } } /* Spec panel — reads as a deliberate spec sheet, not a floating list */ .page-hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 12px 0 0; border-top: 1px solid var(--fc-navy-ink); position: relative; } @media (min-width: 1100px) { .page-hero-meta { grid-template-columns: 1fr; gap: 0; padding: 28px 28px 12px; border-top: 0; border: 1px solid var(--fc-steel-100); border-radius: var(--fc-r-md); background: var(--fc-mist); } /* divider rule between each spec row */ .page-hero-meta dl { border-top: 1px solid var(--fc-steel-100); padding: 14px 0; } .page-hero-meta dl:first-of-type { border-top: 0; } } .page-hero-meta::before { content: ""; position: absolute; top: -2px; left: 0; width: 64px; height: 3px; background: var(--fc-orange); } @media (min-width: 1100px) { .page-hero-meta::before { top: -1px; left: 28px; } } @media (min-width: 760px) { .page-hero-meta::before { width: 80px; } } .page-hero-meta dl { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; } @media (min-width: 1100px) { .page-hero-meta dl { flex-direction: row; gap: 16px; align-items: baseline; padding: 0; } } .page-hero-meta dt { font-family: var(--fc-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-steel-500); } @media (min-width: 1100px) { .page-hero-meta dt { font-size: 10px; min-width: 80px; } } .page-hero-meta dd { margin: 0; font-family: var(--fc-font-mono); font-size: 11px; color: var(--fc-navy-ink); font-weight: 600; } @media (min-width: 1100px) { .page-hero-meta dd { font-size: 12px; } } .page-hero h1.fc-h1 { max-width: 1100px; } .page-hero p.fc-lead { max-width: 720px; margin-top: 20px; } @media (min-width: 760px) { .page-hero p.fc-lead { margin-top: 28px; } } .page-hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; align-items: stretch; } .page-hero-actions .fc-btn-primary { width: 100%; justify-content: space-between; } .page-hero-actions .fc-btn-ghost, .page-hero-actions .fc-btn-navy { width: 100%; justify-content: space-between; } @media (min-width: 600px) { .page-hero-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .page-hero-actions .fc-btn { width: auto; justify-content: center; } } /* ─── HERO DUO — two equal plates (Navy + Civilian) ────────── Mobile: stack vertically. Desktop: side-by-side, identical heights. ─────────────────────────────────────────────────────────── */ .hero-duo { max-width: 1440px; margin: 0 auto; padding: 0 20px 56px; } @media (min-width: 600px) { .hero-duo { padding: 0 24px 72px; } } @media (min-width: 760px) { .hero-duo { padding: 0 48px 96px; } } @media (min-width: 1100px) { .hero-duo { padding: 0 80px 120px; } } .hero-duo-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 760px) { .hero-duo-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 1100px) { .hero-duo-grid { gap: 24px; } } .hero-duo-card { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; isolation: isolate; background: var(--fc-navy-ink); } @media (min-width: 760px) { .hero-duo-card { aspect-ratio: 3 / 4; } } @media (min-width: 1100px) { .hero-duo-card { aspect-ratio: 4 / 3; } } /* Caption block — pinned to bottom, doesn't push the photo */ .hero-duo-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 24px 20px 20px; color: #fff; background: linear-gradient(180deg, rgba(11,26,53,0) 0%, rgba(11,26,53,.75) 50%, rgba(11,26,53,.95) 100%); } @media (min-width: 760px) { .hero-duo-cap { padding: 28px 24px; } } @media (min-width: 1100px) { .hero-duo-cap { padding: 32px 28px; } } .hero-duo-cap p { margin: 8px 0 16px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; } @media (min-width: 760px) { .hero-duo-cap p { font-size: 15px; } } .hero-duo-cap .fc-h3 { font-size: clamp(20px, 4.5vw, 26px); letter-spacing: -.015em; } @media (min-width: 760px) { .hero-duo-cap .fc-h3 { font-size: 22px; } } @media (min-width: 1100px) { .hero-duo-cap .fc-h3 { font-size: 26px; } } /* Pin the engineering tags to the corners regardless of card content */ .hero-duo-card > .fc-bp-tag.tl { top: 16px; left: 16px; } .hero-duo-card > .fc-bp-tag.tr { top: 16px; right: 16px; } /* (legacy hero-stack CSS removed — replaced by .hero-duo above) */ /* ─── SPLIT 2 (image + content) ───────────────────────────── */ .split-2 { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: stretch; } @media (min-width: 900px) { .split-2 { grid-template-columns: 1.1fr 1fr; gap: 80px; } } .split-2.is-flipped { direction: rtl; } .split-2.is-flipped > * { direction: ltr; } /* Industries / 4-column rails */ .cols-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (min-width: 760px) { .cols-4 { grid-template-columns: repeat(4, 1fr); gap: 48px; } } .cols-4 > div h4 { font-family: var(--fc-font-mono); font-weight: 700; font-size: 11px; color: var(--fc-orange); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 12px; margin: 0 0 16px; border-bottom: 1px solid var(--fc-navy-ink); position: relative; } .cols-4 > div h4::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 24px; height: 3px; background: var(--fc-orange); } .cols-4 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .cols-4 li { font-size: 14px; padding: 6px 0; color: var(--fc-navy-ink); font-weight: 500; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; } .cols-4 li::before { content: ""; width: 12px; height: 1px; background: var(--fc-steel-300); margin-top: 9px; } /* ─── HERITAGE BAND ───────────────────────────────────────── */ .heritage-band { position: relative; min-height: 70vh; display: flex; align-items: center; background: var(--fc-navy-ink); overflow: hidden; } .heritage-band-photo { position: absolute; inset: 0; } .heritage-band-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: grayscale(.7) contrast(1.05); } .heritage-band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(11,26,53,.92) 0%, rgba(0,35,90,.78) 50%, rgba(0,35,90,.40) 100%); } /* Blueprint grid texture */ .heritage-band-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 64px 64px; } .heritage-band-body { position: relative; z-index: 2; max-width: 1100px; padding: 80px 20px; color: #fff; width: 100%; } @media (min-width: 600px) { .heritage-band-body { padding: 96px 24px; } } @media (min-width: 760px) { .heritage-band-body { padding: 140px 80px; } } .heritage-band-body .fc-h2 { color: #fff; } .heritage-band-body .fc-lead { color: rgba(255,255,255,.78); margin-top: 32px; } .heritage-band-body em { font-style: normal; color: var(--fc-orange); } /* corner registration marks for heritage band */ .heritage-band-body .corner { position: absolute; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.45); text-transform: uppercase; } .heritage-band-body .corner-tl { top: 32px; left: 24px; } .heritage-band-body .corner-tr { top: 32px; right: 24px; text-align: right; } .heritage-band-body .corner-br { bottom: 32px; right: 24px; text-align: right; } @media (min-width: 760px) { .heritage-band-body .corner-tl { top: 40px; left: 80px; } .heritage-band-body .corner-tr { top: 40px; right: 80px; } .heritage-band-body .corner-br { bottom: 40px; right: 80px; } } /* ─── TRUST RAIL ──────────────────────────────────────────── */ .fc-trust-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 16px 0; border-top: 1px solid var(--fc-navy-ink); border-bottom: 1px solid var(--fc-navy-ink); } @media (min-width: 600px) { .fc-trust-rail { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 760px) { .fc-trust-rail { grid-template-columns: repeat(6, 1fr); padding: 32px 0; } } .fc-trust-rail .item { display: flex; flex-direction: column; gap: 6px; padding: 16px; position: relative; border-right: 1px solid var(--fc-steel-100); border-bottom: 1px solid var(--fc-steel-100); } @media (min-width: 760px) { .fc-trust-rail .item { padding: 0 20px; border-right: none; border-bottom: none; } .fc-trust-rail .item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--fc-steel-100); } } /* drop bottom border on last row + right border on rightmost col */ .fc-trust-rail .item:nth-child(2n) { border-right: none; } .fc-trust-rail .item:nth-last-child(-n+2) { border-bottom: none; } @media (min-width: 600px) { .fc-trust-rail .item:nth-child(2n) { border-right: 1px solid var(--fc-steel-100); } .fc-trust-rail .item:nth-child(3n) { border-right: none; } .fc-trust-rail .item:nth-last-child(-n+2) { border-bottom: 1px solid var(--fc-steel-100); } .fc-trust-rail .item:nth-last-child(-n+3) { border-bottom: none; } } .fc-trust-rail .num { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fc-orange); text-transform: uppercase; } .fc-trust-rail .label { font-family: var(--fc-font-display); font-weight: 700; font-size: 14px; color: var(--fc-navy-ink); letter-spacing: -.005em; line-height: 1.2; } /* ─── CTA BAND (dark) ─────────────────────────────────────── */ .cta-band { position: relative; background: var(--fc-navy-ink); border-radius: 4px; padding: 48px 20px; text-align: left; overflow: hidden; } @media (min-width: 600px) { .cta-band { padding: 64px 32px; } } .cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fc-orange); } .cta-band-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .cta-band > * { position: relative; z-index: 1; } .cta-band .fc-h2 { color: #fff; max-width: 800px; } .cta-band .fc-lead { color: rgba(255,255,255,.72); max-width: 640px; } @media (min-width: 760px) { .cta-band { padding: 96px 64px; } }