/* ========================================================================== Traiceback Solutions — consolidated stylesheet -------------------------------------------------------------------------- Canonical base = methodology.html's typography (19px / 1.55 / antialiased), container max-width 1150px, and a global box-sizing reset. The three "modern" pages (methodology, services, aimsmart) match this base directly. The seven "legacy" pages carry `class="legacy"` on , which restores their original ~16px / 1.7 typography and content-box container so they render exactly as before. Family/page-specific rules are scoped by the `layout-*` body class so nothing bleeds across pages. Body class map: layout-home index.html, insights.html (+ legacy nav-underline) layout-prose principal, contact, privacy, terms (+ legacy) layout-regintel regintel.html (+ legacy nav-underline) layout-methodology methodology.html (modern) layout-services services.html (modern) layout-aimsmart aimsmart-practical-controls.html (modern) Responsive: breakpoints at 1024 / 768 / 640(regintel) / 480. Desktop appearance is unchanged — clamp() maxima equal the original desktop sizes, and the mobile nav toggle is hidden above 768px. ========================================================================== */ /* ---------- Design tokens (union of every page's :root) ---------- */ :root { --cream: #f5f1ea; --cream-card: #faf6ec; /* index / insights */ --cream-light: #faf6ee; /* modern pages */ --cream-dark: #ebe2cc; /* modern pages */ --ink: #222222; --muted: #5f5f5f; --ink-faint: #8a8073; /* modern pages */ --rule: #d6d0c7; --rule-soft: rgba(44, 38, 32, 0.10); /* modern pages */ --brand-blue: #234a72; --brand-blue-hover: #1a3a5e; /* index / insights */ --red: #c5322b; --sepia: #8a7048; /* index / insights */ } /* ---------- Global reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; } /* ---------- Base body: canonical (methodology) typography ---------- */ body { margin: 0; background-color: var(--cream); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Legacy pages: preserve pre-consolidation typography & box model ---------- */ body.legacy { font-size: 16px; line-height: 1.7; font-weight: normal; -webkit-font-smoothing: auto; text-rendering: auto; } body.legacy .container { box-sizing: content-box; } /* ========================================================================== Shared layout — identical across all pages ========================================================================== */ .container { max-width: 1150px; margin: auto; padding: 52px 40px 80px; } header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 22px; } .logo { font-size: clamp(1.5rem, 6vw, 2.35rem); letter-spacing: -0.025em; color: var(--brand-blue); } .logo .red { color: var(--red); } nav a { text-decoration: none; color: var(--brand-blue); margin-left: 24px; font-size: 1.12rem; } nav a:hover { color: var(--red); } /* Active nav link — style differs by page family (preserved exactly). Modern pages: red, no underline. Legacy "underline" pages: red + rule. contact.html (legacy, no modifier) intentionally keeps the default blue. */ body:not(.legacy) nav a.active { color: var(--red); } body.nav-underline nav a.active { color: var(--red); border-bottom: 1px solid var(--red); padding-bottom: 2px; } /* Mobile nav toggle button — hidden on desktop, shown below 768px */ .nav-toggle { display: none; background: none; border: none; color: var(--brand-blue); font-size: 1.7rem; line-height: 1; padding: 4px 6px; cursor: pointer; } .nav-toggle:hover { color: var(--red); } /* ========================================================================== Shared footer ========================================================================== */ footer { margin-top: 120px; border-top: 1px solid var(--rule); padding-top: 30px; color: var(--muted); font-size: 0.95rem; line-height: 1.7; } .footer-brand { color: var(--ink); font-size: 1rem; } .footer-brand .red { color: var(--red); } .footer-tagline { font-size: 0.92rem; margin-top: 2px; } .footer-location { margin-top: 2px; } .footer-legal { margin-top: 14px; font-size: 0.88rem; } .footer-legal a { color: var(--muted); text-decoration: none; } .footer-legal a:hover { color: var(--brand-blue); } /* Modern pages add tighter leading + smaller trademark + styled contact link */ body:not(.legacy) .footer-legal { line-height: 1.6; } body:not(.legacy) .footer-legal sup { font-size: 0.65em; } body:not(.legacy) .footer-contact { margin-top: 6px; font-size: 0.95rem; } body:not(.legacy) .footer-contact a { color: var(--muted); text-decoration: none; } body:not(.legacy) .footer-contact a:hover { color: var(--brand-blue); } /* ========================================================================== Legacy shared bits (identical across the legacy pages; unused-but-preserved) ========================================================================== */ .cta { margin-top: 50px; } .cta a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .framework-link { font-size: 1.22rem; font-weight: 500; color: var(--ink); text-decoration: none; line-height: 1.45; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .framework-link:hover { color: var(--brand-blue); } /* ========================================================================== layout-home — index.html & insights.html ========================================================================== */ body.layout-home .date-bar { text-align: right; color: var(--muted); font-size: 0.92rem; font-style: italic; margin-top: 18px; margin-bottom: 4px; } body.layout-home .hero { margin-top: 40px; max-width: 1100px; } body.layout-home .eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; color: var(--sepia); text-transform: uppercase; margin-bottom: 22px; } body.layout-home .hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 500; line-height: 1.22; color: var(--brand-blue); letter-spacing: -0.005em; margin: 0 0 22px 0; max-width: 980px; } body.layout-home .hero .subhead { font-size: 1.22rem; line-height: 1.6; color: var(--ink); max-width: 960px; margin: 0 0 18px 0; } body.layout-home .hero .credibility { font-size: 1.1rem; line-height: 1.6; color: var(--muted); font-style: italic; max-width: 960px; margin: 0 0 32px 0; } body.layout-home .cta-row { display: flex; gap: 14px; margin-bottom: 56px; flex-wrap: wrap; } body.layout-home .cta-primary { background-color: var(--brand-blue); color: var(--cream); padding: 13px 26px; font-size: 1rem; text-decoration: none; letter-spacing: 0.02em; display: inline-block; border: 1px solid var(--brand-blue); } body.layout-home .cta-primary:hover { background-color: var(--brand-blue-hover); border-color: var(--brand-blue-hover); } body.layout-home .cta-secondary { border: 1px solid var(--brand-blue); color: var(--brand-blue); padding: 12px 26px; font-size: 1rem; text-decoration: none; letter-spacing: 0.02em; display: inline-block; background-color: transparent; } body.layout-home .cta-secondary:hover { background-color: var(--brand-blue); color: var(--cream); } body.layout-home .section-rule { border: none; border-top: 1px solid var(--rule); margin: 0 0 44px 0; } body.layout-home .why-now { margin-bottom: 56px; max-width: 1050px; } body.layout-home .why-now p { font-size: 1.12rem; line-height: 1.7; margin: 0 0 18px 0; } body.layout-home .services-teaser { margin-bottom: 56px; } body.layout-home .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; } body.layout-home .service-card { border: 1px solid var(--rule); padding: 24px 22px 20px; background-color: var(--cream-card); display: flex; flex-direction: column; } body.layout-home .service-num { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--red); text-transform: uppercase; margin-bottom: 14px; } body.layout-home .service-name { font-size: 1.18rem; font-weight: 500; color: var(--brand-blue); margin: 0 0 12px 0; line-height: 1.3; } body.layout-home .service-desc { font-size: 1rem; line-height: 1.55; color: var(--muted); font-style: italic; margin: 0 0 18px 0; flex-grow: 1; } body.layout-home .service-link { font-size: 0.95rem; color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } body.layout-home .service-link:hover { color: var(--red); } body.layout-home .principal-block { display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: start; padding: 40px 0 0 0; border-top: 1px solid var(--rule); } body.layout-home .portrait { width: 160px; height: 195px; overflow: hidden; } body.layout-home .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } body.layout-home .principal-content .eyebrow { margin-bottom: 10px; } body.layout-home .principal-name { font-size: 1.35rem; font-weight: 500; color: var(--brand-blue); margin: 0 0 6px 0; } body.layout-home .principal-title { font-size: 1rem; color: var(--muted); font-style: italic; margin: 0 0 14px 0; } body.layout-home .principal-creds { font-size: 0.96rem; color: var(--muted); line-height: 1.65; margin: 0 0 14px 0; } body.layout-home .principal-approach { font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 18px 0; max-width: 720px; } body.layout-home .principal-link { font-size: 1rem; color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } body.layout-home .principal-link:hover { color: var(--red); } /* ========================================================================== layout-prose — principal.html, contact.html, privacy.html, terms.html ========================================================================== */ body.layout-prose .hero { margin-top: 45px; max-width: 1100px; } body.layout-prose .hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.05rem); font-weight: normal; line-height: 1.3; margin-bottom: 18px; max-width: 1400px; } body.layout-prose .hero p { font-size: 1.32rem; color: var(--muted); max-width: 920px; margin-bottom: 26px; line-height: 1.75; } /* ========================================================================== layout-regintel — regintel.html ========================================================================== */ body.layout-regintel .container { max-width: 1200px; /* regintel's original wider container (content-box) */ } body.layout-regintel .hero { margin-top: 25px; max-width: 1100px; } body.layout-regintel .hero h1 { font-size: clamp(1.3rem, 4vw, 1.55rem); font-weight: normal; line-height: 1.2; margin-bottom: 8px; max-width: 1400px; } body.layout-regintel .hero p { font-size: 1rem; color: var(--muted); max-width: 1075px; margin-bottom: 10px; line-height: 1.45; } .regintel-intro { max-width: 850px; margin-bottom: 36px; line-height: 1.8; } .regintel-review-date { font-size: 0.85rem; color: #777; margin-top: 8px; font-style: italic; } /* Jump-nav: hidden on desktop, revealed below 768px (see breakpoint) */ .regintel-jump { display: none; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .regintel-jump a { margin-left: 0; font-size: 0.9rem; font-weight: 700; color: var(--brand-blue); text-decoration: none; } .regintel-jump a:hover { color: var(--red); text-decoration: underline; } .regintel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; margin-top: 8px; align-items: start; } .regintel-column h2 { font-size: 1.25rem; font-weight: 700; color: var(--brand-blue); border-bottom: 1px solid #d5d1c8; padding-bottom: 8px; margin-bottom: 20px; min-height: 3.2em; } .regintel-column a { font-size: 0.92rem; display: block; color: var(--brand-blue); text-decoration: none; line-height: 1.45; margin-bottom: 12px; } .regintel-column a:hover { color: var(--red); text-decoration: underline; } .regintel-table a { color: var(--brand-blue); text-decoration: none; line-height: 1.5; } .regintel-table a:hover { color: var(--red); text-decoration: underline; } .regintel-note { margin-top: 40px; border-top: 1px solid #d5d1c8; padding-top: 18px; color: #666; font-size: 0.92rem; } .regintel-subheading { font-size: 0.90rem; font-weight: 700; color: #3f556f; margin-top: 22px; margin-bottom: 8px; letter-spacing: 0.06em; text-transform: uppercase; border-top: 1px solid #d9d5cf; padding-top: 10px; } .regintel-column h2 + .regintel-subheading { border-top: none; padding-top: 0; margin-top: 0; } .regintel-subheading-small { margin-top: 1rem; margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #2f4f6f; } .regintel-divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.10); margin: 18px 0 22px 0; } /* ========================================================================== layout-methodology — methodology.html ========================================================================== */ .kicker { font-size: 12px; font-variant: small-caps; letter-spacing: 0.18em; color: var(--ink-faint); font-weight: 500; margin-bottom: 14px; } .methodology-page { max-width: 820px; margin: 56px auto 0; } .methodology-page h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 18px; line-height: 1.1; } .methodology-page .subtitle { font-size: 22px; color: var(--muted); margin: 0 0 40px; line-height: 1.4; max-width: 680px; } .methodology-page h2 { font-size: clamp(20px, 2.8vw, 25px); font-weight: 500; margin: 64px 0 16px; letter-spacing: 0.003em; line-height: 1.25; color: var(--ink); } .methodology-page p { margin: 0 0 18px; font-size: 19px; color: var(--ink); line-height: 1.55; max-width: none; } .methodology-page p.lede { font-size: 22px; font-style: italic; color: var(--muted); margin: 40px 0 24px; line-height: 1.4; } .methodology-page em { font-style: italic; } .methodology-page strong { font-weight: 500; } .exhibit { margin: 0 -28px; padding: 40px 36px 36px; background: var(--cream-light); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .exhibit-label { text-align: center; font-size: 12px; font-variant: small-caps; letter-spacing: 0.18em; color: var(--ink-faint); margin-bottom: 32px; font-weight: 500; } .exhibit-label .sep { margin: 0 8px; color: var(--red); } .exhibit-hero { background: var(--cream-dark); padding: 24px 28px; text-align: center; margin: 0 auto 24px; max-width: 440px; border-left: 3px solid var(--red); } .exhibit-hero .title { font-size: 22px; font-weight: 500; margin-bottom: 4px; letter-spacing: 0.003em; } .exhibit-hero .subtitle-row { font-size: 17px; color: var(--muted); font-style: italic; } .exhibit-connector { width: 1px; height: 22px; background: var(--rule); margin: 0 auto; } .exhibit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; } .exhibit-card { background: var(--cream); padding: 20px 18px 18px; border: 0.5px solid var(--rule-soft); min-height: 110px; transition: border-color 0.15s ease, background 0.15s ease; } .exhibit-card:hover { border-color: var(--red); background: var(--cream-light); } .exhibit-card .num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--red); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 8px; } .exhibit-card .name { font-size: 18px; font-weight: 500; margin-bottom: 4px; line-height: 1.25; } .exhibit-card .desc { font-size: 15px; color: var(--muted); font-style: italic; line-height: 1.35; } .acronym-letter { color: var(--red); font-weight: 500; } .pillars { list-style: none; padding: 0; margin: 24px 0 18px; columns: 2; column-gap: 36px; } .pillars li { break-inside: avoid; padding: 11px 0; border-bottom: 0.5px solid var(--rule-soft); font-size: 17px; line-height: 1.35; display: flex; gap: 14px; align-items: baseline; } .pillars .num { color: var(--red); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 14px; flex-shrink: 0; min-width: 18px; } .mdp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 28px 0 22px; } .mdp-tier { padding: 4px 0 4px 18px; border-left: 2px solid var(--red); } .mdp-tier .mdp-label { font-size: 13px; font-weight: 500; color: var(--red); letter-spacing: 0.06em; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .mdp-tier .mdp-title { font-size: 17px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; } .mdp-tier .mdp-desc { font-size: 15px; color: var(--muted); line-height: 1.45; } .methodology-cta { margin: 80px -28px 0; padding: 56px 36px 60px; background: var(--cream-light); border-top: 1px solid var(--rule); text-align: center; } .methodology-cta-eyebrow { font-size: 12px; font-variant: small-caps; letter-spacing: 0.18em; color: var(--ink-faint); font-weight: 500; margin-bottom: 22px; } .methodology-cta-eyebrow .sep { margin: 0 8px; color: var(--red); } .methodology-cta-body { max-width: 580px !important; margin: 0 auto 28px !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--ink) !important; } .methodology-cta-email { display: inline-block; font-size: 21px; font-weight: 500; color: var(--red); text-decoration: none; padding: 13px 32px; border: 1px solid var(--red); letter-spacing: 0.005em; transition: background 0.15s ease, color 0.15s ease; } .methodology-cta-email:hover { background: var(--red); color: var(--cream); } /* ========================================================================== layout-services — services.html ========================================================================== */ #readiness, #implementation, #advisory { scroll-margin-top: 40px; } .services-page { max-width: 820px; margin: 56px auto 0; } .services-page h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 18px; line-height: 1.1; } .services-page .subtitle { font-size: 22px; color: var(--muted); margin: 0 0 24px; line-height: 1.4; max-width: 680px; } .services-page h2 { font-size: clamp(20px, 2.8vw, 25px); font-weight: 500; margin: 64px 0 16px; letter-spacing: 0.003em; line-height: 1.25; color: var(--ink); } .services-page p { margin: 0 0 18px; font-size: 19px; color: var(--ink); line-height: 1.55; max-width: none; } .services-page p.lede { font-size: 20px; font-style: italic; color: var(--muted); margin: 32px 0 24px; line-height: 1.45; max-width: 720px; } .services-page em { font-style: italic; } .services-page strong { font-weight: 500; } .services { margin: 56px -28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .service { padding: 40px 36px; border-bottom: 1px solid var(--rule-soft); position: relative; } .service:last-child { border-bottom: none; } .services .service-num { font-size: 12px; font-variant: small-caps; letter-spacing: 0.18em; color: var(--red); font-weight: 500; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .services .service-num .sep { margin: 0 8px; color: var(--ink-faint); } .service-anchor { display: inline-block; font-size: 12px; font-variant: small-caps; letter-spacing: 0.16em; color: var(--muted); font-style: italic; margin-bottom: 14px; padding-bottom: 4px; border-bottom: 0.5px solid var(--rule); } .services-page .service-title { font-size: 28px; font-weight: 500; margin: 0 0 6px; letter-spacing: 0.003em; line-height: 1.2; color: var(--ink); } .service-tagline { font-size: 18px; color: var(--muted); font-style: italic; margin-bottom: 22px; line-height: 1.4; } .service-body p { margin-bottom: 14px; } .service-meta { margin-top: 22px; padding-top: 18px; border-top: 0.5px solid var(--rule-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; } .service-meta .item-label { font-size: 11px; font-variant: small-caps; letter-spacing: 0.16em; color: var(--ink-faint); font-weight: 500; margin-bottom: 4px; } .service-meta .item-value { font-size: 16px; color: var(--ink); line-height: 1.4; } .principles { margin: 24px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; } .principle .principle-title { font-size: 18px; font-weight: 500; margin: 0 0 6px; color: var(--red); } .principle .principle-body { font-size: 17px; color: var(--ink); line-height: 1.5; } .services-cta { margin: 80px -28px 0; padding: 56px 36px 60px; background: var(--cream-light); border-top: 1px solid var(--rule); text-align: center; } .services-cta-eyebrow { font-size: 12px; font-variant: small-caps; letter-spacing: 0.18em; color: var(--ink-faint); font-weight: 500; margin-bottom: 22px; } .services-cta-eyebrow .sep { margin: 0 8px; color: var(--red); } .services-cta-body { max-width: 580px !important; margin: 0 auto 22px !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--ink) !important; } .services-cta-options { max-width: 540px; margin: 0 auto 30px; text-align: left; font-size: 17px; line-height: 1.55; color: var(--ink); padding-left: 22px; } .services-cta-options li { margin-bottom: 10px; padding-left: 4px; } .services-cta-options li::marker { color: var(--red); } .services-cta-email { display: inline-block; font-size: 21px; font-weight: 500; color: var(--red); text-decoration: none; padding: 13px 32px; border: 1px solid var(--red); letter-spacing: 0.005em; transition: background 0.15s ease, color 0.15s ease; } .services-cta-email:hover { background: var(--red); color: var(--cream); } /* ========================================================================== layout-aimsmart — aimsmart-practical-controls.html ========================================================================== */ .aimsmart-box { background: #f8f4ec; border-left: 5px solid #234472; padding: 18px 24px; margin: 24px 0 28px 0; line-height: 1.6; max-width: 650; } .aimsmart-box strong { color: #234472; font-size: 1.1rem; letter-spacing: 0.02em; display: block; margin-bottom: 8px; } .aimsmart-box span { font-size: 1.2rem; color: #444; letter-spacing: 0.01em; line-height: 1.5; } .article-title { font-size: clamp(1.3rem, 4vw, 1.55rem); line-height: 1.25; margin: 22px 0 18px 0; } /* ========================================================================== RESPONSIVE — breakpoints at 1024 / 768 / 640 (regintel) / 480 Desktop widths (> 1024px) are unaffected. ========================================================================== */ /* ---------- 1024px: regintel 4 columns -> 2 ---------- */ @media (max-width: 1024px) { body.layout-regintel .regintel-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- 768px: mobile nav + content stacking ---------- */ @media (max-width: 768px) { .container { padding: 40px 24px 64px; } /* Mobile navigation: collapse header nav behind the toggle button */ header { align-items: flex-start; } header nav { display: flex; flex-direction: column; align-items: flex-end; } header .nav-toggle { display: block; } header nav a { display: none; margin-left: 0; padding: 8px 2px; font-size: 1.1rem; } header nav.open a { display: block; } /* Home: stack the service cards and the principal bio */ body.layout-home .services-grid { grid-template-columns: 1fr; } body.layout-home .principal-block { grid-template-columns: 1fr; gap: 20px; } /* Methodology: stack the multi-column blocks */ body.layout-methodology .exhibit-grid, body.layout-methodology .mdp-tiers { grid-template-columns: 1fr; } body.layout-methodology .pillars { columns: 1; } body.layout-methodology .exhibit { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } body.layout-methodology .methodology-cta { margin-left: -24px; margin-right: -24px; } /* Services: stack the meta and principle grids */ body.layout-services .service-meta, body.layout-services .principles { grid-template-columns: 1fr; } body.layout-services .services { margin-left: -24px; margin-right: -24px; } body.layout-services .service { padding: 32px 24px; } body.layout-services .services-cta { margin-left: -24px; margin-right: -24px; } /* Regintel: reveal the jump-nav */ body.layout-regintel .regintel-jump { display: flex; } } /* ---------- 640px: regintel 2 columns -> 1 ---------- */ @media (max-width: 640px) { body.layout-regintel .regintel-grid { grid-template-columns: 1fr; } } /* ---------- 480px: full-width hero buttons ---------- */ @media (max-width: 480px) { body.layout-home .cta-row { flex-direction: column; } body.layout-home .cta-row .cta-primary, body.layout-home .cta-row .cta-secondary { width: 100%; text-align: center; } }